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 *|*:root {
  11   --in-content-page-color: #FF9F00;
  12   --in-content-page-background: #000000;
  13   --in-content-text-color: #FF9F00;
  14   --in-content-selected-text: #000000;
  15   ---in-content-header-border-color: #c8c8c8;
  16   --in-content-button-background: #C09070;
  17   --in-content-box-background: #000000;
  18   ---in-content-box-background-odd: #f3f6fa;
  19   --in-content-box-background-hover: #FFCF00;
  20   --in-content-box-background-active: #FF9F00;
  21   --in-content-box-background-disabled: #402858;
  22   --in-content-box-border-color: #FF9F00;
  23   ---in-content-item-hover: rgba(0,149,221,0.25);
  24   ---in-content-item-selected: #0095dd;
  25   ---in-content-border-highlight: #33FF33;
  26   --in-content-border-focus: #FFCF00;
  27   --in-content-border-color: #9C9CFF;
  28   --in-content-border-disabled: #8050B0;
  29   --in-content-category-text: #FFCF00;
  30   --in-content-category-border-focus: 1px dotted #000000;
  31   --in-content-category-text-selected: #000000;
  32   --in-content-categorylist-background: #A09090;
  33   --in-content-category-background: #000000;
  34   --in-content-category-background-hover: #FFCF00;
  35   --in-content-category-background-active: #008484;
  36   ---in-content-tab-color: #424f5a;
  37   --in-content-link-color: #3333FF;
  38   --in-content-link-color-hover: #FFCF00;
  39   --in-content-link-color-active: #FF9F00;
  40   --in-content-link-color-visited: #6000CF;
  41   --in-content-primary-button-background: #A06060;
  42   --in-content-primary-button-background-hover: #FFCF00;
  43   --in-content-primary-button-background-active: #FF9F00;
  44   --in-content-table-border-dark-color: #9C9CFF;
  45   --in-content-table-header-background: #A09090;
  46   ---in-content-help-button-background: #ffcb00;
  47   ---in-content-help-button-background-hover: #f4c200;
  48   ---in-content-help-button-background-active: #eaba00;
  49   --in-content-disabled-text: #8050B0;
  50 }
  51 html|body,
  52 xul|page,
  53 xul|window {
  54   font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
  55   -moz-appearance: none;
  56   background-color: var(--in-content-page-background);
  57   color: var(--in-content-page-color);
  58 }
  59
  60 html|body {
  61   font-size: 15px;
  62   font-weight: normal;
  63   margin: 0;
  64 }
  65
  66 html|h1 {
  67   font-size: 2.5em;
  68   font-weight: lighter;
  69   line-height: 1.2;
  70   color: var(--in-content-text-color);
  71   margin: 0;
  72   margin-bottom: .5em;
  73 }
  74
  75 html|hr {
  76   border-style: solid none none none;
  77   border-color: var(--in-content-border-color);
  78 }
  79
  80 xul|caption {
  81 }
  82
  83 xul|caption > xul|checkbox,
  84 xul|caption > xul|label {
  85   margin-top: 0;
  86   margin-bottom: 0;
  87 }
  88
  89 *|*.main-content {
  90   padding-top: 40px;
  91   -moz-padding-end: 48px; /* orig is 44px to compensate the 4px margin of child elements */
  92   padding-bottom: 48px;
  93   -moz-padding-start: 48px;
  94   overflow: auto;
  95 }
  96
  97 xul|prefpane > xul|*.content-box {
  98   overflow: visible;
  99 }
 100
 101 /* groupboxes */
 102 /*
 103 xul|groupbox {
 104   -moz-appearance: none;
 105   border: none;
 106   margin: 15px 0 0;
 107   -moz-padding-start: 0;
 108   -moz-padding-end: 0;
 109   font-size: 1.25rem;
 110 }
 111
 112 xul|groupbox xul|label,
 113 xul|groupbox xul|description {
 114   / !important needed to override toolkit !important rule /
 115   -moz-margin-start: 0 !important;
 116   -moz-margin-end: 0 !important;
 117 }
 118 */
 119 /* tabpanels and tabs */
 120 /*
 121 xul|tabpanels {
 122   -moz-appearance: none;
 123   font-size: 1.25rem;
 124   line-height: 22px;
 125   border: none;
 126   padding: 0;
 127   background-color: transparent;
 128   color: inherit;
 129 }
 130
 131 xul|tabs {
 132   margin-bottom: 15px;
 133   border-top: 1px solid var(--in-content-box-border-color);
 134   border-bottom: 1px solid var(--in-content-box-border-color);
 135   background-color: var(--in-content-page-background);
 136 }
 137
 138 xul|*.tabs-left,
 139 xul|*.tabs-right {
 140   border-bottom: none;
 141 }
 142
 143 xul|tab {
 144   -moz-appearance: none;
 145   margin-top: 0;
 146   padding: 4px 20px;
 147   min-height: 44px;
 148   color: var(--in-content-tab-color);
 149   background-color: var(--in-content-page-background);
 150   border-width: 0;
 151   transition: background-color 50ms ease 0s;
 152 }
 153
 154 xul|tab:hover {
 155   background-color: var(--in-content-box-background-hover);
 156 }
 157
 158 xul|tab[selected] {
 159   background-color: var(--in-content-box-background-hover);
 160   padding-bottom: 0; / compensate the 4px border /
 161   border-bottom: 4px solid var(--in-content-border-highlight);
 162 }
 163
 164 xul|*.tab-text {
 165   font-size: 1.3rem;
 166   line-height: 22px;
 167 }
 168 */
 169 /* html buttons */
 170
 171 html|button {
 172   border-radius: 300px;
 173   border: none;
 174   background-color: var(--in-content-button-background);
 175   color: var(--in-content-selected-text);
 176   /* override forms.css */
 177   font: inherit;
 178 }
 179
 180 /* xul buttons and menulists */
 181 /*
 182 *|button,
 183 xul|colorpicker[type="button"],
 184 xul|menulist {
 185   -moz-appearance: none;
 186   height: 30px;
 187   color: var(--in-content-text-color);
 188   border: 1px solid var(--in-content-box-border-color);
 189   -moz-border-top-colors: none !important;
 190   -moz-border-right-colors: none !important;
 191   -moz-border-bottom-colors: none !important;
 192   -moz-border-left-colors: none !important;
 193   border-radius: 2px;
 194   background-color: var(--in-content-page-background);
 195 }
 196 */
 197 html|button:enabled:hover,
 198 xul|button:not([disabled="true"]):hover,
 199 xul|colorpicker[type="button"]:not([disabled="true"]):hover,
 200 xul|menulist:not([disabled="true"]):hover {
 201   background-color: var(--in-content-box-background-hover);
 202   color: var(--in-content-selected-text);
 203 }
 204
 205 html|button:enabled:hover:active,
 206 xul|button:not([disabled="true"]):hover:active,
 207 xul|colorpicker[type="button"]:not([disabled="true"]):hover:active,
 208 xul|menulist[open="true"]:not([disabled="true"]) {
 209   background-color: var(--in-content-box-background-active);
 210   color: var(--in-content-selected-text);
 211 }
 212
 213 html|button:disabled,
 214 xul|button[disabled="true"],
 215 xul|colorpicker[type="button"][disabled="true"],
 216 xul|menulist[disabled="true"] {
 217   cursor: not-allowed;
 218   background-color: var(--in-content-box-background-disabled);
 219   color: var(--in-content-selected-text);
 220 }
 221
 222 *|button.primary {
 223   background-color: var(--in-content-primary-button-background);
 224 }
 225
 226 html|button.primary:enabled:hover,
 227 xul|button.primary:not([disabled="true"]):hover {
 228   background-color: var(--in-content-primary-button-background-hover);
 229 }
 230
 231 html|button.primary:enabled:hover:active,
 232 xul|button.primary:not([disabled="true"]):hover:active {
 233   background-color: var(--in-content-primary-button-background-active);
 234 }
 235 /*
 236 xul|colorpicker[type="button"] {
 237   padding: 6px;
 238   width: 50px;
 239 }
 240
 241 xul|button > xul|*.button-box,
 242 xul|menulist > xul|*.menulist-label-box {
 243   padding-right: 10px !important;
 244   padding-left: 10px !important;
 245 }
 246
 247 xul|menulist > xul|*.menulist-label-box > xul|*.menulist-icon[src] {
 248   -moz-margin-end: 5px;
 249 }
 250
 251 xul|button[type="menu"] > xul|*.button-box > xul|*.button-menu-dropmarker {
 252   -moz-appearance: none;
 253   margin: 1px 0;
 254   -moz-margin-start: 10px;
 255   padding: 0;
 256   width: 10px;
 257   height: 16px;
 258   border: none;
 259   background-color: transparent;
 260   list-style-image: url("chrome://global/skin/in-content/dropdown.svg#dropdown");
 261 }
 262
 263 */
 264 xul|*.help-button {
 265 /*
 266   min-width: 30px;
 267   border-radius: 2px;
 268   border-width: 0;
 269   background-color: #ffcb00;
 270   background-image: none;
 271   box-shadow: none;
 272 */
 273   list-style-image: url("chrome://global/skin/in-content/help-glyph.svg");
 274 }
 275 /*
 276 xul|*.help-button:not([disabled="true"]):hover {
 277   background-color: #f4c200;
 278   background-image: none;
 279 }
 280
 281 xul|*.help-button:not([disabled="true"]):hover:active {
 282   background-color: #eaba00;
 283   background-image: none;
 284 }
 285
 286 xul|*.close-icon > xul|*.button-box,
 287 xul|*.help-button > xul|*.button-box {
 288   padding-top: 0;
 289   padding-bottom: 0;
 290   padding-right: 0 !important;
 291   padding-left: 0 !important;
 292 }
 293 */
 294 xul|*.help-button > xul|*.button-box > xul|*.button-icon {
 295   width: 18px;
 296   height: 18px;
 297 }
 298
 299 xul|*.help-button > xul|*.button-box > xul|*.button-text {
 300   display: none;
 301 }
 302 /*
 303 xul|*.spinbuttons-button {
 304   -moz-margin-start: 10px !important;
 305   -moz-margin-end: 2px !important;
 306 }
 307
 308 xul|*.spinbuttons-up {
 309   margin-top: 2px !important;
 310   border-radius: 1px 1px 0 0;
 311 }
 312
 313 xul|*.spinbuttons-down  {
 314   margin-bottom: 2px !important;
 315   border-radius: 0 0 1px 1px;
 316 }
 317
 318 xul|*.spinbuttons-button > xul|*.button-box {
 319   padding: 1px 5px 2px !important;
 320 }
 321
 322 xul|*.spinbuttons-up > xul|*.button-box > xul|*.button-icon {
 323   list-style-image: url("chrome://global/skin/arrow/arrow-up.gif");
 324 }
 325
 326 xul|*.spinbuttons-up[disabled="true"] > xul|*.button-box > xul|*.button-icon {
 327   list-style-image: url("chrome://global/skin/arrow/arrow-up-dis.gif");
 328 }
 329
 330 xul|*.spinbuttons-down > xul|*.button-box > xul|*.button-icon {
 331   list-style-image: url("chrome://global/skin/arrow/arrow-dn.gif");
 332 }
 333
 334 xul|*.spinbuttons-down[disabled="true"] > xul|*.button-box > xul|*.button-icon {
 335   list-style-image: url("chrome://global/skin/arrow/arrow-dn-dis.gif");
 336 }
 337
 338 xul|menulist:not([editable="true"]) > xul|*.menulist-dropmarker {
 339   -moz-appearance: none;
 340   -moz-margin-end: 4px;
 341   padding: 0;
 342   border: none;
 343   background-color: transparent;
 344   list-style-image: url("chrome://global/skin/in-content/dropdown.svg#dropdown");
 345 }
 346
 347 xul|menulist:not([editable="true"]) > xul|*.menulist-dropmarker > xul|*.dropmarker-icon {
 348   width: 18px;
 349   height: 18px;
 350 }
 351
 352 xul|menulist[disabled="true"]:not([editable="true"]) > xul|*.menulist-dropmarker {
 353   list-style-image: url("chrome://global/skin/in-content/dropdown.svg#dropdown-disabled")
 354 }
 355
 356 xul|menulist > xul|menupopup,
 357 xul|button[type="menu"] > xul|menupopup {
 358   -moz-appearance: none;
 359   border: 1px solid var(--in-content-box-border-color);
 360   border-radius: 2px;
 361   background-color: var(--in-content-box-background);
 362 }
 363
 364 xul|menulist > xul|menupopup xul|menu,
 365 xul|menulist > xul|menupopup xul|menuitem,
 366 xul|button[type="menu"] > xul|menupopup xul|menu,
 367 xul|button[type="menu"] > xul|menupopup xul|menuitem {
 368   -moz-appearance: none;
 369   font-size: 1rem;
 370   color: var(--in-content-text-color);
 371   padding-top: 0.2em;
 372   padding-bottom: 0.2em;
 373   -moz-padding-start: 10px;
 374   -moz-padding-end: 30px;
 375 }
 376
 377 xul|menulist > xul|menupopup > xul|menu:not([disabled="true"])[_moz-menuactive="true"],
 378 xul|menulist > xul|menupopup > xul|menuitem:not([disabled="true"])[_moz-menuactive="true"],
 379 xul|button[type="menu"] > xul|menupopup > xul|menu:not([disabled="true"])[_moz-menuactive="true"],
 380 xul|button[type="menu"] > xul|menupopup > xul|menuitem:not([disabled="true"])[_moz-menuactive="true"] {
 381   color: var(--in-content-text-color);
 382   background-color: var(--in-content-item-hover);
 383 }
 384
 385 xul|menulist > xul|menupopup > xul|menu:not([disabled="true"])[selected="true"],
 386 xul|menulist > xul|menupopup > xul|menuitem:not([disabled="true"])[selected="true"],
 387 xul|button[type="menu"] > xul|menupopup > xul|menu:not([disabled="true"])[selected="true"],
 388 xul|button[type="menu"] > xul|menupopup > xul|menuitem:not([disabled="true"])[selected="true"] {
 389   color: var(--in-content-selected-text);
 390   background-color: var(--in-content-item-selected);
 391 }
 392
 393 xul|menulist > xul|menupopup > xul|menu[disabled="true"],
 394 xul|menulist > xul|menupopup > xul|menuitem[disabled="true"],
 395 xul|button[type="menu"] > xul|menupopup > xul|menu[disabled="true"],
 396 xul|button[type="menu"] > xul|menupopup > xul|menuitem[disabled="true"] {
 397   color: #999;
 398   / override the [_moz-menuactive="true"] background color from
 399      global/menu.css /
 400   background-color: transparent;
 401 }
 402
 403 xul|menulist > xul|menupopup xul|menuseparator,
 404 xul|button[type="menu"] > xul|menupopup xul|menuseparator {
 405   -moz-appearance: none;
 406   margin: 0;
 407   padding: 0;
 408   border-top: 1px solid var(--in-content-box-border-color);
 409   border-bottom: none;
 410 }
 411 */
 412 /* textboxes */
 413 /*
 414 *|textbox {
 415   -moz-appearance: none;
 416   height: 30px;
 417   color: var(--in-content-text-color);
 418   line-height: 20px;
 419   padding-right: 10px;
 420   padding-left: 10px;
 421   border: 1px solid var(--in-content-box-border-color);
 422   -moz-border-top-colors: none !important;
 423   -moz-border-right-colors: none !important;
 424   -moz-border-bottom-colors: none !important;
 425   -moz-border-left-colors: none !important;
 426   border-radius: 2px;
 427   background-color: var(--in-content-box-background);
 428 }
 429
 430 html|textbox:focus,
 431 xul|textbox[focused] {
 432   border-color: var(--in-content-border-focus);
 433 }
 434
 435 html|textbox:disabled,
 436 xul|textbox[disabled="true"] {
 437   opacity: 0.5;
 438 }
 439 */
 440 /* Links */
 441
 442 html|a,
 443 .text-link,
 444 .inline-link {
 445   color: var(--in-content-link-color);
 446   text-decoration: none;
 447 }
 448
 449 html|a:hover,
 450 .text-link:hover,
 451 .inline-link:hover {
 452   color: var(--in-content-link-color-hover);
 453   text-decoration: underline;
 454 }
 455
 456 html|a:visited {
 457   color: var(--in-content-link-color-visited);
 458 }
 459
 460 html|a:hover:active,
 461 .text-link:hover:active,
 462 .inline-link:hover:active {
 463   color: var(--in-content-link-color-active);
 464   text-decoration: underline;
 465 }
 466
 467 /* Checkboxes and radio buttons */
 468 /* Hide the actual checkbox */
 469 html|input[type="checkbox"] {
 470   opacity: 0;
 471   position: absolute;
 472 }
 473
 474 /* Create a box to style as the checkbox */
 475 html|input[type="checkbox"] + html|label:before {
 476   display: inline-block;
 477   content: "";
 478   vertical-align: middle;
 479 }
 480
 481 html|input[type="checkbox"] + html|label {
 482   line-height: 0px;
 483 }
 484 /*
 485 xul|checkbox {
 486   -moz-margin-start: 0;
 487 }
 488 */
 489 /* xul|*.checkbox-check, */
 490 html|input[type="checkbox"] + html|label:before {
 491   -moz-appearance: none;
 492   width: 23px;
 493   height: 23px;
 494   border-radius: 0;
 495   border: 1px solid var(--in-content-box-border-color);
 496   -moz-margin-end: 10px;
 497   background-color: var(--in-content-box-background);
 498   background-position: center center;
 499   background-repeat: no-repeat;
 500 }
 501
 502 /* xul|checkbox:not([disabled="true"]):hover > xul|*.checkbox-check, */
 503 html|input[type="checkbox"]:not(:disabled) + html|label:hover:before {
 504   border-color: var(--in-content-border-focus);
 505 }
 506 html|input[type="checkbox"]:not(:disabled) + html|label:hover {
 507   color: var(--in-content-link-color-hover);
 508 }
 509 /*
 510 xul|*.checkbox-check[checked] {
 511   background-image: url("chrome://global/skin/in-content/check.png"),
 512                     / * !important needed to override toolkit !important rule * /
 513                     linear-gradient(#fff, rgba(255,255,255,0.8)) !important;
 514 }
 515 */
 516 html|input[type="checkbox"]:checked + html|label:before {
 517   background-image: url("chrome://global/skin/in-content/check.svg#check");
 518 }
 519
 520 /*xul|checkbox[checked][disabled="true"] > xul|*.checkbox-check,*/
 521 html|input[type="checkbox"]:checked:disabled + html|label:before {
 522   background-image: url("chrome://global/skin/in-content/check.svg#check-disabled");
 523 }
 524 html|input[type="checkbox"]:not(:disabled) + html|label:hover:before {
 525   background-image: url("chrome://global/skin/in-content/check.svg#check-hover");
 526 }
 527 html|input[type="checkbox"]:disabled + html|label:before {
 528   border-color: var(--in-content-border-disabled);
 529 }
 530 html|input[type="checkbox"]:disabled + html|label {
 531   color: var(--in-content-disabled-text);
 532 }
 533 /*
 534 xul|*.checkbox-label-box {
 535   -moz-margin-start: -1px; / * negative margin for the transparent border * /
 536   -moz-padding-start: 0;
 537 }
 538
 539 xul|richlistitem > xul|*.checkbox-check {
 540   margin: 3px 6px;
 541 }
 542
 543 xul|radio {
 544   -moz-margin-start: 0;
 545 }
 546
 547 xul|*.radio-check {
 548   -moz-appearance: none;
 549   width: 23px;
 550   height: 23px;
 551   border: 1px solid var(--in-content-box-border-color);
 552   border-radius: 50%;
 553   -moz-margin-end: 10px;
 554   background-color: #f1f1f1;
 555   background-image: linear-gradient(#fff, rgba(255,255,255,0.80));
 556   box-shadow: 0 1px 1px 0 #fff, inset 0 2px 0 0 rgba(0,0,0,0.03);
 557 }
 558
 559 xul|radio:not([disabled="true"]):hover > xul|*.radio-check {
 560   border-color: var(--in-content-border-focus);
 561 }
 562
 563 xul|*.radio-check[selected] {
 564   list-style-image: url("chrome://global/skin/in-content/radio.svg#radio");
 565 }
 566
 567 xul|radio[disabled="true"] > xul|*.radio-check {
 568   opacity: 0.5;
 569 }
 570
 571 xul|*.radio-label-box {
 572   -moz-margin-start: -1px; / * negative margin for the transparent border *  /
 573   -moz-margin-end: 10px;
 574   -moz-padding-start: 0;
 575 }
 576 */
 577 /* Category List */
 578
 579 xul|*#categories {
 580   background-color: var(--in-content-categorylist-background);
 581   padding-top: 4em;
 582   margin: 0;
 583   border-radius: 1em 0 0 0;
 584   border: none;
 585 }
 586
 587 xul|*.category {
 588   background-color: var(--in-content-category-background);
 589   color: var(--in-content-category-text);
 590   -moz-border-end-width: 0;
 591   -moz-padding-start: 15px;
 592   -moz-padding-end: 21px;
 593   min-height: 40px;
 594   transition: background-color 150ms;
 595 }
 596
 597 xul|*.category:hover {
 598   background-color: var(--in-content-category-background-hover);
 599   color: var(--in-content-category-text-selected);
 600 }
 601
 602 xul|*.category[selected] {
 603   background-color: var(--in-content-category-background-active);
 604   color: var(--in-content-category-text-selected);
 605 }
 606
 607 xul|*#categories[keyboard-navigation="true"]:-moz-focusring > xul|*.category[current] {
 608   border-top: var(--in-content-category-border-focus);
 609   border-bottom: var(--in-content-category-border-focus);
 610 }
 611
 612 *|*.category-name {
 613   line-height: 22px;
 614   font-size: 1.25rem;
 615   padding-bottom: 2px;
 616   -moz-padding-start: 9px;
 617   margin: 0;
 618   -moz-user-select: none;
 619 }
 620
 621 *|*.category-icon {
 622   width: 24px;
 623   height: 24px;
 624 }
 625
 626 /* header */
 627
 628 *|*.header {
 629 /*  -moz-margin-end: 4px; / add the 4px end-margin of other elements /
 630   border-bottom: 1px solid var(--in-content-header-border-color);
 631   margin-bottom: 15px;
 632   padding-bottom: 15px; */
 633 }
 634
 635 *|*.header-name {
 636   font-size: 2.5rem;
 637   font-weight: normal;
 638   line-height: 40px;
 639   margin: 0;
 640   -moz-user-select: none;
 641 }
 642
 643 /* File fields */
 644 /*
 645 xul|filefield {
 646   -moz-appearance: none;
 647   background-color: transparent;
 648   border: none;
 649   padding: 0;
 650 }
 651
 652 xul|*.fileFieldContentBox {
 653   background-color: transparent;
 654 }
 655
 656 xul|*.fileFieldIcon {
 657   -moz-margin-start: 10px;
 658   -moz-margin-end: 0;
 659 }
 660
 661 xul|*.fileFieldLabel {
 662   -moz-margin-start: -26px;
 663   -moz-padding-start: 36px;
 664 }
 665
 666 xul|textbox:-moz-locale-dir(rtl),
 667 xul|*.fileFieldLabel:-moz-locale-dir(rtl),
 668 xul|textbox + xul|button:-moz-locale-dir(ltr),
 669 xul|filefield + xul|button:-moz-locale-dir(ltr) {
 670   border-top-left-radius: 0;
 671   border-bottom-left-radius: 0;
 672 }
 673
 674 xul|textbox:-moz-locale-dir(ltr),
 675 xul|*.fileFieldLabel:-moz-locale-dir(ltr),
 676 xul|textbox + xul|button:-moz-locale-dir(rtl),
 677 xul|filefield + xul|button:-moz-locale-dir(rtl) {
 678   border-top-right-radius: 0;
 679   border-bottom-right-radius: 0;
 680 }
 681
 682 xul|textbox + xul|button,
 683 xul|filefield + xul|button {
 684   -moz-border-start: none;
 685 }
 686 */
 687 /* List boxes */
 688 /*
 689 xul|richlistbox,
 690 xul|listbox {
 691   -moz-appearance: none;
 692   -moz-margin-start: 0;
 693   background-color: var(--in-content-box-background);
 694   border: 1px solid var(--in-content-box-border-color);
 695   color: var(--in-content-text-color);
 696 }
 697
 698 xul|treechildren::-moz-tree-row,
 699 xul|listbox xul|listitem {
 700   padding: 0.3em;
 701   margin: 0;
 702   border: none;
 703   border-radius: 0;
 704   background-image: none;
 705 }
 706
 707 xul|treechildren::-moz-tree-row(hover),
 708 xul|listbox xul|listitem:hover {
 709   background-color: var(--in-content-item-hover);
 710 }
 711
 712 xul|treechildren::-moz-tree-row(selected),
 713 xul|listbox xul|listitem[selected="true"] {
 714   background-color: var(--in-content-item-selected);
 715   color: var(--in-content-selected-text);
 716 }
 717
 718 / This is the only way to increase the height of a tree row unfortunately /
 719 xul|treechildren::-moz-tree-row {
 720   min-height: 2em;
 721 }
 722
 723 / Color needs to be set on tree cell in order to be applied /
 724 xul|treechildren::-moz-tree-cell-text {
 725   color: #333;
 726 }
 727
 728 xul|treechildren::-moz-tree-cell-text(selected) {
 729   color: #fff;
 730 }
 731 */
 732 /* Trees */
 733 /*
 734 xul|tree {
 735   -moz-appearance: none;
 736   font-size: 1em;
 737   border: 1px solid var(--in-content-box-border-color);
 738   background-color: var(--in-content-box-background);
 739   margin: 0;
 740 }
 741
 742 xul|tree:-moz-focusring,
 743 xul|richlistbox:-moz-focusring {
 744   border: 1px dotted var(--in-content-border-focus);
 745 }
 746
 747 xul|listheader,
 748 xul|treecols {
 749   -moz-appearance: none;
 750   border: none;
 751   border-bottom: 1px solid var(--in-content-border-color);
 752   padding: 0;
 753 }
 754
 755 xul|treecol:not([hideheader="true"]),
 756 xul|treecolpicker {
 757   -moz-appearance: none;
 758   border: none;
 759   background-color: var(--in-content-box-background-hover);
 760   color: #808080;
 761   padding: 5px 10px;
 762 }
 763
 764 xul|treecol:not([hideheader="true"]):not([sortable="false"]):hover,
 765 xul|treecolpicker:hover {
 766   background-color: var(--in-content-box-background-active);
 767   color: var(--in-content-text-color);
 768 }
 769
 770 xul|treecol:not([hideheader="true"]):not(:first-child),
 771 xul|treecolpicker {
 772   -moz-border-start-width: 1px;
 773   -moz-border-start-style: solid;
 774   border-image: linear-gradient(transparent 0%, transparent 20%, #c1c1c1 20%, #c1c1c1 80%, transparent 80%, transparent 100%) 1 1;
 775 }
 776
 777 xul|treecol:not([hideheader="true"]) > xul|*.treecol-sortdirection[sortDirection] {
 778   list-style-image: url("chrome://global/skin/in-content/dropdown.svg#dropdown");
 779   width: 18px;
 780   height: 18px;
 781 }
 782
 783 xul|treecol:not([hideheader="true"]) > xul|*.treecol-sortdirection[sortDirection="ascending"] {
 784   transform: scaleY(-1);
 785 }
 786
 787 / This is the only way to increase the height of a tree row unfortunately /
 788 xul|treechildren::-moz-tree-row {
 789   min-height: 2em;
 790 }
 791
 792 / Color needs to be set on tree cell in order to be applied /
 793 xul|treechildren::-moz-tree-cell-text {
 794   color: var(--in-content-text-color);
 795 }
 796
 797 xul|treechildren::-moz-tree-cell-text(selected) {
 798   color: var(--in-content-selected-text);
 799 }
 800 */
 801 /* === END common.inc.css === */
 802 /*
 803 xul|caption {
 804   background-color: transparent;
 805 }
 806
 807 xul|button,
 808 html|button,
 809 xul|colorpicker[type="button"],
 810 xul|menulist {
 811   margin: 2px 4px;
 812 }
 813
 814 xul|menulist:not([editable="true"]) > xul|*.menulist-dropmarker {
 815   margin-top: 1px;
 816   margin-bottom: 1px;
 817 }
 818
 819 xul|checkbox {
 820   -moz-padding-start: 0;
 821 }
 822
 823 xul|radio {
 824   -moz-binding: url("chrome://global/content/bindings/radio.xml#radio");
 825   -moz-padding-start: 0;
 826 }
 827
 828 xul|*.radio-icon,
 829 xul|*.checkbox-icon {
 830   -moz-margin-end: 0;
 831 }
 832 */
 833 .text-link:-moz-focusring,
 834 .inline-link:-moz-focusring {
 835   /* Don't specify the outline-color, we should always use initial value. */
 836   outline: 1px dotted;
 837 }