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