EarlyBlue/global/in-content/common.css

   1 /* This Source Code Form is subject to the terms of the Mozilla Public
   2  * License, v. 2.0. If a copy of the MPL was not distributed with this
   3  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
   4
   5 /* === BEGIN common.inc.css === */
   6
   7 @namespace html "http://www.w3.org/1999/xhtml";
   8 @namespace xul "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
   9
  10 html|body,
  11 xul|page {
  12   font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
  13   -moz-appearance: none;
  14   background-color: #CCD0DD;
  15   color: #000000;
  16 }
  17
  18 html|body {
  19   font-size: 15px;
  20   font-weight: normal;
  21   margin: 0;
  22 }
  23
  24 html|h1 {
  25   font-size: 2.5em;
  26   font-weight: lighter;
  27   line-height: 1.2;
  28   margin: 0;
  29   margin-bottom: .5em;
  30 }
  31
  32 xul|caption {
  33 }
  34
  35 xul|caption > xul|label {
  36   margin-top: 0;
  37   margin-bottom: 0;
  38 }
  39
  40 xul|description {
  41   -moz-margin-start: 0;
  42 }
  43
  44 *|*.main-content {
  45   padding-top: 40px;
  46   -moz-padding-end: 48px; /* orig is 44px to compensate the 4px margin of child elements */
  47   padding-bottom: 48px;
  48   -moz-padding-start: 48px;
  49   overflow: auto;
  50 }
  51
  52 xul|prefpane > xul|*.content-box {
  53   overflow: visible;
  54 }
  55
  56 /* groupboxes */
  57 /*
  58 xul|groupbox {
  59   -moz-appearance: none;
  60   border: none;
  61   margin-top: 15px;
  62   margin-bottom: 15px;
  63   -moz-margin-end: 0;
  64   -moz-padding-start: 0;
  65   -moz-padding-end: 0;
  66   font-size: 1.25rem;
  67 }
  68
  69 xul|groupbox xul|label {
  70   / !important needed to override toolkit !important rule /
  71   -moz-margin-start: 0 !important;
  72   -moz-margin-end: 0 !important;
  73 }
  74 */
  75 /* tabpanels and tabs */
  76 /*
  77 xul|tabpanels {
  78   -moz-appearance: none;
  79   font-size: 1.25rem;
  80   line-height: 22px;
  81   border: none;
  82   padding: 0;
  83   background-color: transparent;
  84   color: inherit;
  85 }
  86
  87 xul|tabs {
  88   margin-bottom: 15px;
  89   border-top: 1px solid #c1c1c1;
  90   border-bottom: 1px solid #c1c1c1;
  91   background-color: #fbfbfb;
  92 }
  93
  94 xul|*.tabs-left,
  95 xul|*.tabs-right {
  96   border-bottom: none;
  97 }
  98
  99 xul|tab {
 100   -moz-appearance: none;
 101   margin-top: 0;
 102   padding: 4px 20px;
 103   min-height: 44px;
 104   color: #424f5a;
 105   background-color: #fbfbfb;
 106   border-width: 0;
 107   transition: background-color 50ms ease 0s;
 108 }
 109
 110 xul|tab:hover {
 111   background-color: #ebebeb;
 112 }
 113
 114 xul|tab[selected] {
 115   background-color: #ebebeb;
 116   padding-bottom: 0; / compensate the 4px border /
 117   border-bottom: 4px solid #ff9500;
 118 }
 119
 120 xul|*.tab-text {
 121   font-size: 1.3rem;
 122   line-height: 22px;
 123 }
 124 */
 125 /* html buttons */
 126
 127 html|button {
 128   border-radius: 0px;
 129   border: 1px outset #CCD0DD;
 130   background-color: #CCD0DD;
 131   color: #000000;
 132   / * override forms.css * /
 133   font: inherit;
 134 }
 135
 136 /* xul buttons and menulists */
 137 /*
 138 *|button,
 139 xul|colorpicker[type="button"],
 140 xul|menulist {
 141   -moz-appearance: none;
 142   height: 30px;
 143   color: #333;
 144   line-height: 20px;
 145   border: 1px solid #c1c1c1;
 146   -moz-border-top-colors: none !important;
 147   -moz-border-right-colors: none !important;
 148   -moz-border-bottom-colors: none !important;
 149   -moz-border-left-colors: none !important;
 150   border-radius: 2px;
 151   background-color: #fbfbfb;
 152 }
 153 */
 154 html|button:enabled:hover,
 155 xul|button:not([disabled="true"]):hover,
 156 xul|colorpicker[type="button"]:not([disabled="true"]):hover,
 157 xul|menulist:not([disabled="true"]):hover {
 158 }
 159
 160 html|button:enabled:hover:active,
 161 xul|button:not([disabled="true"]):hover:active,
 162 xul|colorpicker[type="button"]:not([disabled="true"]):hover:active,
 163 xul|menulist[open="true"]:not([disabled="true"]) {
 164   border: 1px inset #CCD0DD;
 165 }
 166
 167 html|button:disabled,
 168 xul|button[disabled="true"],
 169 xul|colorpicker[type="button"][disabled="true"],
 170 xul|menulist[disabled="true"] {
 171   cursor: not-allowed;
 172   border: 1px outset #CCD0DD;
 173   color: #999999;
 174 }
 175 /*
 176 *|button.primary {
 177   background-color: #0095dd;
 178   border-color: transparent;
 179   color: #fff;
 180 }
 181
 182 html|button.primary:enabled:hover,
 183 xul|button.primary:not([disabled="true"]):hover {
 184   background-color: #008acb;
 185 }
 186
 187 html|button.primary:enabled:hover:active,
 188 xul|button.primary:not([disabled="true"]):hover:active {
 189   background-color: #006b9d;
 190 }
 191
 192 xul|colorpicker[type="button"] {
 193   padding: 6px;
 194   width: 50px;
 195 }
 196
 197 xul|button > xul|*.button-box,
 198 xul|menulist > xul|*.menulist-label-box {
 199   padding-right: 10px !important;
 200   padding-left: 10px !important;
 201 }
 202
 203 xul|menulist > xul|*.menulist-label-box > xul|*.menulist-icon {
 204   -moz-margin-end: 5px;
 205 }
 206
 207 xul|button[type="menu"] > xul|*.button-box > xul|*.button-menu-dropmarker {
 208   -moz-appearance: none;
 209   margin: 1px 0;
 210   -moz-margin-start: 10px;
 211   padding: 0;
 212   width: 10px;
 213   height: 16px;
 214   border: none;
 215   background-color: transparent;
 216   list-style-image: url("chrome://global/skin/in-content/dropdown.svg#dropdown");
 217 }
 218
 219 xul|*.help-button {
 220   min-width: 30px;
 221   border-radius: 2px;
 222   border-width: 0;
 223   background-color: #ffcb00;
 224   background-image: none;
 225   box-shadow: none;
 226   list-style-image: url("chrome://global/skin/in-content/help-glyph.svg");
 227 }
 228
 229 xul|*.help-button:not([disabled="true"]):hover {
 230   background-color: #f4c200;
 231   background-image: none;
 232 }
 233
 234 xul|*.help-button:not([disabled="true"]):hover:active {
 235   background-color: #eaba00;
 236   background-image: none;
 237 }
 238
 239 xul|*.close-icon > xul|*.button-box,
 240 xul|*.help-button > xul|*.button-box {
 241   padding-top: 0;
 242   padding-bottom: 0;
 243   padding-right: 0 !important;
 244   padding-left: 0 !important;
 245 }
 246
 247 xul|*.help-button > xul|*.button-box > xul|*.button-icon {
 248   width: 18px;
 249   height: 18px;
 250 }
 251
 252 xul|*.help-button > xul|*.button-box > xul|*.button-text {
 253   display: none;
 254 }
 255
 256 xul|*.spinbuttons-button {
 257   -moz-margin-start: 10px !important;
 258   -moz-margin-end: 2px !important;
 259 }
 260
 261 xul|*.spinbuttons-up {
 262   margin-top: 2px !important;
 263   border-radius: 1px 1px 0 0;
 264 }
 265
 266 xul|*.spinbuttons-down  {
 267   margin-bottom: 2px !important;
 268   border-radius: 0 0 1px 1px;
 269 }
 270
 271 xul|*.spinbuttons-button > xul|*.button-box {
 272   padding: 1px 5px 2px !important;
 273 }
 274
 275 xul|*.spinbuttons-up > xul|*.button-box > xul|*.button-icon {
 276   list-style-image: url("chrome://global/skin/arrow/arrow-up.gif");
 277 }
 278
 279 xul|*.spinbuttons-up[disabled="true"] > xul|*.button-box > xul|*.button-icon {
 280   list-style-image: url("chrome://global/skin/arrow/arrow-up-dis.gif");
 281 }
 282
 283 xul|*.spinbuttons-down > xul|*.button-box > xul|*.button-icon {
 284   list-style-image: url("chrome://global/skin/arrow/arrow-dn.gif");
 285 }
 286
 287 xul|*.spinbuttons-down[disabled="true"] > xul|*.button-box > xul|*.button-icon {
 288   list-style-image: url("chrome://global/skin/arrow/arrow-dn-dis.gif");
 289 }
 290
 291 xul|menulist:not([editable="true"]) > xul|*.menulist-dropmarker {
 292   -moz-appearance: none;
 293   -moz-margin-end: 4px;
 294   padding: 0;
 295   border: none;
 296   background-color: transparent;
 297   list-style-image: url("chrome://global/skin/in-content/dropdown.svg#dropdown");
 298 }
 299
 300 xul|menulist:not([editable="true"]) > xul|*.menulist-dropmarker > xul|*.dropmarker-icon {
 301   width: 18px;
 302   height: 18px;
 303 }
 304
 305 xul|menulist[disabled="true"]:not([editable="true"]) > xul|*.menulist-dropmarker {
 306   list-style-image: url("chrome://global/skin/in-content/dropdown.svg#dropdown-disabled")
 307 }
 308
 309 xul|menulist > xul|menupopup,
 310 xul|button[type="menu"] > xul|menupopup {
 311   -moz-appearance: none;
 312   border: 1px solid #c1c1c1;
 313   border-radius: 2px;
 314   background-color: #fff;
 315 }
 316
 317 xul|menulist > xul|menupopup xul|menu,
 318 xul|menulist > xul|menupopup xul|menuitem,
 319 xul|button[type="menu"] > xul|menupopup xul|menu,
 320 xul|button[type="menu"] > xul|menupopup xul|menuitem {
 321   -moz-appearance: none;
 322   font-size: 1rem;
 323   color: #333;
 324   padding-top: 0.2em;
 325   padding-bottom: 0.2em;
 326   -moz-padding-start: 10px;
 327   -moz-padding-end: 30px;
 328 }
 329
 330 xul|menulist > xul|menupopup > xul|menu[_moz-menuactive="true"],
 331 xul|menulist > xul|menupopup > xul|menuitem[_moz-menuactive="true"],
 332 xul|button[type="menu"] > xul|menupopup > xul|menu[_moz-menuactive="true"],
 333 xul|button[type="menu"] > xul|menupopup > xul|menuitem[_moz-menuactive="true"] {
 334   color: #333;
 335   background-color: rgba(0,149,221,0.25);
 336 }
 337
 338 xul|menulist > xul|menupopup > xul|menu[selected="true"],
 339 xul|menulist > xul|menupopup > xul|menuitem[selected="true"],
 340 xul|button[type="menu"] > xul|menupopup > xul|menu[selected="true"],
 341 xul|button[type="menu"] > xul|menupopup > xul|menuitem[selected="true"] {
 342   color: #fff;
 343   background-color: #0095DD;
 344 }
 345
 346 xul|menulist > xul|menupopup xul|menuseparator,
 347 xul|button[type="menu"] > xul|menupopup xul|menuseparator {
 348   -moz-appearance: none;
 349   margin: 0;
 350   padding: 0;
 351   border-top: 1px solid #c1c1c1;
 352   border-bottom: none;
 353 }
 354 */
 355 /* textboxes */
 356 /*
 357 *|textbox {
 358   -moz-appearance: none;
 359   height: 30px;
 360   color: #333;
 361   line-height: 20px;
 362   text-shadow: 0 1px 1px #fefffe;
 363   padding-right: 10px;
 364   padding-left: 10px;
 365   border: 1px solid #c1c1c1;
 366   -moz-border-top-colors: none !important;
 367   -moz-border-right-colors: none !important;
 368   -moz-border-bottom-colors: none !important;
 369   -moz-border-left-colors: none !important;
 370   border-radius: 2px;
 371   background-color: #fff;
 372 }
 373
 374 html|textbox:focus,
 375 xul|textbox[focused] {
 376   border-color: #0095dd;
 377 }
 378
 379 html|textbox:disabled,
 380 xul|textbox[disabled="true"] {
 381   opacity: 0.5;
 382 }
 383 */
 384 /* Links */
 385 /*
 386 html|a,
 387 xul|*.text-link,
 388 xul|*.inline-link {
 389   line-height: 22px;
 390   color: #0095dd;
 391   text-decoration: none;
 392 }
 393
 394 html|a:hover,
 395 xul|*.text-link:hover,
 396 xul|*.inline-link:hover {
 397   color: #4cb1ff;
 398   text-decoration: none;
 399 }
 400
 401 html|a:hover:active,
 402 xul|*.text-link:hover:active,
 403 xul|*.inline-link:hover:active {
 404   color: #ff9500;
 405   text-decoration: none;
 406 }
 407 */
 408 /* Checkboxes and radio buttons */
 409 /*
 410 xul|checkbox {
 411   -moz-margin-start: 0;
 412 }
 413
 414 xul|*.checkbox-check {
 415   -moz-appearance: none;
 416   width: 23px;
 417   height: 23px;
 418   border-radius: 2px;
 419   border: 1px solid #c1c1c1;
 420   -moz-margin-end: 10px;
 421   background-color: #f1f1f1;
 422   / !important needed to override toolkit checked !important rule /
 423   background-image: linear-gradient(#fff, rgba(255,255,255,0.8)) !important;
 424   background-position: center center;
 425   background-repeat: no-repeat;
 426   box-shadow: 0 1px 1px 0 #fff, inset 0 2px 0 0 rgba(0,0,0,0.03);
 427 }
 428
 429 xul|checkbox:not([disabled="true"]):hover > xul|*.checkbox-check {
 430   border-color: #0095dd;
 431 }
 432
 433 xul|*.checkbox-check[checked] {
 434   background-image: url("chrome://global/skin/in-content/check.png"),
 435                     / * !important needed to override toolkit !important rule * /
 436                     linear-gradient(#fff, rgba(255,255,255,0.8)) !important;
 437 }
 438
 439 xul|checkbox[disabled="true"] > xul|*.checkbox-check {
 440   opacity: 0.5;
 441 }
 442
 443 xul|*.checkbox-label-box {
 444   -moz-margin-start: -1px; / * negative margin for the transparent border * /
 445   -moz-padding-start: 0;
 446 }
 447
 448 xul|richlistitem > xul|*.checkbox-check {
 449   margin: 3px 6px;
 450 }
 451
 452 xul|*.radio-check {
 453   -moz-appearance: none;
 454   width: 23px;
 455   height: 23px;
 456   border: 1px solid #c1c1c1;
 457   border-radius: 50%;
 458   -moz-margin-end: 10px;
 459   background-color: #f1f1f1;
 460   background-image: linear-gradient(#fff, rgba(255,255,255,0.80));
 461   box-shadow: 0 1px 1px 0 #fff, inset 0 2px 0 0 rgba(0,0,0,0.03);
 462 }
 463
 464 xul|radio:not([disabled="true"]):hover > xul|*.radio-check {
 465   border-color: #0095dd;
 466 }
 467
 468 xul|*.radio-check[selected] {
 469   list-style-image: url("chrome://global/skin/in-content/radio.svg#radio");
 470 }
 471
 472 xul|radio[disabled="true"] > xul|*.radio-check {
 473   opacity: 0.5;
 474 }
 475
 476 xul|*.radio-label-box {
 477   -moz-margin-start: -1px; / * negative margin for the transparent border *  /
 478   -moz-margin-end: 10px;
 479   -moz-padding-start: 0;
 480 }
 481 */
 482 /* Category List */
 483 /*
 484 xul|*#categories {
 485   -moz-appearance: none;
 486   background-color: #424f5a;
 487   padding-top: 39px;
 488   margin: 0;
 489   border-width: 0;
 490 }
 491
 492 xul|*.category {
 493   -moz-appearance: none;
 494   color: #c1c1c1;
 495   -moz-border-end-width: 0;
 496   -moz-padding-start: 15px;
 497   -moz-padding-end: 21px;
 498   min-height: 40px;
 499   transition: background-color 150ms;
 500 }
 501
 502 xul|*.category:hover {
 503   background-color: #5e6972;
 504 }
 505
 506 xul|*.category[selected] {
 507   background-color: #343f48;
 508   color: #f2f2f2;
 509   -moz-padding-start: 11px; / compensate the 4px border /
 510   -moz-border-start: solid 4px #ff9500;
 511 }
 512
 513 xul|*#categories[keyboard-navigation="true"]:-moz-focusring > xul|*.category[current] {
 514   border-top: 1px #ffffff dotted;
 515   border-bottom: 1px #ffffff dotted;
 516 }
 517
 518 *|*.category-name {
 519   line-height: 22px;
 520   font-size: 1.25rem;
 521   padding-bottom: 2px;
 522   -moz-padding-start: 9px;
 523   margin: 0;
 524 }
 525
 526 *|*.category-icon {
 527   width: 24px;
 528   height: 24px;
 529 }
 530 */
 531 /* header */
 532 /*
 533 *|*.header {
 534   -moz-margin-end: 4px; / add the 4px end-margin of other elements /
 535   border-bottom: 1px solid #c8c8c8;
 536   margin-bottom: 15px;
 537   padding-bottom: 15px;
 538 }
 539
 540 *|*.header-name {
 541   font-size: 2.5rem;
 542   font-weight: normal;
 543   line-height: 40px;
 544   margin: 0;
 545 }
 546 */
 547 /* File fields */
 548 /*
 549 xul|filefield {
 550   -moz-appearance: none;
 551   background-color: transparent;
 552   border: none;
 553   padding: 0;
 554 }
 555
 556 xul|*.fileFieldContentBox {
 557   background-color: transparent;
 558 }
 559
 560 xul|*.fileFieldIcon {
 561   -moz-margin-start: 10px;
 562   -moz-margin-end: 0;
 563 }
 564
 565 xul|*.fileFieldLabel {
 566   -moz-margin-start: -26px;
 567   -moz-padding-start: 36px;
 568 }
 569
 570 xul|textbox:-moz-locale-dir(rtl),
 571 xul|*.fileFieldLabel:-moz-locale-dir(rtl),
 572 xul|textbox + xul|button:-moz-locale-dir(ltr),
 573 xul|filefield + xul|button:-moz-locale-dir(ltr) {
 574   border-top-left-radius: 0;
 575   border-bottom-left-radius: 0;
 576 }
 577
 578 xul|textbox:-moz-locale-dir(ltr),
 579 xul|*.fileFieldLabel:-moz-locale-dir(ltr),
 580 xul|textbox + xul|button:-moz-locale-dir(rtl),
 581 xul|filefield + xul|button:-moz-locale-dir(rtl) {
 582   border-top-right-radius: 0;
 583   border-bottom-right-radius: 0;
 584 }
 585
 586 xul|textbox + xul|button,
 587 xul|filefield + xul|button {
 588   -moz-border-start: none;
 589 }
 590 */
 591 /* List boxes */
 592 /*
 593 xul|richlistbox,
 594 xul|listbox {
 595   -moz-appearance: none;
 596   -moz-margin-start: 0;
 597   background-color: #fff;
 598   border: 1px solid #c1c1c1;
 599   color: #333;
 600 }
 601
 602 xul|treechildren::-moz-tree-row,
 603 xul|listbox xul|listitem {
 604   padding: 0.3em;
 605   margin: 0;
 606   border: none;
 607   border-radius: 0;
 608   background-image: none;
 609 }
 610
 611 xul|treechildren::-moz-tree-row(hover),
 612 xul|listbox xul|listitem:hover {
 613   background-color: rgba(0,149,221,0.25);
 614 }
 615
 616 xul|treechildren::-moz-tree-row(selected),
 617 xul|listbox xul|listitem[selected="true"] {
 618   background-color: #0095dd;
 619   color: #fff;
 620 }
 621 */
 622 /* Trees */
 623 /*
 624 xul|tree {
 625   -moz-appearance: none;
 626   font-size: 1em;
 627   border: 1px solid #c1c1c1;
 628 }
 629
 630 xul|listheader,
 631 xul|treecols {
 632   -moz-appearance: none;
 633   border: none;
 634   border-bottom: 1px solid #c1c1c1;
 635   padding: 0;
 636 }
 637
 638 xul|treecol:not([hideheader="true"]),
 639 xul|treecolpicker {
 640   -moz-appearance: none;
 641   border: none;
 642   background-color: #ebebeb;
 643   color: #808080;
 644   padding: 5px 10px;
 645 }
 646
 647 xul|treecol:not([hideheader="true"]):hover,
 648 xul|treecolpicker:hover {
 649   background-color: #dadada;
 650   color: #333;
 651 }
 652
 653 xul|treecol:not([hideheader="true"]):not(:first-child),
 654 xul|treecolpicker {
 655   -moz-border-start-width: 1px;
 656   -moz-border-start-style: solid;
 657   border-image: linear-gradient(transparent 0%, transparent 20%, #c1c1c1 20%, #c1c1c1 80%, transparent 80%, transparent 100%) 1 1;
 658 }
 659
 660 xul|treecol:not([hideheader="true"]) > xul|*.treecol-sortdirection[sortDirection] {
 661   list-style-image: url("chrome://global/skin/in-content/sorter.png");
 662   width: 12px;
 663   height: 8px;
 664 }
 665
 666 xul|treecol:not([hideheader="true"]) > xul|*.treecol-sortdirection[sortDirection="descending"] {
 667   transform: scaleY(-1);
 668 }
 669
 670 @media (min-resolution: 2dppx) {
 671   xul|treecol:not([hideheader="true"]) > xul|*.treecol-sortdirection[sortDirection] {
 672     list-style-image: url("chrome://global/skin/in-content/sorter@2x.png");
 673   }
 674 }
 675
 676 / This is the only way to increase the height of a tree row unfortunately /
 677 xul|treechildren::-moz-tree-row {
 678   min-height: 2em;
 679 }
 680
 681 / Color needs to be set on tree cell in order to be applied /
 682 xul|treechildren::-moz-tree-cell-text {
 683   color: #333;
 684 }
 685
 686 xul|treechildren::-moz-tree-cell-text(selected) {
 687   color: #fff;
 688 }
 689 */
 690 /* === END common.inc.css === */
 691 /*
 692 xul|caption {
 693   background-color: transparent;
 694 }
 695
 696 xul|button,
 697 xul|colorpicker[type="button"],
 698 xul|menulist {
 699   margin: 2px 4px;
 700 }
 701
 702 xul|menulist:not([editable="true"]) > xul|*.menulist-dropmarker {
 703   margin-top: 1px;
 704   margin-bottom: 1px;
 705 }
 706
 707 xul|checkbox {
 708   -moz-padding-start: 0;
 709 }
 710
 711 xul|radio {
 712   -moz-binding: url("chrome://global/content/bindings/radio.xml#radio");
 713   -moz-margin-start: 0;
 714   -moz-padding-start: 0;
 715 }
 716
 717 xul|*.radio-icon,
 718 xul|*.checkbox-icon {
 719   -moz-margin-end: 0;
 720 }
 721
 722 html|a:-moz-focusring,
 723 xul|*.text-link:-moz-focusring,
 724 xul|*.inline-link:-moz-focusring {
 725   border: 1px dotted -moz-DialogText;
 726 }
 727 */