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