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