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