second part of syncing LCARStrek with Firefox 39 windows theme changes
[themes.git] / LCARStrek / browser / preferences / in-content / preferences.css
CommitLineData
bb9362a9
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 file,
3 - You can obtain one at http://mozilla.org/MPL/2.0/. */
4
5/* === BEGIN shared/in-content/preferences.css === */
6
7@namespace html "http://www.w3.org/1999/xhtml";
8
bb9362a9 9.main-content {
0b8749a4 10 padding: 1.5em 0 0; /* That padding needs to match the upper stripe. */
bb9362a9 11 overflow: auto;
0b8749a4
RK
12
13 /* This actually results in two black boxes extending to the right and bottom,
14 * leaving the LCARS-gray background only in a top stripe and
15 * a bit larger area on the top left.
16 * The prefpane will overlay that with the rounded shape we want. */
17 background-color: #A09090;
18 background-position: 3em 1.5em, 0px 5em;
19 background-image: linear-gradient(0deg, #000, #000), linear-gradient(0deg, #000, #000);
20 background-repeat: no-repeat;
bb9362a9
RK
21}
22
c1080df6 23#mainPrefPane {
0b8749a4
RK
24 padding: 10px 20px 0px;
25 border-radius: 1em 0 0 0;
26 background-color: #000000;
27
589b5528 28 max-width: 800px;
93c91f62 29 font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
bb9362a9
RK
30 font-size: 1.25rem;
31 line-height: 22px;
6edbc6e8 32 color: #FF9F00;
bb9362a9
RK
33}
34
8922acc9
RK
35* {
36 -moz-user-select: text;
37}
38
39button,
40treecol {
41 /* override the * rule */
42 -moz-user-select: none;
43}
44
bb9362a9
RK
45/* Category List */
46
47#categories {
d533ec21
RK
48 max-height: 100vh;
49
bb9362a9 50 background-color: #A09090;
0b8749a4 51 padding-top: 4em;
bb9362a9
RK
52 margin: 0;
53 border-radius: 1em 0 0 0;
0b8749a4 54 border: none;
bb9362a9
RK
55}
56
d533ec21
RK
57#categories > scrollbox {
58 overflow-x: hidden !important;
59}
60
bb9362a9
RK
61.category {
62 background-color: #000000;
63 color: #FFCF00;
64 -moz-border-end-width: 0;
3d64e0ce 65 -moz-padding-start: 15px;
bb9362a9
RK
66 -moz-padding-end: 21px;
67 min-height: 40px;
3d64e0ce 68 transition: background-color 150ms;
bb9362a9
RK
69}
70
71.category:hover {
72 background-color: #FFCF00;
73 color: #000000;
74}
75
76.category[selected] {
77 background-color: #008484;
78 color: #000000;
79}
80
2b5a5147
RK
81#categories[keyboard-navigation="true"]:-moz-focusring > .category[current] {
82 border-top: 1px dotted #000000;
83 border-bottom: 1px dotted #000000;
84}
85
bb9362a9
RK
86.category-name {
87 line-height: 22px;
bb9362a9
RK
88 font-size: 1.25rem;
89 padding-bottom: 2px;
90 -moz-padding-start: 9px;
91 margin: 0;
92}
93
d533ec21
RK
94/**
95 * We want the last category to always have non-0 getBoundingClientRect().bottom
96 * so we can use the value to figure out the max-height of the list in
97 * preferences.js, so use collapse instead of display: none; if it's hidden
98 */
99#categories > .category[hidden="true"] {
100 display: -moz-box;
101 visibility: collapse;
102}
103
bb9362a9
RK
104.category-icon {
105 width: 24px;
106 height: 24px;
bb9362a9
RK
107}
108
109#category-general > .category-icon {
e184b661 110 list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#general");
bb9362a9
RK
111}
112
113#category-general:hover > .category-icon,
114#category-general[selected] > .category-icon {
e184b661 115 list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#general-active");
bb9362a9
RK
116}
117
58036cb8 118#category-search > .category-icon {
e184b661 119 list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#search");
58036cb8
RK
120}
121
122#category-search:hover > .category-icon,
123#category-search[selected] > .category-icon {
e184b661 124 list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#search-active");
58036cb8
RK
125}
126
bb9362a9 127#category-content > .category-icon {
e184b661 128 list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#content");
bb9362a9
RK
129}
130
131#category-content:hover > .category-icon,
132#category-content[selected] > .category-icon {
e184b661 133 list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#content-active");
bb9362a9
RK
134}
135
136#category-application > .category-icon {
e184b661 137 list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#applications");
bb9362a9
RK
138}
139
140#category-application:hover > .category-icon,
141#category-application[selected] > .category-icon {
e184b661 142 list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#applications-active");
bb9362a9
RK
143}
144
145#category-privacy > .category-icon {
e184b661 146 list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#privacy");
bb9362a9
RK
147}
148
149#category-privacy:hover > .category-icon,
150#category-privacy[selected] > .category-icon {
e184b661 151 list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#privacy-active");
bb9362a9
RK
152}
153
154#category-security > .category-icon {
e184b661 155 list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#security");
bb9362a9
RK
156}
157
158#category-security:hover > .category-icon,
159#category-security[selected] > .category-icon {
e184b661 160 list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#security-active");
bb9362a9
RK
161}
162
163#category-sync > .category-icon {
e184b661 164 list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#sync");
bb9362a9
RK
165}
166
167#category-sync:hover > .category-icon,
168#category-sync[selected] > .category-icon {
e184b661 169 list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#sync-active");
bb9362a9
RK
170}
171
172#category-advanced > .category-icon {
e184b661 173 list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#advanced");
bb9362a9
RK
174}
175
176#category-advanced:hover > .category-icon,
177#category-advanced[selected] > .category-icon {
e184b661 178 list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#advanced-active");
bb9362a9
RK
179}
180
b3bf08b1
RK
181@media (max-width: 800px) {
182 .category-name {
183 display: none;
184 }
185}
186
bb9362a9
RK
187/* header */
188
d4d77dc0
RK
189#header-advanced {
190 border-bottom: none;
191 padding-bottom: 0;
bb9362a9
RK
192}
193
bb9362a9
RK
194.indent {
195 margin-top: 7px;
196 margin-bottom: 7px;
197}
198
199/* General Pane */
bb9362a9 200
d533ec21
RK
201#startupTable {
202 border-collapse: collapse;
203}
204
205#startupTable > tr > td {
206 padding: 0; /* remove the padding from html.css */
207}
208
209#startupTable > tr:not(:first-child) > td {
210 padding-top: 0.5em; /* add a spacing between the rows */
211}
212
213#startupTable > tr > .label-cell {
214 text-align: end;
215 width: 0; /* make the column as small as possible */
216}
217
218#startupTable > tr > .label-cell > label {
219 white-space: nowrap;
220}
221
222#startupTable > tr > .content-cell > menulist,
223#startupTable > tr > .content-cell > textbox {
224 width: calc(100% - 8px);
225 margin-left: 4px;
226 margin-right: 4px;
227}
228
229#startupTable > tr > .homepage-buttons {
230 display: flex;
231 flex-wrap: wrap;
232}
233
234#startupTable > tr > .homepage-buttons > .content-cell-item {
235 flex-grow: 1;
236}
237
e548e22e
RK
238#useFirefoxSync {
239 font-size: 90%;
240 -moz-margin-end: 8px !important;
241}
242
243#getStarted {
244 font-size: 90%;
245}
246
a21f2959
RK
247#isNotDefaultLabel {
248 font-weight: bold;
bb9362a9
RK
249}
250
20752032
RK
251/* Content pane */
252#playDRMContentLink {
253 /* Line up with the buttons in the other grid bits: */
254 margin-left: 4px !important;
255 margin-right: 4px !important;
256}
257
05148fed
RK
258#defaultFontSizeLabel {
259 /* !important needed to override common !important rule */
260 -moz-margin-start: 4px !important;
261}
262
bb9362a9
RK
263/* Applications Pane Styles */
264
3d64e0ce 265#applicationsContent {
3d64e0ce
RK
266 padding: 15px 0;
267}
268
269#filter {
270 -moz-margin-start: 0;
bb9362a9
RK
271}
272
368d0b7f
RK
273#handlersView {
274 height: 25em;
275}
276
bb9362a9 277#handlersView > richlistitem {
b3bf08b1 278 min-height: 36px !important;
bb9362a9
RK
279}
280
281.typeIcon {
282 -moz-margin-start: 10px !important;
283 -moz-margin-end: 9px !important;
284}
285
286.actionIcon {
287 -moz-margin-start: 11px !important;
288 -moz-margin-end: 8px !important;
289}
290
291.actionsMenu {
b3bf08b1 292 min-height: 36px;
bb9362a9
RK
293}
294
295.actionsMenu > menupopup > menuitem {
296 -moz-padding-start: 10px !important;
297}
298
299.actionsMenu > menupopup > menuitem > .menu-iconic-left {
300 -moz-margin-end: 8px !important;
301}
302
e184b661
RK
303/* Collapse the non-active vboxes in decks to use only the height the
304 active vbox needs */
305#historyPane:not([selectedIndex="1"]) > #historyDontRememberPane,
306#historyPane:not([selectedIndex="2"]) > #historyCustomPane,
307#weavePrefsDeck:not([selectedIndex="1"]) > #hasAccount,
308#weavePrefsDeck:not([selectedIndex="2"]) > #needsUpdate,
309#weavePrefsDeck:not([selectedIndex="3"]) > #fxaDeterminingStatus,
310#weavePrefsDeck:not([selectedIndex="4"]) > #noFxaAccount,
311#weavePrefsDeck:not([selectedIndex="5"]) > #hasFxaAccount,
312#fxaLoginStatus:not([selectedIndex="1"]) > #fxaLoginUnverified,
313#fxaLoginStatus:not([selectedIndex="2"]) > #fxaLoginRejected {
314 visibility: collapse;
315}
316
bb9362a9
RK
317/* XXX This style is for bug 740213 and should be removed once that
318 bug has a solution. */
319description > html|a {
320 cursor: pointer;
321}
322
9168a62c
RK
323#noFxaAccount {
324 /* Overriding the margins from the base preferences.css theme file.
325 These overrides can be simplified by fixing bug 1027174 */
326 margin: 0;
327}
328
329#weavePrefsDeck > vbox > label,
330#weavePrefsDeck > vbox > groupbox,
331#weavePrefsDeck > vbox > description,
332#weavePrefsDeck > vbox > #pairDevice > label,
333#weavePrefsDeck > #needsUpdate > hbox > #loginError,
cac2a998
RK
334#weavePrefsDeck > #hasFxaAccount > hbox:not(#tosPP-normal) > label,
335#weavePrefsDeck > #hasFxaAccount > hbox:not(#tosPP-small) > label {
9168a62c
RK
336 /* no margin-start for elements at the begin of a line */
337 -moz-margin-start: 0;
338}
339
bb9362a9
RK
340#advancedPrefs {
341 padding-bottom: 0; /* no padding needed in inContent prefs */
342}
343
20752032
RK
344#tabsElement {
345/* -moz-margin-end: 4px; / add the 4px end-margin of other elements */
346}
347
bb9362a9
RK
348#telemetryLearnMore,
349#FHRLearnMore,
350#crashReporterLearnMore {
31bc2dc1
RK
351 /* provide some margin between the links and the label text */
352 /* !important is needed to override the rules defined in common.css */
353 -moz-margin-start: 20px !important;
bb9362a9
RK
354 /* center the links */
355 margin-top: 8px;
356 margin-bottom: 8px;
357}
358
8c5bee4f
RK
359#trackingProtectionImage {
360 width: 16px;
361 height: 16px;
362 list-style-image: url("chrome://browser/skin/bad-content-blocked-16.png");
363}
364
365@media (min-resolution: 2dppx) {
366 #trackingProtectionImage {
367 list-style-image: url("chrome://browser/skin/bad-content-blocked-16@2x.png");
368 }
369}
6edbc6e8 370
e184b661
RK
371#showUpdateHistory {
372 -moz-margin-start: 0;
373}
374
6edbc6e8 375/**
c1080df6 376 * Dialog
6edbc6e8
RK
377 */
378
379#dialogOverlay {
380 background-color: rgba(0,0,0,0.75);
381 visibility: hidden;
382}
383
384#dialogBox {
c1080df6 385 background-color: #000000;
20752032 386 background-clip: content-box;
c1080df6
RK
387 color: #FF9F00;
388 /* font-size: 14px; */
6edbc6e8 389 border: 1px solid #9C9CFF;
c1080df6 390 border-radius: 10px;
6edbc6e8
RK
391 display: -moz-box;
392 margin: 0;
393 padding-right: 6px;
394 padding-left: 6px;
395}
396
397#dialogBox[resizable="true"] {
398 resize: both;
399 overflow: hidden;
c1080df6 400 min-height: 20em;
6edbc6e8
RK
401 min-width: 66ch;
402}
403
de5e780d 404#dialogBox > .groupbox-title {
c1080df6
RK
405 -moz-margin-start: 0;
406 -moz-margin-end: 0;
de5e780d
RK
407/* padding: 3.5px 0;
408 background-color: #F1F1F1; */
409}
410
411#dialogTitle {
412 text-align: center;
c1080df6
RK
413}
414
6edbc6e8
RK
415.close-icon {
416 background-color: transparent !important;
417 border: none;
418 box-shadow: none;
419 height: 18px;
420 padding: 0;
421 min-width: 18px;
422}
423
d4d77dc0
RK
424#dialogBox > .groupbox-title > caption {
425 margin: 0;
426 border-radius: 1000px;
427 background-color: #A09090;
428}
429
6edbc6e8
RK
430#dialogBox > .groupbox-body {
431 -moz-appearance: none;
432 padding: 0;
433}
434
435#dialogFrame {
436 -moz-box-flex: 1;
437 /* Default dialog dimensions */
c1080df6 438 height: 20em;
6edbc6e8
RK
439 width: 66ch;
440}
441
e184b661
RK
442.largeDialogContainer.doScroll {
443 overflow-y: auto;
444 -moz-box-flex: 1;
445}
446
6edbc6e8 447/**
c1080df6 448 * End Dialog
6edbc6e8
RK
449 */
450
31bc2dc1
RK
451/**
452 * Font dialog menulist fixes
453 */
454
455#defaultFontType,
456#serif,
457#sans-serif,
458#monospace {
459 min-width: 30ch;
460}
461
20752032
RK
462/**
463 * Sync migration
464 */
465#sync-migrate-upgrade-description {
466 /* description elts need a min-width to wrap correctly - bug 630864? */
467 min-width: 100px
468}
469
470#sync-migration {
471 border: 1px solid #9C9CFF;
472 background-color: #000000;
473 color: #A09090;
474 text-shadow: none;
475 margin: 5px 0 0 0;
476 animation: fadein 3000ms;
477}
478
479@keyframes fadein {
480 from { opacity: 0; }
481 to { opacity: 1; }
482}
483
bb9362a9
RK
484/* === END shared/in-content/preferences.css === */
485
0bcd5587
RK
486caption {
487}
488
bb9362a9
RK
489.indent-small {
490 -moz-margin-start: 10px;
491}
492
493@media (min-resolution: 2dppx) {
494 checkbox:hover::before,
495 checkbox[checked]::before {
496 }
497
498 checkbox[checked]::before {
499 }
bb9362a9 500}