LCARStrek/global/in-content/common.css

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