You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
roundcubemail/skins/larry/addressbook.css

417 lines
7.7 KiB
CSS

/**
* Roundcube webmail styles for the Address Book section
*
* 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.
*/
#addressview-left {
position: absolute;
top: 0;
left: 0;
width: 220px;
bottom: 0;
z-index: 2;
}
#addressview-right {
position: absolute;
top: 0;
left: 232px;
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: 280px;
bottom: 0;
}
#contacts-box {
position: absolute;
top: 0;
left: 292px;
right: 0;
bottom: 0;
}
#addressview-left #quicksearchbar input {
width: 156px;
}
#directorylist li 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 li.addressbook.selected > a {
background-position: 6px -791px;
}
#directorylist li.addressbook ul.groups li {
width: 100%;
}
#directorylist li.contactgroup a {
background-position: 32px -1555px;
}
#directorylist li.contactgroup.selected a {
background-position: 32px -1579px;
}
#directorylist li.contactgroup input {
margin-left: 36px;
}
#directorylist li.contactsearch a {
background-position: 6px -1651px;
}
#directorylist li.contactsearch.selected a {
background-position: 6px -1675px;
}
#directorylist li.contactsearch input {
margin-left: 8px;
}
#directorylist li.addressbook div.collapsed,
#directorylist li.addressbook div.expanded {
top: 15px;
left: 20px;
}
#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;
}
/* This padding-left should be equal to the focused border-left + the focused padding-left */
#contacts-table thead tr td:first-child,
#contacts-table tbody tr td:first-child {
border-left: 0;
padding-left: 36px;
}
/* because of border-collapse, we make the left border twice what we want it to be - half will be hidden to the left */
#contacts-table tbody tr.focused > td:first-child {
border-left: 2px solid #b0ccd7;
padding-left: 34px;
}
#contacts-table tbody tr.selected.focused > td:first-child {
border-left-color: #9ec2d0;
}
#contacts-table .contact td.name {
background-position: 6px -1603px;
}
#contacts-table .contact.focused td.name {
background-position: 4px -1603px;
}
#contacts-table .contact.selected td.name,
#contacts-table .contact.unfocused td.name {
background-position: 6px -1627px;
font-weight: bold;
}
#contacts-table .contact.selected.focused td.name {
background-position: 4px -1627px;
}
#contacts-table .group td.name {
background-position: 6px -1555px;
}
#contacts-table .group.focused td.name {
background-position: 4px -1555px;
}
#contacts-table .group.selected td.name,
#contacts-table .group.unfocused td.name {
background-position: 6px -1579px;
font-weight: bold;
}
#contacts-table .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;
}
#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;
}
#contacthead {
border: 0;
margin: 0 16em 1em 0;
padding: 0;
line-height: 1.5em;
font-size: 12px;
}
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;
}