third part of syncing LCARStrek with Firefox 45-48 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
13875a54 5/* === BEGIN shared/incontentprefs/preferences.inc.css === */
bb9362a9
RK
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 30 font-size: 1.25rem;
6edbc6e8 31 color: #FF9F00;
bb9362a9
RK
32}
33
8922acc9
RK
34* {
35 -moz-user-select: text;
36}
37
38button,
39treecol {
40 /* override the * rule */
41 -moz-user-select: none;
42}
d7b7f7e1
RK
43/*
44#engineList treechildren::-moz-tree-image(engineShown, checked),
45#blocklistsTree treechildren::-moz-tree-image(selectionCol, checked) {
46 list-style-image: url("chrome://global/skin/in-content/check.svg#check");
47 width: 21px;
48 height: 21px;
49}
50
51#engineList treechildren::-moz-tree-image(engineShown, checked, selected),
52#blocklistsTree treechildren::-moz-tree-image(selectionCol, checked, selected) {
53 list-style-image: url("chrome://global/skin/in-content/check.svg#check-inverted");
54}
55
56#engineList treechildren::-moz-tree-row,
57#blocklistsTree treechildren::-moz-tree-row {
58 min-height: 36px;
59}
60*/
61#selectionCol {
62 min-width: 26px;
63}
8922acc9 64
bb9362a9
RK
65/* Category List */
66
67#categories {
d533ec21 68 max-height: 100vh;
bb9362a9
RK
69}
70
d533ec21
RK
71#categories > scrollbox {
72 overflow-x: hidden !important;
73}
74
d533ec21
RK
75/**
76 * We want the last category to always have non-0 getBoundingClientRect().bottom
77 * so we can use the value to figure out the max-height of the list in
78 * preferences.js, so use collapse instead of display: none; if it's hidden
79 */
80#categories > .category[hidden="true"] {
81 display: -moz-box;
82 visibility: collapse;
83}
84
bb9362a9 85#category-general > .category-icon {
e184b661 86 list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#general");
bb9362a9
RK
87}
88
89#category-general:hover > .category-icon,
90#category-general[selected] > .category-icon {
e184b661 91 list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#general-active");
bb9362a9
RK
92}
93
58036cb8 94#category-search > .category-icon {
e184b661 95 list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#search");
58036cb8
RK
96}
97
98#category-search:hover > .category-icon,
99#category-search[selected] > .category-icon {
e184b661 100 list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#search-active");
58036cb8
RK
101}
102
bb9362a9 103#category-content > .category-icon {
e184b661 104 list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#content");
bb9362a9
RK
105}
106
107#category-content:hover > .category-icon,
108#category-content[selected] > .category-icon {
e184b661 109 list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#content-active");
bb9362a9
RK
110}
111
112#category-application > .category-icon {
e184b661 113 list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#applications");
bb9362a9
RK
114}
115
116#category-application:hover > .category-icon,
117#category-application[selected] > .category-icon {
e184b661 118 list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#applications-active");
bb9362a9
RK
119}
120
121#category-privacy > .category-icon {
e184b661 122 list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#privacy");
bb9362a9
RK
123}
124
125#category-privacy:hover > .category-icon,
126#category-privacy[selected] > .category-icon {
e184b661 127 list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#privacy-active");
bb9362a9
RK
128}
129
130#category-security > .category-icon {
e184b661 131 list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#security");
bb9362a9
RK
132}
133
134#category-security:hover > .category-icon,
135#category-security[selected] > .category-icon {
e184b661 136 list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#security-active");
bb9362a9
RK
137}
138
139#category-sync > .category-icon {
e184b661 140 list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#sync");
bb9362a9
RK
141}
142
143#category-sync:hover > .category-icon,
144#category-sync[selected] > .category-icon {
e184b661 145 list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#sync-active");
bb9362a9
RK
146}
147
148#category-advanced > .category-icon {
e184b661 149 list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#advanced");
bb9362a9
RK
150}
151
152#category-advanced:hover > .category-icon,
153#category-advanced[selected] > .category-icon {
e184b661 154 list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#advanced-active");
bb9362a9
RK
155}
156
b3bf08b1
RK
157@media (max-width: 800px) {
158 .category-name {
159 display: none;
160 }
161}
162
bb9362a9
RK
163/* header */
164
d4d77dc0
RK
165#header-advanced {
166 border-bottom: none;
167 padding-bottom: 0;
bb9362a9
RK
168}
169
bb9362a9
RK
170.indent {
171 margin-top: 7px;
172 margin-bottom: 7px;
173}
174
175/* General Pane */
bb9362a9 176
d533ec21
RK
177#startupTable {
178 border-collapse: collapse;
179}
180
181#startupTable > tr > td {
182 padding: 0; /* remove the padding from html.css */
183}
184
185#startupTable > tr:not(:first-child) > td {
186 padding-top: 0.5em; /* add a spacing between the rows */
187}
188
189#startupTable > tr > .label-cell {
190 text-align: end;
191 width: 0; /* make the column as small as possible */
192}
193
194#startupTable > tr > .label-cell > label {
195 white-space: nowrap;
196}
197
198#startupTable > tr > .content-cell > menulist,
199#startupTable > tr > .content-cell > textbox {
200 width: calc(100% - 8px);
201 margin-left: 4px;
202 margin-right: 4px;
203}
204
205#startupTable > tr > .homepage-buttons {
206 display: flex;
207 flex-wrap: wrap;
208}
209
210#startupTable > tr > .homepage-buttons > .content-cell-item {
211 flex-grow: 1;
212}
213
e548e22e
RK
214#useFirefoxSync {
215 font-size: 90%;
216 -moz-margin-end: 8px !important;
217}
218
219#getStarted {
220 font-size: 90%;
221}
222
a21f2959
RK
223#isNotDefaultLabel {
224 font-weight: bold;
bb9362a9
RK
225}
226
20752032
RK
227/* Content pane */
228#playDRMContentLink {
229 /* Line up with the buttons in the other grid bits: */
230 margin-left: 4px !important;
231 margin-right: 4px !important;
232}
233
fa703ff4
RK
234#notificationsPolicyLearnMore {
235 -moz-margin-start: 1.5em !important;
236}
237
05148fed
RK
238#defaultFontSizeLabel {
239 /* !important needed to override common !important rule */
240 -moz-margin-start: 4px !important;
241}
242
bb9362a9
RK
243/* Applications Pane Styles */
244
3d64e0ce 245#applicationsContent {
3d64e0ce
RK
246 padding: 15px 0;
247}
248
249#filter {
250 -moz-margin-start: 0;
bb9362a9
RK
251}
252
368d0b7f
RK
253#handlersView {
254 height: 25em;
255}
256
bb9362a9 257#handlersView > richlistitem {
b3bf08b1 258 min-height: 36px !important;
bb9362a9
RK
259}
260
261.typeIcon {
262 -moz-margin-start: 10px !important;
263 -moz-margin-end: 9px !important;
264}
265
266.actionIcon {
267 -moz-margin-start: 11px !important;
268 -moz-margin-end: 8px !important;
269}
270
271.actionsMenu {
b3bf08b1 272 min-height: 36px;
bb9362a9
RK
273}
274
275.actionsMenu > menupopup > menuitem {
276 -moz-padding-start: 10px !important;
277}
278
279.actionsMenu > menupopup > menuitem > .menu-iconic-left {
280 -moz-margin-end: 8px !important;
281}
282
b1dfcf32
RK
283/* Privacy pane */
284
7327c957 285.doNotTrackLearnMore,
b1dfcf32
RK
286#trackingProtectionPBMLearnMore,
287#trackingProtectionLearnMore {
288 -moz-margin-start: 1.5em !important;
289 margin-top: 0;
7327c957 290 font-weight: normal;
b1dfcf32
RK
291}
292
e184b661
RK
293/* Collapse the non-active vboxes in decks to use only the height the
294 active vbox needs */
295#historyPane:not([selectedIndex="1"]) > #historyDontRememberPane,
296#historyPane:not([selectedIndex="2"]) > #historyCustomPane,
297#weavePrefsDeck:not([selectedIndex="1"]) > #hasAccount,
298#weavePrefsDeck:not([selectedIndex="2"]) > #needsUpdate,
13875a54
RK
299#weavePrefsDeck:not([selectedIndex="3"]) > #noFxaAccount,
300#weavePrefsDeck:not([selectedIndex="4"]) > #hasFxaAccount,
e184b661
RK
301#fxaLoginStatus:not([selectedIndex="1"]) > #fxaLoginUnverified,
302#fxaLoginStatus:not([selectedIndex="2"]) > #fxaLoginRejected {
303 visibility: collapse;
304}
305
bb9362a9
RK
306/* XXX This style is for bug 740213 and should be removed once that
307 bug has a solution. */
308description > html|a {
309 cursor: pointer;
310}
311
9168a62c
RK
312#noFxaAccount {
313 /* Overriding the margins from the base preferences.css theme file.
314 These overrides can be simplified by fixing bug 1027174 */
315 margin: 0;
316}
317
318#weavePrefsDeck > vbox > label,
319#weavePrefsDeck > vbox > groupbox,
320#weavePrefsDeck > vbox > description,
321#weavePrefsDeck > vbox > #pairDevice > label,
322#weavePrefsDeck > #needsUpdate > hbox > #loginError,
d74db938
RK
323#weavePrefsDeck > #hasFxaAccount > vbox > label,
324#weavePrefsDeck > #hasFxaAccount > hbox:not(#tosPP-normal) > label {
9168a62c
RK
325 /* no margin-start for elements at the begin of a line */
326 -moz-margin-start: 0;
327}
328
bb9362a9
RK
329#advancedPrefs {
330 padding-bottom: 0; /* no padding needed in inContent prefs */
331}
332
20752032
RK
333#tabsElement {
334/* -moz-margin-end: 4px; / add the 4px end-margin of other elements */
335}
336
bb9362a9
RK
337#telemetryLearnMore,
338#FHRLearnMore,
339#crashReporterLearnMore {
31bc2dc1
RK
340 /* provide some margin between the links and the label text */
341 /* !important is needed to override the rules defined in common.css */
342 -moz-margin-start: 20px !important;
bb9362a9
RK
343 /* center the links */
344 margin-top: 8px;
345 margin-bottom: 8px;
346}
347
fa703ff4
RK
348.indent {
349 /* !important needed to override -moz-margin-start:0 !important; rule
350 define in common.css for labels - but not in LCARStrek*/
351 -moz-margin-start: 33px /*!important*/;
352}
353
1437a48c
RK
354.text-link {
355 margin-bottom: 0;
8c5bee4f 356}
6edbc6e8 357
e184b661
RK
358#showUpdateHistory {
359 -moz-margin-start: 0;
360}
361
7327c957
RK
362#fxaProfileImage {
363 -moz-user-focus: normal;
364}
365
6edbc6e8 366/**
c1080df6 367 * Dialog
6edbc6e8
RK
368 */
369
370#dialogOverlay {
371 background-color: rgba(0,0,0,0.75);
372 visibility: hidden;
373}
374
375#dialogBox {
c1080df6 376 background-color: #000000;
20752032 377 background-clip: content-box;
c1080df6
RK
378 color: #FF9F00;
379 /* font-size: 14px; */
6edbc6e8 380 border: 1px solid #9C9CFF;
c1080df6 381 border-radius: 10px;
6edbc6e8
RK
382 display: -moz-box;
383 margin: 0;
384 padding-right: 6px;
385 padding-left: 6px;
386}
387
388#dialogBox[resizable="true"] {
389 resize: both;
390 overflow: hidden;
c1080df6 391 min-height: 20em;
6edbc6e8
RK
392 min-width: 66ch;
393}
394
de5e780d 395#dialogBox > .groupbox-title {
c1080df6
RK
396 -moz-margin-start: 0;
397 -moz-margin-end: 0;
de5e780d
RK
398/* padding: 3.5px 0;
399 background-color: #F1F1F1; */
400}
401
402#dialogTitle {
403 text-align: center;
b336389b 404 -moz-user-select: none;
c1080df6
RK
405}
406
6edbc6e8
RK
407.close-icon {
408 background-color: transparent !important;
409 border: none;
410 box-shadow: none;
6edbc6e8 411 padding: 0;
c9b0a396
RK
412 height: auto;
413 min-height: 16px;
414 min-width: 0;
6edbc6e8
RK
415}
416
d4d77dc0
RK
417#dialogBox > .groupbox-title > caption {
418 margin: 0;
419 border-radius: 1000px;
420 background-color: #A09090;
421}
422
6edbc6e8
RK
423#dialogBox > .groupbox-body {
424 -moz-appearance: none;
425 padding: 0;
426}
427
428#dialogFrame {
429 -moz-box-flex: 1;
430 /* Default dialog dimensions */
c1080df6 431 height: 20em;
6edbc6e8
RK
432 width: 66ch;
433}
434
e184b661
RK
435.largeDialogContainer.doScroll {
436 overflow-y: auto;
437 -moz-box-flex: 1;
438}
439
6edbc6e8 440/**
c1080df6 441 * End Dialog
6edbc6e8
RK
442 */
443
31bc2dc1
RK
444/**
445 * Font dialog menulist fixes
446 */
447
448#defaultFontType,
449#serif,
450#sans-serif,
451#monospace {
452 min-width: 30ch;
453}
454
b336389b
RK
455/**
456 * Sync
457 */
458
13875a54
RK
459#fxaProfileImage {
460 max-width: 60px;
461 border-radius: 50%;
462 list-style-image: url(chrome://browser/skin/fxa/default-avatar.png);
463 margin-inline-end: 15px;
464}
465
466#fxaProfileImage.actionable {
467 cursor: pointer;
468}
469
470#fxaProfileImage.actionable:hover {
1437a48c 471 box-shadow: 0px 0px 0px 1px #FFCF00;
13875a54
RK
472}
473
474#fxaProfileImage.actionable:hover:active {
1437a48c 475 box-shadow: 0px 0px 0px 1px #FF9F00;
13875a54
RK
476}
477
478#noFxaAccount {
479 /* Overriding the margins from the base preferences.css theme file.
480 These overrides can be simplified by fixing bug 1027174 */
481 margin: 0;
482 padding-top: 15px;
483}
484
485#fxaContentWrapper {
486 -moz-box-flex: 1;
487}
488
489#noFxaGroup {
490 -moz-box-flex: 1;
491 margin: 0;
492}
493
494#fxaContentWrapper {
495 padding-right: 15px;
496}
497
498#noFxaGroup > vbox,
499#fxaGroup {
500 -moz-box-align: start;
501}
502
503#syncStatusMessage {
504 visibility: collapse;
505 opacity: 0;
506 transition: opacity 1s linear;
507 padding: 14px 8px 14px 14px;
508 border-radius: 2px;
b336389b
RK
509}
510
13875a54
RK
511#syncStatusMessage[message-type] {
512 visibility: visible;
b336389b
RK
513 opacity: 1;
514}
515
13875a54
RK
516#syncStatusMessage[message-type="verify-success"] {
517 background-color: #008484;
518}
519
520#syncStatusMessage[message-type="verify-error"] {
521 background-color: #FF0000;
522}
523
524#syncStatusMessage[message-type="migration"] {
525 background-color: #FF9F00;
526}
527
528#syncStatusMessageWrapper {
529 -moz-box-flex: 1;
530 padding-right: 5px;
531}
532
533#syncStatusMessageTitle, #syncStatusMessageDescription {
534 color: #9C9CFF;
535}
536
537#syncStatusMessage[message-type="migration"] #syncStatusMessageTitle {
538 display: none;
539}
540
541#syncStatusMessageTitle {
542 font-weight: bold !important;
543 font-size: 16px;
544 line-height: 157%;
545 margin: 0 0 20px;
546}
547
e9fbfc3a
RK
548#syncStatusMessageDescription {
549 font-size: 14px;
550 line-height: 158%;
551 margin: 0 !important;
552}
553
554#syncStatusMessageClose {
555 margin: 0px;
556}
557
558#syncStatusMessage {
559 visibility: collapse;
560 opacity: 0;
561 transition: opacity 1s linear;
562 padding: 14px 8px 14px 14px;
563 border-radius: 2px;
564}
565
566#syncStatusMessage[message-type] {
567 visibility: visible;
568 opacity: 1;
569}
570
571#syncStatusMessage[message-type="verify-success"] {
572 background-color: #008484;
573}
574
575#syncStatusMessage[message-type="verify-error"] {
576 background-color: #FF0000;
577}
578
579#syncStatusMessage[message-type="migration"] {
580 background-color: #FFCF00;
581}
582
e9fbfc3a
RK
583#syncStatusMessageWrapper {
584 -moz-box-flex: 1;
585 padding-right: 5px;
586}
587
588#syncStatusMessageTitle, #syncStatusMessageDescription {
589 color: #A09090;
590}
591
592#syncStatusMessage[message-type="migration"] #syncStatusMessageTitle {
593 display: none;
594}
595
596#syncStatusMessageTitle {
597 font-weight: bold !important;
598 font-size: 16px;
599 line-height: 157%;
600 margin: 0 0 20px;
601}
602
13875a54
RK
603#syncStatusMessageDescription {
604 font-size: 14px;
605 line-height: 158%;
606 margin: 0 !important;
607}
608
609#syncStatusMessageClose {
610 margin: 0px;
611}
612
613#fxaSyncEngines > vbox:first-child {
614 margin-right: 80px;
615}
616
617#fxaSyncComputerName {
618 margin-inline-start: 0px;
619 -moz-box-flex: 1;
620}
621
622#tosPP-small-ToS {
19988d2d
RK
623 margin-bottom: 1em;
624}
625
626#fxaLoginRejectedWarning {
627 list-style-image: url("chrome://browser/skin/warning.svg");
628 margin: 4px 8px 0px 0px;
13875a54
RK
629}
630
631#noFxaCaption {
632 font-weight: bold;
633 margin-bottom: 11px;
634}
635
636.fxaSyncIllustration {
637 margin-top: 35px;
638}
639
640#syncOptions caption {
641 margin-bottom: 11px;
642}
643
19988d2d
RK
644#fxaSyncComputerName {
645 margin-left: 0px;
13875a54
RK
646}
647
648#noFxaDescription {
649 margin-bottom: 20px !important;
650}
651
652.separator {
653 border-bottom: 1px solid var(--in-content-header-border-color);
654}
655
656.fxaAccountBox {
657 border: 1px solid #A09090;
658 border-radius: 5px;
659 padding: 14px 20px 14px 14px;
660}
661
662#signedOutAccountBoxTitle {
663 font-weight: bold;
664}
665
666.fxaAccountBoxButtons {
667 margin-bottom: 0 !important;
668 margin-top: 11px;
669}
670
671.fxaAccountBoxButtons > * {
672 -moz-box-flex: 1;
673}
674
675.fxaAccountBoxButtons > button {
676 text-align: center;
677 padding-left: 11px;
678 padding-right: 11px;
679 margin: 0;
680 min-width: 0;
681}
682
683.fxaAccountBoxButtons > button:first-child {
684 margin-right: 14px !important;
685}
686
687.fxaSyncIllustration {
688 width: 231px;
689 list-style-image: url(chrome://browser/skin/fxa/sync-illustration.png)
690}
691
692#fxaEmailAddress1,
693#fxaEmailAddress2,
694#fxaEmailAddress3 {
695 word-break: break-all;
696}
697
698.fxaFirefoxLogo {
699 list-style-image: url(chrome://browser/skin/fxa/logo.png);
700 max-width: 64px;
701 margin-inline-end: 14px;
702}
703
704.fxaMobilePromo {
7327c957
RK
705 margin-bottom: 20px;
706 margin-top: 25px;
13875a54
RK
707}
708
709#fxaLoginRejectedWarning {
710 list-style-image: url(chrome://browser/skin/warning.svg);
711 filter: drop-shadow(0 1px 0 hsla(206, 50%, 10%, .15));
712 margin: 4px 8px 0px 0px;
713}
714
715#syncOptions {
716 margin-bottom: 27.5px;
717}
718
7327c957
RK
719.androidLink {
720 background-image: url("chrome://browser/skin/fxa/android.png");
721}
722
723.iOSLink {
724 background-image: url("chrome://browser/skin/fxa/ios.png");
725}
726
13875a54
RK
727.androidLink,
728.iOSLink {
7327c957
RK
729 margin: 0 0 0 2px;
730 padding-left: 28px;
731 padding-top: 6px;
732 height: 28px;
733 background-repeat: no-repeat;
734 background-size: 24px 28px;
13875a54
RK
735}
736
737#tosPP-small {
738 margin-top: 20px;
739 margin-bottom: 20px;
740}
741
742@media (min-resolution: 1.1dppx) {
7327c957
RK
743 .androidLink {
744 background-image: url("chrome://browser/skin/fxa/android@2x.png");
745 }
746 .iOSLink {
747 background-image: url("chrome://browser/skin/fxa/ios@2x.png");
748 }
13875a54
RK
749 .fxaSyncIllustration {
750 list-style-image: url(chrome://browser/skin/fxa/sync-illustration@2x.png)
751 }
752 .fxaFirefoxLogo {
753 list-style-image: url(chrome://browser/skin/fxa/logo@2x.png);
754 }
755 #fxaProfileImage {
756 list-style-image: url(chrome://browser/skin/fxa/default-avatar@2x.png);
757 }
758}
759
760/* === END shared/incontentprefs/preferences.inc.css === */
bb9362a9 761
0bcd5587
RK
762caption {
763}
764
bb9362a9
RK
765.indent-small {
766 -moz-margin-start: 10px;
767}
768
769@media (min-resolution: 2dppx) {
770 checkbox:hover::before,
771 checkbox[checked]::before {
772 }
773
774 checkbox[checked]::before {
775 }
bb9362a9 776}