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