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