second and final part of syncing both themes with toolkit windows theme changes in...
[themes.git] / EarlyBlue / global / in-content / common.css
CommitLineData
702d3d61
RK
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
ed351b91
RK
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;
ed351b91
RK
42 --in-content-disabled-text: #999999;
43}
44
d471380e 45html|html,
e6947267
RK
46xul|page,
47xul|window {
702d3d61
RK
48 font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
49 -moz-appearance: none;
ed351b91
RK
50 background-color: var(--in-content-page-background);
51 color: var(--in-content-page-color);
702d3d61
RK
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;
ed351b91 64 color: var(--in-content-text-color);
702d3d61
RK
65 margin: 0;
66 margin-bottom: .5em;
67}
68
e6947267
RK
69html|hr {
70 border-style: solid none none none;
ed351b91 71 border-color: var(--in-content-border-color);
e6947267
RK
72}
73
702d3d61
RK
74xul|caption {
75}
76
987dae1b
RK
77html|h2,
78xul|caption > xul|checkbox,
79xul|caption > xul|label {
80}
81
e6947267 82xul|caption > xul|checkbox,
702d3d61
RK
83xul|caption > xul|label {
84 margin-top: 0;
85 margin-bottom: 0;
86}
87
88*|*.main-content {
21c0144b 89 padding-top: 40px;
dae45075 90 padding-inline-end: 48px; /* orig is 44px to compensate the 4px margin of child elements */
21c0144b 91 padding-bottom: 48px;
dae45075 92 padding-inline-start: 48px;
702d3d61
RK
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;
e6947267 105 margin: 15px 0 0;
dae45075
RK
106 padding-inline-start: 0;
107 padding-inline-end: 0;
702d3d61
RK
108 font-size: 1.25rem;
109}
110
a9f6369d 111xul|groupbox xul|label:not(.menu-accel):not(.menu-text):not(.indent):not(.learnMore),
f0a62060 112xul|groupbox xul|description {
702d3d61 113 / !important needed to override toolkit !important rule /
dae45075
RK
114 margin-inline-start: 0 !important;
115 margin-inline-end: 0 !important;
702d3d61
RK
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;
441d0294 127 color: inherit;
702d3d61
RK
128}
129
130xul|tabs {
131 margin-bottom: 15px;
ed351b91
RK
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);
702d3d61
RK
135}
136
137xul|*.tabs-left,
138xul|*.tabs-right {
139 border-bottom: none;
140}
141
142xul|tab {
143 -moz-appearance: none;
144 margin-top: 0;
441d0294 145 padding: 4px 20px;
702d3d61 146 min-height: 44px;
ed351b91
RK
147 color: var(--in-content-tab-color);
148 background-color: var(--in-content-page-background);
702d3d61 149 border-width: 0;
d471380e
RK
150 / !important overrides tabbox.css RTL and visuallyselected rules /
151 border-radius: 0 !important;
702d3d61
RK
152 transition: background-color 50ms ease 0s;
153}
154
155xul|tab:hover {
ed351b91 156 background-color: var(--in-content-box-background-hover);
702d3d61
RK
157}
158
ed351b91
RK
159xul|tab[selected] {
160 background-color: var(--in-content-box-background-hover);
441d0294 161 padding-bottom: 0; / compensate the 4px border /
ed351b91 162 border-bottom: 4px solid var(--in-content-border-highlight);
702d3d61
RK
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;
ed351b91
RK
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 */
702d3d61
RK
178 font: inherit;
179}
180
181/* xul buttons and menulists */
182/*
183*|button,
dae45075 184html|select,
702d3d61
RK
185xul|colorpicker[type="button"],
186xul|menulist {
187 -moz-appearance: none;
d471380e 188 min-height: 30px;
ed351b91
RK
189 color: var(--in-content-text-color);
190 border: 1px solid var(--in-content-box-border-color);
702d3d61
RK
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;
ed351b91 196 background-color: var(--in-content-page-background);
702d3d61
RK
197}
198*/
199html|button:enabled:hover,
dae45075 200html|select:enabled:hover,
702d3d61
RK
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,
dae45075 207html|select:enabled:hover:active,
702d3d61
RK
208xul|button:not([disabled="true"]):hover:active,
209xul|colorpicker[type="button"]:not([disabled="true"]):hover:active,
210xul|menulist[open="true"]:not([disabled="true"]) {
ed351b91 211 border: 1px inset var(--in-content-box-border-color);
702d3d61
RK
212}
213
214html|button:disabled,
dae45075 215html|select:disabled,
702d3d61
RK
216xul|button[disabled="true"],
217xul|colorpicker[type="button"][disabled="true"],
218xul|menulist[disabled="true"] {
ed351b91
RK
219 border: 1px outset var(--in-content-box-border-color);
220 color: var(--in-content-disabled-text);
702d3d61
RK
221}
222/*
21c0144b 223*|button.primary {
ed351b91 224 background-color: var(--in-content-primary-button-background);
21c0144b 225 border-color: transparent;
ed351b91 226 color: var(--in-content-selected-text);
21c0144b
RK
227}
228
229html|button.primary:enabled:hover,
230xul|button.primary:not([disabled="true"]):hover {
ed351b91 231 background-color: var(--in-content-primary-button-background-hover);
21c0144b
RK
232}
233
234html|button.primary:enabled:hover:active,
235xul|button.primary:not([disabled="true"]):hover:active {
ed351b91 236 background-color: var(--in-content-primary-button-background-active);
21c0144b
RK
237}
238
702d3d61
RK
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
e6947267 250xul|menulist > xul|*.menulist-label-box > xul|*.menulist-icon[src] {
dae45075 251 margin-inline-end: 5px;
58036cb8
RK
252}
253
702d3d61
RK
254xul|button[type="menu"] > xul|*.button-box > xul|*.button-menu-dropmarker {
255 -moz-appearance: none;
256 margin: 1px 0;
dae45075 257 margin-inline-start: 10px;
702d3d61
RK
258 padding: 0;
259 width: 10px;
260 height: 16px;
261 border: none;
262 background-color: transparent;
441d0294 263 list-style-image: url("chrome://global/skin/in-content/dropdown.svg#dropdown");
702d3d61
RK
264}
265
266xul|*.help-button {
7729765c
RK
267 min-width: 16px;
268 margin-inline-end: 0;
21c0144b 269 border-width: 0;
702d3d61
RK
270 background-image: none;
271 box-shadow: none;
7729765c 272 list-style-image: url("chrome://global/skin/in-content/help-glyph.svg#help");
702d3d61
RK
273}
274
275xul|*.help-button:not([disabled="true"]):hover {
702d3d61 276 background-image: none;
7729765c
RK
277 / Override default button background /
278 background-color: transparent;
279 list-style-image: url("chrome://global/skin/in-content/help-glyph.svg#help-hover");
702d3d61 280}
702d3d61 281xul|*.help-button:not([disabled="true"]):hover:active {
702d3d61 282 background-image: none;
7729765c
RK
283 / Override default button background /
284 background-color: transparent;
285 list-style-image: url("chrome://global/skin/in-content/help-glyph.svg#help-pressed");
702d3d61
RK
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 {
7729765c
RK
297 width: 16px;
298 height: 16px;
702d3d61
RK
299}
300
301xul|*.help-button > xul|*.button-box > xul|*.button-text {
302 display: none;
303}
689d5552
RK
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}
702d3d61 316
689d5552
RK
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/*
702d3d61 325xul|*.spinbuttons-button {
d471380e 326 min-height: initial;
dae45075
RK
327 margin-inline-start: 10px !important;
328 margin-inline-end: 2px !important;
702d3d61
RK
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;
dae45075 363 margin-inline-end: 4px;
702d3d61
RK
364 padding: 0;
365 border: none;
366 background-color: transparent;
441d0294 367 list-style-image: url("chrome://global/skin/in-content/dropdown.svg#dropdown");
702d3d61
RK
368}
369
441d0294
RK
370xul|menulist:not([editable="true"]) > xul|*.menulist-dropmarker > xul|*.dropmarker-icon {
371 width: 18px;
372 height: 18px;
702d3d61
RK
373}
374
441d0294
RK
375xul|menulist[disabled="true"]:not([editable="true"]) > xul|*.menulist-dropmarker {
376 list-style-image: url("chrome://global/skin/in-content/dropdown.svg#dropdown-disabled")
702d3d61
RK
377}
378
379xul|menulist > xul|menupopup,
380xul|button[type="menu"] > xul|menupopup {
381 -moz-appearance: none;
ed351b91 382 border: 1px solid var(--in-content-box-border-color);
702d3d61 383 border-radius: 2px;
ed351b91 384 background-color: var(--in-content-box-background);
702d3d61
RK
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;
441d0294 392 font-size: 1rem;
ed351b91 393 color: var(--in-content-text-color);
441d0294
RK
394 padding-top: 0.2em;
395 padding-bottom: 0.2em;
dae45075
RK
396 padding-inline-start: 10px;
397 padding-inline-end: 30px;
702d3d61
RK
398}
399
f0a62060
RK
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"] {
ed351b91
RK
404 color: var(--in-content-text-color);
405 background-color: var(--in-content-item-hover);
702d3d61
RK
406}
407
f0a62060
RK
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"] {
ed351b91
RK
412 color: var(--in-content-selected-text);
413 background-color: var(--in-content-item-selected);
f0a62060
RK
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"] {
ed351b91 420 color: var(--in-content-box-border-color);
f0a62060
RK
421 / override the [_moz-menuactive="true"] background color from
422 global/menu.css /
423 background-color: transparent;
702d3d61
RK
424}
425
426xul|menulist > xul|menupopup xul|menuseparator,
427xul|button[type="menu"] > xul|menupopup xul|menuseparator {
428 -moz-appearance: none;
21c0144b 429 margin: 0;
702d3d61 430 padding: 0;
ed351b91 431 border-top: 1px solid var(--in-content-box-border-color);
702d3d61
RK
432 border-bottom: none;
433}
434*/
435/* textboxes */
436/*
d471380e
RK
437html|input[type="text"],
438html|textarea,
439xul|textbox {
702d3d61 440 -moz-appearance: none;
ed351b91 441 color: var(--in-content-text-color);
ed351b91 442 border: 1px solid var(--in-content-box-border-color);
702d3d61
RK
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;
ed351b91 448 background-color: var(--in-content-box-background);
702d3d61
RK
449}
450
d471380e
RK
451xul|textbox {
452 min-height: 30px;
453 padding-right: 10px;
454 padding-left: 10px;
455}
456
dae45075
RK
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
d471380e
RK
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,
702d3d61 474xul|textbox[focused] {
ed351b91 475 border-color: var(--in-content-border-focus);
702d3d61
RK
476}
477
d471380e
RK
478html|input[type="text"]:disabled,
479html|textarea:disabled,
702d3d61
RK
480xul|textbox[disabled="true"] {
481 opacity: 0.5;
482}
483*/
484/* Links */
485/*
486html|a,
dae45075 487.text-link {
ed351b91 488 color: var(--in-content-link-color);
702d3d61
RK
489 text-decoration: none;
490}
491
492html|a:hover,
dae45075 493.text-link:hover {
ed351b91 494 color: var(--in-content-link-color-hover);
702d3d61
RK
495 text-decoration: none;
496}
497
ed351b91
RK
498html|a:visited {
499 color: var(--in-content-link-color-visited);
500}
501
702d3d61 502html|a:hover:active,
dae45075 503.text-link:hover:active {
ed351b91 504 color: var(--in-content-link-color-active);
702d3d61
RK
505 text-decoration: none;
506}
507*/
508/* Checkboxes and radio buttons */
509/*
e6947267
RK
510/ Hide the actual checkbox /
511html|input[type="checkbox"] {
7729765c
RK
512 opacity: 0;
513 width: 0;
514 pointer-events: none;
e6947267
RK
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
702d3d61 529xul|checkbox {
dae45075 530 margin-inline-start: 0;
702d3d61
RK
531}
532
e6947267
RK
533xul|*.checkbox-check,
534html|input[type="checkbox"] + html|label:before {
702d3d61
RK
535 -moz-appearance: none;
536 width: 23px;
537 height: 23px;
538 border-radius: 2px;
ed351b91 539 border: 1px solid var(--in-content-box-border-color);
dae45075 540 margin-inline-end: 10px;
702d3d61 541 background-color: #f1f1f1;
21c0144b
RK
542 / !important needed to override toolkit checked !important rule /
543 background-image: linear-gradient(#fff, rgba(255,255,255,0.8)) !important;
702d3d61
RK
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
e6947267
RK
549xul|checkbox:not([disabled="true"]):hover > xul|*.checkbox-check,
550html|input[type="checkbox"]:not(:disabled) + html|label:hover:before {
ed351b91 551 border-color: var(--in-content-border-focus);
702d3d61
RK
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
e6947267
RK
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 {
702d3d61
RK
566 opacity: 0.5;
567}
568
569xul|*.checkbox-label-box {
dae45075
RK
570 margin-inline-start: -1px; / * negative margin for the transparent border * /
571 padding-inline-start: 0;
702d3d61
RK
572}
573
58036cb8
RK
574xul|richlistitem > xul|*.checkbox-check {
575 margin: 3px 6px;
576}
987dae1b
RK
577*/
578html|*.toggle-container-with-text {
579 display: flex;
580 align-items: center;
581}
582/*
da3c2755 583xul|radio {
dae45075 584 margin-inline-start: 0;
da3c2755
RK
585}
586
702d3d61
RK
587xul|*.radio-check {
588 -moz-appearance: none;
589 width: 23px;
590 height: 23px;
ed351b91 591 border: 1px solid var(--in-content-box-border-color);
702d3d61 592 border-radius: 50%;
dae45075 593 margin-inline-end: 10px;
702d3d61
RK
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 {
ed351b91 600 border-color: var(--in-content-border-focus);
702d3d61
RK
601}
602
603xul|*.radio-check[selected] {
21c0144b 604 list-style-image: url("chrome://global/skin/in-content/radio.svg#radio");
702d3d61
RK
605}
606
607xul|radio[disabled="true"] > xul|*.radio-check {
608 opacity: 0.5;
609}
610
611xul|*.radio-label-box {
dae45075
RK
612 margin-inline-start: -1px; / * negative margin for the transparent border * /
613 margin-inline-end: 10px;
614 padding-inline-start: 0;
702d3d61
RK
615}
616*/
617/* Category List */
f0a62060 618
d471380e 619*|*#categories {
702d3d61 620 -moz-appearance: none;
ed351b91 621 background-color: var(--in-content-category-background);
702d3d61
RK
622 padding-top: 39px;
623 margin: 0;
21c0144b 624 border-width: 0;
702d3d61
RK
625}
626
d471380e 627*|*.category {
702d3d61 628 -moz-appearance: none;
ed351b91 629 color: var(--in-content-category-text);
dae45075
RK
630 border-inline-end-width: 0;
631 padding-inline-start: 15px;
632 padding-inline-end: 21px;
702d3d61
RK
633 min-height: 40px;
634 transition: background-color 150ms;
635}
636
d471380e 637*|*.category:hover {
ed351b91 638 background-color: var(--in-content-category-background-hover);
702d3d61
RK
639}
640
7729765c
RK
641*|*.category[selected],
642*|*.category.selected {
ed351b91
RK
643 background-color: var(--in-content-category-background-active);
644 color: var(--in-content-category-text-selected);
dae45075
RK
645 padding-inline-start: 11px; /* compensate the 4px border */
646 border-inline-start: solid 4px var(--in-content-border-highlight);
702d3d61
RK
647}
648
d471380e 649*|*#categories[keyboard-navigation="true"]:-moz-focusring > xul|*.category[current] {
ed351b91
RK
650 border-top: var(--in-content-category-border-focus);
651 border-bottom: var(--in-content-category-border-focus);
702d3d61
RK
652}
653
654*|*.category-name {
655 line-height: 22px;
656 font-size: 1.25rem;
657 padding-bottom: 2px;
dae45075 658 padding-inline-start: 9px;
702d3d61 659 margin: 0;
e6947267 660 -moz-user-select: none;
702d3d61
RK
661}
662
663*|*.category-icon {
664 width: 24px;
665 height: 24px;
666}
f0a62060 667
702d3d61
RK
668/* header */
669/*
670*|*.header {
dae45075 671 margin-inline-end: 4px; / add the 4px end-margin of other elements /
ed351b91 672 border-bottom: 1px solid var(--in-content-header-border-color);
702d3d61
RK
673 margin-bottom: 15px;
674 padding-bottom: 15px;
7729765c 675 -moz-box-align: baseline;
702d3d61
RK
676}
677
678*|*.header-name {
679 font-size: 2.5rem;
680 font-weight: normal;
681 line-height: 40px;
682 margin: 0;
e6947267 683 -moz-user-select: none;
702d3d61
RK
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 {
dae45075
RK
700 margin-inline-start: 10px;
701 margin-inline-end: 0;
702d3d61
RK
702}
703
704xul|*.fileFieldLabel {
dae45075
RK
705 margin-inline-start: -26px;
706 padding-inline-start: 36px;
702d3d61
RK
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 {
dae45075 727 border-inline-start: none;
702d3d61
RK
728}
729*/
21c0144b
RK
730/* List boxes */
731/*
732xul|richlistbox,
733xul|listbox {
734 -moz-appearance: none;
dae45075 735 margin-inline-start: 0;
ed351b91
RK
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);
21c0144b
RK
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 {
ed351b91 752 background-color: var(--in-content-item-hover);
21c0144b
RK
753}
754
755xul|treechildren::-moz-tree-row(selected),
756xul|listbox xul|listitem[selected="true"] {
ed351b91
RK
757 background-color: var(--in-content-item-selected);
758 color: var(--in-content-selected-text);
21c0144b
RK
759}
760*/
761/* Trees */
762/*
763xul|tree {
764 -moz-appearance: none;
765 font-size: 1em;
ed351b91
RK
766 border: 1px solid var(--in-content-box-border-color);
767 background-color: var(--in-content-box-background);
768 margin: 0;
21c0144b
RK
769}
770
e6947267
RK
771xul|tree:-moz-focusring,
772xul|richlistbox:-moz-focusring {
ed351b91 773 border: 1px dotted var(--in-content-border-focus);
e6947267
RK
774}
775
21c0144b
RK
776xul|listheader,
777xul|treecols {
778 -moz-appearance: none;
779 border: none;
ed351b91 780 border-bottom: 1px solid var(--in-content-box-border-color);
21c0144b
RK
781 padding: 0;
782}
783
7729765c
RK
784.autocomplete-tree > xul|treecols {
785 border-bottom: none !important;
786}
787
21c0144b
RK
788xul|treecol:not([hideheader="true"]),
789xul|treecolpicker {
790 -moz-appearance: none;
791 border: none;
ed351b91 792 background-color: var(--in-content-box-background-hover);
21c0144b
RK
793 color: #808080;
794 padding: 5px 10px;
795}
796
e6947267 797xul|treecol:not([hideheader="true"]):not([sortable="false"]):hover,
21c0144b 798xul|treecolpicker:hover {
ed351b91
RK
799 background-color: var(--in-content-box-background-active);
800 color: var(--in-content-text-color);
21c0144b
RK
801}
802
803xul|treecol:not([hideheader="true"]):not(:first-child),
804xul|treecolpicker {
dae45075
RK
805 border-inline-start-width: 1px;
806 border-inline-start-style: solid;
21c0144b
RK
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] {
e6947267
RK
811 list-style-image: url("chrome://global/skin/in-content/dropdown.svg#dropdown");
812 width: 18px;
813 height: 18px;
21c0144b
RK
814}
815
e6947267 816xul|treecol:not([hideheader="true"]) > xul|*.treecol-sortdirection[sortDirection="ascending"] {
21c0144b
RK
817 transform: scaleY(-1);
818}
819
21c0144b
RK
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 {
ed351b91 827 color: var(--in-content-text-color);
21c0144b
RK
828}
829
830xul|treechildren::-moz-tree-cell-text(selected) {
ed351b91 831 color: var(--in-content-selected-text);
21c0144b
RK
832}
833*/
702d3d61
RK
834/* === END common.inc.css === */
835/*
836xul|caption {
837 background-color: transparent;
838}
839
840xul|button,
e6947267 841html|button,
702d3d61
RK
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 {
dae45075 853 padding-inline-start: 0;
702d3d61
RK
854}
855
856xul|radio {
857 -moz-binding: url("chrome://global/content/bindings/radio.xml#radio");
dae45075 858 padding-inline-start: 0;
702d3d61
RK
859}
860
861xul|*.radio-icon,
862xul|*.checkbox-icon {
dae45075 863 margin-inline-end: 0;
702d3d61
RK
864}
865
dae45075 866.text-link:-moz-focusring {
702d3d61
RK
867 border: 1px dotted -moz-DialogText;
868}
7729765c 869*/