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