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   height: 30px;
 444   color: var(--in-content-text-color);
 445   line-height: 20px;
 446   padding-right: 10px;
 447   padding-left: 10px;
 448   border: 1px solid var(--in-content-box-border-color);
 449   -moz-border-top-colors: none !important;
 450   -moz-border-right-colors: none !important;
 451   -moz-border-bottom-colors: none !important;
 452   -moz-border-left-colors: none !important;
 453   border-radius: 2px;
 454   background-color: var(--in-content-box-background);
 455 }
 456
 457 xul|textbox {
 458   min-height: 30px;
 459   padding-right: 10px;
 460   padding-left: 10px;
 461 }
 462
 463 html|input[type="text"],
 464 html|textarea {
 465   font-family: inherit;
 466   font-size: inherit;
 467   padding: 5px 10px;
 468 }
 469
 470 html|input[type="text"]:focus,
 471 html|textarea:focus,
 472 xul|textbox[focused] {
 473   border-color: var(--in-content-border-focus);
 474 }
 475
 476 html|input[type="text"]:disabled,
 477 html|textarea:disabled,
 478 xul|textbox[disabled="true"] {
 479   opacity: 0.5;
 480 }
 481 */
 482 /* Links */
 483
 484 html|a,
 485 .text-link,
 486 .inline-link {
 487   color: var(--in-content-link-color);
 488   text-decoration: none;
 489 }
 490
 491 html|a:hover,
 492 .text-link:hover,
 493 .inline-link:hover {
 494   color: var(--in-content-link-color-hover);
 495   text-decoration: underline;
 496 }
 497
 498 html|a:visited {
 499   color: var(--in-content-link-color-visited);
 500 }
 501
 502 html|a:hover:active,
 503 .text-link:hover:active,
 504 .inline-link:hover:active {
 505   color: var(--in-content-link-color-active);
 506   text-decoration: underline;
 507 }
 508
 509 /* Checkboxes and radio buttons */
 510 /* Hide the actual checkbox */
 511 html|input[type="checkbox"] {
 512   visibility: hidden;
 513   position: absolute;
 514 }
 515
 516 /* Create a box to style as the checkbox */
 517 html|input[type="checkbox"] + html|label:before {
 518   display: inline-block;
 519   content: "";
 520   vertical-align: middle;
 521 }
 522
 523 html|input[type="checkbox"] + html|label {
 524   line-height: 0px;
 525 }
 526 /*
 527 xul|checkbox {
 528   -moz-margin-start: 0;
 529 }
 530 */
 531 /* xul|*.checkbox-check, */
 532 html|input[type="checkbox"] + html|label:before {
 533   -moz-appearance: none;
 534   width: 23px;
 535   height: 23px;
 536   border-radius: 0;
 537   border: 1px solid var(--in-content-box-border-color);
 538   -moz-margin-end: 10px;
 539   background-color: var(--in-content-box-background);
 540   background-position: center center;
 541   background-repeat: no-repeat;
 542 }
 543
 544 /* xul|checkbox:not([disabled="true"]):hover > xul|*.checkbox-check, */
 545 html|input[type="checkbox"]:not(:disabled) + html|label:hover:before {
 546   border-color: var(--in-content-border-focus);
 547 }
 548 html|input[type="checkbox"]:not(:disabled) + html|label:hover {
 549   color: var(--in-content-link-color-hover);
 550 }
 551 /*
 552 xul|*.checkbox-check[checked] {
 553   background-image: url("chrome://global/skin/in-content/check.png"),
 554                     / * !important needed to override toolkit !important rule * /
 555                     linear-gradient(#fff, rgba(255,255,255,0.8)) !important;
 556 }
 557 */
 558 html|input[type="checkbox"]:checked + html|label:before {
 559   background-image: url("chrome://global/skin/in-content/check.svg#check");
 560 }
 561
 562 /*xul|checkbox[checked][disabled="true"] > xul|*.checkbox-check,*/
 563 html|input[type="checkbox"]:checked:disabled + html|label:before {
 564   background-image: url("chrome://global/skin/in-content/check.svg#check-disabled");
 565 }
 566 html|input[type="checkbox"]:not(:disabled) + html|label:hover:before {
 567   background-image: url("chrome://global/skin/in-content/check.svg#check-hover");
 568 }
 569 html|input[type="checkbox"]:disabled + html|label:before {
 570   border-color: var(--in-content-border-disabled);
 571 }
 572 html|input[type="checkbox"]:disabled + html|label {
 573   color: var(--in-content-disabled-text);
 574 }
 575 /*
 576 xul|*.checkbox-label-box {
 577   -moz-margin-start: -1px; / * negative margin for the transparent border * /
 578   -moz-padding-start: 0;
 579 }
 580
 581 xul|richlistitem > xul|*.checkbox-check {
 582   margin: 3px 6px;
 583 }
 584
 585 xul|radio {
 586   -moz-margin-start: 0;
 587 }
 588
 589 xul|*.radio-check {
 590   -moz-appearance: none;
 591   width: 23px;
 592   height: 23px;
 593   border: 1px solid var(--in-content-box-border-color);
 594   border-radius: 50%;
 595   -moz-margin-end: 10px;
 596   background-color: #f1f1f1;
 597   background-image: linear-gradient(#fff, rgba(255,255,255,0.80));
 598   box-shadow: 0 1px 1px 0 #fff, inset 0 2px 0 0 rgba(0,0,0,0.03);
 599 }
 600
 601 xul|radio:not([disabled="true"]):hover > xul|*.radio-check {
 602   border-color: var(--in-content-border-focus);
 603 }
 604
 605 xul|*.radio-check[selected] {
 606   list-style-image: url("chrome://global/skin/in-content/radio.svg#radio");
 607 }
 608
 609 xul|radio[disabled="true"] > xul|*.radio-check {
 610   opacity: 0.5;
 611 }
 612
 613 xul|*.radio-label-box {
 614   -moz-margin-start: -1px; / * negative margin for the transparent border *  /
 615   -moz-margin-end: 10px;
 616   -moz-padding-start: 0;
 617 }
 618 */
 619 /* Category List */
 620
 621 *|*#categories {
 622   background-color: var(--in-content-categorylist-background);
 623   padding-top: 4em;
 624   margin: 0;
 625   border-radius: 1em 0 0 0;
 626   border: none;
 627 }
 628
 629 *|*.category {
 630   background-color: var(--in-content-category-background);
 631   color: var(--in-content-category-text);
 632   -moz-border-end-width: 0;
 633   -moz-padding-start: 15px;
 634   -moz-padding-end: 21px;
 635   min-height: 40px;
 636   transition: background-color 150ms;
 637 }
 638
 639 *|*.category:hover {
 640   background-color: var(--in-content-category-background-hover);
 641   color: var(--in-content-category-text-selected);
 642 }
 643
 644 *|*.category[selected] {
 645   background-color: var(--in-content-category-background-active);
 646   color: var(--in-content-category-text-selected);
 647 }
 648
 649 *|*#categories[keyboard-navigation="true"]:-moz-focusring > xul|*.category[current] {
 650   border-top: var(--in-content-category-border-focus);
 651   border-bottom: var(--in-content-category-border-focus);
 652 }
 653
 654 *|*.category-name {
 655   line-height: 22px;
 656   font-size: 1.25rem;
 657   padding-bottom: 2px;
 658   -moz-padding-start: 9px;
 659   margin: 0;
 660   -moz-user-select: none;
 661 }
 662
 663 *|*.category-icon {
 664   width: 24px;
 665   height: 24px;
 666 }
 667
 668 /* header */
 669
 670 *|*.header {
 671 /*  -moz-margin-end: 4px; / add the 4px end-margin of other elements /
 672   border-bottom: 1px solid var(--in-content-header-border-color);
 673   margin-bottom: 15px;
 674   padding-bottom: 15px; */
 675 }
 676
 677 *|*.header-name {
 678   font-size: 2.5rem;
 679   font-weight: normal;
 680   line-height: 40px;
 681   margin: 0;
 682   -moz-user-select: none;
 683 }
 684
 685 /* File fields */
 686 /*
 687 xul|filefield {
 688   -moz-appearance: none;
 689   background-color: transparent;
 690   border: none;
 691   padding: 0;
 692 }
 693
 694 xul|*.fileFieldContentBox {
 695   background-color: transparent;
 696 }
 697
 698 xul|*.fileFieldIcon {
 699   -moz-margin-start: 10px;
 700   -moz-margin-end: 0;
 701 }
 702
 703 xul|*.fileFieldLabel {
 704   -moz-margin-start: -26px;
 705   -moz-padding-start: 36px;
 706 }
 707
 708 xul|textbox:-moz-locale-dir(rtl),
 709 xul|*.fileFieldLabel:-moz-locale-dir(rtl),
 710 xul|textbox + xul|button:-moz-locale-dir(ltr),
 711 xul|filefield + xul|button:-moz-locale-dir(ltr) {
 712   border-top-left-radius: 0;
 713   border-bottom-left-radius: 0;
 714 }
 715
 716 xul|textbox:-moz-locale-dir(ltr),
 717 xul|*.fileFieldLabel:-moz-locale-dir(ltr),
 718 xul|textbox + xul|button:-moz-locale-dir(rtl),
 719 xul|filefield + xul|button:-moz-locale-dir(rtl) {
 720   border-top-right-radius: 0;
 721   border-bottom-right-radius: 0;
 722 }
 723
 724 xul|textbox + xul|button,
 725 xul|filefield + xul|button {
 726   -moz-border-start: none;
 727 }
 728 */
 729 /* List boxes */
 730 /*
 731 xul|richlistbox,
 732 xul|listbox {
 733   -moz-appearance: none;
 734   -moz-margin-start: 0;
 735   background-color: var(--in-content-box-background);
 736   border: 1px solid var(--in-content-box-border-color);
 737   color: var(--in-content-text-color);
 738 }
 739
 740 xul|treechildren::-moz-tree-row,
 741 xul|listbox xul|listitem {
 742   padding: 0.3em;
 743   margin: 0;
 744   border: none;
 745   border-radius: 0;
 746   background-image: none;
 747 }
 748
 749 xul|treechildren::-moz-tree-row(hover),
 750 xul|listbox xul|listitem:hover {
 751   background-color: var(--in-content-item-hover);
 752 }
 753
 754 xul|treechildren::-moz-tree-row(selected),
 755 xul|listbox xul|listitem[selected="true"] {
 756   background-color: var(--in-content-item-selected);
 757   color: var(--in-content-selected-text);
 758 }
 759
 760 / This is the only way to increase the height of a tree row unfortunately /
 761 xul|treechildren::-moz-tree-row {
 762   min-height: 2em;
 763 }
 764
 765 / Color needs to be set on tree cell in order to be applied /
 766 xul|treechildren::-moz-tree-cell-text {
 767   color: #333;
 768 }
 769
 770 xul|treechildren::-moz-tree-cell-text(selected) {
 771   color: #fff;
 772 }
 773 */
 774 /* Trees */
 775 /*
 776 xul|tree {
 777   -moz-appearance: none;
 778   font-size: 1em;
 779   border: 1px solid var(--in-content-box-border-color);
 780   background-color: var(--in-content-box-background);
 781   margin: 0;
 782 }
 783
 784 xul|tree:-moz-focusring,
 785 xul|richlistbox:-moz-focusring {
 786   border: 1px dotted var(--in-content-border-focus);
 787 }
 788
 789 xul|listheader,
 790 xul|treecols {
 791   -moz-appearance: none;
 792   border: none;
 793   border-bottom: 1px solid var(--in-content-border-color);
 794   padding: 0;
 795 }
 796
 797 xul|treecol:not([hideheader="true"]),
 798 xul|treecolpicker {
 799   -moz-appearance: none;
 800   border: none;
 801   background-color: var(--in-content-box-background-hover);
 802   color: #808080;
 803   padding: 5px 10px;
 804 }
 805
 806 xul|treecol:not([hideheader="true"]):not([sortable="false"]):hover,
 807 xul|treecolpicker:hover {
 808   background-color: var(--in-content-box-background-active);
 809   color: var(--in-content-text-color);
 810 }
 811
 812 xul|treecol:not([hideheader="true"]):not(:first-child),
 813 xul|treecolpicker {
 814   -moz-border-start-width: 1px;
 815   -moz-border-start-style: solid;
 816   border-image: linear-gradient(transparent 0%, transparent 20%, #c1c1c1 20%, #c1c1c1 80%, transparent 80%, transparent 100%) 1 1;
 817 }
 818
 819 xul|treecol:not([hideheader="true"]) > xul|*.treecol-sortdirection[sortDirection] {
 820   list-style-image: url("chrome://global/skin/in-content/dropdown.svg#dropdown");
 821   width: 18px;
 822   height: 18px;
 823 }
 824
 825 xul|treecol:not([hideheader="true"]) > xul|*.treecol-sortdirection[sortDirection="ascending"] {
 826   transform: scaleY(-1);
 827 }
 828
 829 / This is the only way to increase the height of a tree row unfortunately /
 830 xul|treechildren::-moz-tree-row {
 831   min-height: 2em;
 832 }
 833
 834 / Color needs to be set on tree cell in order to be applied /
 835 xul|treechildren::-moz-tree-cell-text {
 836   color: var(--in-content-text-color);
 837 }
 838
 839 xul|treechildren::-moz-tree-cell-text(selected) {
 840   color: var(--in-content-selected-text);
 841 }
 842 */
 843 /* === END common.inc.css === */
 844 /*
 845 xul|caption {
 846   background-color: transparent;
 847 }
 848
 849 xul|button,
 850 html|button,
 851 xul|colorpicker[type="button"],
 852 xul|menulist {
 853   margin: 2px 4px;
 854 }
 855
 856 xul|menulist:not([editable="true"]) > xul|*.menulist-dropmarker {
 857   margin-top: 1px;
 858   margin-bottom: 1px;
 859 }
 860
 861 xul|checkbox {
 862   -moz-padding-start: 0;
 863 }
 864
 865 xul|radio {
 866   -moz-binding: url("chrome://global/content/bindings/radio.xml#radio");
 867   -moz-padding-start: 0;
 868 }
 869
 870 xul|*.radio-icon,
 871 xul|*.checkbox-icon {
 872   -moz-margin-end: 0;
 873 }
 874 */
 875 .text-link:-moz-focusring,
 876 .inline-link:-moz-focusring {
 877   /* Don't specify the outline-color, we should always use initial value. */
 878   outline: 1px dotted;
 879 }