projects / themes.git / blame_incremental
? search:
summary | shortlog | log | commit | commitdiff | tree
blob | blame (non-incremental) | history | HEAD
second and final part of syncing both themes with toolkit windows theme changes in...
[themes.git] / EarlyBlue / 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: #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
45html|html,
46xul|page,
47xul|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
54html|body {
55 font-size: 15px;
56 font-weight: normal;
57 margin: 0;
58}
59
60html|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
69html|hr {
70 border-style: solid none none none;
71 border-color: var(--in-content-border-color);
72}
73
74xul|caption {
75}
76
77html|h2,
78xul|caption > xul|checkbox,
79xul|caption > xul|label {
80}
81
82xul|caption > xul|checkbox,
83xul|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
96xul|prefpane > xul|*.content-box {
97 overflow: visible;
98}
99
100/* groupboxes */
101/*
102xul|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
111xul|groupbox xul|label:not(.menu-accel):not(.menu-text):not(.indent):not(.learnMore),
112xul|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/*
120xul|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
130xul|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
137xul|*.tabs-left,
138xul|*.tabs-right {
139 border-bottom: none;
140}
141
142xul|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
155xul|tab:hover {
156 background-color: var(--in-content-box-background-hover);
157}
158
159xul|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
165xul|*.tab-text {
166 font-size: 1.3rem;
167 line-height: 22px;
168}
169*/
170/* html buttons */
171
172html|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,
184html|select,
185xul|colorpicker[type="button"],
186xul|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*/
199html|button:enabled:hover,
200html|select:enabled:hover,
201xul|button:not([disabled="true"]):hover,
202xul|colorpicker[type="button"]:not([disabled="true"]):hover,
203xul|menulist:not([disabled="true"]):hover {
204}
205
206html|button:enabled:hover:active,
207html|select:enabled:hover:active,
208xul|button:not([disabled="true"]):hover:active,
209xul|colorpicker[type="button"]:not([disabled="true"]):hover:active,
210xul|menulist[open="true"]:not([disabled="true"]) {
211 border: 1px inset var(--in-content-box-border-color);
212}
213
214html|button:disabled,
215html|select:disabled,
216xul|button[disabled="true"],
217xul|colorpicker[type="button"][disabled="true"],
218xul|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
229html|button.primary:enabled:hover,
230xul|button.primary:not([disabled="true"]):hover {
231 background-color: var(--in-content-primary-button-background-hover);
232}
233
234html|button.primary:enabled:hover:active,
235xul|button.primary:not([disabled="true"]):hover:active {
236 background-color: var(--in-content-primary-button-background-active);
237}
238
239xul|colorpicker[type="button"] {
240 padding: 6px;
241 width: 50px;
242}
243
244xul|button > xul|*.button-box,
245xul|menulist > xul|*.menulist-label-box {
246 padding-right: 10px !important;
247 padding-left: 10px !important;
248}
249
250xul|menulist > xul|*.menulist-label-box > xul|*.menulist-icon[src] {
251 margin-inline-end: 5px;
252}
253
254xul|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
266xul|*.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
275xul|*.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}
281xul|*.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
288xul|*.close-icon > xul|*.button-box,
289xul|*.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
296xul|*.help-button > xul|*.button-box > xul|*.button-icon {
297 width: 16px;
298 height: 16px;
299}
300
301xul|*.help-button > xul|*.button-box > xul|*.button-text {
302 display: none;
303}
304*/
305html|*.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
317html|*.help-button:hover {
318 background-image: url("chrome://global/skin/in-content/help-glyph.svg#help-hover");
319}
320
321html|*.help-button:hover:active {
322 background-image: url("chrome://global/skin/in-content/help-glyph.svg#help-pressed");
323}
324/*
325xul|*.spinbuttons-button {
326 min-height: initial;
327 margin-inline-start: 10px !important;
328 margin-inline-end: 2px !important;
329}
330
331xul|*.spinbuttons-up {
332 margin-top: 2px !important;
333 border-radius: 1px 1px 0 0;
334}
335
336xul|*.spinbuttons-down {
337 margin-bottom: 2px !important;
338 border-radius: 0 0 1px 1px;
339}
340
341xul|*.spinbuttons-button > xul|*.button-box {
342 padding: 1px 5px 2px !important;
343}
344
345xul|*.spinbuttons-up > xul|*.button-box > xul|*.button-icon {
346 list-style-image: url("chrome://global/skin/arrow/arrow-up.gif");
347}
348
349xul|*.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
353xul|*.spinbuttons-down > xul|*.button-box > xul|*.button-icon {
354 list-style-image: url("chrome://global/skin/arrow/arrow-dn.gif");
355}
356
357xul|*.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
361xul|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
370xul|menulist:not([editable="true"]) > xul|*.menulist-dropmarker > xul|*.dropmarker-icon {
371 width: 18px;
372 height: 18px;
373}
374
375xul|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
379xul|menulist > xul|menupopup,
380xul|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
387xul|menulist > xul|menupopup xul|menu,
388xul|menulist > xul|menupopup xul|menuitem,
389xul|button[type="menu"] > xul|menupopup xul|menu,
390xul|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
400xul|menulist > xul|menupopup > xul|menu:not([disabled="true"])[_moz-menuactive="true"],
401xul|menulist > xul|menupopup > xul|menuitem:not([disabled="true"])[_moz-menuactive="true"],
402xul|button[type="menu"] > xul|menupopup > xul|menu:not([disabled="true"])[_moz-menuactive="true"],
403xul|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
408xul|menulist > xul|menupopup > xul|menu:not([disabled="true"])[selected="true"],
409xul|menulist > xul|menupopup > xul|menuitem:not([disabled="true"])[selected="true"],
410xul|button[type="menu"] > xul|menupopup > xul|menu:not([disabled="true"])[selected="true"],
411xul|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
416xul|menulist > xul|menupopup > xul|menu[disabled="true"],
417xul|menulist > xul|menupopup > xul|menuitem[disabled="true"],
418xul|button[type="menu"] > xul|menupopup > xul|menu[disabled="true"],
419xul|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
426xul|menulist > xul|menupopup xul|menuseparator,
427xul|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/*
437html|input[type="text"],
438html|textarea,
439xul|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
451xul|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. /
459xul|textbox.tree-input {
460 min-height: unset;
461 padding-right: unset;
462 padding-left: unset;
463}
464
465html|input[type="text"],
466html|textarea {
467 font-family: inherit;
468 font-size: inherit;
469 padding: 5px 10px;
470}
471
472html|input[type="text"]:focus,
473html|textarea:focus,
474xul|textbox[focused] {
475 border-color: var(--in-content-border-focus);
476}
477
478html|input[type="text"]:disabled,
479html|textarea:disabled,
480xul|textbox[disabled="true"] {
481 opacity: 0.5;
482}
483*/
484/* Links */
485/*
486html|a,
487.text-link {
488 color: var(--in-content-link-color);
489 text-decoration: none;
490}
491
492html|a:hover,
493.text-link:hover {
494 color: var(--in-content-link-color-hover);
495 text-decoration: none;
496}
497
498html|a:visited {
499 color: var(--in-content-link-color-visited);
500}
501
502html|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 /
511html|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 /
519html|input[type="checkbox"] + html|label:before {
520 display: inline-block;
521 content: "";
522 vertical-align: middle;
523}
524
525html|input[type="checkbox"] + html|label {
526 line-height: 0px;
527}
528
529xul|checkbox {
530 margin-inline-start: 0;
531}
532
533xul|*.checkbox-check,
534html|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
549xul|checkbox:not([disabled="true"]):hover > xul|*.checkbox-check,
550html|input[type="checkbox"]:not(:disabled) + html|label:hover:before {
551 border-color: var(--in-content-border-focus);
552}
553
554xul|*.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
560html|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
564xul|checkbox[disabled="true"] > xul|*.checkbox-check,
565html|input[type="checkbox"]:disabled + html|label {
566 opacity: 0.5;
567}
568
569xul|*.checkbox-label-box {
570 margin-inline-start: -1px; / * negative margin for the transparent border * /
571 padding-inline-start: 0;
572}
573
574xul|richlistitem > xul|*.checkbox-check {
575 margin: 3px 6px;
576}
577*/
578html|*.toggle-container-with-text {
579 display: flex;
580 align-items: center;
581}
582/*
583xul|radio {
584 margin-inline-start: 0;
585}
586
587xul|*.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
599xul|radio:not([disabled="true"]):hover > xul|*.radio-check {
600 border-color: var(--in-content-border-focus);
601}
602
603xul|*.radio-check[selected] {
604 list-style-image: url("chrome://global/skin/in-content/radio.svg#radio");
605}
606
607xul|radio[disabled="true"] > xul|*.radio-check {
608 opacity: 0.5;
609}
610
611xul|*.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/*
688xul|filefield {
689 -moz-appearance: none;
690 background-color: transparent;
691 border: none;
692 padding: 0;
693}
694
695xul|*.fileFieldContentBox {
696 background-color: transparent;
697}
698
699xul|*.fileFieldIcon {
700 margin-inline-start: 10px;
701 margin-inline-end: 0;
702}
703
704xul|*.fileFieldLabel {
705 margin-inline-start: -26px;
706 padding-inline-start: 36px;
707}
708
709xul|textbox:-moz-locale-dir(rtl),
710xul|*.fileFieldLabel:-moz-locale-dir(rtl),
711xul|textbox + xul|button:-moz-locale-dir(ltr),
712xul|filefield + xul|button:-moz-locale-dir(ltr) {
713 border-top-left-radius: 0;
714 border-bottom-left-radius: 0;
715}
716
717xul|textbox:-moz-locale-dir(ltr),
718xul|*.fileFieldLabel:-moz-locale-dir(ltr),
719xul|textbox + xul|button:-moz-locale-dir(rtl),
720xul|filefield + xul|button:-moz-locale-dir(rtl) {
721 border-top-right-radius: 0;
722 border-bottom-right-radius: 0;
723}
724
725xul|textbox + xul|button,
726xul|filefield + xul|button {
727 border-inline-start: none;
728}
729*/
730/* List boxes */
731/*
732xul|richlistbox,
733xul|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
741xul|treechildren::-moz-tree-row,
742xul|listbox xul|listitem {
743 padding: 0.3em;
744 margin: 0;
745 border: none;
746 border-radius: 0;
747 background-image: none;
748}
749
750xul|treechildren::-moz-tree-row(hover),
751xul|listbox xul|listitem:hover {
752 background-color: var(--in-content-item-hover);
753}
754
755xul|treechildren::-moz-tree-row(selected),
756xul|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/*
763xul|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
771xul|tree:-moz-focusring,
772xul|richlistbox:-moz-focusring {
773 border: 1px dotted var(--in-content-border-focus);
774}
775
776xul|listheader,
777xul|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
788xul|treecol:not([hideheader="true"]),
789xul|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
797xul|treecol:not([hideheader="true"]):not([sortable="false"]):hover,
798xul|treecolpicker:hover {
799 background-color: var(--in-content-box-background-active);
800 color: var(--in-content-text-color);
801}
802
803xul|treecol:not([hideheader="true"]):not(:first-child),
804xul|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
810xul|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
816xul|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 /
821xul|treechildren::-moz-tree-row {
822 min-height: 2em;
823}
824
825/ Color needs to be set on tree cell in order to be applied /
826xul|treechildren::-moz-tree-cell-text {
827 color: var(--in-content-text-color);
828}
829
830xul|treechildren::-moz-tree-cell-text(selected) {
831 color: var(--in-content-selected-text);
832}
833*/
834/* === END common.inc.css === */
835/*
836xul|caption {
837 background-color: transparent;
838}
839
840xul|button,
841html|button,
842xul|colorpicker[type="button"],
843xul|menulist {
844 margin: 2px 4px;
845}
846
847xul|menulist:not([editable="true"]) > xul|*.menulist-dropmarker {
848 margin-top: 1px;
849 margin-bottom: 1px;
850}
851
852xul|checkbox {
853 padding-inline-start: 0;
854}
855
856xul|radio {
857 -moz-binding: url("chrome://global/content/bindings/radio.xml#radio");
858 padding-inline-start: 0;
859}
860
861xul|*.radio-icon,
862xul|*.checkbox-icon {
863 margin-inline-end: 0;
864}
865
866.text-link:-moz-focusring {
867 border: 1px dotted -moz-DialogText;
868}
869*/
KaiRo's SeaMonkey themes