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