second part of syncing LCARStrek with Firefox 52 browser windows theme changes
[themes.git] / LCARStrek / global / in-content / common.css
CommitLineData
9168a62c
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";
1988bb88 9
ed351b91
RK
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;
1cf9b082 15 --in-content-header-border-color: #A09090;
ed351b91
RK
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;
ed351b91
RK
46 --in-content-disabled-text: #8050B0;
47}
b1dfcf32
RK
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
d471380e 70html|html,
e6947267
RK
71xul|page,
72xul|window {
1988bb88 73 font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
9168a62c 74 -moz-appearance: none;
ed351b91
RK
75 background-color: var(--in-content-page-background);
76 color: var(--in-content-page-color);
9168a62c
RK
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;
ed351b91 89 color: var(--in-content-text-color);
9168a62c
RK
90 margin: 0;
91 margin-bottom: .5em;
92}
93
e6947267
RK
94html|hr {
95 border-style: solid none none none;
ed351b91 96 border-color: var(--in-content-border-color);
e6947267
RK
97}
98
9168a62c 99xul|caption {
9168a62c
RK
100}
101
987dae1b
RK
102html|h2,
103xul|caption > xul|checkbox,
104xul|caption > xul|label {
105}
106
e6947267 107xul|caption > xul|checkbox,
9168a62c 108xul|caption > xul|label {
1988bb88
RK
109 margin-top: 0;
110 margin-bottom: 0;
9168a62c
RK
111}
112
113*|*.main-content {
21c0144b 114 padding-top: 40px;
dae45075 115 padding-inline-end: 48px; /* orig is 44px to compensate the 4px margin of child elements */
21c0144b 116 padding-bottom: 48px;
dae45075 117 padding-inline-start: 48px;
9168a62c
RK
118 overflow: auto;
119}
120
121xul|prefpane > xul|*.content-box {
122 overflow: visible;
123}
1988bb88 124
9168a62c
RK
125/* groupboxes */
126/*
127xul|groupbox {
128 -moz-appearance: none;
129 border: none;
e6947267 130 margin: 15px 0 0;
dae45075
RK
131 padding-inline-start: 0;
132 padding-inline-end: 0;
9168a62c
RK
133 font-size: 1.25rem;
134}
135
dae45075 136xul|groupbox xul|label:not(.menu-accel):not(.menu-text):not(.indent),
5d891ecf 137xul|groupbox xul|description {
9168a62c 138 / !important needed to override toolkit !important rule /
dae45075
RK
139 margin-inline-start: 0 !important;
140 margin-inline-end: 0 !important;
9168a62c
RK
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;
441d0294 152 color: inherit;
9168a62c
RK
153}
154
155xul|tabs {
156 margin-bottom: 15px;
ed351b91
RK
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);
9168a62c
RK
160}
161
162xul|*.tabs-left,
163xul|*.tabs-right {
164 border-bottom: none;
165}
166
167xul|tab {
168 -moz-appearance: none;
169 margin-top: 0;
441d0294 170 padding: 4px 20px;
9168a62c 171 min-height: 44px;
ed351b91
RK
172 color: var(--in-content-tab-color);
173 background-color: var(--in-content-page-background);
9168a62c 174 border-width: 0;
d471380e
RK
175 / !important overrides tabbox.css RTL and visuallyselected rules /
176 border-radius: 0 !important;
9168a62c
RK
177 transition: background-color 50ms ease 0s;
178}
179
180xul|tab:hover {
ed351b91 181 background-color: var(--in-content-box-background-hover);
9168a62c
RK
182}
183
ed351b91
RK
184xul|tab[selected] {
185 background-color: var(--in-content-box-background-hover);
441d0294 186 padding-bottom: 0; / compensate the 4px border /
ed351b91 187 border-bottom: 4px solid var(--in-content-border-highlight);
9168a62c
RK
188}
189
190xul|*.tab-text {
191 font-size: 1.3rem;
192 line-height: 22px;
193}
194*/
195/* html buttons */
1988bb88 196
9168a62c 197html|button {
1988bb88
RK
198 border-radius: 300px;
199 border: none;
ed351b91
RK
200 background-color: var(--in-content-button-background);
201 color: var(--in-content-selected-text);
9e756f9d 202 /* override forms.css */
9168a62c
RK
203 font: inherit;
204}
1988bb88 205
9168a62c
RK
206/* xul buttons and menulists */
207/*
208*|button,
dae45075 209html|select,
9168a62c
RK
210xul|colorpicker[type="button"],
211xul|menulist {
212 -moz-appearance: none;
d471380e 213 min-height: 30px;
ed351b91
RK
214 color: var(--in-content-text-color);
215 border: 1px solid var(--in-content-box-border-color);
9168a62c
RK
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;
ed351b91 221 background-color: var(--in-content-page-background);
9168a62c 222}
1988bb88 223*/
9168a62c 224html|button:enabled:hover,
dae45075 225html|select:enabled:hover,
9168a62c
RK
226xul|button:not([disabled="true"]):hover,
227xul|colorpicker[type="button"]:not([disabled="true"]):hover,
228xul|menulist:not([disabled="true"]):hover {
ed351b91
RK
229 background-color: var(--in-content-box-background-hover);
230 color: var(--in-content-selected-text);
9168a62c
RK
231}
232
233html|button:enabled:hover:active,
dae45075 234html|select:enabled:hover:active,
9168a62c
RK
235xul|button:not([disabled="true"]):hover:active,
236xul|colorpicker[type="button"]:not([disabled="true"]):hover:active,
237xul|menulist[open="true"]:not([disabled="true"]) {
ed351b91
RK
238 background-color: var(--in-content-box-background-active);
239 color: var(--in-content-selected-text);
9168a62c
RK
240}
241
242html|button:disabled,
dae45075 243html|select:disabled,
9168a62c
RK
244xul|button[disabled="true"],
245xul|colorpicker[type="button"][disabled="true"],
246xul|menulist[disabled="true"] {
ed351b91
RK
247 background-color: var(--in-content-box-background-disabled);
248 color: var(--in-content-selected-text);
9168a62c 249}
21c0144b
RK
250
251*|button.primary {
ed351b91 252 background-color: var(--in-content-primary-button-background);
21c0144b
RK
253}
254
255html|button.primary:enabled:hover,
256xul|button.primary:not([disabled="true"]):hover {
ed351b91 257 background-color: var(--in-content-primary-button-background-hover);
21c0144b
RK
258}
259
260html|button.primary:enabled:hover:active,
261xul|button.primary:not([disabled="true"]):hover:active {
ed351b91 262 background-color: var(--in-content-primary-button-background-active);
21c0144b 263}
1988bb88 264/*
9168a62c
RK
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
e6947267 276xul|menulist > xul|*.menulist-label-box > xul|*.menulist-icon[src] {
dae45075 277 margin-inline-end: 5px;
58036cb8
RK
278}
279
9168a62c
RK
280xul|button[type="menu"] > xul|*.button-box > xul|*.button-menu-dropmarker {
281 -moz-appearance: none;
282 margin: 1px 0;
dae45075 283 margin-inline-start: 10px;
9168a62c
RK
284 padding: 0;
285 width: 10px;
286 height: 16px;
287 border: none;
288 background-color: transparent;
441d0294 289 list-style-image: url("chrome://global/skin/in-content/dropdown.svg#dropdown");
9168a62c
RK
290}
291
441d0294 292*/
9168a62c 293xul|*.help-button {
441d0294 294/*
7729765c
RK
295 min-width: 16px;
296 margin-inline-end: 0;
21c0144b 297 border-width: 0;
9168a62c
RK
298 background-image: none;
299 box-shadow: none;
441d0294
RK
300*/
301 list-style-image: url("chrome://global/skin/in-content/help-glyph.svg");
9168a62c 302}
441d0294 303/*
9168a62c 304xul|*.help-button:not([disabled="true"]):hover {
9168a62c 305 background-image: none;
7729765c
RK
306 / Override default button background /
307 background-color: transparent;
308 list-style-image: url("chrome://global/skin/in-content/help-glyph.svg#help-hover");
9168a62c 309}
9168a62c 310xul|*.help-button:not([disabled="true"]):hover:active {
9168a62c 311 background-image: none;
7729765c
RK
312 / Override default button background /
313 background-color: transparent;
314 list-style-image: url("chrome://global/skin/in-content/help-glyph.svg#help-pressed");
9168a62c
RK
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}
a21f2959 324*/
9168a62c 325xul|*.help-button > xul|*.button-box > xul|*.button-icon {
7729765c
RK
326 width: 16px;
327 height: 16px;
9168a62c
RK
328}
329
330xul|*.help-button > xul|*.button-box > xul|*.button-text {
331 display: none;
332}
689d5552
RK
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}
a21f2959 353/*
9168a62c 354xul|*.spinbuttons-button {
d471380e 355 min-height: initial;
dae45075
RK
356 margin-inline-start: 10px !important;
357 margin-inline-end: 2px !important;
9168a62c
RK
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;
dae45075 392 margin-inline-end: 4px;
9168a62c
RK
393 padding: 0;
394 border: none;
395 background-color: transparent;
441d0294 396 list-style-image: url("chrome://global/skin/in-content/dropdown.svg#dropdown");
9168a62c
RK
397}
398
441d0294
RK
399xul|menulist:not([editable="true"]) > xul|*.menulist-dropmarker > xul|*.dropmarker-icon {
400 width: 18px;
401 height: 18px;
9168a62c
RK
402}
403
441d0294
RK
404xul|menulist[disabled="true"]:not([editable="true"]) > xul|*.menulist-dropmarker {
405 list-style-image: url("chrome://global/skin/in-content/dropdown.svg#dropdown-disabled")
9168a62c
RK
406}
407
408xul|menulist > xul|menupopup,
409xul|button[type="menu"] > xul|menupopup {
410 -moz-appearance: none;
ed351b91 411 border: 1px solid var(--in-content-box-border-color);
9168a62c 412 border-radius: 2px;
ed351b91 413 background-color: var(--in-content-box-background);
9168a62c
RK
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;
441d0294 421 font-size: 1rem;
ed351b91 422 color: var(--in-content-text-color);
441d0294
RK
423 padding-top: 0.2em;
424 padding-bottom: 0.2em;
dae45075
RK
425 padding-inline-start: 10px;
426 padding-inline-end: 30px;
9168a62c
RK
427}
428
5d891ecf
RK
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"] {
ed351b91
RK
433 color: var(--in-content-text-color);
434 background-color: var(--in-content-item-hover);
9168a62c
RK
435}
436
5d891ecf
RK
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"] {
ed351b91
RK
441 color: var(--in-content-selected-text);
442 background-color: var(--in-content-item-selected);
5d891ecf
RK
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;
9168a62c
RK
453}
454
455xul|menulist > xul|menupopup xul|menuseparator,
456xul|button[type="menu"] > xul|menupopup xul|menuseparator {
457 -moz-appearance: none;
21c0144b 458 margin: 0;
9168a62c 459 padding: 0;
ed351b91 460 border-top: 1px solid var(--in-content-box-border-color);
9168a62c
RK
461 border-bottom: none;
462}
463*/
464/* textboxes */
465/*
d471380e
RK
466html|input[type="text"],
467html|textarea,
468xul|textbox {
9168a62c 469 -moz-appearance: none;
ed351b91 470 color: var(--in-content-text-color);
ed351b91 471 border: 1px solid var(--in-content-box-border-color);
9168a62c
RK
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;
ed351b91 477 background-color: var(--in-content-box-background);
9168a62c
RK
478}
479
d471380e
RK
480xul|textbox {
481 min-height: 30px;
482 padding-right: 10px;
483 padding-left: 10px;
484}
485
dae45075
RK
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
d471380e
RK
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,
9168a62c 503xul|textbox[focused] {
ed351b91 504 border-color: var(--in-content-border-focus);
9168a62c
RK
505}
506
d471380e
RK
507html|input[type="text"]:disabled,
508html|textarea:disabled,
9168a62c
RK
509xul|textbox[disabled="true"] {
510 opacity: 0.5;
511}
512*/
513/* Links */
cac2a998 514
9168a62c 515html|a,
dae45075 516.text-link {
ed351b91 517 color: var(--in-content-link-color);
9168a62c
RK
518 text-decoration: none;
519}
520
521html|a:hover,
dae45075 522.text-link:hover {
ed351b91 523 color: var(--in-content-link-color-hover);
cac2a998 524 text-decoration: underline;
9168a62c
RK
525}
526
ed351b91
RK
527html|a:visited {
528 color: var(--in-content-link-color-visited);
529}
530
9168a62c 531html|a:hover:active,
dae45075 532.text-link:hover:active {
ed351b91 533 color: var(--in-content-link-color-active);
cac2a998 534 text-decoration: underline;
9168a62c 535}
cac2a998 536
9168a62c 537/* Checkboxes and radio buttons */
e0a15019 538/* Hide the actual checkbox */
e6947267 539html|input[type="checkbox"] {
7729765c
RK
540 opacity: 0;
541 width: 0;
542 pointer-events: none;
e6947267
RK
543 position: absolute;
544}
545
e0a15019 546/* Create a box to style as the checkbox */
1e9e1791 547html|input[type="checkbox"] + html|label::before {
e6947267
RK
548 display: inline-block;
549 content: "";
550 vertical-align: middle;
551}
552
553html|input[type="checkbox"] + html|label {
554 line-height: 0px;
555}
e0a15019 556/*
9168a62c 557xul|checkbox {
dae45075 558 margin-inline-start: 0;
9168a62c 559}
e0a15019
RK
560*/
561/* xul|*.checkbox-check, */
1e9e1791 562html|input[type="checkbox"] + html|label::before {
9168a62c
RK
563 -moz-appearance: none;
564 width: 23px;
565 height: 23px;
e0a15019 566 border-radius: 0;
ed351b91 567 border: 1px solid var(--in-content-box-border-color);
dae45075 568 margin-inline-end: 10px;
ed351b91 569 background-color: var(--in-content-box-background);
9168a62c
RK
570 background-position: center center;
571 background-repeat: no-repeat;
9168a62c
RK
572}
573
e0a15019 574/* xul|checkbox:not([disabled="true"]):hover > xul|*.checkbox-check, */
1e9e1791 575html|input[type="checkbox"]:not(:disabled) + html|label:hover::before {
ed351b91 576 border-color: var(--in-content-border-focus);
9168a62c 577}
e0a15019 578html|input[type="checkbox"]:not(:disabled) + html|label:hover {
ed351b91 579 color: var(--in-content-link-color-hover);
e0a15019
RK
580}
581/*
9168a62c
RK
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}
e0a15019 587*/
1e9e1791 588html|input[type="checkbox"]:checked + html|label::before {
e0a15019 589 background-image: url("chrome://global/skin/in-content/check.svg#check");
e6947267
RK
590}
591
e0a15019 592/*xul|checkbox[checked][disabled="true"] > xul|*.checkbox-check,*/
1e9e1791 593html|input[type="checkbox"]:checked:disabled + html|label::before {
e0a15019
RK
594 background-image: url("chrome://global/skin/in-content/check.svg#check-disabled");
595}
1e9e1791 596html|input[type="checkbox"]:checked:not(:disabled) + html|label:hover::before {
e0a15019
RK
597 background-image: url("chrome://global/skin/in-content/check.svg#check-hover");
598}
1e9e1791 599html|input[type="checkbox"]:disabled + html|label::before {
ed351b91 600 border-color: var(--in-content-border-disabled);
e0a15019 601}
e6947267 602html|input[type="checkbox"]:disabled + html|label {
ed351b91 603 color: var(--in-content-disabled-text);
9168a62c 604}
e0a15019 605/*
9168a62c 606xul|*.checkbox-label-box {
dae45075
RK
607 margin-inline-start: -1px; / * negative margin for the transparent border * /
608 padding-inline-start: 0;
9168a62c
RK
609}
610
58036cb8
RK
611xul|richlistitem > xul|*.checkbox-check {
612 margin: 3px 6px;
613}
987dae1b
RK
614*/
615html|*.toggle-container-with-text {
616 display: flex;
617 align-items: center;
618}
619/*
da3c2755 620xul|radio {
dae45075 621 margin-inline-start: 0;
da3c2755
RK
622}
623
9168a62c
RK
624xul|*.radio-check {
625 -moz-appearance: none;
626 width: 23px;
627 height: 23px;
ed351b91 628 border: 1px solid var(--in-content-box-border-color);
9168a62c 629 border-radius: 50%;
dae45075 630 margin-inline-end: 10px;
9168a62c
RK
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 {
ed351b91 637 border-color: var(--in-content-border-focus);
9168a62c
RK
638}
639
640xul|*.radio-check[selected] {
21c0144b 641 list-style-image: url("chrome://global/skin/in-content/radio.svg#radio");
9168a62c
RK
642}
643
644xul|radio[disabled="true"] > xul|*.radio-check {
645 opacity: 0.5;
646}
647
648xul|*.radio-label-box {
dae45075
RK
649 margin-inline-start: -1px; / * negative margin for the transparent border * /
650 margin-inline-end: 10px;
651 padding-inline-start: 0;
9168a62c
RK
652}
653*/
654/* Category List */
5d891ecf 655
d471380e 656*|*#categories {
ed351b91 657 background-color: var(--in-content-categorylist-background);
5d891ecf 658 padding-top: 4em;
9168a62c 659 margin: 0;
5d891ecf
RK
660 border-radius: 1em 0 0 0;
661 border: none;
9168a62c
RK
662}
663
d471380e 664*|*.category {
ed351b91
RK
665 background-color: var(--in-content-category-background);
666 color: var(--in-content-category-text);
dae45075
RK
667 border-inline-end-width: 0;
668 padding-inline-start: 15px;
669 padding-inline-end: 21px;
9168a62c
RK
670 min-height: 40px;
671 transition: background-color 150ms;
672}
673
d471380e 674*|*.category:hover {
ed351b91
RK
675 background-color: var(--in-content-category-background-hover);
676 color: var(--in-content-category-text-selected);
9168a62c
RK
677}
678
7729765c
RK
679*|*.category[selected],
680*|*.category.selected {
ed351b91
RK
681 background-color: var(--in-content-category-background-active);
682 color: var(--in-content-category-text-selected);
9168a62c
RK
683}
684
d471380e 685*|*#categories[keyboard-navigation="true"]:-moz-focusring > xul|*.category[current] {
ed351b91
RK
686 border-top: var(--in-content-category-border-focus);
687 border-bottom: var(--in-content-category-border-focus);
9168a62c 688}
5d891ecf 689
9168a62c
RK
690*|*.category-name {
691 line-height: 22px;
692 font-size: 1.25rem;
693 padding-bottom: 2px;
dae45075 694 padding-inline-start: 9px;
9168a62c 695 margin: 0;
e6947267 696 -moz-user-select: none;
9168a62c 697}
5d891ecf 698
9168a62c
RK
699*|*.category-icon {
700 width: 24px;
701 height: 24px;
702}
5d891ecf 703
9168a62c 704/* header */
a21f2959 705
9168a62c 706*|*.header {
dae45075 707/* margin-inline-end: 4px; / add the 4px end-margin of other elements /
ed351b91 708 border-bottom: 1px solid var(--in-content-header-border-color);
9168a62c 709 margin-bottom: 15px;
a21f2959 710 padding-bottom: 15px; */
7729765c 711 -moz-box-align: baseline;
9168a62c
RK
712}
713
714*|*.header-name {
715 font-size: 2.5rem;
716 font-weight: normal;
717 line-height: 40px;
718 margin: 0;
e6947267 719 -moz-user-select: none;
9168a62c 720}
a21f2959 721
9168a62c
RK
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 {
dae45075
RK
736 margin-inline-start: 10px;
737 margin-inline-end: 0;
9168a62c
RK
738}
739
740xul|*.fileFieldLabel {
dae45075
RK
741 margin-inline-start: -26px;
742 padding-inline-start: 36px;
9168a62c
RK
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 {
dae45075 763 border-inline-start: none;
9168a62c
RK
764}
765*/
21c0144b
RK
766/* List boxes */
767/*
768xul|richlistbox,
769xul|listbox {
770 -moz-appearance: none;
dae45075 771 margin-inline-start: 0;
ed351b91
RK
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);
21c0144b
RK
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 {
ed351b91 788 background-color: var(--in-content-item-hover);
21c0144b
RK
789}
790
791xul|treechildren::-moz-tree-row(selected),
792xul|listbox xul|listitem[selected="true"] {
ed351b91
RK
793 background-color: var(--in-content-item-selected);
794 color: var(--in-content-selected-text);
21c0144b
RK
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;
ed351b91
RK
816 border: 1px solid var(--in-content-box-border-color);
817 background-color: var(--in-content-box-background);
cb8b9460 818 margin: 0;
21c0144b
RK
819}
820
e6947267
RK
821xul|tree:-moz-focusring,
822xul|richlistbox:-moz-focusring {
ed351b91 823 border: 1px dotted var(--in-content-border-focus);
e6947267
RK
824}
825
21c0144b
RK
826xul|listheader,
827xul|treecols {
828 -moz-appearance: none;
829 border: none;
ed351b91 830 border-bottom: 1px solid var(--in-content-border-color);
21c0144b 831 padding: 0;
7729765c
RK
832}
833
834.autocomplete-tree > xul|treecols {
835 border-bottom: none !important;
21c0144b
RK
836}
837
838xul|treecol:not([hideheader="true"]),
839xul|treecolpicker {
840 -moz-appearance: none;
841 border: none;
ed351b91 842 background-color: var(--in-content-box-background-hover);
21c0144b
RK
843 color: #808080;
844 padding: 5px 10px;
845}
846
e6947267 847xul|treecol:not([hideheader="true"]):not([sortable="false"]):hover,
21c0144b 848xul|treecolpicker:hover {
ed351b91
RK
849 background-color: var(--in-content-box-background-active);
850 color: var(--in-content-text-color);
21c0144b
RK
851}
852
853xul|treecol:not([hideheader="true"]):not(:first-child),
854xul|treecolpicker {
dae45075
RK
855 border-inline-start-width: 1px;
856 border-inline-start-style: solid;
21c0144b
RK
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] {
e6947267
RK
861 list-style-image: url("chrome://global/skin/in-content/dropdown.svg#dropdown");
862 width: 18px;
863 height: 18px;
21c0144b
RK
864}
865
e6947267 866xul|treecol:not([hideheader="true"]) > xul|*.treecol-sortdirection[sortDirection="ascending"] {
21c0144b
RK
867 transform: scaleY(-1);
868}
ed351b91
RK
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}
21c0144b 883*/
9168a62c
RK
884/* === END common.inc.css === */
885/*
886xul|caption {
887 background-color: transparent;
888}
889
890xul|button,
e6947267 891html|button,
9168a62c
RK
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 {
dae45075 903 padding-inline-start: 0;
9168a62c
RK
904}
905
906xul|radio {
907 -moz-binding: url("chrome://global/content/bindings/radio.xml#radio");
dae45075 908 padding-inline-start: 0;
9168a62c
RK
909}
910
911xul|*.radio-icon,
912xul|*.checkbox-icon {
dae45075 913 margin-inline-end: 0;
9168a62c 914}
cac2a998 915*/
dae45075 916.text-link:-moz-focusring {
1eb9479d
RK
917 /* Don't specify the outline-color, we should always use initial value. */
918 outline: 1px dotted;
9168a62c 919}