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