third part of syncing LCARStrek with Firefox 45-48 windows theme changes
[themes.git] / LCARStrek / browser / preferences / in-content / preferences.css
... / ...
CommitLineData
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/incontentprefs/preferences.inc.css === */
6
7@namespace html "http://www.w3.org/1999/xhtml";
8
9.main-content {
10 padding: 1.5em 0 0; /* That padding needs to match the upper stripe. */
11 overflow: auto;
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;
21}
22
23#mainPrefPane {
24 padding: 10px 20px 0px;
25 border-radius: 1em 0 0 0;
26 background-color: #000000;
27
28 max-width: 800px;
29 font: 11px "Liberation Sans",Arial,Tahoma,Helvetica,sans-serif;
30 font-size: 1.25rem;
31 color: #FF9F00;
32}
33
34* {
35 -moz-user-select: text;
36}
37
38button,
39treecol {
40 /* override the * rule */
41 -moz-user-select: none;
42}
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}
64
65/* Category List */
66
67#categories {
68 max-height: 100vh;
69}
70
71#categories > scrollbox {
72 overflow-x: hidden !important;
73}
74
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
85#category-general > .category-icon {
86 list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#general");
87}
88
89#category-general:hover > .category-icon,
90#category-general[selected] > .category-icon {
91 list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#general-active");
92}
93
94#category-search > .category-icon {
95 list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#search");
96}
97
98#category-search:hover > .category-icon,
99#category-search[selected] > .category-icon {
100 list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#search-active");
101}
102
103#category-content > .category-icon {
104 list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#content");
105}
106
107#category-content:hover > .category-icon,
108#category-content[selected] > .category-icon {
109 list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#content-active");
110}
111
112#category-application > .category-icon {
113 list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#applications");
114}
115
116#category-application:hover > .category-icon,
117#category-application[selected] > .category-icon {
118 list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#applications-active");
119}
120
121#category-privacy > .category-icon {
122 list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#privacy");
123}
124
125#category-privacy:hover > .category-icon,
126#category-privacy[selected] > .category-icon {
127 list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#privacy-active");
128}
129
130#category-security > .category-icon {
131 list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#security");
132}
133
134#category-security:hover > .category-icon,
135#category-security[selected] > .category-icon {
136 list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#security-active");
137}
138
139#category-sync > .category-icon {
140 list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#sync");
141}
142
143#category-sync:hover > .category-icon,
144#category-sync[selected] > .category-icon {
145 list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#sync-active");
146}
147
148#category-advanced > .category-icon {
149 list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#advanced");
150}
151
152#category-advanced:hover > .category-icon,
153#category-advanced[selected] > .category-icon {
154 list-style-image: url("chrome://browser/skin/preferences/in-content/icons.svg#advanced-active");
155}
156
157@media (max-width: 800px) {
158 .category-name {
159 display: none;
160 }
161}
162
163/* header */
164
165#header-advanced {
166 border-bottom: none;
167 padding-bottom: 0;
168}
169
170.indent {
171 margin-top: 7px;
172 margin-bottom: 7px;
173}
174
175/* General Pane */
176
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
214#useFirefoxSync {
215 font-size: 90%;
216 -moz-margin-end: 8px !important;
217}
218
219#getStarted {
220 font-size: 90%;
221}
222
223#isNotDefaultLabel {
224 font-weight: bold;
225}
226
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
234#notificationsPolicyLearnMore {
235 -moz-margin-start: 1.5em !important;
236}
237
238#defaultFontSizeLabel {
239 /* !important needed to override common !important rule */
240 -moz-margin-start: 4px !important;
241}
242
243/* Applications Pane Styles */
244
245#applicationsContent {
246 padding: 15px 0;
247}
248
249#filter {
250 -moz-margin-start: 0;
251}
252
253#handlersView {
254 height: 25em;
255}
256
257#handlersView > richlistitem {
258 min-height: 36px !important;
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 {
272 min-height: 36px;
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
283/* Privacy pane */
284
285.doNotTrackLearnMore,
286#trackingProtectionPBMLearnMore,
287#trackingProtectionLearnMore {
288 -moz-margin-start: 1.5em !important;
289 margin-top: 0;
290 font-weight: normal;
291}
292
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,
299#weavePrefsDeck:not([selectedIndex="3"]) > #noFxaAccount,
300#weavePrefsDeck:not([selectedIndex="4"]) > #hasFxaAccount,
301#fxaLoginStatus:not([selectedIndex="1"]) > #fxaLoginUnverified,
302#fxaLoginStatus:not([selectedIndex="2"]) > #fxaLoginRejected {
303 visibility: collapse;
304}
305
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
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,
323#weavePrefsDeck > #hasFxaAccount > vbox > label,
324#weavePrefsDeck > #hasFxaAccount > hbox:not(#tosPP-normal) > label {
325 /* no margin-start for elements at the begin of a line */
326 -moz-margin-start: 0;
327}
328
329#advancedPrefs {
330 padding-bottom: 0; /* no padding needed in inContent prefs */
331}
332
333#tabsElement {
334/* -moz-margin-end: 4px; / add the 4px end-margin of other elements */
335}
336
337#telemetryLearnMore,
338#FHRLearnMore,
339#crashReporterLearnMore {
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;
343 /* center the links */
344 margin-top: 8px;
345 margin-bottom: 8px;
346}
347
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
354.text-link {
355 margin-bottom: 0;
356}
357
358#showUpdateHistory {
359 -moz-margin-start: 0;
360}
361
362#fxaProfileImage {
363 -moz-user-focus: normal;
364}
365
366/**
367 * Dialog
368 */
369
370#dialogOverlay {
371 background-color: rgba(0,0,0,0.75);
372 visibility: hidden;
373}
374
375#dialogBox {
376 background-color: #000000;
377 background-clip: content-box;
378 color: #FF9F00;
379 /* font-size: 14px; */
380 border: 1px solid #9C9CFF;
381 border-radius: 10px;
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;
391 min-height: 20em;
392 min-width: 66ch;
393}
394
395#dialogBox > .groupbox-title {
396 -moz-margin-start: 0;
397 -moz-margin-end: 0;
398/* padding: 3.5px 0;
399 background-color: #F1F1F1; */
400}
401
402#dialogTitle {
403 text-align: center;
404 -moz-user-select: none;
405}
406
407.close-icon {
408 background-color: transparent !important;
409 border: none;
410 box-shadow: none;
411 padding: 0;
412 height: auto;
413 min-height: 16px;
414 min-width: 0;
415}
416
417#dialogBox > .groupbox-title > caption {
418 margin: 0;
419 border-radius: 1000px;
420 background-color: #A09090;
421}
422
423#dialogBox > .groupbox-body {
424 -moz-appearance: none;
425 padding: 0;
426}
427
428#dialogFrame {
429 -moz-box-flex: 1;
430 /* Default dialog dimensions */
431 height: 20em;
432 width: 66ch;
433}
434
435.largeDialogContainer.doScroll {
436 overflow-y: auto;
437 -moz-box-flex: 1;
438}
439
440/**
441 * End Dialog
442 */
443
444/**
445 * Font dialog menulist fixes
446 */
447
448#defaultFontType,
449#serif,
450#sans-serif,
451#monospace {
452 min-width: 30ch;
453}
454
455/**
456 * Sync
457 */
458
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 {
471 box-shadow: 0px 0px 0px 1px #FFCF00;
472}
473
474#fxaProfileImage.actionable:hover:active {
475 box-shadow: 0px 0px 0px 1px #FF9F00;
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;
509}
510
511#syncStatusMessage[message-type] {
512 visibility: visible;
513 opacity: 1;
514}
515
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
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
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
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 {
623 margin-bottom: 1em;
624}
625
626#fxaLoginRejectedWarning {
627 list-style-image: url("chrome://browser/skin/warning.svg");
628 margin: 4px 8px 0px 0px;
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
644#fxaSyncComputerName {
645 margin-left: 0px;
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 {
705 margin-bottom: 20px;
706 margin-top: 25px;
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
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
727.androidLink,
728.iOSLink {
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;
735}
736
737#tosPP-small {
738 margin-top: 20px;
739 margin-bottom: 20px;
740}
741
742@media (min-resolution: 1.1dppx) {
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 }
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 === */
761
762caption {
763}
764
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 }
776}