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