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 | ||
dae45075 | 43 | .title:dir(rtl) { |
ed351b91 RK |
44 | background-position: right 0; |
45 | } | |
46 | ||
47 | .title-text { | |
48 | border-bottom: 1px solid #666699; | |
49 | font-size: inherit; | |
50 | padding-bottom: 0.4em; | |
51 | } | |
52 | ||
53 | @media (max-width: 675px) { | |
54 | body { | |
55 | padding: 0 48px; | |
56 | } | |
57 | ||
58 | .title { | |
59 | background-image: none !important; | |
dae45075 RK |
60 | padding-inline-start: 0; |
61 | margin-inline-start: 0; | |
ed351b91 RK |
62 | } |
63 | ||
64 | .title-text { | |
65 | padding-top: 0; | |
66 | } | |
67 | } | |
68 | ||
69 | ul, ol { | |
70 | margin: 0; | |
71 | padding: 0; | |
dae45075 | 72 | margin-inline-start: 1em; |
ed351b91 RK |
73 | } |
74 | ||
75 | ul > li, ol > li { | |
76 | margin-bottom: .5em; | |
77 | } | |
78 | ||
79 | ul { | |
80 | list-style: disc; | |
81 | } | |
82 | ||
83 | /* Buttons */ | |
84 | .button-container { | |
85 | margin-top: 1.2em; | |
86 | } | |
87 | ||
88 | .button-container > button { | |
89 | min-width: 150px; | |
90 | } | |
91 | ||
92 | .button-container > button:first-child { | |
dae45075 | 93 | margin-inline-start: 0; |
ed351b91 RK |
94 | } |
95 | ||
96 | /* Trees */ | |
97 | .tree-container { | |
98 | margin-top: 1.2em; | |
99 | flex-grow: 1; | |
100 | min-height: 12em; | |
101 | } | |
102 | ||
103 | .tree-container > tree { | |
104 | height: 100%; | |
105 | } | |
106 | ||
107 | tree { | |
108 | width: 100%; | |
109 | } |