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