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