actually start 2.45 dev cycles
[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 442 -moz-appearance: none;
ed351b91 443 color: var(--in-content-text-color);
ed351b91 444 border: 1px solid var(--in-content-box-border-color);
9168a62c
RK
445 -moz-border-top-colors: none !important;
446 -moz-border-right-colors: none !important;
447 -moz-border-bottom-colors: none !important;
448 -moz-border-left-colors: none !important;
449 border-radius: 2px;
ed351b91 450 background-color: var(--in-content-box-background);
9168a62c
RK
451}
452
d471380e
RK
453xul|textbox {
454 min-height: 30px;
455 padding-right: 10px;
456 padding-left: 10px;
457}
458
459html|input[type="text"],
460html|textarea {
461 font-family: inherit;
462 font-size: inherit;
463 padding: 5px 10px;
464}
465
466html|input[type="text"]:focus,
467html|textarea:focus,
9168a62c 468xul|textbox[focused] {
ed351b91 469 border-color: var(--in-content-border-focus);
9168a62c
RK
470}
471
d471380e
RK
472html|input[type="text"]:disabled,
473html|textarea:disabled,
9168a62c
RK
474xul|textbox[disabled="true"] {
475 opacity: 0.5;
476}
477*/
478/* Links */
cac2a998 479
9168a62c 480html|a,
e6947267
RK
481.text-link,
482.inline-link {
ed351b91 483 color: var(--in-content-link-color);
9168a62c
RK
484 text-decoration: none;
485}
486
487html|a:hover,
e6947267
RK
488.text-link:hover,
489.inline-link:hover {
ed351b91 490 color: var(--in-content-link-color-hover);
cac2a998 491 text-decoration: underline;
9168a62c
RK
492}
493
ed351b91
RK
494html|a:visited {
495 color: var(--in-content-link-color-visited);
496}
497
9168a62c 498html|a:hover:active,
e6947267
RK
499.text-link:hover:active,
500.inline-link:hover:active {
ed351b91 501 color: var(--in-content-link-color-active);
cac2a998 502 text-decoration: underline;
9168a62c 503}
cac2a998 504
9168a62c 505/* Checkboxes and radio buttons */
e0a15019 506/* Hide the actual checkbox */
e6947267 507html|input[type="checkbox"] {
d471380e 508 visibility: hidden;
e6947267
RK
509 position: absolute;
510}
511
e0a15019 512/* Create a box to style as the checkbox */
e6947267
RK
513html|input[type="checkbox"] + html|label:before {
514 display: inline-block;
515 content: "";
516 vertical-align: middle;
517}
518
519html|input[type="checkbox"] + html|label {
520 line-height: 0px;
521}
e0a15019 522/*
9168a62c
RK
523xul|checkbox {
524 -moz-margin-start: 0;
525}
e0a15019
RK
526*/
527/* xul|*.checkbox-check, */
e6947267 528html|input[type="checkbox"] + html|label:before {
9168a62c
RK
529 -moz-appearance: none;
530 width: 23px;
531 height: 23px;
e0a15019 532 border-radius: 0;
ed351b91 533 border: 1px solid var(--in-content-box-border-color);
9168a62c 534 -moz-margin-end: 10px;
ed351b91 535 background-color: var(--in-content-box-background);
9168a62c
RK
536 background-position: center center;
537 background-repeat: no-repeat;
9168a62c
RK
538}
539
e0a15019 540/* xul|checkbox:not([disabled="true"]):hover > xul|*.checkbox-check, */
e6947267 541html|input[type="checkbox"]:not(:disabled) + html|label:hover:before {
ed351b91 542 border-color: var(--in-content-border-focus);
9168a62c 543}
e0a15019 544html|input[type="checkbox"]:not(:disabled) + html|label:hover {
ed351b91 545 color: var(--in-content-link-color-hover);
e0a15019
RK
546}
547/*
9168a62c
RK
548xul|*.checkbox-check[checked] {
549 background-image: url("chrome://global/skin/in-content/check.png"),
550 / * !important needed to override toolkit !important rule * /
551 linear-gradient(#fff, rgba(255,255,255,0.8)) !important;
552}
e0a15019 553*/
e6947267 554html|input[type="checkbox"]:checked + html|label:before {
e0a15019 555 background-image: url("chrome://global/skin/in-content/check.svg#check");
e6947267
RK
556}
557
e0a15019
RK
558/*xul|checkbox[checked][disabled="true"] > xul|*.checkbox-check,*/
559html|input[type="checkbox"]:checked:disabled + html|label:before {
560 background-image: url("chrome://global/skin/in-content/check.svg#check-disabled");
561}
562html|input[type="checkbox"]:not(:disabled) + html|label:hover:before {
563 background-image: url("chrome://global/skin/in-content/check.svg#check-hover");
564}
565html|input[type="checkbox"]:disabled + html|label:before {
ed351b91 566 border-color: var(--in-content-border-disabled);
e0a15019 567}
e6947267 568html|input[type="checkbox"]:disabled + html|label {
ed351b91 569 color: var(--in-content-disabled-text);
9168a62c 570}
e0a15019 571/*
9168a62c
RK
572xul|*.checkbox-label-box {
573 -moz-margin-start: -1px; / * negative margin for the transparent border * /
574 -moz-padding-start: 0;
575}
576
58036cb8
RK
577xul|richlistitem > xul|*.checkbox-check {
578 margin: 3px 6px;
579}
580
da3c2755
RK
581xul|radio {
582 -moz-margin-start: 0;
583}
584
9168a62c
RK
585xul|*.radio-check {
586 -moz-appearance: none;
587 width: 23px;
588 height: 23px;
ed351b91 589 border: 1px solid var(--in-content-box-border-color);
9168a62c
RK
590 border-radius: 50%;
591 -moz-margin-end: 10px;
592 background-color: #f1f1f1;
593 background-image: linear-gradient(#fff, rgba(255,255,255,0.80));
594 box-shadow: 0 1px 1px 0 #fff, inset 0 2px 0 0 rgba(0,0,0,0.03);
595}
596
597xul|radio:not([disabled="true"]):hover > xul|*.radio-check {
ed351b91 598 border-color: var(--in-content-border-focus);
9168a62c
RK
599}
600
601xul|*.radio-check[selected] {
21c0144b 602 list-style-image: url("chrome://global/skin/in-content/radio.svg#radio");
9168a62c
RK
603}
604
605xul|radio[disabled="true"] > xul|*.radio-check {
606 opacity: 0.5;
607}
608
609xul|*.radio-label-box {
610 -moz-margin-start: -1px; / * negative margin for the transparent border * /
611 -moz-margin-end: 10px;
612 -moz-padding-start: 0;
613}
614*/
615/* Category List */
5d891ecf 616
d471380e 617*|*#categories {
ed351b91 618 background-color: var(--in-content-categorylist-background);
5d891ecf 619 padding-top: 4em;
9168a62c 620 margin: 0;
5d891ecf
RK
621 border-radius: 1em 0 0 0;
622 border: none;
9168a62c
RK
623}
624
d471380e 625*|*.category {
ed351b91
RK
626 background-color: var(--in-content-category-background);
627 color: var(--in-content-category-text);
9168a62c
RK
628 -moz-border-end-width: 0;
629 -moz-padding-start: 15px;
630 -moz-padding-end: 21px;
631 min-height: 40px;
632 transition: background-color 150ms;
633}
634
d471380e 635*|*.category:hover {
ed351b91
RK
636 background-color: var(--in-content-category-background-hover);
637 color: var(--in-content-category-text-selected);
9168a62c
RK
638}
639
d471380e 640*|*.category[selected] {
ed351b91
RK
641 background-color: var(--in-content-category-background-active);
642 color: var(--in-content-category-text-selected);
9168a62c
RK
643}
644
d471380e 645*|*#categories[keyboard-navigation="true"]:-moz-focusring > xul|*.category[current] {
ed351b91
RK
646 border-top: var(--in-content-category-border-focus);
647 border-bottom: var(--in-content-category-border-focus);
9168a62c 648}
5d891ecf 649
9168a62c
RK
650*|*.category-name {
651 line-height: 22px;
652 font-size: 1.25rem;
653 padding-bottom: 2px;
654 -moz-padding-start: 9px;
655 margin: 0;
e6947267 656 -moz-user-select: none;
9168a62c 657}
5d891ecf 658
9168a62c
RK
659*|*.category-icon {
660 width: 24px;
661 height: 24px;
662}
5d891ecf 663
9168a62c 664/* header */
a21f2959 665
9168a62c 666*|*.header {
21c0144b 667/* -moz-margin-end: 4px; / add the 4px end-margin of other elements /
ed351b91 668 border-bottom: 1px solid var(--in-content-header-border-color);
9168a62c 669 margin-bottom: 15px;
a21f2959 670 padding-bottom: 15px; */
9168a62c
RK
671}
672
673*|*.header-name {
674 font-size: 2.5rem;
675 font-weight: normal;
676 line-height: 40px;
677 margin: 0;
e6947267 678 -moz-user-select: none;
9168a62c 679}
a21f2959 680
9168a62c
RK
681/* File fields */
682/*
683xul|filefield {
684 -moz-appearance: none;
685 background-color: transparent;
686 border: none;
687 padding: 0;
688}
689
690xul|*.fileFieldContentBox {
691 background-color: transparent;
692}
693
694xul|*.fileFieldIcon {
695 -moz-margin-start: 10px;
696 -moz-margin-end: 0;
697}
698
699xul|*.fileFieldLabel {
700 -moz-margin-start: -26px;
701 -moz-padding-start: 36px;
702}
703
704xul|textbox:-moz-locale-dir(rtl),
705xul|*.fileFieldLabel:-moz-locale-dir(rtl),
706xul|textbox + xul|button:-moz-locale-dir(ltr),
707xul|filefield + xul|button:-moz-locale-dir(ltr) {
708 border-top-left-radius: 0;
709 border-bottom-left-radius: 0;
710}
711
712xul|textbox:-moz-locale-dir(ltr),
713xul|*.fileFieldLabel:-moz-locale-dir(ltr),
714xul|textbox + xul|button:-moz-locale-dir(rtl),
715xul|filefield + xul|button:-moz-locale-dir(rtl) {
716 border-top-right-radius: 0;
717 border-bottom-right-radius: 0;
718}
719
720xul|textbox + xul|button,
721xul|filefield + xul|button {
722 -moz-border-start: none;
723}
724*/
21c0144b
RK
725/* List boxes */
726/*
727xul|richlistbox,
728xul|listbox {
729 -moz-appearance: none;
730 -moz-margin-start: 0;
ed351b91
RK
731 background-color: var(--in-content-box-background);
732 border: 1px solid var(--in-content-box-border-color);
733 color: var(--in-content-text-color);
21c0144b
RK
734}
735
736xul|treechildren::-moz-tree-row,
737xul|listbox xul|listitem {
738 padding: 0.3em;
739 margin: 0;
740 border: none;
741 border-radius: 0;
742 background-image: none;
743}
744
745xul|treechildren::-moz-tree-row(hover),
746xul|listbox xul|listitem:hover {
ed351b91 747 background-color: var(--in-content-item-hover);
21c0144b
RK
748}
749
750xul|treechildren::-moz-tree-row(selected),
751xul|listbox xul|listitem[selected="true"] {
ed351b91
RK
752 background-color: var(--in-content-item-selected);
753 color: var(--in-content-selected-text);
21c0144b
RK
754}
755
756/ This is the only way to increase the height of a tree row unfortunately /
757xul|treechildren::-moz-tree-row {
758 min-height: 2em;
759}
760
761/ Color needs to be set on tree cell in order to be applied /
762xul|treechildren::-moz-tree-cell-text {
763 color: #333;
764}
765
766xul|treechildren::-moz-tree-cell-text(selected) {
767 color: #fff;
768}
769*/
770/* Trees */
771/*
772xul|tree {
773 -moz-appearance: none;
774 font-size: 1em;
ed351b91
RK
775 border: 1px solid var(--in-content-box-border-color);
776 background-color: var(--in-content-box-background);
cb8b9460 777 margin: 0;
21c0144b
RK
778}
779
e6947267
RK
780xul|tree:-moz-focusring,
781xul|richlistbox:-moz-focusring {
ed351b91 782 border: 1px dotted var(--in-content-border-focus);
e6947267
RK
783}
784
21c0144b
RK
785xul|listheader,
786xul|treecols {
787 -moz-appearance: none;
788 border: none;
ed351b91 789 border-bottom: 1px solid var(--in-content-border-color);
21c0144b
RK
790 padding: 0;
791}
792
793xul|treecol:not([hideheader="true"]),
794xul|treecolpicker {
795 -moz-appearance: none;
796 border: none;
ed351b91 797 background-color: var(--in-content-box-background-hover);
21c0144b
RK
798 color: #808080;
799 padding: 5px 10px;
800}
801
e6947267 802xul|treecol:not([hideheader="true"]):not([sortable="false"]):hover,
21c0144b 803xul|treecolpicker:hover {
ed351b91
RK
804 background-color: var(--in-content-box-background-active);
805 color: var(--in-content-text-color);
21c0144b
RK
806}
807
808xul|treecol:not([hideheader="true"]):not(:first-child),
809xul|treecolpicker {
810 -moz-border-start-width: 1px;
811 -moz-border-start-style: solid;
812 border-image: linear-gradient(transparent 0%, transparent 20%, #c1c1c1 20%, #c1c1c1 80%, transparent 80%, transparent 100%) 1 1;
813}
814
815xul|treecol:not([hideheader="true"]) > xul|*.treecol-sortdirection[sortDirection] {
e6947267
RK
816 list-style-image: url("chrome://global/skin/in-content/dropdown.svg#dropdown");
817 width: 18px;
818 height: 18px;
21c0144b
RK
819}
820
e6947267 821xul|treecol:not([hideheader="true"]) > xul|*.treecol-sortdirection[sortDirection="ascending"] {
21c0144b
RK
822 transform: scaleY(-1);
823}
ed351b91
RK
824
825/ This is the only way to increase the height of a tree row unfortunately /
826xul|treechildren::-moz-tree-row {
827 min-height: 2em;
828}
829
830/ Color needs to be set on tree cell in order to be applied /
831xul|treechildren::-moz-tree-cell-text {
832 color: var(--in-content-text-color);
833}
834
835xul|treechildren::-moz-tree-cell-text(selected) {
836 color: var(--in-content-selected-text);
837}
21c0144b 838*/
9168a62c
RK
839/* === END common.inc.css === */
840/*
841xul|caption {
842 background-color: transparent;
843}
844
845xul|button,
e6947267 846html|button,
9168a62c
RK
847xul|colorpicker[type="button"],
848xul|menulist {
849 margin: 2px 4px;
850}
851
852xul|menulist:not([editable="true"]) > xul|*.menulist-dropmarker {
853 margin-top: 1px;
854 margin-bottom: 1px;
855}
856
857xul|checkbox {
858 -moz-padding-start: 0;
859}
860
861xul|radio {
862 -moz-binding: url("chrome://global/content/bindings/radio.xml#radio");
9168a62c
RK
863 -moz-padding-start: 0;
864}
865
866xul|*.radio-icon,
867xul|*.checkbox-icon {
868 -moz-margin-end: 0;
869}
cac2a998 870*/
e6947267
RK
871.text-link:-moz-focusring,
872.inline-link:-moz-focusring {
1eb9479d
RK
873 /* Don't specify the outline-color, we should always use initial value. */
874 outline: 1px dotted;
9168a62c 875}