emels/static/admin/css/widgets.css

   1 /* SELECTOR (FILTER INTERFACE) */
   2
   3 .selector {
   4     width: 800px;
   5     float: left;
   6 }
   7
   8 .selector select {
   9     width: 380px;
  10     height: 17.2em;
  11 }
  12
  13 .selector-available, .selector-chosen {
  14     float: left;
  15     width: 380px;
  16     text-align: center;
  17     margin-bottom: 5px;
  18 }
  19
  20 .selector-chosen select {
  21     border-top: none;
  22 }
  23
  24 .selector-available h2, .selector-chosen h2 {
  25     border: 1px solid #ccc;
  26     border-radius: 4px 4px 0 0;
  27 }
  28
  29 .selector-chosen h2 {
  30     background: #79aec8;
  31     color: #fff;
  32 }
  33
  34 .selector .selector-available h2 {
  35     background: #f8f8f8;
  36     color: #666;
  37 }
  38
  39 .selector .selector-filter {
  40     background: white;
  41     border: 1px solid #ccc;
  42     border-width: 0 1px;
  43     padding: 8px;
  44     color: #999;
  45     font-size: 10px;
  46     margin: 0;
  47     text-align: left;
  48 }
  49
  50 .selector .selector-filter label,
  51 .inline-group .aligned .selector .selector-filter label {
  52     float: left;
  53     margin: 7px 0 0;
  54     width: 18px;
  55     height: 18px;
  56     padding: 0;
  57     overflow: hidden;
  58     line-height: 1;
  59 }
  60
  61 .selector .selector-available input {
  62     width: 320px;
  63     margin-left: 8px;
  64 }
  65
  66 .selector ul.selector-chooser {
  67     float: left;
  68     width: 22px;
  69     background-color: #eee;
  70     border-radius: 10px;
  71     margin: 10em 5px 0 5px;
  72     padding: 0;
  73 }
  74
  75 .selector-chooser li {
  76     margin: 0;
  77     padding: 3px;
  78     list-style-type: none;
  79 }
  80
  81 .selector select {
  82     padding: 0 10px;
  83     margin: 0 0 10px;
  84     border-radius: 0 0 4px 4px;
  85 }
  86
  87 .selector-add, .selector-remove {
  88     width: 16px;
  89     height: 16px;
  90     display: block;
  91     text-indent: -3000px;
  92     overflow: hidden;
  93     cursor: default;
  94     opacity: 0.3;
  95 }
  96
  97 .active.selector-add, .active.selector-remove {
  98     opacity: 1;
  99 }
 100
 101 .active.selector-add:hover, .active.selector-remove:hover {
 102     cursor: pointer;
 103 }
 104
 105 .selector-add {
 106     background: url(../img/selector-icons.svg) 0 -96px no-repeat;
 107 }
 108
 109 .active.selector-add:focus, .active.selector-add:hover {
 110     background-position: 0 -112px;
 111 }
 112
 113 .selector-remove {
 114     background: url(../img/selector-icons.svg) 0 -64px no-repeat;
 115 }
 116
 117 .active.selector-remove:focus, .active.selector-remove:hover {
 118     background-position: 0 -80px;
 119 }
 120
 121 a.selector-chooseall, a.selector-clearall {
 122     display: inline-block;
 123     height: 16px;
 124     text-align: left;
 125     margin: 1px auto 3px;
 126     overflow: hidden;
 127     font-weight: bold;
 128     line-height: 16px;
 129     color: #666;
 130     text-decoration: none;
 131     opacity: 0.3;
 132 }
 133
 134 a.active.selector-chooseall:focus, a.active.selector-clearall:focus,
 135 a.active.selector-chooseall:hover, a.active.selector-clearall:hover {
 136     color: #447e9b;
 137 }
 138
 139 a.active.selector-chooseall, a.active.selector-clearall {
 140     opacity: 1;
 141 }
 142
 143 a.active.selector-chooseall:hover, a.active.selector-clearall:hover {
 144     cursor: pointer;
 145 }
 146
 147 a.selector-chooseall {
 148     padding: 0 18px 0 0;
 149     background: url(../img/selector-icons.svg) right -160px no-repeat;
 150     cursor: default;
 151 }
 152
 153 a.active.selector-chooseall:focus, a.active.selector-chooseall:hover {
 154     background-position: 100% -176px;
 155 }
 156
 157 a.selector-clearall {
 158     padding: 0 0 0 18px;
 159     background: url(../img/selector-icons.svg) 0 -128px no-repeat;
 160     cursor: default;
 161 }
 162
 163 a.active.selector-clearall:focus, a.active.selector-clearall:hover {
 164     background-position: 0 -144px;
 165 }
 166
 167 /* STACKED SELECTORS */
 168
 169 .stacked {
 170     float: left;
 171     width: 490px;
 172 }
 173
 174 .stacked select {
 175     width: 480px;
 176     height: 10.1em;
 177 }
 178
 179 .stacked .selector-available, .stacked .selector-chosen {
 180     width: 480px;
 181 }
 182
 183 .stacked .selector-available {
 184     margin-bottom: 0;
 185 }
 186
 187 .stacked .selector-available input {
 188     width: 422px;
 189 }
 190
 191 .stacked ul.selector-chooser {
 192     height: 22px;
 193     width: 50px;
 194     margin: 0 0 10px 40%;
 195     background-color: #eee;
 196     border-radius: 10px;
 197 }
 198
 199 .stacked .selector-chooser li {
 200     float: left;
 201     padding: 3px 3px 3px 5px;
 202 }
 203
 204 .stacked .selector-chooseall, .stacked .selector-clearall {
 205     display: none;
 206 }
 207
 208 .stacked .selector-add {
 209     background: url(../img/selector-icons.svg) 0 -32px no-repeat;
 210     cursor: default;
 211 }
 212
 213 .stacked .active.selector-add {
 214     background-position: 0 -48px;
 215     cursor: pointer;
 216 }
 217
 218 .stacked .selector-remove {
 219     background: url(../img/selector-icons.svg) 0 0 no-repeat;
 220     cursor: default;
 221 }
 222
 223 .stacked .active.selector-remove {
 224     background-position: 0 -16px;
 225     cursor: pointer;
 226 }
 227
 228 .selector .help-icon {
 229     background: url(../img/icon-unknown.svg) 0 0 no-repeat;
 230     display: inline-block;
 231     vertical-align: middle;
 232     margin: -2px 0 0 2px;
 233     width: 13px;
 234     height: 13px;
 235 }
 236
 237 .selector .selector-chosen .help-icon {
 238     background: url(../img/icon-unknown-alt.svg) 0 0 no-repeat;
 239 }
 240
 241 .selector .search-label-icon {
 242     background: url(../img/search.svg) 0 0 no-repeat;
 243     display: inline-block;
 244     height: 18px;
 245     width: 18px;
 246 }
 247
 248 /* DATE AND TIME */
 249
 250 p.datetime {
 251     line-height: 20px;
 252     margin: 0;
 253     padding: 0;
 254     color: #666;
 255     font-weight: bold;
 256 }
 257
 258 .datetime span {
 259     white-space: nowrap;
 260     font-weight: normal;
 261     font-size: 11px;
 262     color: #ccc;
 263 }
 264
 265 .datetime input, .form-row .datetime input.vDateField, .form-row .datetime input.vTimeField {
 266     min-width: 0;
 267     margin-left: 5px;
 268     margin-bottom: 4px;
 269 }
 270
 271 table p.datetime {
 272     font-size: 11px;
 273     margin-left: 0;
 274     padding-left: 0;
 275 }
 276
 277 .datetimeshortcuts .clock-icon, .datetimeshortcuts .date-icon {
 278     position: relative;
 279     display: inline-block;
 280     vertical-align: middle;
 281     height: 16px;
 282     width: 16px;
 283     overflow: hidden;
 284 }
 285
 286 .datetimeshortcuts .clock-icon {
 287     background: url(../img/icon-clock.svg) 0 0 no-repeat;
 288 }
 289
 290 .datetimeshortcuts a:focus .clock-icon,
 291 .datetimeshortcuts a:hover .clock-icon {
 292     background-position: 0 -16px;
 293 }
 294
 295 .datetimeshortcuts .date-icon {
 296     background: url(../img/icon-calendar.svg) 0 0 no-repeat;
 297     top: -1px;
 298 }
 299
 300 .datetimeshortcuts a:focus .date-icon,
 301 .datetimeshortcuts a:hover .date-icon {
 302     background-position: 0 -16px;
 303 }
 304
 305 .timezonewarning {
 306     font-size: 11px;
 307     color: #999;
 308 }
 309
 310 /* URL */
 311
 312 p.url {
 313     line-height: 20px;
 314     margin: 0;
 315     padding: 0;
 316     color: #666;
 317     font-size: 11px;
 318     font-weight: bold;
 319 }
 320
 321 .url a {
 322     font-weight: normal;
 323 }
 324
 325 /* FILE UPLOADS */
 326
 327 p.file-upload {
 328     line-height: 20px;
 329     margin: 0;
 330     padding: 0;
 331     color: #666;
 332     font-size: 11px;
 333     font-weight: bold;
 334 }
 335
 336 .aligned p.file-upload {
 337     margin-left: 170px;
 338 }
 339
 340 .file-upload a {
 341     font-weight: normal;
 342 }
 343
 344 .file-upload .deletelink {
 345     margin-left: 5px;
 346 }
 347
 348 span.clearable-file-input label {
 349     color: #333;
 350     font-size: 11px;
 351     display: inline;
 352     float: none;
 353 }
 354
 355 /* CALENDARS & CLOCKS */
 356
 357 .calendarbox, .clockbox {
 358     margin: 5px auto;
 359     font-size: 12px;
 360     width: 19em;
 361     text-align: center;
 362     background: white;
 363     border: 1px solid #ddd;
 364     border-radius: 4px;
 365     box-shadow: 0 2px 4px rgba(0, 0, 0, 0.15);
 366     overflow: hidden;
 367     position: relative;
 368 }
 369
 370 .clockbox {
 371     width: auto;
 372 }
 373
 374 .calendar {
 375     margin: 0;
 376     padding: 0;
 377 }
 378
 379 .calendar table {
 380     margin: 0;
 381     padding: 0;
 382     border-collapse: collapse;
 383     background: white;
 384     width: 100%;
 385 }
 386
 387 .calendar caption, .calendarbox h2 {
 388     margin: 0;
 389     text-align: center;
 390     border-top: none;
 391     background: #f5dd5d;
 392     font-weight: 700;
 393     font-size: 12px;
 394     color: #333;
 395 }
 396
 397 .calendar th {
 398     padding: 8px 5px;
 399     background: #f8f8f8;
 400     border-bottom: 1px solid #ddd;
 401     font-weight: 400;
 402     font-size: 12px;
 403     text-align: center;
 404     color: #666;
 405 }
 406
 407 .calendar td {
 408     font-weight: 400;
 409     font-size: 12px;
 410     text-align: center;
 411     padding: 0;
 412     border-top: 1px solid #eee;
 413     border-bottom: none;
 414 }
 415
 416 .calendar td.selected a {
 417     background: #79aec8;
 418     color: #fff;
 419 }
 420
 421 .calendar td.nonday {
 422     background: #f8f8f8;
 423 }
 424
 425 .calendar td.today a {
 426     font-weight: 700;
 427 }
 428
 429 .calendar td a, .timelist a {
 430     display: block;
 431     font-weight: 400;
 432     padding: 6px;
 433     text-decoration: none;
 434     color: #444;
 435 }
 436
 437 .calendar td a:focus, .timelist a:focus,
 438 .calendar td a:hover, .timelist a:hover {
 439     background: #79aec8;
 440     color: white;
 441 }
 442
 443 .calendar td a:active, .timelist a:active {
 444     background: #417690;
 445     color: white;
 446 }
 447
 448 .calendarnav {
 449     font-size: 10px;
 450     text-align: center;
 451     color: #ccc;
 452     margin: 0;
 453     padding: 1px 3px;
 454 }
 455
 456 .calendarnav a:link, #calendarnav a:visited,
 457 #calendarnav a:focus, #calendarnav a:hover {
 458     color: #999;
 459 }
 460
 461 .calendar-shortcuts {
 462     background: white;
 463     font-size: 11px;
 464     line-height: 11px;
 465     border-top: 1px solid #eee;
 466     padding: 8px 0;
 467     color: #ccc;
 468 }
 469
 470 .calendarbox .calendarnav-previous, .calendarbox .calendarnav-next {
 471     display: block;
 472     position: absolute;
 473     top: 8px;
 474     width: 15px;
 475     height: 15px;
 476     text-indent: -9999px;
 477     padding: 0;
 478 }
 479
 480 .calendarnav-previous {
 481     left: 10px;
 482     background: url(../img/calendar-icons.svg) 0 0 no-repeat;
 483 }
 484
 485 .calendarbox .calendarnav-previous:focus,
 486 .calendarbox .calendarnav-previous:hover {
 487     background-position: 0 -15px;
 488 }
 489
 490 .calendarnav-next {
 491     right: 10px;
 492     background: url(../img/calendar-icons.svg) 0 -30px no-repeat;
 493 }
 494
 495 .calendarbox .calendarnav-next:focus,
 496 .calendarbox .calendarnav-next:hover {
 497     background-position: 0 -45px;
 498 }
 499
 500 .calendar-cancel {
 501     margin: 0;
 502     padding: 4px 0;
 503     font-size: 12px;
 504     background: #eee;
 505     border-top: 1px solid #ddd;
 506     color: #333;
 507 }
 508
 509 .calendar-cancel:focus, .calendar-cancel:hover {
 510     background: #ddd;
 511 }
 512
 513 .calendar-cancel a {
 514     color: black;
 515     display: block;
 516 }
 517
 518 ul.timelist, .timelist li {
 519     list-style-type: none;
 520     margin: 0;
 521     padding: 0;
 522 }
 523
 524 .timelist a {
 525     padding: 2px;
 526 }
 527
 528 /* EDIT INLINE */
 529
 530 .inline-deletelink {
 531     float: right;
 532     text-indent: -9999px;
 533     background: url(../img/inline-delete.svg) 0 0 no-repeat;
 534     width: 16px;
 535     height: 16px;
 536     border: 0px none;
 537 }
 538
 539 .inline-deletelink:focus, .inline-deletelink:hover {
 540     cursor: pointer;
 541 }
 542
 543 /* RELATED WIDGET WRAPPER */
 544 .related-widget-wrapper {
 545     float: left;       /* display properly in form rows with multiple fields */
 546     overflow: hidden;  /* clear floated contents */
 547 }
 548
 549 .related-widget-wrapper-link {
 550     opacity: 0.3;
 551 }
 552
 553 .related-widget-wrapper-link:link {
 554     opacity: .8;
 555 }
 556
 557 .related-widget-wrapper-link:link:focus,
 558 .related-widget-wrapper-link:link:hover {
 559     opacity: 1;
 560 }
 561
 562 select + .related-widget-wrapper-link,
 563 .related-widget-wrapper-link + .related-widget-wrapper-link {
 564     margin-left: 7px;
 565 }