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