| commit | author | age | ||
| e7c445 | 1 | /** |
| T | 2 | * Roundcube webmail styles for the Address Book section |
| 3 | * | |
| 071c78 | 4 | * Copyright (c) 2012, The Roundcube Dev Team |
| e7c445 | 5 | * Screendesign by FLINT / Büro für Gestaltung, bueroflint.com |
| T | 6 | * |
| 7 | * The contents are subject to the Creative Commons Attribution-ShareAlike | |
| 8 | * License. It is allowed to copy, distribute, transmit and to adapt the work | |
| 9 | * by keeping credits to the original autors in the README file. | |
| 10 | * See http://creativecommons.org/licenses/by-sa/3.0/ for details. | |
| 11 | * | |
| 12 | * $Id$ | |
| bab043 | 13 | */ |
| T | 14 | |
| 15 | #addressview-left { | |
| 16 | position: absolute; | |
| 17 | top: 0; | |
| 18 | left: 0; | |
| 19 | width: 220px; | |
| 20 | bottom: 0; | |
| 688d16 | 21 | z-index: 2; |
| bab043 | 22 | } |
| T | 23 | |
| 24 | #addressview-right { | |
| 25 | position: absolute; | |
| 26 | top: 0; | |
| 27 | left: 232px; | |
| 28 | right: 0; | |
| 29 | bottom: 0; | |
| 688d16 | 30 | z-index: 3; |
| bab043 | 31 | } |
| T | 32 | |
| 33 | #addressbooktoolbar { | |
| 34 | position: absolute; | |
| 35 | top: -6px; | |
| 36 | left: 0; | |
| 37 | height: 40px; | |
| 38 | white-space: nowrap; | |
| 688d16 | 39 | z-index: 10; |
| 77fad1 | 40 | } |
| TB | 41 | |
| bab043 | 42 | #directorylistbox { |
| T | 43 | position: absolute; |
| 44 | top: 42px; | |
| 45 | left: 0; | |
| 46 | width: 100%; | |
| 47 | bottom: 0; | |
| 48 | } | |
| 49 | ||
| 50 | #addresslist { | |
| 51 | position: absolute; | |
| 52 | top: 42px; | |
| 53 | left: 0; | |
| 1ba07f | 54 | width: 280px; |
| bab043 | 55 | bottom: 0; |
| T | 56 | } |
| 57 | ||
| 58 | #contacts-box { | |
| 59 | position: absolute; | |
| 60 | top: 42px; | |
| 1ba07f | 61 | left: 292px; |
| bab043 | 62 | right: 0; |
| T | 63 | bottom: 0; |
| 64 | } | |
| 65 | ||
| 66 | #addressview-left #quicksearchbar input { | |
| 67 | width: 156px; | |
| 68 | } | |
| 69 | ||
| 70 | #directorylist li a, | |
| 71 | #contacts-table .contact td.name { | |
| 0f3ae4 | 72 | background-image: url(images/listicons.png); |
| TB | 73 | background-position: -100px 0; |
| 74 | background-repeat: no-repeat; | |
| bab043 | 75 | overflow: hidden; |
| T | 76 | padding-left: 36px; |
| 77 | text-overflow: ellipsis; | |
| 78 | } | |
| 79 | ||
| 4cf42f | 80 | #contacts-table .contact.readonly td { |
| T | 81 | font-style: italic; |
| 82 | } | |
| 83 | ||
| bab043 | 84 | #directorylist li.addressbook a { |
| T | 85 | background-position: 6px -766px; |
| 86 | } | |
| 87 | ||
| 88 | #directorylist li.addressbook.selected a { | |
| 89 | background-position: 6px -791px; | |
| 90 | } | |
| 91 | ||
| 92 | #directorylist li.contactgroup a { | |
| 93 | padding-left: 62px; | |
| 94 | background-position: 32px -1555px; | |
| 95 | } | |
| 96 | ||
| 97 | #directorylist li.contactgroup.selected a { | |
| 98 | background-position: 32px -1579px; | |
| 99 | } | |
| 100 | ||
| 68e13c | 101 | #directorylist li.contactgroup input { |
| T | 102 | margin-left: 36px; |
| 103 | } | |
| 104 | ||
| 105 | #directorylist li.contactsearch a { | |
| 106 | background-position: 6px -1651px; | |
| 107 | } | |
| 108 | ||
| 109 | #directorylist li.contactsearch.selected a { | |
| 110 | background-position: 6px -1675px; | |
| 111 | } | |
| 112 | ||
| 113 | #directorylist li.contactsearch input { | |
| 114 | margin-left: 8px; | |
| 115 | } | |
| 116 | ||
| bab043 | 117 | #contacts-table .contact td.name { |
| T | 118 | background-position: 6px -1603px; |
| 119 | } | |
| 120 | ||
| 121 | #contacts-table .contact.selected td.name, | |
| 122 | #contacts-table .contact.unfocused td.name { | |
| 123 | background-position: 6px -1627px; | |
| 124 | font-weight: bold; | |
| 125 | } | |
| 126 | ||
| 127 | #contact-frame { | |
| 128 | position: absolute; | |
| 129 | top: 0; | |
| 130 | left: 0; | |
| 131 | right: 0; | |
| 132 | bottom: 28px; | |
| 133 | border: 0; | |
| 669fdf | 134 | border-radius: 4px; |
| bab043 | 135 | } |
| T | 136 | |
| 137 | #headerbuttons { | |
| 138 | position: absolute; | |
| 139 | top: 48px; | |
| 140 | right: 10px; | |
| 141 | width: auto; | |
| 142 | z-index: 10; | |
| 143 | } | |
| 144 | ||
| 145 | #sourcename { | |
| 146 | color: #999; | |
| 147 | font-size: 10px; | |
| 148 | margin: -5px 0 8px 2px; | |
| 149 | } | |
| 150 | ||
| 151 | #contactphoto { | |
| 152 | float: left; | |
| 153 | margin: 0 18px 20px 0; | |
| 154 | width: 112px; | |
| 155 | } | |
| 156 | ||
| 157 | #contactpic { | |
| 158 | width: 112px; | |
| 159 | min-height: 112px; | |
| 160 | background: white; | |
| 161 | } | |
| 162 | ||
| 163 | #contactpic img { | |
| 164 | width: 112px; | |
| 0be8bd | 165 | visibility: inherit; |
| TB | 166 | } |
| 167 | ||
| 168 | #contactpic.droptarget { | |
| 169 | background-image: url(images/filedrop.png); | |
| 170 | background-position: center; | |
| 171 | background-repeat: no-repeat; | |
| 172 | } | |
| 173 | ||
| 174 | #contactpic.droptarget.hover { | |
| 175 | background-color: #d9ecf4; | |
| 176 | box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9); | |
| 177 | -moz-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9); | |
| 178 | -webkit-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9); | |
| 179 | -o-box-shadow: 0 0 5px 2px rgba(71,135,177, 0.9); | |
| 180 | } | |
| 181 | ||
| 182 | #contactpic.droptarget.active img { | |
| 183 | opacity: 0.15; | |
| 184 | } | |
| 185 | ||
| 186 | #contactpic.droptarget.hover img { | |
| 187 | opacity: 0.05; | |
| bab043 | 188 | } |
| T | 189 | |
| 190 | #contacthead { | |
| 191 | border: 0; | |
| 68e13c | 192 | margin: 0 16em 1em 0; |
| bab043 | 193 | padding: 0; |
| T | 194 | line-height: 1.5em; |
| 195 | font-size: 12px; | |
| 68e13c | 196 | } |
| T | 197 | |
| 198 | form #contacthead { | |
| 199 | margin-right: 0; | |
| bab043 | 200 | } |
| T | 201 | |
| 202 | #contacthead .names span.namefield, | |
| 203 | #contacthead .names input { | |
| 204 | font-size: 140%; | |
| 205 | font-weight: bold; | |
| 206 | } | |
| 207 | ||
| 208 | #contacthead .displayname span.namefield { | |
| 209 | font-size: 120%; | |
| 210 | font-weight: bold; | |
| 211 | } | |
| 212 | ||
| 213 | #contacthead span.nickname:before, | |
| e29515 | 214 | #contacthead span.nickname:after { |
| bab043 | 215 | content: '"'; |
| T | 216 | } |
| 217 | ||
| 218 | #contacthead input { | |
| 219 | margin-right: 6px; | |
| 220 | margin-bottom: 0.2em; | |
| 221 | } | |
| 222 | ||
| 223 | #contacthead .names input, | |
| 224 | #contacthead .addnames input { | |
| 225 | width: 180px; | |
| 226 | } | |
| 227 | ||
| 228 | #contacthead input.ff_prefix, | |
| 229 | #contacthead input.ff_suffix { | |
| 230 | width: 90px; | |
| 231 | } | |
| 232 | ||
| 68e13c | 233 | .contactfieldgroup { |
| T | 234 | border: 0; |
| 235 | border-radius: 5px; | |
| 236 | background: #f7f7f7; | |
| 237 | background: -moz-linear-gradient(top, #f7f7f7 0%, #eee 100%); | |
| 238 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7f7f7), color-stop(100%,#eee)); | |
| 239 | background: -o-linear-gradient(top, #f7f7f7 0%, #eee 100%); | |
| 240 | background: -ms-linear-gradient(top, #f7f7f7 0%, #eee 100%); | |
| 241 | background: linear-gradient(top, #f7f7f7 0%, #eee 100%); | |
| 242 | margin: 0 0 12px 0; | |
| 243 | padding: 8px; | |
| 244 | } | |
| 245 | ||
| 246 | .contactfieldgroup legend { | |
| 247 | display: block; | |
| 248 | margin: 0 -8px; | |
| 249 | width: 100%; | |
| 250 | font-weight: bold; | |
| 251 | text-shadow: 0px 1px 1px #fff; | |
| 252 | padding: 6px 8px 3px 8px; | |
| 253 | background: #f0f0f0; | |
| 254 | background: -moz-linear-gradient(top, #f0f0f0 0%, #d6d6d6 100%); | |
| 255 | background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f0f0f0), color-stop(100%,#d6d6d6)); | |
| 256 | background: -o-linear-gradient(top, #f0f0f0 0%, #d6d6d6 100%); | |
| 257 | background: -ms-linear-gradient(top, #f0f0f0 0%, #d6d6d6 100%); | |
| 258 | background: linear-gradient(top, #f0f0f0 0%, #d6d6d6 100%); | |
| 259 | border-bottom: 1px solid #cfcfcf; | |
| 260 | border-radius: 5px 5px 0 0; | |
| 261 | } | |
| 262 | ||
| 263 | .contactfieldgroup .row { | |
| 264 | position: relative; | |
| 265 | margin: 0.2em 0; | |
| 266 | } | |
| 267 | ||
| 268 | .contactfieldgroup .contactfieldlabel { | |
| 269 | position: absolute; | |
| 270 | top: 0; | |
| 271 | left: 2px; | |
| 272 | width: 110px; | |
| 273 | white-space: nowrap; | |
| 274 | overflow: hidden; | |
| 275 | text-overflow: ellipsis; | |
| 276 | color: #666; | |
| 277 | } | |
| 278 | ||
| 279 | .contactfieldgroup .contactfieldlabel select { | |
| 280 | width: 100%; | |
| 281 | color: #666; | |
| 282 | } | |
| 283 | ||
| 284 | .contactfieldgroup .contactfieldcontent { | |
| 285 | padding-left: 120px; | |
| 286 | min-height: 1em; | |
| 287 | line-height: 1.3em; | |
| 288 | } | |
| 289 | ||
| 290 | .contactfieldgroup .contactfield { | |
| 291 | line-height: 1.3em; | |
| 292 | } | |
| 293 | ||
| 294 | .contactcontrolleraddress .contactfieldcontent input { | |
| 295 | margin-bottom: 0.1em; | |
| 296 | } | |
| 297 | ||
| 298 | .contactfieldcontent.composite { | |
| 299 | padding-bottom: 8px; | |
| 300 | } | |
| 301 | ||
| 302 | .contactfieldcontent .contactfieldbutton { | |
| 303 | vertical-align: middle; | |
| 304 | margin-left: 0.5em; | |
| 305 | } | |
| 306 | ||
| 307 | .contactfield .ff_notes { | |
| 308 | width: 99%; | |
| 309 | } | |
| 310 | ||
| bab043 | 311 | a.deletebutton { |
| T | 312 | position: relative; |
| 313 | left: 5px; | |
| 314 | top: -3px; | |
| 315 | display: inline-block; | |
| 316 | width: 24px; | |
| 317 | height: 18px; | |
| 318 | text-decoration: none; | |
| 900e62 | 319 | text-indent: -5000px; |
| 68e13c | 320 | background: url(images/buttons.png) -7px -377px no-repeat; |
| bab043 | 321 | } |
