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 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: 300px;
 129   border: none;
 130   background-color: #C09070;
 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   background-color: #FFCF00;
 159   color: #000000;
 160 }
 161
 162 html|button:enabled:hover:active,
 163 xul|button:not([disabled="true"]):hover:active,
 164 xul|colorpicker[type="button"]:not([disabled="true"]):hover:active,
 165 xul|menulist[open="true"]:not([disabled="true"]) {
 166   background-color: #FF9F00;
 167   color: #000000;
 168 }
 169
 170 html|button:disabled,
 171 xul|button[disabled="true"],
 172 xul|colorpicker[type="button"][disabled="true"],
 173 xul|menulist[disabled="true"] {
 174   cursor: not-allowed;
 175   background-color: #402858;
 176   color: #000000;
 177 }
 178
 179 *|button.primary {
 180   background-color: #A06060;
 181 }
 182
 183 html|button.primary:enabled:hover,
 184 xul|button.primary:not([disabled="true"]):hover {
 185   background-color: #FFCF00;
 186 }
 187
 188 html|button.primary:enabled:hover:active,
 189 xul|button.primary:not([disabled="true"]):hover:active {
 190   background-color: #FF9F00;
 191 }
 192 /*
 193 xul|colorpicker[type="button"] {
 194   padding: 6px;
 195   width: 50px;
 196 }
 197
 198 xul|button > xul|*.button-box,
 199 xul|menulist > xul|*.menulist-label-box {
 200   padding-right: 10px !important;
 201   padding-left: 10px !important;
 202 }
 203
 204 xul|menulist > xul|*.menulist-label-box > xul|*.menulist-icon {
 205   -moz-margin-end: 5px;
 206 }
 207
 208 xul|button[type="menu"] > xul|*.button-box > xul|*.button-menu-dropmarker {
 209   -moz-appearance: none;
 210   margin: 1px 0;
 211   -moz-margin-start: 10px;
 212   padding: 0;
 213   width: 10px;
 214   height: 16px;
 215   border: none;
 216   background-color: transparent;
 217   list-style-image: url("chrome://global/skin/in-content/dropdown.svg#dropdown");
 218 }
 219
 220 */
 221 xul|*.help-button {
 222 /*
 223   min-width: 30px;
 224   border-radius: 2px;
 225   border-width: 0;
 226   background-color: #ffcb00;
 227   background-image: none;
 228   box-shadow: none;
 229 */
 230   list-style-image: url("chrome://global/skin/in-content/help-glyph.svg");
 231 }
 232 /*
 233 xul|*.help-button:not([disabled="true"]):hover {
 234   background-color: #f4c200;
 235   background-image: none;
 236 }
 237
 238 xul|*.help-button:not([disabled="true"]):hover:active {
 239   background-color: #eaba00;
 240   background-image: none;
 241 }
 242
 243 xul|*.close-icon > xul|*.button-box,
 244 xul|*.help-button > xul|*.button-box {
 245   padding-top: 0;
 246   padding-bottom: 0;
 247   padding-right: 0 !important;
 248   padding-left: 0 !important;
 249 }
 250 */
 251 xul|*.help-button > xul|*.button-box > xul|*.button-icon {
 252   width: 18px;
 253   height: 18px;
 254 }
 255
 256 xul|*.help-button > xul|*.button-box > xul|*.button-text {
 257   display: none;
 258 }
 259 /*
 260 xul|*.spinbuttons-button {
 261   -moz-margin-start: 10px !important;
 262   -moz-margin-end: 2px !important;
 263 }
 264
 265 xul|*.spinbuttons-up {
 266   margin-top: 2px !important;
 267   border-radius: 1px 1px 0 0;
 268 }
 269
 270 xul|*.spinbuttons-down  {
 271   margin-bottom: 2px !important;
 272   border-radius: 0 0 1px 1px;
 273 }
 274
 275 xul|*.spinbuttons-button > xul|*.button-box {
 276   padding: 1px 5px 2px !important;
 277 }
 278
 279 xul|*.spinbuttons-up > xul|*.button-box > xul|*.button-icon {
 280   list-style-image: url("chrome://global/skin/arrow/arrow-up.gif");
 281 }
 282
 283 xul|*.spinbuttons-up[disabled="true"] > xul|*.button-box > xul|*.button-icon {
 284   list-style-image: url("chrome://global/skin/arrow/arrow-up-dis.gif");
 285 }
 286
 287 xul|*.spinbuttons-down > xul|*.button-box > xul|*.button-icon {
 288   list-style-image: url("chrome://global/skin/arrow/arrow-dn.gif");
 289 }
 290
 291 xul|*.spinbuttons-down[disabled="true"] > xul|*.button-box > xul|*.button-icon {
 292   list-style-image: url("chrome://global/skin/arrow/arrow-dn-dis.gif");
 293 }
 294
 295 xul|menulist:not([editable="true"]) > xul|*.menulist-dropmarker {
 296   -moz-appearance: none;
 297   -moz-margin-end: 4px;
 298   padding: 0;
 299   border: none;
 300   background-color: transparent;
 301   list-style-image: url("chrome://global/skin/in-content/dropdown.svg#dropdown");
 302 }
 303
 304 xul|menulist:not([editable="true"]) > xul|*.menulist-dropmarker > xul|*.dropmarker-icon {
 305   width: 18px;
 306   height: 18px;
 307 }
 308
 309 xul|menulist[disabled="true"]:not([editable="true"]) > xul|*.menulist-dropmarker {
 310   list-style-image: url("chrome://global/skin/in-content/dropdown.svg#dropdown-disabled")
 311 }
 312
 313 xul|menulist > xul|menupopup,
 314 xul|button[type="menu"] > xul|menupopup {
 315   -moz-appearance: none;
 316   border: 1px solid #c1c1c1;
 317   border-radius: 2px;
 318   background-color: #fff;
 319 }
 320
 321 xul|menulist > xul|menupopup xul|menu,
 322 xul|menulist > xul|menupopup xul|menuitem,
 323 xul|button[type="menu"] > xul|menupopup xul|menu,
 324 xul|button[type="menu"] > xul|menupopup xul|menuitem {
 325   -moz-appearance: none;
 326   font-size: 1rem;
 327   color: #333;
 328   padding-top: 0.2em;
 329   padding-bottom: 0.2em;
 330   -moz-padding-start: 10px;
 331   -moz-padding-end: 30px;
 332 }
 333
 334 xul|menulist > xul|menupopup > xul|menu[_moz-menuactive="true"],
 335 xul|menulist > xul|menupopup > xul|menuitem[_moz-menuactive="true"],
 336 xul|button[type="menu"] > xul|menupopup > xul|menu[_moz-menuactive="true"],
 337 xul|button[type="menu"] > xul|menupopup > xul|menuitem[_moz-menuactive="true"] {
 338   color: #333;
 339   background-color: rgba(0,149,221,0.25);
 340 }
 341
 342 xul|menulist > xul|menupopup > xul|menu[selected="true"],
 343 xul|menulist > xul|menupopup > xul|menuitem[selected="true"],
 344 xul|button[type="menu"] > xul|menupopup > xul|menu[selected="true"],
 345 xul|button[type="menu"] > xul|menupopup > xul|menuitem[selected="true"] {
 346   color: #fff;
 347   background-color: #0095DD;
 348 }
 349
 350 xul|menulist > xul|menupopup xul|menuseparator,
 351 xul|button[type="menu"] > xul|menupopup xul|menuseparator {
 352   -moz-appearance: none;
 353   margin: 0;
 354   padding: 0;
 355   border-top: 1px solid #c1c1c1;
 356   border-bottom: none;
 357 }
 358 */
 359 /* textboxes */
 360 /*
 361 *|textbox {
 362   -moz-appearance: none;
 363   height: 30px;
 364   color: #333;
 365   line-height: 20px;
 366   text-shadow: 0 1px 1px #fefffe;
 367   padding-right: 10px;
 368   padding-left: 10px;
 369   border: 1px solid #c1c1c1;
 370   -moz-border-top-colors: none !important;
 371   -moz-border-right-colors: none !important;
 372   -moz-border-bottom-colors: none !important;
 373   -moz-border-left-colors: none !important;
 374   border-radius: 2px;
 375   background-color: #fff;
 376 }
 377
 378 html|textbox:focus,
 379 xul|textbox[focused] {
 380   border-color: #0095dd;
 381 }
 382
 383 html|textbox:disabled,
 384 xul|textbox[disabled="true"] {
 385   opacity: 0.5;
 386 }
 387 */
 388 /* Links */
 389
 390 html|a,
 391 xul|*.text-link,
 392 xul|*.inline-link {
 393 /*  line-height: 22px;*/
 394   color: #3333FF;
 395   text-decoration: none;
 396 }
 397
 398 html|a:hover,
 399 xul|*.text-link:hover,
 400 xul|*.inline-link:hover {
 401   color: #FFCF00;
 402   text-decoration: underline;
 403 }
 404
 405 html|a:hover:active,
 406 xul|*.text-link:hover:active,
 407 xul|*.inline-link:hover:active {
 408   color: #FF9F00;
 409   text-decoration: underline;
 410 }
 411
 412 /* Checkboxes and radio buttons */
 413 /*
 414 xul|checkbox {
 415   -moz-margin-start: 0;
 416 }
 417
 418 xul|*.checkbox-check {
 419   -moz-appearance: none;
 420   width: 23px;
 421   height: 23px;
 422   border-radius: 2px;
 423   border: 1px solid #c1c1c1;
 424   -moz-margin-end: 10px;
 425   background-color: #f1f1f1;
 426   / !important needed to override toolkit checked !important rule /
 427   background-image: linear-gradient(#fff, rgba(255,255,255,0.8)) !important;
 428   background-position: center center;
 429   background-repeat: no-repeat;
 430   box-shadow: 0 1px 1px 0 #fff, inset 0 2px 0 0 rgba(0,0,0,0.03);
 431 }
 432
 433 xul|checkbox:not([disabled="true"]):hover > xul|*.checkbox-check {
 434   border-color: #0095dd;
 435 }
 436
 437 xul|*.checkbox-check[checked] {
 438   background-image: url("chrome://global/skin/in-content/check.png"),
 439                     / * !important needed to override toolkit !important rule * /
 440                     linear-gradient(#fff, rgba(255,255,255,0.8)) !important;
 441 }
 442
 443 xul|checkbox[disabled="true"] > xul|*.checkbox-check {
 444   opacity: 0.5;
 445 }
 446
 447 xul|*.checkbox-label-box {
 448   -moz-margin-start: -1px; / * negative margin for the transparent border * /
 449   -moz-padding-start: 0;
 450 }
 451
 452 xul|richlistitem > xul|*.checkbox-check {
 453   margin: 3px 6px;
 454 }
 455
 456 xul|*.radio-check {
 457   -moz-appearance: none;
 458   width: 23px;
 459   height: 23px;
 460   border: 1px solid #c1c1c1;
 461   border-radius: 50%;
 462   -moz-margin-end: 10px;
 463   background-color: #f1f1f1;
 464   background-image: linear-gradient(#fff, rgba(255,255,255,0.80));
 465   box-shadow: 0 1px 1px 0 #fff, inset 0 2px 0 0 rgba(0,0,0,0.03);
 466 }
 467
 468 xul|radio:not([disabled="true"]):hover > xul|*.radio-check {
 469   border-color: #0095dd;
 470 }
 471
 472 xul|*.radio-check[selected] {
 473   list-style-image: url("chrome://global/skin/in-content/radio.svg#radio");
 474 }
 475
 476 xul|radio[disabled="true"] > xul|*.radio-check {
 477   opacity: 0.5;
 478 }
 479
 480 xul|*.radio-label-box {
 481   -moz-margin-start: -1px; / * negative margin for the transparent border *  /
 482   -moz-margin-end: 10px;
 483   -moz-padding-start: 0;
 484 }
 485 */
 486 /* Category List */
 487 /*
 488 xul|*#categories {
 489   -moz-appearance: none;
 490   background-color: #424f5a;
 491   padding-top: 39px;
 492   margin: 0;
 493   border-width: 0;
 494 }
 495
 496 xul|*.category {
 497   -moz-appearance: none;
 498   color: #c1c1c1;
 499   -moz-border-end-width: 0;
 500   -moz-padding-start: 15px;
 501   -moz-padding-end: 21px;
 502   min-height: 40px;
 503   transition: background-color 150ms;
 504 }
 505
 506 xul|*.category:hover {
 507   background-color: #5e6972;
 508 }
 509
 510 xul|*.category[selected] {
 511   background-color: #343f48;
 512   color: #f2f2f2;
 513   -moz-padding-start: 11px; / compensate the 4px border /
 514   -moz-border-start: solid 4px #ff9500;
 515 }
 516
 517 xul|*#categories[keyboard-navigation="true"]:-moz-focusring > xul|*.category[current] {
 518   border-top: 1px #ffffff dotted;
 519   border-bottom: 1px #ffffff dotted;
 520 }
 521
 522 *|*.category-name {
 523   line-height: 22px;
 524   font-size: 1.25rem;
 525   padding-bottom: 2px;
 526   -moz-padding-start: 9px;
 527   margin: 0;
 528 }
 529
 530 *|*.category-icon {
 531   width: 24px;
 532   height: 24px;
 533 }
 534 */
 535 /* header */
 536
 537 *|*.header {
 538 /*  -moz-margin-end: 4px; / add the 4px end-margin of other elements /
 539   border-bottom: 1px solid #A09090;
 540   margin-bottom: 15px;
 541   padding-bottom: 15px; */
 542 }
 543
 544 *|*.header-name {
 545   font-size: 2.5rem;
 546   font-weight: normal;
 547   line-height: 40px;
 548   margin: 0;
 549 }
 550
 551 /* File fields */
 552 /*
 553 xul|filefield {
 554   -moz-appearance: none;
 555   background-color: transparent;
 556   border: none;
 557   padding: 0;
 558 }
 559
 560 xul|*.fileFieldContentBox {
 561   background-color: transparent;
 562 }
 563
 564 xul|*.fileFieldIcon {
 565   -moz-margin-start: 10px;
 566   -moz-margin-end: 0;
 567 }
 568
 569 xul|*.fileFieldLabel {
 570   -moz-margin-start: -26px;
 571   -moz-padding-start: 36px;
 572 }
 573
 574 xul|textbox:-moz-locale-dir(rtl),
 575 xul|*.fileFieldLabel:-moz-locale-dir(rtl),
 576 xul|textbox + xul|button:-moz-locale-dir(ltr),
 577 xul|filefield + xul|button:-moz-locale-dir(ltr) {
 578   border-top-left-radius: 0;
 579   border-bottom-left-radius: 0;
 580 }
 581
 582 xul|textbox:-moz-locale-dir(ltr),
 583 xul|*.fileFieldLabel:-moz-locale-dir(ltr),
 584 xul|textbox + xul|button:-moz-locale-dir(rtl),
 585 xul|filefield + xul|button:-moz-locale-dir(rtl) {
 586   border-top-right-radius: 0;
 587   border-bottom-right-radius: 0;
 588 }
 589
 590 xul|textbox + xul|button,
 591 xul|filefield + xul|button {
 592   -moz-border-start: none;
 593 }
 594 */
 595 /* List boxes */
 596 /*
 597 xul|richlistbox,
 598 xul|listbox {
 599   -moz-appearance: none;
 600   -moz-margin-start: 0;
 601   background-color: #fff;
 602   border: 1px solid #c1c1c1;
 603   color: #333;
 604 }
 605
 606 xul|treechildren::-moz-tree-row,
 607 xul|listbox xul|listitem {
 608   padding: 0.3em;
 609   margin: 0;
 610   border: none;
 611   border-radius: 0;
 612   background-image: none;
 613 }
 614
 615 xul|treechildren::-moz-tree-row(hover),
 616 xul|listbox xul|listitem:hover {
 617   background-color: rgba(0,149,221,0.25);
 618 }
 619
 620 xul|treechildren::-moz-tree-row(selected),
 621 xul|listbox xul|listitem[selected="true"] {
 622   background-color: #0095dd;
 623   color: #fff;
 624 }
 625
 626 / This is the only way to increase the height of a tree row unfortunately /
 627 xul|treechildren::-moz-tree-row {
 628   min-height: 2em;
 629 }
 630
 631 / Color needs to be set on tree cell in order to be applied /
 632 xul|treechildren::-moz-tree-cell-text {
 633   color: #333;
 634 }
 635
 636 xul|treechildren::-moz-tree-cell-text(selected) {
 637   color: #fff;
 638 }
 639 */
 640 /* Trees */
 641 /*
 642 xul|tree {
 643   -moz-appearance: none;
 644   font-size: 1em;
 645   border: 1px solid #c1c1c1;
 646 }
 647
 648 xul|listheader,
 649 xul|treecols {
 650   -moz-appearance: none;
 651   border: none;
 652   border-bottom: 1px solid #c1c1c1;
 653   padding: 0;
 654 }
 655
 656 xul|treecol:not([hideheader="true"]),
 657 xul|treecolpicker {
 658   -moz-appearance: none;
 659   border: none;
 660   background-color: #ebebeb;
 661   color: #808080;
 662   padding: 5px 10px;
 663 }
 664
 665 xul|treecol:not([hideheader="true"]):hover,
 666 xul|treecolpicker:hover {
 667   background-color: #dadada;
 668   color: #333;
 669 }
 670
 671 xul|treecol:not([hideheader="true"]):not(:first-child),
 672 xul|treecolpicker {
 673   -moz-border-start-width: 1px;
 674   -moz-border-start-style: solid;
 675   border-image: linear-gradient(transparent 0%, transparent 20%, #c1c1c1 20%, #c1c1c1 80%, transparent 80%, transparent 100%) 1 1;
 676 }
 677
 678 xul|treecol:not([hideheader="true"]) > xul|*.treecol-sortdirection[sortDirection] {
 679   list-style-image: url("chrome://global/skin/in-content/sorter.png");
 680   width: 12px;
 681   height: 8px;
 682 }
 683
 684 xul|treecol:not([hideheader="true"]) > xul|*.treecol-sortdirection[sortDirection="descending"] {
 685   transform: scaleY(-1);
 686 }
 687
 688 @media (min-resolution: 2dppx) {
 689   xul|treecol:not([hideheader="true"]) > xul|*.treecol-sortdirection[sortDirection] {
 690     list-style-image: url("chrome://global/skin/in-content/sorter@2x.png");
 691   }
 692 }
 693 */
 694 /* === END common.inc.css === */
 695 /*
 696 xul|caption {
 697   background-color: transparent;
 698 }
 699
 700 xul|button,
 701 xul|colorpicker[type="button"],
 702 xul|menulist {
 703   margin: 2px 4px;
 704 }
 705
 706 xul|menulist:not([editable="true"]) > xul|*.menulist-dropmarker {
 707   margin-top: 1px;
 708   margin-bottom: 1px;
 709 }
 710
 711 xul|checkbox {
 712   -moz-padding-start: 0;
 713 }
 714
 715 xul|radio {
 716   -moz-binding: url("chrome://global/content/bindings/radio.xml#radio");
 717   -moz-margin-start: 0;
 718   -moz-padding-start: 0;
 719 }
 720
 721 xul|*.radio-icon,
 722 xul|*.checkbox-icon {
 723   -moz-margin-end: 0;
 724 }
 725 */
 726 html|a:-moz-focusring,
 727 xul|*.text-link:-moz-focusring,
 728 xul|*.inline-link:-moz-focusring {
 729   /* Don't specify the outline-color, we should always use initial value. */
 730   outline: 1px dotted;
 731 }