Unify default width of resizable UI elements (#1488837)

Aleksander Machniak

2014-06-30 a292e4f5244a709f239d997dbe0d58493cfb01da

 skins/larry/addressbook.css

@@ -1,13 +1,428 @@
/**
 * Roundcube webmail styles for the Address Book section
 *
 * Copyright (c) 2011, The Roundcube Dev Team
 * Copyright (c) 2012, The Roundcube Dev Team
 * Screendesign by FLINT / Büro für Gestaltung, bueroflint.com
 *
 * The contents are subject to the Creative Commons Attribution-ShareAlike
 * License. It is allowed to copy, distribute, transmit and to adapt the work
 * by keeping credits to the original autors in the README file.
 * See http://creativecommons.org/licenses/by-sa/3.0/ for details.
 *
 * $Id$
 */
 */

#addressview-left {
   position: absolute;
   top: 0;
   left: 0;
   width: 200px;
   bottom: 0;
   z-index: 2;
}

#addressview-right {
   position: absolute;
   top: 0;
   left: 212px;
   right: 0;
   bottom: 0;
   z-index: 3;
}

#addressbooktoolbar {
   position: absolute;
   top: -6px;
   left: 0;
   height: 40px;
   white-space: nowrap;
   z-index: 10;
}

#directorylistbox {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   bottom: 0;
}

#addresslist {
   position: absolute;
   top: 0;
   left: 0;
   width: 260px;
   bottom: 0;
}

#contacts-box {
   position: absolute;
   top: 0;
   left: 272px;
   right: 0;
   bottom: 0;
}

#addressview-left #quicksearchbar input {
   width: 156px;
}

#directorylist li a,
.treelist li.contactsearch a,
#contacts-table .contact td.name {
   background-image: url(images/listicons.png);
   background-position: -100px 0;
   background-repeat: no-repeat;
   overflow: hidden;
   text-overflow: ellipsis;
}

#directorylist li.addressbook a {
   background-position: 6px -766px;
}

#directorylist ul li.addressbook a {
   background-position: 32px -766px;
}

#directorylist ul ul li.addressbook a {
   background-position: 58px -766px;
}

#directorylist li.addressbook.selected > a {
   background-color: transparent;
   background-position: 6px -791px;
}

#directorylist ul li.addressbook.selected > a {
   background-position: 32px -791px;
}

#directorylist ul ul li.addressbook.selected > a {
   background-position: 58px -791px;
}

#directorylist li.contactgroup a {
   background-position: 6px -1555px;
}

#directorylist ul li.contactgroup a {
   background-position: 32px -1555px;
}

#directorylist ul ul li.contactgroup a {
   background-position: 58px -1555px;
}

#directorylist ul ul ul li.contactgroup a {
   background-position: 84px -1555px;
}

#directorylist li.contactgroup.selected a {
   background-position: 32px -1579px;
}

#directorylist ul ul li.contactgroup.selected a {
   background-position: 58px -1579px;
}

#directorylist ul ul ul li.contactgroup.selected a {
   background-position: 84px -1579px;
}

#directorylist li.contactgroup input {
   margin-left: 36px;
}

.treelist li.contactsearch a {
   background-position: 6px -1651px;
}

.treelist li.contactsearch.selected a {
   background-position: 6px -1675px;
}

.treelist li.contactsearch input {
   margin-left: 8px;
}

#directorylist li.addressbook div.collapsed,
#directorylist li.addressbook div.expanded {
   top: 15px;
}

#contacts-table .contact.readonly td {
   font-style: italic;
}

#contacts-table td.name {
   width: 95%;
}

#contacts-table td.action {
   width: 24px;
   padding: 4px;
}

#contacts-table td.action a {
   display: block;
   width: 16px;
   height: 14px;
   text-indent: -5000px;
   overflow: hidden;
   background: url(images/listicons.png) -2px -1180px no-repeat;
}

#contacts-table .contact td.name {
   background-position: 4px -1603px;
}

#contacts-table .contact.selected td.name {
   background-position: 4px -1627px;
   font-weight: bold;
}

#contacts-table .group td.name {
   background-position: 4px -1555px;
}

#contacts-table .group.selected td.name {
   background-position: 4px -1579px;
   font-weight: bold;
}

#contacts-table.focus .group.selected.focused td.name {
   background-position: 4px -1579px;
}

#addresslist .boxtitle {
   padding-right: 95px;
   overflow: hidden;
   text-overflow: ellipsis;
}

#addresslist .boxtitle a.poplink {
   color: #004458;
   font-size: 14px;
   line-height: 12px;
   text-decoration: none;
}

#contact-frame {
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0px;
   border: 0;
   border-radius: 4px;
}

#headerbuttons {
   position: absolute;
   top: 48px;
   right: 10px;
   width: auto;
   z-index: 10;
}

#sourcename {
   color: #999;
   font-size: 10px;
   margin: -5px 0 8px 2px;
}

#contactphoto {
   float: left;
   margin: 0 18px 20px 0;
   width: 112px;
   border: 0;
   padding: 0;
}

#contactpic {
   width: 112px;
   min-height: 112px;
   background: white;
}

#contactpic img {
   max-width: 112px;
   visibility: inherit;
}

#contactpic.droptarget {
   background-image: url(images/filedrop.png);
   background-position: center;
   background-repeat: no-repeat;
}

#contactpic.droptarget.hover {
   background-color: #d9ecf4;
   box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9);
   -moz-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9);
   -webkit-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9);
   -o-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9);
}

#contactpic.droptarget.active img {
   opacity: 0.15;
}

#contactpic.droptarget.hover img {
   opacity: 0.05;
}

#contactphoto .formlinks a[aria-disabled='true'] {
   visibility: hidden;
}

#contacthead {
   border: 0;
   margin: 0 16em 1em 0;
   padding: 0;
   line-height: 1.5em;
   font-size: 12px;
}

#contacthead > legend {
   display: none;
}

form #contacthead {
   margin-right: 0;
}

#contacthead .names span.namefield,
#contacthead .names input {
   font-size: 140%;
   font-weight: bold;
}

#contacthead .displayname span.namefield {
   font-size: 120%;
   font-weight: bold;
}

#contacthead span.nickname:before,
#contacthead span.nickname:after {
   content: '"';
}

#contacthead input {
   margin-right: 6px;
   margin-bottom: 0.2em;
}

#contacthead .names input,
#contacthead .addnames input {
   width: 180px;
}

#contacthead input.ff_prefix,
#contacthead input.ff_suffix {
   width: 90px;
}

.contactfieldgroup {
   border: 0;
   border-radius: 5px;
   background: #f7f7f7;
   background: -moz-linear-gradient(top, #f7f7f7 0%, #eee 100%);
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7f7f7), color-stop(100%,#eee));
   background: -o-linear-gradient(top, #f7f7f7 0%, #eee 100%);
   background: -ms-linear-gradient(top, #f7f7f7 0%, #eee 100%);
   background: linear-gradient(top, #f7f7f7 0%, #eee 100%);
   margin: 0 0 12px 0;
   padding: 8px;
}

.contactfieldgroup legend {
   display: block;
   margin: 0 -8px;
   width: 100%;
   font-weight: bold;
   text-shadow: 0px 1px 1px #fff;
   padding: 6px 8px 3px 8px;
   background: #f0f0f0;
   background: -moz-linear-gradient(top, #f0f0f0 0%, #d6d6d6 100%);
   background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f0f0f0), color-stop(100%,#d6d6d6));
   background: -o-linear-gradient(top, #f0f0f0 0%, #d6d6d6 100%);
   background: -ms-linear-gradient(top, #f0f0f0 0%, #d6d6d6 100%);
   background: linear-gradient(top, #f0f0f0 0%, #d6d6d6 100%);
   border-bottom: 1px solid #cfcfcf;
   border-radius: 5px 5px 0 0;
}

.contactfieldgroup .row {
   position: relative;
   margin: 0.2em 0;
}

.contactfieldgroup .contactfieldlabel {
   position: absolute;
   top: 0;
   left: 2px;
   width: 110px;
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
   color: #666;
}

.contactfieldgroup .contactfieldlabel select {
   width: 100%;
   color: #666;
}

.contactfieldgroup .contactfieldcontent {
   padding-left: 120px;
   min-height: 1em;
   line-height: 1.3em;
}

.contactfieldgroup .contactfield {
   line-height: 1.3em;
}

.contactcontrolleraddress .contactfieldcontent input {
   margin-bottom: 0.1em;
}

.contactfieldcontent.composite {
   padding-bottom: 8px;
}

.contactfieldcontent .contactfieldbutton {
   vertical-align: middle;
   margin-left: 0.5em;
}

.contactfield .ff_notes {
   width: 99%;
}

a.deletebutton {
   position: relative;
   left: 5px;
   top: -3px;
   display: inline-block;
   width: 24px;
   height: 18px;
   text-decoration: none;
   text-indent: -5000px;
   background: url(images/buttons.png) -7px -377px no-repeat;
}

#import-box {
   position: absolute;
   bottom: 0px;
   top: 34px;
   left: 0;
   right: 0;
   overflow: auto;
   padding: 10px;
}

#import-box p,
#import-box .propform {
  max-width: 50em;
}