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