compensate for missed tag
[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.svg);
463 margin-inline-end: 15px;
464 image-rendering: -moz-crisp-edges;
465}
466
467#fxaLoginStatus[hasName] #fxaProfileImage {
468 max-width: 80px;
469}
470
471#fxaProfileImage.actionable {
472 cursor: pointer;
473}
474
475#fxaProfileImage.actionable:hover {
476 box-shadow: 0px 0px 0px 1px #FFCF00;
477}
478
479#fxaProfileImage.actionable:hover:active {
480 box-shadow: 0px 0px 0px 1px #FF9F00;
481}
482
483#noFxaAccount {
484 /* Overriding the margins from the base preferences.css theme file.
485 These overrides can be simplified by fixing bug 1027174 */
486 margin: 0;
487 padding-top: 15px;
488}
489
490#fxaContentWrapper {
491 -moz-box-flex: 1;
492}
493
494#noFxaGroup {
495 -moz-box-flex: 1;
496 margin: 0;
497}
498
499#fxaContentWrapper {
500 padding-right: 15px;
501}
502
503#noFxaGroup > vbox,
504#fxaGroup {
505 -moz-box-align: start;
506}
507
508#syncStatusMessage {
509 visibility: collapse;
510 opacity: 0;
511 transition: opacity 1s linear;
512 padding: 14px 8px 14px 14px;
513 border-radius: 2px;
514}
515
516#syncStatusMessage[message-type] {
517 visibility: visible;
518 opacity: 1;
519}
520
521#syncStatusMessage[message-type="verify-success"] {
522 background-color: #008484;
523}
524
525#syncStatusMessage[message-type="verify-error"] {
526 background-color: #FF0000;
527}
528
529#syncStatusMessage[message-type="migration"] {
530 background-color: #FF9F00;
531}
532
533#syncStatusMessageWrapper {
534 -moz-box-flex: 1;
535 padding-right: 5px;
536}
537
538#syncStatusMessageTitle, #syncStatusMessageDescription {
539 color: #9C9CFF;
540}
541
542#syncStatusMessage[message-type="migration"] #syncStatusMessageTitle {
543 display: none;
544}
545
546#syncStatusMessageTitle {
547 font-weight: bold !important;
548 font-size: 16px;
549 line-height: 157%;
550 margin: 0 0 20px;
551}
552
553#syncStatusMessageDescription {
554 font-size: 14px;
555 line-height: 158%;
556 margin: 0 !important;
557}
558
559#syncStatusMessageClose {
560 margin: 0px;
561}
562
563#syncStatusMessage {
564 visibility: collapse;
565 opacity: 0;
566 transition: opacity 1s linear;
567 padding: 14px 8px 14px 14px;
568 border-radius: 2px;
569}
570
571#syncStatusMessage[message-type] {
572 visibility: visible;
573 opacity: 1;
574}
575
576#syncStatusMessage[message-type="verify-success"] {
577 background-color: #008484;
578}
579
580#syncStatusMessage[message-type="verify-error"] {
581 background-color: #FF0000;
582}
583
584#syncStatusMessage[message-type="migration"] {
585 background-color: #FFCF00;
586}
587
588#syncStatusMessageWrapper {
589 -moz-box-flex: 1;
590 padding-right: 5px;
591}
592
593#syncStatusMessageTitle, #syncStatusMessageDescription {
594 color: #A09090;
595}
596
597#syncStatusMessage[message-type="migration"] #syncStatusMessageTitle {
598 display: none;
599}
600
601#syncStatusMessageTitle {
602 font-weight: bold !important;
603 font-size: 16px;
604 line-height: 157%;
605 margin: 0 0 20px;
606}
607
608#syncStatusMessageDescription {
609 font-size: 14px;
610 line-height: 158%;
611 margin: 0 !important;
612}
613
614#syncStatusMessageClose {
615 margin: 0px;
616}
617
618#fxaSyncEngines > vbox:first-child {
619 margin-right: 80px;
620}
621
622#fxaSyncComputerName {
623 margin-inline-start: 0px;
624 -moz-box-flex: 1;
625}
626
627#tosPP-small-ToS {
628 margin-bottom: 1em;
629}
630
631#fxaLoginRejectedWarning {
632 list-style-image: url("chrome://browser/skin/warning.svg");
633 margin: 4px 8px 0px 0px;
634}
635
636#noFxaCaption {
637 font-weight: bold;
638 margin-bottom: 11px;
639}
640
641.fxaSyncIllustration {
642 margin-top: 35px;
643}
644
645#syncOptions caption {
646 margin-bottom: 11px;
647}
648
649#fxaSyncComputerName {
650 margin-left: 0px;
651}
652
653#noFxaDescription {
654 margin-bottom: 20px !important;
655}
656
657.separator {
658 border-bottom: 1px solid var(--in-content-header-border-color);
659}
660
661.fxaAccountBox {
662 border: 1px solid #A09090;
663 border-radius: 5px;
664 padding: 14px 20px 14px 14px;
665}
666
667#signedOutAccountBoxTitle {
668 font-weight: bold;
669}
670
671.fxaAccountBoxButtons {
672 margin-bottom: 0 !important;
673 margin-top: 11px;
674}
675
676.fxaAccountBoxButtons > * {
677 -moz-box-flex: 1;
678}
679
680.fxaAccountBoxButtons > button {
681 text-align: center;
682 padding-left: 11px;
683 padding-right: 11px;
684 margin: 0;
685 min-width: 0;
686}
687
688.fxaAccountBoxButtons > button:first-child {
689 margin-right: 14px !important;
690}
691
692.fxaSyncIllustration {
693 width: 231px;
694 list-style-image: url(chrome://browser/skin/fxa/sync-illustration.png)
695}
696
697#fxaLoginStatus[hasName] #fxaEmailAddress1 {
698 font-size: 1.1rem;
699}
700
701#fxaEmailAddress1,
702#fxaEmailAddress2,
703#fxaEmailAddress3 {
704 word-break: break-all;
705}
706
707.fxaFirefoxLogo {
708 list-style-image: url(chrome://browser/skin/fxa/logo.png);
709 max-width: 64px;
710 margin-inline-end: 14px;
711}
712
713.fxaMobilePromo {
714 margin-bottom: 20px;
715 margin-top: 25px;
716}
717
718#fxaLoginRejectedWarning {
719 list-style-image: url(chrome://browser/skin/warning.svg);
720 filter: drop-shadow(0 1px 0 hsla(206, 50%, 10%, .15));
721 margin: 4px 8px 0px 0px;
722}
723
724#syncOptions {
725 margin-bottom: 27.5px;
726}
727
728.androidLink {
729 background-image: url("chrome://browser/skin/fxa/android.png");
730}
731
732.iOSLink {
733 background-image: url("chrome://browser/skin/fxa/ios.png");
734}
735
736.androidLink,
737.iOSLink {
738 margin: 0 0 0 2px;
739 padding-left: 28px;
740 padding-top: 6px;
741 height: 28px;
742 background-repeat: no-repeat;
743 background-size: 24px 28px;
744}
745
746#tosPP-small {
747 margin-top: 20px;
748 margin-bottom: 20px;
749}
750
751@media (min-resolution: 1.1dppx) {
752 .androidLink {
753 background-image: url("chrome://browser/skin/fxa/android@2x.png");
754 }
755 .iOSLink {
756 background-image: url("chrome://browser/skin/fxa/ios@2x.png");
757 }
758 .fxaSyncIllustration {
759 list-style-image: url(chrome://browser/skin/fxa/sync-illustration@2x.png)
760 }
761 .fxaFirefoxLogo {
762 list-style-image: url(chrome://browser/skin/fxa/logo@2x.png);
763 }
764}
765
766/* === END shared/incontentprefs/preferences.inc.css === */
767
768caption {
769}
770
771.indent-small {
772 -moz-margin-start: 10px;
773}
774
775@media (min-resolution: 2dppx) {
776 checkbox:hover::before,
777 checkbox[checked]::before {
778 }
779
780 checkbox[checked]::before {
781 }
782}