Commit | Line | Data |
---|---|---|
ed351b91 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 | |
3 | * file, You can obtain one at http://mozilla.org/MPL/2.0/. */ | |
4 | ||
5 | @import url("chrome://global/skin/in-content/common.css"); | |
6 | /* Body and container */ | |
7 | body { | |
8 | display: flex; | |
9 | flex-direction: column; | |
10 | box-sizing: border-box; | |
11 | min-height: 100vh; | |
12 | padding-top: 0; | |
13 | padding-bottom: 0; | |
dae45075 RK |
14 | padding-inline-start: calc(48px + 4.6em); |
15 | padding-inline-end: 48px; | |
ed351b91 RK |
16 | align-items: center; |
17 | justify-content: center; | |
18 | } | |
19 | ||
20 | .container { | |
21 | min-width: 13em; | |
22 | max-width: 52em; | |
23 | } | |
24 | ||
25 | .container.restore-chosen { | |
26 | display: flex; | |
27 | flex-direction: column; | |
28 | flex-grow: 1; | |
29 | margin: 10vh 0; | |
30 | } | |
31 | ||
32 | /* Typography */ | |
33 | .title { | |
7729765c | 34 | background-image: url("chrome://global/skin/icons/info.svg"); |
ed351b91 RK |
35 | background-position: left 0; |
36 | background-repeat: no-repeat; | |
37 | background-size: 1.6em; | |
dae45075 RK |
38 | margin-inline-start: -2.3em; |
39 | padding-inline-start: 2.3em; | |
ed351b91 RK |
40 | font-size: 2.5em; |
41 | } | |
42 | ||
a9f6369d | 43 | .title:moz-locale-dir(rtl), |
dae45075 | 44 | .title:dir(rtl) { |
ed351b91 RK |
45 | background-position: right 0; |
46 | } | |
47 | ||
48 | .title-text { | |
49 | border-bottom: 1px solid #666699; | |
50 | font-size: inherit; | |
51 | padding-bottom: 0.4em; | |
52 | } | |
53 | ||
54 | @media (max-width: 675px) { | |
55 | body { | |
56 | padding: 0 48px; | |
57 | } | |
58 | ||
59 | .title { | |
60 | background-image: none !important; | |
dae45075 RK |
61 | padding-inline-start: 0; |
62 | margin-inline-start: 0; | |
ed351b91 RK |
63 | } |
64 | ||
65 | .title-text { | |
66 | padding-top: 0; | |
67 | } | |
68 | } | |
69 | ||
70 | ul, ol { | |
71 | margin: 0; | |
72 | padding: 0; | |
dae45075 | 73 | margin-inline-start: 1em; |
ed351b91 RK |
74 | } |
75 | ||
76 | ul > li, ol > li { | |
77 | margin-bottom: .5em; | |
78 | } | |
79 | ||
80 | ul { | |
81 | list-style: disc; | |
82 | } | |
83 | ||
84 | /* Buttons */ | |
85 | .button-container { | |
86 | margin-top: 1.2em; | |
87 | } | |
88 | ||
89 | .button-container > button { | |
90 | min-width: 150px; | |
91 | } | |
92 | ||
93 | .button-container > button:first-child { | |
dae45075 | 94 | margin-inline-start: 0; |
ed351b91 RK |
95 | } |
96 | ||
97 | /* Trees */ | |
98 | .tree-container { | |
99 | margin-top: 1.2em; | |
100 | flex-grow: 1; | |
101 | min-height: 12em; | |
102 | } | |
103 | ||
104 | .tree-container > tree { | |
105 | height: 100%; | |
106 | } | |
107 | ||
108 | tree { | |
109 | width: 100%; | |
110 | } |