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