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