mirror of
https://github.com/owncloudarchive/contacts.git
synced 2025-01-19 08:52:22 +01:00
c5eaded517
Issue reported including the fix in https://github.com/owncloud/contacts/issues/823 by @eckelmi. In OC 8.0 it's not possible to get to the text input fields for "First name", "Additional names" and "Last name" because the pen symbol is missing next to the full name. This fix adresses this problem and solves it with the additional css definition.
888 lines
24 KiB
CSS
888 lines
24 KiB
CSS
#content-wrapper { overflow: hidden; } /* Avoid double scroll bars */
|
|
|
|
/* General element settings */
|
|
#content h2 {
|
|
font-weight: bold;
|
|
clear: both;
|
|
}
|
|
#content li { cursor: default; }
|
|
#contactsHeader input[type=checkbox] {
|
|
position: absolute;
|
|
top: 18px;
|
|
left: 18px;
|
|
}
|
|
#content input[type=radio] {
|
|
width: 12px; height: 12px;
|
|
-moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;
|
|
}
|
|
|
|
#contact ::-moz-placeholder, #contact input:-moz-placeholder, #contact input[placeholder], #contact input:placeholder, #contact input:-ms-input-placeholder, #contact input::-webkit-input-placeholder, #contact input:-moz-placeholder {
|
|
color: #bbb;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
#contact input:not([type=checkbox]), #contact select:not(.button), #contact textarea {
|
|
float: left;
|
|
}
|
|
#contact .label {
|
|
float: right !important;
|
|
}
|
|
#contact .parameter {
|
|
float: right !important;
|
|
}
|
|
#contact input[type="button"]:hover, #contact select:hover, #contact select:focus, #contact select:active, #contact input[type="button"]:focus, #contact .button:hover, button:hover { background-color:#fff; color:#333; }
|
|
|
|
#contact fieldset, #contact div, #contact span, #contact section {
|
|
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
|
|
}
|
|
#contact fieldset.editor {
|
|
padding: 0;
|
|
margin-left: 110px;
|
|
}
|
|
#contact fieldset.adr {
|
|
margin-left: 0;
|
|
}
|
|
#contact input:invalid, #contact input:hover:not([type=checkbox]), #contact input:active:not([type=checkbox]), #contact input:focus:not([type=checkbox]), #contact input.active, #contact textarea:focus, #contact textarea {
|
|
float: left;
|
|
}
|
|
|
|
/* Left content */
|
|
|
|
#shareWithList .cruds {
|
|
display: inline;
|
|
}
|
|
|
|
#shareWithList li {
|
|
border-bottom: 1px solid silver;
|
|
}
|
|
|
|
#app-navigation a.unshare {
|
|
float: right;
|
|
}
|
|
|
|
/*#app-navigation img.shared { float: right; opacity: 0.4; margin: 0 .5em; }
|
|
#app-navigation img.shared:hover { opacity: 1; }*/
|
|
#app-navigation input[type="text"] {
|
|
width: 180px;
|
|
}
|
|
|
|
#app-navigation .utils {
|
|
bottom: 0; right: 0;
|
|
top: 0;
|
|
position: absolute;
|
|
padding: 0; margin: 0;
|
|
}
|
|
#app-navigation .active {
|
|
font-weight: bold;
|
|
}
|
|
#app-navigation li > .utils > *:not(.numcontacts):not(.starred) {
|
|
display: none;
|
|
}
|
|
#app-navigation li > .utils > * {
|
|
line-height: 44px;
|
|
width: 44px; height: 44px;
|
|
background-size: auto;
|
|
float: left;
|
|
}
|
|
#app-navigation li.active[data-type="category"] > .utils > * {
|
|
display: inline-block;
|
|
float: left;
|
|
background-color: rgba(0,0,0,0);
|
|
}
|
|
#app-navigation li > .utils > .numcontacts {
|
|
padding-right: 5px;
|
|
text-align: right;
|
|
}
|
|
#grouplist .oc-addnew-init {
|
|
padding: 0 31px;
|
|
}
|
|
#grouplist .add-contact:before {
|
|
position: absolute;
|
|
content: '+';
|
|
font-weight: bold;
|
|
font-size: 150%;
|
|
left: 12px;
|
|
}
|
|
#grouplist .add-contact {
|
|
padding: 0 31px;
|
|
}
|
|
#grouplist > li {
|
|
height: 44px;
|
|
}
|
|
|
|
.hidden-on-load {
|
|
display: none;
|
|
}
|
|
|
|
/* First run */
|
|
|
|
#firstrun {
|
|
height: 100%;
|
|
}
|
|
#firstrun > div {
|
|
position:relative;
|
|
left:50%; top:40%;
|
|
width: 80%;
|
|
transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%);
|
|
color:white; font-weight:bold; text-align: center; color: #777;
|
|
}
|
|
#firstrun li { font-size:1.5em; text-align: center; margin-bottom: 1em; }
|
|
#firstrun p { font-size:1.2em; text-align:center; }
|
|
#firstrun #selections { font-size:0.8em; margin: 2em auto auto auto; clear: both; }
|
|
|
|
#contact textarea {
|
|
margin-left: 110px;
|
|
min-height: 5em;
|
|
min-width: 300px;
|
|
font-family: inherit;
|
|
}
|
|
#contact header {
|
|
margin-top: 8px;
|
|
}
|
|
#contact footer {
|
|
float: left;
|
|
width: 100%;
|
|
margin-bottom: 8px;
|
|
padding-left: 110px;
|
|
}
|
|
#contact footer .action {
|
|
height: 30px;
|
|
}
|
|
#contact footer .add {
|
|
width: 300px;
|
|
}
|
|
#contact footer .cancel, #contact footer .close, #contact footer .export, #contact header .delete {
|
|
float: right;
|
|
background-image: none;
|
|
}
|
|
#contact footer a, #contact header a {
|
|
float: right;
|
|
opacity: .5;
|
|
font-weight: bold;
|
|
}
|
|
#contact footer a {
|
|
padding: 8px 17px 8px 0;
|
|
}
|
|
#contact header a {
|
|
padding: 8px 17px 0 0;
|
|
}
|
|
#contact footer a:hover, #contact header a:hover {
|
|
opacity: 1;
|
|
}
|
|
#contact footer .close img, #contact footer .export img, #contact header .delete img, #contact footer .cancel img {
|
|
vertical-align: middle;
|
|
margin-bottom: 2px;
|
|
margin-bottom: 2px;
|
|
}
|
|
#contact footer > *, #contact header > * {
|
|
display: inline-block;
|
|
float: left;
|
|
opacity: 1;
|
|
}
|
|
|
|
#contact input[type=checkbox] { margin-top: 11px; margin-right: 4px; vertical-align: bottom; float: left; }
|
|
/*dl.form { display: block; width: auto; margin: 0; padding: 0; cursor: normal; }*/
|
|
.form dt { display: inline-block; clear: left; float: left; width: 7em; margin: 0; padding: 0.8em 0.5em 0 0; text-align:right; text-overflow:ellipsis; o-text-overflow: ellipsis; vertical-align: text-bottom; color: #bbb;/* white-space: pre-wrap; white-space: -moz-pre-wrap !important; white-space: -pre-wrap; white-space: -o-pre-wrap;*/ }
|
|
.form dd { display: inline-block; clear: right; float: left; margin: 0; padding: 0; white-space: nowrap; vertical-align: text-bottom; }
|
|
|
|
/* override the default margin on share dropdown */
|
|
#dropdown {
|
|
margin: 0; padding: 0;
|
|
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
|
|
width: 100%;
|
|
}
|
|
#shareWithList {
|
|
width: 100%;
|
|
}
|
|
#shareWithList .cruds > label {
|
|
display: list-item;
|
|
}
|
|
/* reset box-sizing for multiSelect */
|
|
#content div.multiselect, #content div.multiselect > * { -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; }
|
|
|
|
/* Reset values for jquery.multiselect */
|
|
.ui-multiselect-checkboxes {
|
|
overflow-y: auto;
|
|
height: auto !important;
|
|
max-height: 200px;
|
|
}
|
|
.ui-multiselect-checkboxes label {
|
|
width: 100%; color: #333 !important; font-size: 100% !important;
|
|
-webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;
|
|
}
|
|
.ui-multiselect-checkboxes label > span {color: #333 !important; font-size: 100% !important; }
|
|
.ui-multiselect-checkboxes input[type=checkbox] { margin: 3px !important; }
|
|
button.ui-multiselect { width: 300px !important; padding: 6px 0 0 6px; height: 30px; font-weight: normal; } /* No idea why this is needed? */
|
|
span.ui-icon { margin: 1px 3px 10px 0px; }
|
|
|
|
/* Use jquery-ui.datepickers own styling */
|
|
.ui-datepicker-title > select {
|
|
background-color: inherit;
|
|
color: inherit;
|
|
border: none;
|
|
}
|
|
|
|
#content .multiselectoptions > li > * {
|
|
-webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box;
|
|
color: #888888;
|
|
display: block;
|
|
margin: 0; padding: .2em;
|
|
}
|
|
|
|
[class^="icon-"], [class*=" icon-"], .action, .icon {
|
|
cursor: pointer;
|
|
background-repeat: no-repeat;
|
|
}
|
|
.action:not(.text) {
|
|
padding: 0;
|
|
margin: 0;
|
|
}
|
|
|
|
.action:not(.add):not(.sort).text, .icon:not(.add):not(.sort).text, [class^="icon-"]:not(.add):not(.sort).text, [class*=" icon-"]:not(.add):not(.sort).text {
|
|
background-position: left;
|
|
text-indent: 18px;
|
|
}
|
|
|
|
.svg .action.text, .svg .icon.text, .svg .svg.text {
|
|
background-size: 16px 16px;
|
|
background-origin: content-box;
|
|
background-repeat: no-repeat;
|
|
width: auto; height: auto;
|
|
}
|
|
|
|
.transparent{ opacity: 0.6; }
|
|
.float { float: left; display: inline-block; width: auto; }
|
|
.float.right { float: right; }
|
|
.break { clear: both; }
|
|
.control {
|
|
border: 1px solid #DDDDDD;
|
|
border-radius: 0.3em;
|
|
color: #555;
|
|
cursor: pointer;
|
|
font-weight: bold;
|
|
font-size: 1em;
|
|
width: auto;
|
|
}
|
|
.control > * { background: none repeat scroll 0 0 #F8F8F8; color: #555 !important; font-size: 100%; margin: 0px; }
|
|
|
|
.dim {
|
|
opacity: .50;filter:Alpha(Opacity=50);
|
|
z-index: 0;
|
|
}
|
|
|
|
.ui-draggable { height: 3em; z-index: 1; }
|
|
.ui-dialog { z-index: 102; }
|
|
.dragContact {
|
|
cursor: move;
|
|
background-repeat: no-repeat !important;
|
|
background-position: .3em .3em !important;
|
|
background-color: #fff;
|
|
width: 200px; height: 30px;
|
|
text-indent: 30px;
|
|
font-weight: bold;
|
|
border: thin solid silver; border-radius: 3px;
|
|
padding: 3px;
|
|
z-index: 1000;
|
|
transition: background-image 500ms ease 0s;
|
|
}
|
|
.ui-state-hover { border: 1px solid dashed; z-index: 1; }
|
|
|
|
/* Properties */
|
|
.propertyname {
|
|
width: 110px;
|
|
padding-right: 7px;
|
|
margin-top: 1px;
|
|
font-weight: bold;
|
|
text-align: right;
|
|
}
|
|
.singleproperties { float: left; width: 100%; }
|
|
.singleproperties .fullname { float: none !important; width: 300px; font-size: 20px; }
|
|
.singleproperties .icon-rename { position:absolute; }
|
|
.singleproperties input { width: 300px; }
|
|
.singleproperties dd { float:left; }
|
|
.singleproperties dd .listactions a { margin-top: 10px; }
|
|
.singleproperties .n.editor { width: 270px; padding: 3px; }
|
|
.singleproperties .n.editor input { width: 292px; margin-left: 12px; }
|
|
.singleproperties .propertycontainer input.value.new { border: 3px solid #1d2d44;}
|
|
.singleproperties .propertycontainer input.value.error { border: 3px solid red;}
|
|
.singleproperties .propertycontainer .action {
|
|
opacity: 0;
|
|
}
|
|
.singleproperties .groupscontainer { float:left; display: inline; }
|
|
.singleproperties .propertycontainer:hover .action { opacity: 1; }
|
|
.singleproperties dl { width: 280px;}
|
|
.singleproperties > a { margin-top: 10px !important; }
|
|
|
|
.parameters {
|
|
width: 110px;
|
|
float: left;
|
|
text-align: right;
|
|
box-sizing: border-box;
|
|
display: inline-block;
|
|
}
|
|
.parameters select {
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
appearance: none;
|
|
padding: 0;
|
|
border: none;
|
|
background-color: white;
|
|
}
|
|
.parameters input[type=text] {
|
|
padding-left: 0;
|
|
}
|
|
|
|
div.email li .parameters .label, div.url li .parameters .label { margin-top: 7px !important; }
|
|
div.tel li .parameters .label { margin-top: 6px !important; margin-bottom: 4px; }
|
|
div.url li .parameters .label, div.impp li .parameters .label { margin-top: 6px !important; }
|
|
div.tel li input, div.url li input { margin-left: 3px; font-size: 1em; }
|
|
div.impp li .select_wrapper select { margin-top: 6px; }
|
|
|
|
ul.propertylist { width: 100%; line-height: 34px; }
|
|
.propertylist li.propertycontainer { white-space: nowrap; min-width: 38em; display: block; clear: both; }
|
|
.propertylist li.propertycontainer > .listactions {
|
|
display: inline-block;
|
|
clear: none; opacity: 0;
|
|
}
|
|
.propertylist li.propertycontainer:hover > .listactions { opacity: 1; }
|
|
.singleproperties .propertycontainer .listactions a, .propertylist li.propertycontainer .listactions a {
|
|
display: inline-block;
|
|
clear: none;
|
|
width: 16px; height: 16px;
|
|
vertical-align: middle;
|
|
}
|
|
|
|
.propertylist { float: left; }
|
|
/*.propertylist li > a { display: block; }}*/
|
|
.propertylist li > input[type=checkbox],input[type="radio"] { display: inline-block; }
|
|
.propertylist input.value:not([type=checkbox]) { width: 300px; display: inline-block; }
|
|
.propertylist input.value:not([type=checkbox]).error { border: 2px solid red;}
|
|
.propertylist li > select { float: left; max-width: 8em; }
|
|
.select_wrapper { float: left; overflow: hidden; color: #bbb; font-size: 0.8em; }
|
|
.select_wrapper select { float: left; overflow: hidden; text-overflow: ellipsis; color: #bbb; width: 8em; }
|
|
|
|
.select_wrapper select option { color: #777; }
|
|
.select_wrapper select:hover,.propertylist li > select:focus,.propertylist li > select:active { color: #777; }
|
|
.select_wrapper select.rtl { margin-left: -24px; text-align: right; }
|
|
.select_wrapper select.ltr { margin-right: -23px; }
|
|
.propertylist li > input[type=checkbox].impp { clear: none; }
|
|
.propertylist li > label.xab { display: block; color: #bbb; float:left; clear: both; padding: 0.5em 0 0 2.5em; }
|
|
.propertylist li > label.xab:hover { color: #777; }
|
|
#contact label, #contact dt, #contact th, #contact .label {
|
|
float: left;
|
|
font-size: 100%; font-weight: bold;
|
|
color: #bbb !important;
|
|
border: 0;
|
|
display: inline-block;
|
|
box-sizing: border-box;
|
|
-moz-box-sizing: border-box;
|
|
}
|
|
#contact label:hover, #contact dt:hover, #contact input.label:hover { color: #777 !important; }
|
|
#contact input.label:hover, #contact input.label:active { border: 0 none !important; border-radius: 0; cursor: pointer; }
|
|
dt[data-element="nickname"], dt[data-element="bday"], dt[data-element="title"] { margin-top: 5px; }
|
|
dt[data-element="org"] { margin-top: 4px; }
|
|
|
|
.typelist[type="button"] { float: left; max-width: 8em; border: 0; background-color: #fff; color: #bbb; box-shadow: none; } /* for multiselect */
|
|
.typelist[type="button"]:hover { color: #777; } /* for multiselect */
|
|
.addresslist { clear: both; font-weight: bold; }
|
|
|
|
/* Overrule default jQuery multiselect style */
|
|
.ui-state-default, .ui-widget-content .ui-state-default, .ui-widget-header .ui-state-default {
|
|
background: 0;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
/* Help section */
|
|
|
|
#ninjahelp { position: relative; bottom: 0; left: 0; right: 0; padding: 1em; margin: 1em; opacity: 0.9; }
|
|
#ninjahelp .close { position: absolute; top: 5px; right: 5px; height: 20px; width: 20px; }
|
|
#ninjahelp h2, .help-section h3 { width: 100%; font-weight: bold; text-align: center; }
|
|
#ninjahelp h2 { font-size: 1.4em; }
|
|
.help-section { width: 45%; min-width: 35em; float: left; }
|
|
.help-section h3 { font-size: 1.2em; }
|
|
.help-section dl { width: 100%; float: left; clear: right; margin: 0; padding: 0; cursor: normal; }
|
|
.help-section dt { display: table-cell; clear: left; float: left; width: 35%; margin: 0; padding: 0.2em; text-align: right; text-overflow: ellipsis; vertical-align: text-bottom; font-weight: bold; }
|
|
.help-section dd { display: table-cell; clear: right; float: left; margin: 0; padding: 0.2em; white-space: nowrap; vertical-align: text-bottom; }
|
|
|
|
/* Settings */
|
|
|
|
.contacts-settings dl { width: 100%; }
|
|
.addressbooks-settings table { width: 100%; }
|
|
.addressbooks-settings .actions { width: 100%; white-space: nowrap; }
|
|
.addressbooks-settings .actions * { float: left; }
|
|
.addressbooks-settings .actions input.name { width: 5em; }
|
|
.addressbooks-settings .actions input.name { width: 7em; }
|
|
.addressbooks-settings a.action { opacity: 0.5; }
|
|
.addressbooks-settings a.action:hover { opacity: 1; }
|
|
.addressbooks-settings td.active, .addressbooks-settings td.action { width: 20px; }
|
|
|
|
.addressbooklist .actions {
|
|
position: absolute; right: 0px;
|
|
display: inline-flex;
|
|
}
|
|
.addressbooklist .actions > a { width: 20px; height: 20px; }
|
|
.addressbooklist > li > div {
|
|
display: inline-block;
|
|
clear: both;
|
|
}
|
|
|
|
#app-settings-content {
|
|
overflow-x: hidden;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
/* Single elements */
|
|
#file_upload_form { display:none; }
|
|
#import-dialog {
|
|
width: auto !important;
|
|
}
|
|
#contacts-import-upload-start {
|
|
cursor: pointer;
|
|
z-index: 1001;
|
|
}
|
|
.import-upload-button {
|
|
background-position: center center;
|
|
background-repeat: no-repeat;
|
|
border: none;
|
|
cursor: pointer;
|
|
z-index: 100;
|
|
}
|
|
|
|
.import-upload, .import-status {
|
|
height: 40px;
|
|
}
|
|
.import-upload select {
|
|
width: 80%; height: 30px;
|
|
margin: 5px;
|
|
}
|
|
.import-status {
|
|
display: none;
|
|
}
|
|
#import-status-text {
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
}
|
|
input:not([type=checkbox]).propertytype {
|
|
float: right;
|
|
font-size: .8em;
|
|
max-width: 80px;
|
|
text-align: right;
|
|
margin: 0;
|
|
padding-top: 8px;
|
|
}
|
|
input[type=checkbox].propertytype { width: 10px; }
|
|
.contactphoto {
|
|
border: 1px solid #bbb; border-radius: 3px;
|
|
-moz-box-shadow: 0 1px 2px #777; -webkit-box-shadow: 0 1px 2px #777; box-shadow: 0 1px 2px #777;
|
|
}
|
|
.contactphoto:hover { background: #fff; cursor: default; }
|
|
#photowrapper {
|
|
position: absolute;
|
|
float: left;
|
|
width: 180px; height: 180px;
|
|
margin-top: 10px;
|
|
margin-left: -145px;
|
|
}
|
|
|
|
#photowrapper .favorite {
|
|
display: inline-block;
|
|
float: right;
|
|
position: absolute;
|
|
right: -6px; top: -6px;
|
|
width: 25px; height: 25px;
|
|
}
|
|
#photowrapper.wait { opacity: 0.6; filter:alpha(opacity=0.6); z-index:1000; cursor: wait; }
|
|
#phototools {
|
|
position:absolute;
|
|
bottom: 10px;
|
|
margin: 0;
|
|
width:auto; height: auto;
|
|
background-color:#fff;
|
|
list-style-type:none; border-radius: 3px;
|
|
border: 1px solid #DDDDDD;
|
|
/*-moz-box-shadow: 0 1px 2px #777; -webkit-box-shadow: 0 1px 2px #777; box-shadow: 0 1px 2px #777;*/
|
|
}
|
|
#phototools li { display: inline-block; }
|
|
#phototools li a {
|
|
float:left;
|
|
opacity: 0.6;
|
|
width: 40px; height: 40px;
|
|
background-position: center;
|
|
background-size: 80%;
|
|
}
|
|
#phototools li a:hover { opacity: 0.8; }
|
|
#contactphoto_fileupload, #contacts-import-upload-start { -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter:alpha(opacity=0); opacity:0; z-index:1001; }
|
|
|
|
#dialog-merge-contacts .mergelist {
|
|
margin: 10px;
|
|
}
|
|
#dialog-merge-contacts .mergelist > li {
|
|
height: 30px;
|
|
-webkit-transition:background-image 500ms; -moz-transition:background-image 500ms; -o-transition:background-image 500ms; transition:background-image 500ms;
|
|
position:relative;
|
|
background-position: 0 .2em !important; background-repeat:no-repeat !important;
|
|
}
|
|
#dialog-merge-contacts .mergelist > li > input {
|
|
opacity: 0;
|
|
}
|
|
#dialog-merge-contacts .mergelist > li > input:hover, #dialog-merge-contacts .mergelist > li > input:checked {
|
|
opacity: 1;
|
|
}
|
|
#dialog-merge-contacts .mergelist > li > label {
|
|
padding-left: 20px;
|
|
font-weight: normal;
|
|
}
|
|
.no-svg .favorite { display: inline-block; float: left; height: 20px; width: 20px; }
|
|
|
|
.svg .favorite { display: inline-block; float: left; height: 20px; width: 20px; background-size:contain; }
|
|
|
|
/* Contact layout */
|
|
|
|
#contact > ul > li { white-space: nowrap; margin-right: 110px; }
|
|
#contact > ul.propertylist {
|
|
font-size: 10px;
|
|
/*display: table;
|
|
border-spacing: 1em;
|
|
border: thin solid black;*/
|
|
}
|
|
#contact > ul.propertylist > li {
|
|
display: inline-block;
|
|
padding: 1em;
|
|
/*display: table-cell;*/
|
|
}
|
|
|
|
.display .meta { text-align: right; margin-left: -30px; }
|
|
.display .adr {
|
|
padding-left: 5px;
|
|
padding-right: 5px;
|
|
cursor: pointer;
|
|
border: 1px solid rgb(221, 221, 221);
|
|
border-radius: 3px;
|
|
line-height: 28px;
|
|
}
|
|
.adr.editor {
|
|
width: 20em;
|
|
margin-left: 120px;
|
|
}
|
|
.adr.editor ul {
|
|
-moz-column-count: 1;
|
|
-webkit-columns: 1;
|
|
-o-columns: 1;
|
|
columns: 1;
|
|
}
|
|
fieldset.adr ul li input.label { margin-top: -4px !important; }
|
|
.adr.editor input.value.street, ul.adr.edit input.value.country, ul.adr.edit input.value.region { width: 19em;}
|
|
.adr.editor input.value.zip { width: 100px; }
|
|
.adr.editor input.value.city { width: 192px; margin:4px; }
|
|
|
|
/* contact list */
|
|
|
|
#contactsHeader {
|
|
height: 51px;
|
|
color: #999;
|
|
z-index: 2;
|
|
width: 100%;
|
|
line-height: 50px;
|
|
}
|
|
.multiselect #contactsHeader {
|
|
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
|
|
left: 0;
|
|
top: 44px;
|
|
margin-left: 250px;
|
|
padding-right: 250px;
|
|
position: fixed;
|
|
z-index: 10;
|
|
}
|
|
#contactsHeader > tr {
|
|
}
|
|
#contactsHeader > td {
|
|
z-index: 300;
|
|
border-bottom: 1px solid rgb(221, 221, 221);
|
|
}
|
|
#contactsHeader > td.name {
|
|
padding-right: 9px;
|
|
}
|
|
.multiselect #contactsHeader > td.name {
|
|
width: 100%;
|
|
display: inline-block;
|
|
color: #000;
|
|
background-color: rgba(220, 220, 220, 0.8);
|
|
opacity: 0.9;
|
|
}
|
|
#contactsHeader .delete {
|
|
background-image: none;
|
|
}
|
|
#contactsHeader .delete img {
|
|
vertical-align: middle;
|
|
margin-bottom: 2px;
|
|
}
|
|
#contactsHeader select {
|
|
width: auto;
|
|
max-width: 120px;
|
|
height: 22px;
|
|
font-weight: normal;
|
|
color: black;
|
|
border: 0;
|
|
background-color: rgba(255,255,255,0);
|
|
-webkit-appearance: none;
|
|
-moz-appearance: none;
|
|
text-indent: 0.01px;
|
|
text-overflow: '';
|
|
}
|
|
#contactsHeader select.sort {
|
|
margin-left: 50px;
|
|
opacity: 1;
|
|
color: rgb(153, 153, 153);
|
|
}
|
|
#contactsHeader .actions > * {
|
|
padding-left: 8px;
|
|
padding-right: 8px;
|
|
font-weight: bold;
|
|
float: right;
|
|
}
|
|
#contactsHeader .action.a {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
#contactsHeader .actions > .toggle {
|
|
float: left;
|
|
}
|
|
#contactsHeader .actions > select {
|
|
float: right;
|
|
width: auto;
|
|
height: 19px;
|
|
padding-left: 18px;
|
|
padding-right: 8px;
|
|
padding-top: 2px;
|
|
padding-bottom: 0px;
|
|
margin-top: 14px;
|
|
margin-bottom: 14px;
|
|
font-weight: bold;
|
|
background-position: -13px;
|
|
}
|
|
#contactsHeader .actions_left {
|
|
float: left;
|
|
}
|
|
#contactlist > tbody {
|
|
position: relative;
|
|
padding-bottom: 300px;
|
|
width: 100%;
|
|
z-index: 1;
|
|
}
|
|
#contactlist.multiselect {
|
|
top: 51px;
|
|
}
|
|
#contactlist {
|
|
position: relative;
|
|
width: 100%;
|
|
min-width: 502px;
|
|
}
|
|
#contactlist td {
|
|
-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
|
|
}
|
|
#contactlist .nametext {
|
|
margin-left: 55px;
|
|
}
|
|
#contactlist .avatar {
|
|
position: absolute;
|
|
margin-top: 10px;
|
|
height: 32px;
|
|
width: 32px;
|
|
margin-left: 10px;
|
|
}
|
|
/* Override default style for an open contact */
|
|
tbody tr, tbody tr.hover {
|
|
background-color: #fff !important;
|
|
}
|
|
tbody tr.contact.active, tbody tr.contact:hover {
|
|
background-color: #f8f8f8 !important;
|
|
}
|
|
#contactlist > tbody > tr { height: 51px; display: none; }
|
|
#contactlist > tbody > tr.contact.active, #contactlist > tbody > tr.contact:hover { background-color: #eee; }
|
|
#contactlist > tbody > tr > td {
|
|
border-bottom: 1px solid #DDDDDD;
|
|
font-weight: normal;
|
|
text-align: left;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
vertical-align: top;
|
|
white-space: nowrap;
|
|
}
|
|
#contactlist tbody > tr > td {
|
|
min-width: 80px;
|
|
max-width: 250px;
|
|
line-height: 50px;
|
|
}
|
|
#contactlist tbody > tr > td.name > input[type=checkbox]:first-child:not(.toggle) {
|
|
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter:alpha(opacity=0); opacity:0;
|
|
float:left;
|
|
margin: 32px 0 4px 32px;
|
|
position: absolute;
|
|
z-index: 1;
|
|
}
|
|
#contactlist tbody > tr > td.name > input[type=checkbox] + label, #select_all + label {
|
|
height: 50px;
|
|
position: absolute;
|
|
width: 50px;
|
|
z-index: 5;
|
|
}
|
|
#contactlist tbody > tr:hover > td.name > input[type=checkbox]:first-child {
|
|
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter:alpha(opacity=100); opacity:1;
|
|
}
|
|
#contactlist tbody > tr > td.name > input[type=checkbox]:checked:first-child {
|
|
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter:alpha(opacity=100); opacity:1;
|
|
}
|
|
#contactlist tbody > tr > td.name {
|
|
font-weight: bold;
|
|
background-repeat:no-repeat !important;
|
|
background-position: 10px center !important;
|
|
}
|
|
#contactlist tbody > tr > td a.mailto {
|
|
position: absolute; float: right; clear: none;
|
|
cursor:pointer;
|
|
width:16px; height:16px;
|
|
margin: 18px 0 2px 5px; z-index: 200;
|
|
display: none; opacity: 0.8;
|
|
}
|
|
|
|
#contactlist tbody > tr > td > a.delete {
|
|
position: absolute;
|
|
padding: 25px;
|
|
right: 0px;
|
|
cursor:pointer;
|
|
z-index: 200;
|
|
}
|
|
#contact {
|
|
padding-left: 155px;
|
|
background-color: white;
|
|
color: #333333;
|
|
line-height: normal;
|
|
}
|
|
#contact > ul {
|
|
min-height: 146px;
|
|
min-width: 530px;
|
|
max-width: 700px;
|
|
}
|
|
#contact h3 {
|
|
margin-left: 110px;
|
|
margin-top: 7px;
|
|
margin-bottom: 0px;
|
|
font-size: 12px;
|
|
line-height: 14px;
|
|
}
|
|
#contact .arrow {
|
|
border-bottom: 20px solid white;
|
|
border-left: 20px solid transparent;
|
|
border-right: 20px solid transparent;
|
|
display: block;
|
|
height: 0;
|
|
position: absolute;
|
|
left: -28px; top: 2em;
|
|
width: 0;
|
|
z-index: 201;
|
|
-webkit-transform: rotate(270deg); -moz-transform: rotate(270deg); -o-transform: rotate(270deg);
|
|
-ms-transform: rotate(270deg); transform: rotate(270deg);
|
|
}
|
|
|
|
#contact span.adr {
|
|
float: left;
|
|
width: 300px;
|
|
height: 30px;
|
|
margin: 3px;
|
|
margin-left: 0px;
|
|
overflow: hidden; text-overflow: ellipsis; text-align: bottom; white-space: nowrap;
|
|
}
|
|
#contact span.adr:hover { /*overflow: inherit;*/ /*white-space: pre-wrap;*/ }
|
|
|
|
#contact > ul.propertylist {
|
|
-webkit-transition: all 0.5s ease-in-out;
|
|
-moz-transition: all 0.5s ease-in-out;
|
|
-o-transition: all 0.5s ease-in-out;
|
|
-ms-transition: all 0.5s ease-out;
|
|
transition: all 0.5s ease-in-out;
|
|
}
|
|
|
|
#addressbooks-ui-div > p > select {
|
|
width:200px;
|
|
display: inline-block;
|
|
}
|
|
|
|
#addressbooks-ui-div > p > input:not([type="checkbox"]) {
|
|
width:200px;
|
|
display: inline-block;
|
|
}
|
|
|
|
#addressbooks-ui-div > p > textarea {
|
|
width:200px;
|
|
display: inline-block;
|
|
}
|
|
|
|
#addressbooks-ui-div > p > label {
|
|
vertical-align:top;
|
|
width:200px;
|
|
display: inline-block;
|
|
}
|
|
|
|
@media screen and (min-width: 1400px) {
|
|
#contact > ul.propertylist {
|
|
-moz-column-count: 3;
|
|
-webkit-columns: 3;
|
|
-o-columns: 3;
|
|
columns: 3;
|
|
}
|
|
}
|
|
@media screen and (min-width: 800px) and (max-width: 1400px) {
|
|
#singlevalues { max-width: 50%; }
|
|
#contact > ul.propertylist {
|
|
-moz-column-count: 2;
|
|
-webkit-columns: 2;
|
|
-o-columns: 2;
|
|
columns: 2;
|
|
}
|
|
}
|
|
@media screen and (max-width: 400px) {
|
|
#contact > ul.propertylist {
|
|
-moz-column-count: 1;
|
|
-webkit-columns: 1;
|
|
-o-columns: 1;
|
|
columns: 1;
|
|
}
|
|
}
|
|
|
|
#contacts-import-div > p > select {
|
|
width:200px;
|
|
display: inline-block;
|
|
}
|
|
|
|
#contacts-import-div > p > label {
|
|
vertical-align: baseline;
|
|
width:100px;
|
|
display: inline-block;
|
|
}
|
|
|
|
#file_upload_target {
|
|
display: none;
|
|
}
|
|
|
|
/* Hide some columns on smaller screens */
|
|
@media screen and (max-width: 1400px) {
|
|
#contactlist tr td.categories { display: none; }
|
|
#contactsHeader tr td.categories { display: none; }
|
|
}
|
|
@media screen and (max-width: 1200px) {
|
|
#contactlist tr td.adr { display: none; }
|
|
#contactsHeader tr td.adr { display: none; }
|
|
}
|
|
@media screen and (max-width: 1000px) {
|
|
#contactlist tr td.tel { display: none; }
|
|
#contactsHeader tr td.tel { display: none; }
|
|
}
|
|
@media screen and (max-width: 900px) {
|
|
#contactsHeader .delete { display: none; }
|
|
}
|
|
@media screen and (max-width: 800px) {
|
|
#contactlist tr td.email { display: none; }
|
|
#contactlist tr { width: 100%; }
|
|
#contactsHeader tr td.email { display: none; }
|
|
}
|