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