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 *|*.main-content {
  41   padding: 40px 48px 48px;
  42   overflow: auto;
  43 }
  44
  45 xul|prefpane > xul|*.content-box {
  46   overflow: visible;
  47 }
  48
  49 /* groupboxes */
  50 /*
  51 xul|groupbox {
  52   -moz-appearance: none;
  53   border: none;
  54   margin-top: 15px;
  55   margin-bottom: 15px;
  56   -moz-margin-end: 0;
  57   -moz-padding-start: 0;
  58   -moz-padding-end: 0;
  59   font-size: 1.25rem;
  60 }
  61
  62 xul|groupbox xul|label {
  63   / !important needed to override toolkit !important rule /
  64   -moz-margin-start: 0 !important;
  65   -moz-margin-end: 0 !important;
  66 }
  67 */
  68 /* tabpanels and tabs */
  69 /*
  70 xul|tabpanels {
  71   -moz-appearance: none;
  72   font-size: 1.25rem;
  73   line-height: 22px;
  74   border: none;
  75   padding: 0;
  76   background-color: transparent;
  77 }
  78
  79 xul|tabs {
  80   margin-bottom: 15px;
  81   border-top: 1px solid #c1c1c1;
  82   border-bottom: 1px solid #c1c1c1;
  83   background-color: #fbfbfb;
  84 }
  85
  86 xul|*.tabs-left,
  87 xul|*.tabs-right {
  88   border-bottom: none;
  89 }
  90
  91 xul|tab {
  92   -moz-appearance: none;
  93   margin-top: 0;
  94   padding: 0 20px;
  95   min-height: 44px;
  96   color: #424f5a;
  97   background-color: #fbfbfb;
  98   border-width: 0;
  99   transition: background-color 50ms ease 0s;
 100 }
 101
 102 xul|tab:hover {
 103   background-color: #ebebeb;
 104 }
 105
 106 xul|tab[selected] {
 107   background-color: #ebebeb;
 108   box-shadow: inset 0 -4px 0 0 #ff9500;
 109 }
 110
 111 xul|*.tab-text {
 112   font-size: 1.3rem;
 113   line-height: 22px;
 114 }
 115 */
 116 /* html buttons */
 117
 118 html|button {
 119   border-radius: 0px;
 120   border: 1px outset #CCD0DD;
 121   background-color: #CCD0DD;
 122   color: #000000;
 123   / * override forms.css * /
 124   font: inherit;
 125 }
 126
 127 /* xul buttons and menulists */
 128 /*
 129 *|button,
 130 xul|colorpicker[type="button"],
 131 xul|menulist {
 132   -moz-appearance: none;
 133   height: 30px;
 134   color: #333;
 135   line-height: 20px;
 136   text-shadow: 0 1px 1px #fefffe;
 137   border: 1px solid #c1c1c1;
 138   -moz-border-top-colors: none !important;
 139   -moz-border-right-colors: none !important;
 140   -moz-border-bottom-colors: none !important;
 141   -moz-border-left-colors: none !important;
 142   border-radius: 2px;
 143   background-color: #fbfbfb;
 144 }
 145 */
 146 html|button:enabled:hover,
 147 xul|button:not([disabled="true"]):hover,
 148 xul|colorpicker[type="button"]:not([disabled="true"]):hover,
 149 xul|menulist:not([disabled="true"]):hover {
 150 }
 151
 152 html|button:enabled:hover:active,
 153 xul|button:not([disabled="true"]):hover:active,
 154 xul|colorpicker[type="button"]:not([disabled="true"]):hover:active,
 155 xul|menulist[open="true"]:not([disabled="true"]) {
 156   border: 1px inset #CCD0DD;
 157 }
 158
 159 html|button:disabled,
 160 xul|button[disabled="true"],
 161 xul|colorpicker[type="button"][disabled="true"],
 162 xul|menulist[disabled="true"] {
 163   cursor: not-allowed;
 164   border: 1px outset #CCD0DD;
 165   color: #999999;
 166 }
 167 /*
 168 xul|colorpicker[type="button"] {
 169   padding: 6px;
 170   width: 50px;
 171 }
 172
 173 xul|button > xul|*.button-box,
 174 xul|menulist > xul|*.menulist-label-box {
 175   padding-right: 10px !important;
 176   padding-left: 10px !important;
 177 }
 178
 179 xul|menulist > xul|*.menulist-label-box > xul|*.menulist-icon {
 180   -moz-margin-end: 5px;
 181 }
 182
 183 xul|button[type="menu"] > xul|*.button-box > xul|*.button-menu-dropmarker {
 184   -moz-appearance: none;
 185   margin: 1px 0;
 186   -moz-margin-start: 10px;
 187   padding: 0;
 188   width: 10px;
 189   height: 16px;
 190   border: none;
 191   background-color: transparent;
 192   list-style-image: url("chrome://global/skin/in-content/dropdown.png");
 193 }
 194
 195 xul|*.help-button {
 196   min-width: 30px;
 197   border-radius: 2px;
 198   border: 1px solid #c1c1c1;
 199   background-color: #ffcb00;
 200   background-image: none;
 201   box-shadow: none;
 202 }
 203
 204 xul|*.help-button:not([disabled="true"]):hover {
 205   background-color: #f4c200;
 206   background-image: none;
 207 }
 208
 209 xul|*.help-button:not([disabled="true"]):hover:active {
 210   background-color: #eaba00;
 211   background-image: none;
 212 }
 213
 214 xul|*.close-icon > xul|*.button-box,
 215 xul|*.help-button > xul|*.button-box {
 216   padding-top: 0;
 217   padding-bottom: 0;
 218   padding-right: 0 !important;
 219   padding-left: 0 !important;
 220 }
 221
 222 xul|*.help-button > xul|*.button-box > xul|*.button-icon {
 223   width: 26px;
 224   height: 26px;
 225   background-image: url("chrome://global/skin/in-content/help-glyph.png");
 226   background-position: center;
 227 }
 228
 229 @media (min-resolution: 2dppx) {
 230   xul|*.help-button > xul|*.button-box > xul|*.button-icon {
 231     background-size: 26px 26px;
 232     background-image: url("chrome://global/skin/in-content/help-glyph@2x.png");
 233   }
 234 }
 235
 236 xul|*.help-button > xul|*.button-box > xul|*.button-text {
 237   display: none;
 238 }
 239
 240 xul|*.spinbuttons-button {
 241   -moz-margin-start: 10px !important;
 242   -moz-margin-end: 2px !important;
 243 }
 244
 245 xul|*.spinbuttons-up {
 246   margin-top: 2px !important;
 247   border-radius: 1px 1px 0 0;
 248 }
 249
 250 xul|*.spinbuttons-down  {
 251   margin-bottom: 2px !important;
 252   border-radius: 0 0 1px 1px;
 253 }
 254
 255 xul|*.spinbuttons-button > xul|*.button-box {
 256   padding: 1px 5px 2px !important;
 257 }
 258
 259 xul|*.spinbuttons-up > xul|*.button-box > xul|*.button-icon {
 260   list-style-image: url("chrome://global/skin/arrow/arrow-up.gif");
 261 }
 262
 263 xul|*.spinbuttons-up[disabled="true"] > xul|*.button-box > xul|*.button-icon {
 264   list-style-image: url("chrome://global/skin/arrow/arrow-up-dis.gif");
 265 }
 266
 267 xul|*.spinbuttons-down > xul|*.button-box > xul|*.button-icon {
 268   list-style-image: url("chrome://global/skin/arrow/arrow-dn.gif");
 269 }
 270
 271 xul|*.spinbuttons-down[disabled="true"] > xul|*.button-box > xul|*.button-icon {
 272   list-style-image: url("chrome://global/skin/arrow/arrow-dn-dis.gif");
 273 }
 274
 275 xul|menulist:not([editable="true"]) > xul|*.menulist-dropmarker {
 276   -moz-appearance: none;
 277   -moz-margin-end: 10px;
 278   padding: 0;
 279   border: none;
 280   background-color: transparent;
 281   list-style-image: url("chrome://global/skin/in-content/dropdown.png");
 282 }
 283
 284 xul|menulist[disabled="true"]:not([editable="true"]) > xul|*.menulist-dropmarker {
 285   list-style-image: url("chrome://global/skin/in-content/dropdown-disabled.png")
 286 }
 287
 288 @media (min-resolution: 2dppx) {
 289   xul|menulist:not([editable="true"]) > xul|*.menulist-dropmarker,
 290   xul|button[type="menu"] > xul|*.button-box > xul|*.button-menu-dropmarker {
 291     list-style-image: url("chrome://global/skin/in-content/dropdown@2x.png");
 292   }
 293
 294   xul|menulist[disabled="true"]:not([editable="true"]) > xul|*.menulist-dropmarker {
 295     list-style-image: url("chrome://global/skin/in-content/dropdown-disabled@2x.png")
 296   }
 297
 298   xul|menulist:not([editable="true"]) > xul|*.menulist-dropmarker > xul|*.dropmarker-icon,
 299   xul|button[type="menu"] > xul|*.button-box > xul|*.button-menu-dropmarker > xul|*.dropmarker-icon {
 300     width: 10px;
 301     height: 16px;
 302   }
 303 }
 304
 305 xul|menulist > xul|menupopup,
 306 xul|button[type="menu"] > xul|menupopup {
 307   -moz-appearance: none;
 308   border: 1px solid rgba(23,50,77,0.4);
 309   border-radius: 2px;
 310   background-color: #fff;
 311 }
 312
 313 xul|menulist > xul|menupopup xul|menu,
 314 xul|menulist > xul|menupopup xul|menuitem,
 315 xul|button[type="menu"] > xul|menupopup xul|menu,
 316 xul|button[type="menu"] > xul|menupopup xul|menuitem {
 317   -moz-appearance: none;
 318   font-size: 1.25rem;
 319   line-height: 22px;
 320   height: 40px;
 321   color: #333;
 322   -moz-padding-start: 10px;
 323   -moz-padding-end: 30px;
 324 }
 325
 326 xul|menulist > xul|menupopup > xul|menu[_moz-menuactive="true"],
 327 xul|menulist > xul|menupopup > xul|menuitem[_moz-menuactive="true"],
 328 xul|button[type="menu"] > xul|menupopup > xul|menu[_moz-menuactive="true"],
 329 xul|button[type="menu"] > xul|menupopup > xul|menuitem[_moz-menuactive="true"] {
 330   color: #333;
 331   background-color: transparent;
 332   background-image: linear-gradient(rgba(76,177,255,0.25), rgba(23,146,229,0.25));
 333 }
 334
 335 xul|menulist > xul|menupopup > xul|menu[selected="true"],
 336 xul|menulist > xul|menupopup > xul|menuitem[selected="true"],
 337 xul|button[type="menu"] > xul|menupopup > xul|menu[selected="true"],
 338 xul|button[type="menu"] > xul|menupopup > xul|menuitem[selected="true"] {
 339   color: #fff;
 340   background-image: linear-gradient(#4cb1ff, #1792e5);
 341 }
 342
 343 xul|menulist > xul|menupopup xul|menuseparator,
 344 xul|button[type="menu"] > xul|menupopup xul|menuseparator {
 345   -moz-appearance: none;
 346   margin-top: 2px;
 347   margin-bottom: 2px;
 348   padding: 0;
 349   border-top: 1px solid rgba(23,50,77,0.4);
 350   border-bottom: none;
 351 }
 352 */
 353 /* textboxes */
 354 /*
 355 *|textbox {
 356   -moz-appearance: none;
 357   height: 30px;
 358   color: #333;
 359   line-height: 20px;
 360   text-shadow: 0 1px 1px #fefffe;
 361   padding-right: 10px;
 362   padding-left: 10px;
 363   border: 1px solid #c1c1c1;
 364   -moz-border-top-colors: none !important;
 365   -moz-border-right-colors: none !important;
 366   -moz-border-bottom-colors: none !important;
 367   -moz-border-left-colors: none !important;
 368   border-radius: 2px;
 369   background-color: #fff;
 370 }
 371
 372 html|textbox:focus,
 373 xul|textbox[focused] {
 374   border-color: #0095dd;
 375 }
 376
 377 html|textbox:disabled,
 378 xul|textbox[disabled="true"] {
 379   opacity: 0.5;
 380 }
 381 */
 382 /* Links */
 383 /*
 384 html|a,
 385 xul|*.text-link,
 386 xul|*.inline-link {
 387   font-size: 1.25rem;
 388   line-height: 22px;
 389   color: #0095dd;
 390   text-decoration: none;
 391 }
 392
 393 html|a:hover,
 394 xul|*.text-link:hover,
 395 xul|*.inline-link:hover {
 396   color: #4cb1ff;
 397   text-decoration: none;
 398 }
 399
 400 html|a:hover:active,
 401 xul|*.text-link:hover:active,
 402 xul|*.inline-link:hover:active {
 403   color: #ff9500;
 404   text-decoration: none;
 405 }
 406 */
 407 /* Checkboxes and radio buttons */
 408 /*
 409 xul|checkbox {
 410   -moz-margin-start: 0;
 411 }
 412
 413 xul|*.checkbox-check {
 414   -moz-appearance: none;
 415   width: 23px;
 416   height: 23px;
 417   border-radius: 2px;
 418   border: 1px solid #c1c1c1;
 419   -moz-margin-end: 10px;
 420   background-color: #f1f1f1;
 421   background-image: linear-gradient(#fff, rgba(255,255,255,0.8));
 422   background-position: center center;
 423   background-repeat: no-repeat;
 424   box-shadow: 0 1px 1px 0 #fff, inset 0 2px 0 0 rgba(0,0,0,0.03);
 425 }
 426
 427 xul|checkbox:not([disabled="true"]):hover > xul|*.checkbox-check {
 428   border-color: #0095dd;
 429 }
 430
 431 xul|*.checkbox-check[checked] {
 432   background-image: url("chrome://global/skin/in-content/check.png"),
 433                     / * !important needed to override toolkit !important rule * /
 434                     linear-gradient(#fff, rgba(255,255,255,0.8)) !important;
 435 }
 436
 437 xul|checkbox[disabled="true"] > xul|*.checkbox-check {
 438   opacity: 0.5;
 439 }
 440
 441 xul|*.checkbox-label-box {
 442   -moz-margin-start: -1px; / * negative margin for the transparent border * /
 443   -moz-padding-start: 0;
 444 }
 445
 446 @media (min-resolution: 2dppx) {
 447   xul|*.checkbox-check[checked] {
 448     background-size: 12px 12px, auto;
 449     background-image: url("chrome://global/skin/in-content/check@2x.png"),
 450                       linear-gradient(#fff, rgba(255,255,255,0.8)) !important;
 451   }
 452 }
 453
 454 xul|richlistitem > xul|*.checkbox-check {
 455   margin: 3px 6px;
 456 }
 457
 458 xul|*.radio-check {
 459   -moz-appearance: none;
 460   width: 23px;
 461   height: 23px;
 462   border: 1px solid #c1c1c1;
 463   border-radius: 50%;
 464   -moz-margin-end: 10px;
 465   background-color: #f1f1f1;
 466   background-image: linear-gradient(#fff, rgba(255,255,255,0.80));
 467   box-shadow: 0 1px 1px 0 #fff, inset 0 2px 0 0 rgba(0,0,0,0.03);
 468 }
 469
 470 xul|radio:not([disabled="true"]):hover > xul|*.radio-check {
 471   border-color: #0095dd;
 472 }
 473
 474 xul|*.radio-check[selected] {
 475   background-image: radial-gradient(circle, rgb(23,146,229),
 476                     rgb(76,177,255) 5.5px, rgba(76,177,255,0.2) 6px,
 477                     transparent 6px),
 478                     linear-gradient(rgb(255,255,255), rgba(255,255,255,0.8));
 479 }
 480
 481 xul|radio[disabled="true"] > xul|*.radio-check {
 482   opacity: 0.5;
 483 }
 484
 485 xul|*.radio-label-box {
 486   -moz-margin-start: -1px; / * negative margin for the transparent border *  /
 487   -moz-margin-end: 10px;
 488   -moz-padding-start: 0;
 489 }
 490 */
 491 /* Category List */
 492 /*
 493 xul|*#categories {
 494   -moz-appearance: none;
 495   background-color: #424f5a;
 496   padding-top: 39px;
 497   margin: 0;
 498 }
 499
 500 xul|*.category {
 501   -moz-appearance: none;
 502   color: #c1c1c1;
 503   -moz-border-end-width: 0;
 504   -moz-padding-start: 15px;
 505   -moz-padding-end: 21px;
 506   min-height: 40px;
 507   transition: background-color 150ms;
 508 }
 509
 510 xul|*.category:hover {
 511   background-color: #5e6972;
 512 }
 513
 514 xul|*.category[selected] {
 515   background-color: #343f48;
 516   color: #f2f2f2;
 517   box-shadow: inset 4px 0 0 0 #ff9500;
 518 }
 519
 520 xul|*#categories[keyboard-navigation="true"]:-moz-focusring > xul|*.category[current] {
 521   border-top: 1px #ffffff dotted;
 522   border-bottom: 1px #ffffff dotted;
 523 }
 524
 525 *|*.category-name {
 526   line-height: 22px;
 527   font-size: 1.25rem;
 528   padding-bottom: 2px;
 529   -moz-padding-start: 9px;
 530   margin: 0;
 531 }
 532
 533 *|*.category-icon {
 534   width: 24px;
 535   height: 24px;
 536 }
 537 */
 538 /* header */
 539 /*
 540 *|*.header {
 541   border-bottom: 1px solid #c8c8c8;
 542   margin-bottom: 15px;
 543   padding-bottom: 15px;
 544 }
 545
 546 *|*.header-name {
 547   font-size: 2.5rem;
 548   font-weight: normal;
 549   line-height: 40px;
 550   margin: 0;
 551 }
 552 */
 553 /* File fields */
 554 /*
 555 xul|filefield {
 556   -moz-appearance: none;
 557   background-color: transparent;
 558   border: none;
 559   padding: 0;
 560 }
 561
 562 xul|*.fileFieldContentBox {
 563   background-color: transparent;
 564 }
 565
 566 xul|*.fileFieldIcon {
 567   -moz-margin-start: 10px;
 568   -moz-margin-end: 0;
 569 }
 570
 571 xul|*.fileFieldLabel {
 572   -moz-margin-start: -26px;
 573   -moz-padding-start: 36px;
 574 }
 575
 576 xul|textbox:-moz-locale-dir(rtl),
 577 xul|*.fileFieldLabel:-moz-locale-dir(rtl),
 578 xul|textbox + xul|button:-moz-locale-dir(ltr),
 579 xul|filefield + xul|button:-moz-locale-dir(ltr) {
 580   border-top-left-radius: 0;
 581   border-bottom-left-radius: 0;
 582 }
 583
 584 xul|textbox:-moz-locale-dir(ltr),
 585 xul|*.fileFieldLabel:-moz-locale-dir(ltr),
 586 xul|textbox + xul|button:-moz-locale-dir(rtl),
 587 xul|filefield + xul|button:-moz-locale-dir(rtl) {
 588   border-top-right-radius: 0;
 589   border-bottom-right-radius: 0;
 590 }
 591
 592 xul|textbox + xul|button,
 593 xul|filefield + xul|button {
 594   -moz-border-start: none;
 595 }
 596 */
 597 /* === END common.inc.css === */
 598 /*
 599 xul|caption {
 600   background-color: transparent;
 601 }
 602
 603 xul|button,
 604 xul|colorpicker[type="button"],
 605 xul|menulist {
 606   margin: 2px 4px;
 607 }
 608
 609 xul|menulist:not([editable="true"]) > xul|*.menulist-dropmarker {
 610   margin-top: 1px;
 611   margin-bottom: 1px;
 612 }
 613
 614 xul|checkbox {
 615   -moz-padding-start: 0;
 616 }
 617
 618 xul|radio {
 619   -moz-binding: url("chrome://global/content/bindings/radio.xml#radio");
 620   -moz-margin-start: 0;
 621   -moz-padding-start: 0;
 622 }
 623
 624 xul|*.radio-icon,
 625 xul|*.checkbox-icon {
 626   -moz-margin-end: 0;
 627 }
 628
 629 html|a:-moz-focusring,
 630 xul|*.text-link:-moz-focusring,
 631 xul|*.inline-link:-moz-focusring {
 632   border: 1px dotted -moz-DialogText;
 633 }
 634 */