fifth and last part of syncing LCARStrek with Firefox 38 windows theme changes (inclu...
[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
bb9362a9
RK
258/* Applications Pane Styles */
259
3d64e0ce 260#applicationsContent {
3d64e0ce
RK
261 padding: 15px 0;
262}
263
264#filter {
265 -moz-margin-start: 0;
bb9362a9
RK
266}
267
368d0b7f
RK
268#handlersView {
269 height: 25em;
270}
271
bb9362a9 272#handlersView > richlistitem {
b3bf08b1 273 min-height: 36px !important;
bb9362a9
RK
274}
275
276.typeIcon {
277 -moz-margin-start: 10px !important;
278 -moz-margin-end: 9px !important;
279}
280
281.actionIcon {
282 -moz-margin-start: 11px !important;
283 -moz-margin-end: 8px !important;
284}
285
286.actionsMenu {
b3bf08b1 287 min-height: 36px;
bb9362a9
RK
288}
289
290.actionsMenu > menupopup > menuitem {
291 -moz-padding-start: 10px !important;
292}
293
294.actionsMenu > menupopup > menuitem > .menu-iconic-left {
295 -moz-margin-end: 8px !important;
296}
297
e184b661
RK
298/* Collapse the non-active vboxes in decks to use only the height the
299 active vbox needs */
300#historyPane:not([selectedIndex="1"]) > #historyDontRememberPane,
301#historyPane:not([selectedIndex="2"]) > #historyCustomPane,
302#weavePrefsDeck:not([selectedIndex="1"]) > #hasAccount,
303#weavePrefsDeck:not([selectedIndex="2"]) > #needsUpdate,
304#weavePrefsDeck:not([selectedIndex="3"]) > #fxaDeterminingStatus,
305#weavePrefsDeck:not([selectedIndex="4"]) > #noFxaAccount,
306#weavePrefsDeck:not([selectedIndex="5"]) > #hasFxaAccount,
307#fxaLoginStatus:not([selectedIndex="1"]) > #fxaLoginUnverified,
308#fxaLoginStatus:not([selectedIndex="2"]) > #fxaLoginRejected {
309 visibility: collapse;
310}
311
bb9362a9
RK
312/* XXX This style is for bug 740213 and should be removed once that
313 bug has a solution. */
314description > html|a {
315 cursor: pointer;
316}
317
9168a62c
RK
318#noFxaAccount {
319 /* Overriding the margins from the base preferences.css theme file.
320 These overrides can be simplified by fixing bug 1027174 */
321 margin: 0;
322}
323
324#weavePrefsDeck > vbox > label,
325#weavePrefsDeck > vbox > groupbox,
326#weavePrefsDeck > vbox > description,
327#weavePrefsDeck > vbox > #pairDevice > label,
328#weavePrefsDeck > #needsUpdate > hbox > #loginError,
cac2a998
RK
329#weavePrefsDeck > #hasFxaAccount > hbox:not(#tosPP-normal) > label,
330#weavePrefsDeck > #hasFxaAccount > hbox:not(#tosPP-small) > label {
9168a62c
RK
331 /* no margin-start for elements at the begin of a line */
332 -moz-margin-start: 0;
333}
334
bb9362a9
RK
335#advancedPrefs {
336 padding-bottom: 0; /* no padding needed in inContent prefs */
337}
338
20752032
RK
339#tabsElement {
340/* -moz-margin-end: 4px; / add the 4px end-margin of other elements */
341}
342
bb9362a9
RK
343#telemetryLearnMore,
344#FHRLearnMore,
345#crashReporterLearnMore {
31bc2dc1
RK
346 /* provide some margin between the links and the label text */
347 /* !important is needed to override the rules defined in common.css */
348 -moz-margin-start: 20px !important;
bb9362a9
RK
349 /* center the links */
350 margin-top: 8px;
351 margin-bottom: 8px;
352}
353
8c5bee4f
RK
354#trackingProtectionImage {
355 width: 16px;
356 height: 16px;
357 list-style-image: url("chrome://browser/skin/bad-content-blocked-16.png");
358}
359
360@media (min-resolution: 2dppx) {
361 #trackingProtectionImage {
362 list-style-image: url("chrome://browser/skin/bad-content-blocked-16@2x.png");
363 }
364}
6edbc6e8 365
e184b661
RK
366#showUpdateHistory {
367 -moz-margin-start: 0;
368}
369
6edbc6e8 370/**
c1080df6 371 * Dialog
6edbc6e8
RK
372 */
373
374#dialogOverlay {
375 background-color: rgba(0,0,0,0.75);
376 visibility: hidden;
377}
378
379#dialogBox {
c1080df6 380 background-color: #000000;
20752032 381 background-clip: content-box;
c1080df6
RK
382 color: #FF9F00;
383 /* font-size: 14px; */
6edbc6e8 384 border: 1px solid #9C9CFF;
c1080df6 385 border-radius: 10px;
6edbc6e8
RK
386 display: -moz-box;
387 margin: 0;
388 padding-right: 6px;
389 padding-left: 6px;
390}
391
392#dialogBox[resizable="true"] {
393 resize: both;
394 overflow: hidden;
c1080df6 395 min-height: 20em;
6edbc6e8
RK
396 min-width: 66ch;
397}
398
de5e780d 399#dialogBox > .groupbox-title {
c1080df6
RK
400 -moz-margin-start: 0;
401 -moz-margin-end: 0;
de5e780d
RK
402/* padding: 3.5px 0;
403 background-color: #F1F1F1; */
404}
405
406#dialogTitle {
407 text-align: center;
c1080df6
RK
408}
409
6edbc6e8
RK
410.close-icon {
411 background-color: transparent !important;
412 border: none;
413 box-shadow: none;
414 height: 18px;
415 padding: 0;
416 min-width: 18px;
417}
418
d4d77dc0
RK
419#dialogBox > .groupbox-title > caption {
420 margin: 0;
421 border-radius: 1000px;
422 background-color: #A09090;
423}
424
6edbc6e8
RK
425#dialogBox > .groupbox-body {
426 -moz-appearance: none;
427 padding: 0;
428}
429
430#dialogFrame {
431 -moz-box-flex: 1;
432 /* Default dialog dimensions */
c1080df6 433 height: 20em;
6edbc6e8
RK
434 width: 66ch;
435}
436
e184b661
RK
437.largeDialogContainer.doScroll {
438 overflow-y: auto;
439 -moz-box-flex: 1;
440}
441
6edbc6e8 442/**
c1080df6 443 * End Dialog
6edbc6e8
RK
444 */
445
31bc2dc1
RK
446/**
447 * Font dialog menulist fixes
448 */
449
450#defaultFontType,
451#serif,
452#sans-serif,
453#monospace {
454 min-width: 30ch;
455}
456
20752032
RK
457/**
458 * Sync migration
459 */
460#sync-migrate-upgrade-description {
461 /* description elts need a min-width to wrap correctly - bug 630864? */
462 min-width: 100px
463}
464
465#sync-migration {
466 border: 1px solid #9C9CFF;
467 background-color: #000000;
468 color: #A09090;
469 text-shadow: none;
470 margin: 5px 0 0 0;
471 animation: fadein 3000ms;
472}
473
474@keyframes fadein {
475 from { opacity: 0; }
476 to { opacity: 1; }
477}
478
bb9362a9
RK
479/* === END shared/in-content/preferences.css === */
480
0bcd5587
RK
481caption {
482}
483
bb9362a9
RK
484.indent-small {
485 -moz-margin-start: 10px;
486}
487
488@media (min-resolution: 2dppx) {
489 checkbox:hover::before,
490 checkbox[checked]::before {
491 }
492
493 checkbox[checked]::before {
494 }
bb9362a9 495}