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