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-help-button-background: #ffcb00;
  47   ---in-content-help-button-background-hover: #f4c200;
  48   ---in-content-help-button-background-active: #eaba00;
  49   --in-content-disabled-text: #8050B0;
  50 }
  51
  52 @-moz-document url("about:privatebrowsing") {
  53   #bar {
  54     background-color: #6000CF !important;
  55     color: #FFCF00 !important;
  56   }
  57
  58   #tpEnabled {
  59     background-color: #008484 !important;
  60     color: #000000 !important;
  61   }
  62
  63   #tpDisabled {
  64     background-color: #FF0000 !important;
  65     color: #000000 !important;
  66   }
  67
  68   #trackingProtectionSection {
  69     border-color: #A09090 !important;
  70   }
  71 }
  72
  73 html|html,
  74 xul|page,
  75 xul|window {
  76   font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
  77   -moz-appearance: none;
  78   background-color: var(--in-content-page-background);
  79   color: var(--in-content-page-color);
  80 }
  81
  82 html|body {
  83   font-size: 15px;
  84   font-weight: normal;
  85   margin: 0;
  86 }
  87
  88 html|h1 {
  89   font-size: 2.5em;
  90   font-weight: lighter;
  91   line-height: 1.2;
  92   color: var(--in-content-text-color);
  93   margin: 0;
  94   margin-bottom: .5em;
  95 }
  96
  97 html|hr {
  98   border-style: solid none none none;
  99   border-color: var(--in-content-border-color);
 100 }
 101
 102 xul|caption {
 103 }
 104
 105 xul|caption > xul|checkbox,
 106 xul|caption > xul|label {
 107   margin-top: 0;
 108   margin-bottom: 0;
 109 }
 110
 111 *|*.main-content {
 112   padding-top: 40px;
 113   -moz-padding-end: 48px; /* orig is 44px to compensate the 4px margin of child elements */
 114   padding-bottom: 48px;
 115   -moz-padding-start: 48px;
 116   overflow: auto;
 117 }
 118
 119 xul|prefpane > xul|*.content-box {
 120   overflow: visible;
 121 }
 122
 123 /* groupboxes */
 124 /*
 125 xul|groupbox {
 126   -moz-appearance: none;
 127   border: none;
 128   margin: 15px 0 0;
 129   -moz-padding-start: 0;
 130   -moz-padding-end: 0;
 131   font-size: 1.25rem;
 132 }
 133
 134 xul|groupbox xul|label,
 135 xul|groupbox xul|description {
 136   / !important needed to override toolkit !important rule /
 137   -moz-margin-start: 0 !important;
 138   -moz-margin-end: 0 !important;
 139 }
 140 */
 141 /* tabpanels and tabs */
 142 /*
 143 xul|tabpanels {
 144   -moz-appearance: none;
 145   font-size: 1.25rem;
 146   line-height: 22px;
 147   border: none;
 148   padding: 0;
 149   background-color: transparent;
 150   color: inherit;
 151 }
 152
 153 xul|tabs {
 154   margin-bottom: 15px;
 155   border-top: 1px solid var(--in-content-box-border-color);
 156   border-bottom: 1px solid var(--in-content-box-border-color);
 157   background-color: var(--in-content-page-background);
 158 }
 159
 160 xul|*.tabs-left,
 161 xul|*.tabs-right {
 162   border-bottom: none;
 163 }
 164
 165 xul|tab {
 166   -moz-appearance: none;
 167   margin-top: 0;
 168   padding: 4px 20px;
 169   min-height: 44px;
 170   color: var(--in-content-tab-color);
 171   background-color: var(--in-content-page-background);
 172   border-width: 0;
 173   / !important overrides tabbox.css RTL and visuallyselected rules /
 174   border-radius: 0 !important;
 175   transition: background-color 50ms ease 0s;
 176 }
 177
 178 xul|tab:hover {
 179   background-color: var(--in-content-box-background-hover);
 180 }
 181
 182 xul|tab[selected] {
 183   background-color: var(--in-content-box-background-hover);
 184   padding-bottom: 0; / compensate the 4px border /
 185   border-bottom: 4px solid var(--in-content-border-highlight);
 186 }
 187
 188 xul|*.tab-text {
 189   font-size: 1.3rem;
 190   line-height: 22px;
 191 }
 192 */
 193 /* html buttons */
 194
 195 html|button {
 196   border-radius: 300px;
 197   border: none;
 198   background-color: var(--in-content-button-background);
 199   color: var(--in-content-selected-text);
 200   /* override forms.css */
 201   font: inherit;
 202 }
 203
 204 /* xul buttons and menulists */
 205 /*
 206 *|button,
 207 xul|colorpicker[type="button"],
 208 xul|menulist {
 209   -moz-appearance: none;
 210   min-height: 30px;
 211   color: var(--in-content-text-color);
 212   border: 1px solid var(--in-content-box-border-color);
 213   -moz-border-top-colors: none !important;
 214   -moz-border-right-colors: none !important;
 215   -moz-border-bottom-colors: none !important;
 216   -moz-border-left-colors: none !important;
 217   border-radius: 2px;
 218   background-color: var(--in-content-page-background);
 219 }
 220 */
 221 html|button:enabled:hover,
 222 xul|button:not([disabled="true"]):hover,
 223 xul|colorpicker[type="button"]:not([disabled="true"]):hover,
 224 xul|menulist:not([disabled="true"]):hover {
 225   background-color: var(--in-content-box-background-hover);
 226   color: var(--in-content-selected-text);
 227 }
 228
 229 html|button: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 xul|button[disabled="true"],
 239 xul|colorpicker[type="button"][disabled="true"],
 240 xul|menulist[disabled="true"] {
 241   cursor: not-allowed;
 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   -moz-margin-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   -moz-margin-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: 30px;
 291   border-radius: 2px;
 292   border-width: 0;
 293   background-color: #ffcb00;
 294   background-image: none;
 295   box-shadow: none;
 296 */
 297   list-style-image: url("chrome://global/skin/in-content/help-glyph.svg");
 298 }
 299 /*
 300 xul|*.help-button:not([disabled="true"]):hover {
 301   background-color: #f4c200;
 302   background-image: none;
 303 }
 304
 305 xul|*.help-button:not([disabled="true"]):hover:active {
 306   background-color: #eaba00;
 307   background-image: none;
 308 }
 309
 310 xul|*.close-icon > xul|*.button-box,
 311 xul|*.help-button > xul|*.button-box {
 312   padding-top: 0;
 313   padding-bottom: 0;
 314   padding-right: 0 !important;
 315   padding-left: 0 !important;
 316 }
 317 */
 318 xul|*.help-button > xul|*.button-box > xul|*.button-icon {
 319   width: 18px;
 320   height: 18px;
 321 }
 322
 323 xul|*.help-button > xul|*.button-box > xul|*.button-text {
 324   display: none;
 325 }
 326 /*
 327 xul|*.spinbuttons-button {
 328   min-height: initial;
 329   -moz-margin-start: 10px !important;
 330   -moz-margin-end: 2px !important;
 331 }
 332
 333 xul|*.spinbuttons-up {
 334   margin-top: 2px !important;
 335   border-radius: 1px 1px 0 0;
 336 }
 337
 338 xul|*.spinbuttons-down  {
 339   margin-bottom: 2px !important;
 340   border-radius: 0 0 1px 1px;
 341 }
 342
 343 xul|*.spinbuttons-button > xul|*.button-box {
 344   padding: 1px 5px 2px !important;
 345 }
 346
 347 xul|*.spinbuttons-up > xul|*.button-box > xul|*.button-icon {
 348   list-style-image: url("chrome://global/skin/arrow/arrow-up.gif");
 349 }
 350
 351 xul|*.spinbuttons-up[disabled="true"] > xul|*.button-box > xul|*.button-icon {
 352   list-style-image: url("chrome://global/skin/arrow/arrow-up-dis.gif");
 353 }
 354
 355 xul|*.spinbuttons-down > xul|*.button-box > xul|*.button-icon {
 356   list-style-image: url("chrome://global/skin/arrow/arrow-dn.gif");
 357 }
 358
 359 xul|*.spinbuttons-down[disabled="true"] > xul|*.button-box > xul|*.button-icon {
 360   list-style-image: url("chrome://global/skin/arrow/arrow-dn-dis.gif");
 361 }
 362
 363 xul|menulist:not([editable="true"]) > xul|*.menulist-dropmarker {
 364   -moz-appearance: none;
 365   -moz-margin-end: 4px;
 366   padding: 0;
 367   border: none;
 368   background-color: transparent;
 369   list-style-image: url("chrome://global/skin/in-content/dropdown.svg#dropdown");
 370 }
 371
 372 xul|menulist:not([editable="true"]) > xul|*.menulist-dropmarker > xul|*.dropmarker-icon {
 373   width: 18px;
 374   height: 18px;
 375 }
 376
 377 xul|menulist[disabled="true"]:not([editable="true"]) > xul|*.menulist-dropmarker {
 378   list-style-image: url("chrome://global/skin/in-content/dropdown.svg#dropdown-disabled")
 379 }
 380
 381 xul|menulist > xul|menupopup,
 382 xul|button[type="menu"] > xul|menupopup {
 383   -moz-appearance: none;
 384   border: 1px solid var(--in-content-box-border-color);
 385   border-radius: 2px;
 386   background-color: var(--in-content-box-background);
 387 }
 388
 389 xul|menulist > xul|menupopup xul|menu,
 390 xul|menulist > xul|menupopup xul|menuitem,
 391 xul|button[type="menu"] > xul|menupopup xul|menu,
 392 xul|button[type="menu"] > xul|menupopup xul|menuitem {
 393   -moz-appearance: none;
 394   font-size: 1rem;
 395   color: var(--in-content-text-color);
 396   padding-top: 0.2em;
 397   padding-bottom: 0.2em;
 398   -moz-padding-start: 10px;
 399   -moz-padding-end: 30px;
 400 }
 401
 402 xul|menulist > xul|menupopup > xul|menu:not([disabled="true"])[_moz-menuactive="true"],
 403 xul|menulist > xul|menupopup > xul|menuitem:not([disabled="true"])[_moz-menuactive="true"],
 404 xul|button[type="menu"] > xul|menupopup > xul|menu:not([disabled="true"])[_moz-menuactive="true"],
 405 xul|button[type="menu"] > xul|menupopup > xul|menuitem:not([disabled="true"])[_moz-menuactive="true"] {
 406   color: var(--in-content-text-color);
 407   background-color: var(--in-content-item-hover);
 408 }
 409
 410 xul|menulist > xul|menupopup > xul|menu:not([disabled="true"])[selected="true"],
 411 xul|menulist > xul|menupopup > xul|menuitem:not([disabled="true"])[selected="true"],
 412 xul|button[type="menu"] > xul|menupopup > xul|menu:not([disabled="true"])[selected="true"],
 413 xul|button[type="menu"] > xul|menupopup > xul|menuitem:not([disabled="true"])[selected="true"] {
 414   color: var(--in-content-selected-text);
 415   background-color: var(--in-content-item-selected);
 416 }
 417
 418 xul|menulist > xul|menupopup > xul|menu[disabled="true"],
 419 xul|menulist > xul|menupopup > xul|menuitem[disabled="true"],
 420 xul|button[type="menu"] > xul|menupopup > xul|menu[disabled="true"],
 421 xul|button[type="menu"] > xul|menupopup > xul|menuitem[disabled="true"] {
 422   color: #999;
 423   / override the [_moz-menuactive="true"] background color from
 424      global/menu.css /
 425   background-color: transparent;
 426 }
 427
 428 xul|menulist > xul|menupopup xul|menuseparator,
 429 xul|button[type="menu"] > xul|menupopup xul|menuseparator {
 430   -moz-appearance: none;
 431   margin: 0;
 432   padding: 0;
 433   border-top: 1px solid var(--in-content-box-border-color);
 434   border-bottom: none;
 435 }
 436 */
 437 /* textboxes */
 438 /*
 439 html|input[type="text"],
 440 html|textarea,
 441 xul|textbox {
 442   -moz-appearance: none;
 443   color: var(--in-content-text-color);
 444   border: 1px solid var(--in-content-box-border-color);
 445   -moz-border-top-colors: none !important;
 446   -moz-border-right-colors: none !important;
 447   -moz-border-bottom-colors: none !important;
 448   -moz-border-left-colors: none !important;
 449   border-radius: 2px;
 450   background-color: var(--in-content-box-background);
 451 }
 452
 453 xul|textbox {
 454   min-height: 30px;
 455   padding-right: 10px;
 456   padding-left: 10px;
 457 }
 458
 459 html|input[type="text"],
 460 html|textarea {
 461   font-family: inherit;
 462   font-size: inherit;
 463   padding: 5px 10px;
 464 }
 465
 466 html|input[type="text"]:focus,
 467 html|textarea:focus,
 468 xul|textbox[focused] {
 469   border-color: var(--in-content-border-focus);
 470 }
 471
 472 html|input[type="text"]:disabled,
 473 html|textarea:disabled,
 474 xul|textbox[disabled="true"] {
 475   opacity: 0.5;
 476 }
 477 */
 478 /* Links */
 479
 480 html|a,
 481 .text-link,
 482 .inline-link {
 483   color: var(--in-content-link-color);
 484   text-decoration: none;
 485 }
 486
 487 html|a:hover,
 488 .text-link:hover,
 489 .inline-link:hover {
 490   color: var(--in-content-link-color-hover);
 491   text-decoration: underline;
 492 }
 493
 494 html|a:visited {
 495   color: var(--in-content-link-color-visited);
 496 }
 497
 498 html|a:hover:active,
 499 .text-link:hover:active,
 500 .inline-link:hover:active {
 501   color: var(--in-content-link-color-active);
 502   text-decoration: underline;
 503 }
 504
 505 /* Checkboxes and radio buttons */
 506 /* Hide the actual checkbox */
 507 html|input[type="checkbox"] {
 508   visibility: hidden;
 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   background-color: var(--in-content-category-background-active);
 642   color: var(--in-content-category-text-selected);
 643 }
 644
 645 *|*#categories[keyboard-navigation="true"]:-moz-focusring > xul|*.category[current] {
 646   border-top: var(--in-content-category-border-focus);
 647   border-bottom: var(--in-content-category-border-focus);
 648 }
 649
 650 *|*.category-name {
 651   line-height: 22px;
 652   font-size: 1.25rem;
 653   padding-bottom: 2px;
 654   -moz-padding-start: 9px;
 655   margin: 0;
 656   -moz-user-select: none;
 657 }
 658
 659 *|*.category-icon {
 660   width: 24px;
 661   height: 24px;
 662 }
 663
 664 /* header */
 665
 666 *|*.header {
 667 /*  -moz-margin-end: 4px; / add the 4px end-margin of other elements /
 668   border-bottom: 1px solid var(--in-content-header-border-color);
 669   margin-bottom: 15px;
 670   padding-bottom: 15px; */
 671 }
 672
 673 *|*.header-name {
 674   font-size: 2.5rem;
 675   font-weight: normal;
 676   line-height: 40px;
 677   margin: 0;
 678   -moz-user-select: none;
 679 }
 680
 681 /* File fields */
 682 /*
 683 xul|filefield {
 684   -moz-appearance: none;
 685   background-color: transparent;
 686   border: none;
 687   padding: 0;
 688 }
 689
 690 xul|*.fileFieldContentBox {
 691   background-color: transparent;
 692 }
 693
 694 xul|*.fileFieldIcon {
 695   -moz-margin-start: 10px;
 696   -moz-margin-end: 0;
 697 }
 698
 699 xul|*.fileFieldLabel {
 700   -moz-margin-start: -26px;
 701   -moz-padding-start: 36px;
 702 }
 703
 704 xul|textbox:-moz-locale-dir(rtl),
 705 xul|*.fileFieldLabel:-moz-locale-dir(rtl),
 706 xul|textbox + xul|button:-moz-locale-dir(ltr),
 707 xul|filefield + xul|button:-moz-locale-dir(ltr) {
 708   border-top-left-radius: 0;
 709   border-bottom-left-radius: 0;
 710 }
 711
 712 xul|textbox:-moz-locale-dir(ltr),
 713 xul|*.fileFieldLabel:-moz-locale-dir(ltr),
 714 xul|textbox + xul|button:-moz-locale-dir(rtl),
 715 xul|filefield + xul|button:-moz-locale-dir(rtl) {
 716   border-top-right-radius: 0;
 717   border-bottom-right-radius: 0;
 718 }
 719
 720 xul|textbox + xul|button,
 721 xul|filefield + xul|button {
 722   -moz-border-start: none;
 723 }
 724 */
 725 /* List boxes */
 726 /*
 727 xul|richlistbox,
 728 xul|listbox {
 729   -moz-appearance: none;
 730   -moz-margin-start: 0;
 731   background-color: var(--in-content-box-background);
 732   border: 1px solid var(--in-content-box-border-color);
 733   color: var(--in-content-text-color);
 734 }
 735
 736 xul|treechildren::-moz-tree-row,
 737 xul|listbox xul|listitem {
 738   padding: 0.3em;
 739   margin: 0;
 740   border: none;
 741   border-radius: 0;
 742   background-image: none;
 743 }
 744
 745 xul|treechildren::-moz-tree-row(hover),
 746 xul|listbox xul|listitem:hover {
 747   background-color: var(--in-content-item-hover);
 748 }
 749
 750 xul|treechildren::-moz-tree-row(selected),
 751 xul|listbox xul|listitem[selected="true"] {
 752   background-color: var(--in-content-item-selected);
 753   color: var(--in-content-selected-text);
 754 }
 755
 756 / This is the only way to increase the height of a tree row unfortunately /
 757 xul|treechildren::-moz-tree-row {
 758   min-height: 2em;
 759 }
 760
 761 / Color needs to be set on tree cell in order to be applied /
 762 xul|treechildren::-moz-tree-cell-text {
 763   color: #333;
 764 }
 765
 766 xul|treechildren::-moz-tree-cell-text(selected) {
 767   color: #fff;
 768 }
 769 */
 770 /* Trees */
 771 /*
 772 xul|tree {
 773   -moz-appearance: none;
 774   font-size: 1em;
 775   border: 1px solid var(--in-content-box-border-color);
 776   background-color: var(--in-content-box-background);
 777   margin: 0;
 778 }
 779
 780 xul|tree:-moz-focusring,
 781 xul|richlistbox:-moz-focusring {
 782   border: 1px dotted var(--in-content-border-focus);
 783 }
 784
 785 xul|listheader,
 786 xul|treecols {
 787   -moz-appearance: none;
 788   border: none;
 789   border-bottom: 1px solid var(--in-content-border-color);
 790   padding: 0;
 791 }
 792
 793 xul|treecol:not([hideheader="true"]),
 794 xul|treecolpicker {
 795   -moz-appearance: none;
 796   border: none;
 797   background-color: var(--in-content-box-background-hover);
 798   color: #808080;
 799   padding: 5px 10px;
 800 }
 801
 802 xul|treecol:not([hideheader="true"]):not([sortable="false"]):hover,
 803 xul|treecolpicker:hover {
 804   background-color: var(--in-content-box-background-active);
 805   color: var(--in-content-text-color);
 806 }
 807
 808 xul|treecol:not([hideheader="true"]):not(:first-child),
 809 xul|treecolpicker {
 810   -moz-border-start-width: 1px;
 811   -moz-border-start-style: solid;
 812   border-image: linear-gradient(transparent 0%, transparent 20%, #c1c1c1 20%, #c1c1c1 80%, transparent 80%, transparent 100%) 1 1;
 813 }
 814
 815 xul|treecol:not([hideheader="true"]) > xul|*.treecol-sortdirection[sortDirection] {
 816   list-style-image: url("chrome://global/skin/in-content/dropdown.svg#dropdown");
 817   width: 18px;
 818   height: 18px;
 819 }
 820
 821 xul|treecol:not([hideheader="true"]) > xul|*.treecol-sortdirection[sortDirection="ascending"] {
 822   transform: scaleY(-1);
 823 }
 824
 825 / This is the only way to increase the height of a tree row unfortunately /
 826 xul|treechildren::-moz-tree-row {
 827   min-height: 2em;
 828 }
 829
 830 / Color needs to be set on tree cell in order to be applied /
 831 xul|treechildren::-moz-tree-cell-text {
 832   color: var(--in-content-text-color);
 833 }
 834
 835 xul|treechildren::-moz-tree-cell-text(selected) {
 836   color: var(--in-content-selected-text);
 837 }
 838 */
 839 /* === END common.inc.css === */
 840 /*
 841 xul|caption {
 842   background-color: transparent;
 843 }
 844
 845 xul|button,
 846 html|button,
 847 xul|colorpicker[type="button"],
 848 xul|menulist {
 849   margin: 2px 4px;
 850 }
 851
 852 xul|menulist:not([editable="true"]) > xul|*.menulist-dropmarker {
 853   margin-top: 1px;
 854   margin-bottom: 1px;
 855 }
 856
 857 xul|checkbox {
 858   -moz-padding-start: 0;
 859 }
 860
 861 xul|radio {
 862   -moz-binding: url("chrome://global/content/bindings/radio.xml#radio");
 863   -moz-padding-start: 0;
 864 }
 865
 866 xul|*.radio-icon,
 867 xul|*.checkbox-icon {
 868   -moz-margin-end: 0;
 869 }
 870 */
 871 .text-link:-moz-focusring,
 872 .inline-link:-moz-focusring {
 873   /* Don't specify the outline-color, we should always use initial value. */
 874   outline: 1px dotted;
 875 }