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