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