Commit | Line | Data |
---|---|---|
21c0144b 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 file, | |
3 | * You can obtain one at http://mozilla.org/MPL/2.0/. */ | |
4 | ||
5 | body { | |
6 | padding: 64px 0; | |
e6947267 RK |
7 | } |
8 | ||
9 | @media (max-width: 785px) { | |
10 | body { | |
11 | padding-top: 64px; | |
dae45075 | 12 | padding-inline-end: 0; |
e6947267 | 13 | padding-bottom: 64px; |
dae45075 RK |
14 | padding-inline-start: 51px; |
15 | } | |
16 | } | |
17 | ||
18 | @media print { | |
19 | #container { | |
20 | max-width: 100% !important; | |
21 | font-size: 14px !important; | |
22 | font-family: Georgia, "Times New Roman", serif !important; | |
23 | } | |
24 | ||
25 | body { | |
26 | padding-top: 0px; | |
27 | padding-bottom: 0px; | |
e6947267 RK |
28 | } |
29 | } | |
30 | ||
31 | body.loaded { | |
32 | transition: color 0.4s, background-color 0.4s; | |
21c0144b RK |
33 | } |
34 | ||
da3c2755 | 35 | body.light { |
21c0144b RK |
36 | color: #333333; |
37 | background-color: #ffffff; | |
38 | } | |
39 | ||
da3c2755 | 40 | body.dark { |
21c0144b RK |
41 | color: #eeeeee; |
42 | background-color: #333333; | |
43 | } | |
44 | ||
da3c2755 RK |
45 | body.dark *::-moz-selection { |
46 | background-color: #FFFFFF; | |
47 | color: #0095DD; | |
48 | } | |
49 | body.dark a::-moz-selection { | |
50 | color: #DD4800; | |
21c0144b RK |
51 | } |
52 | ||
da3c2755 RK |
53 | body.sepia { |
54 | color: #5b4636; | |
55 | background-color: #f4ecd8; | |
21c0144b RK |
56 | } |
57 | ||
da3c2755 RK |
58 | body.sans-serif, |
59 | body.sans-serif .remove-button { | |
60 | font-family: Helvetica, Arial, sans-serif; | |
21c0144b RK |
61 | } |
62 | ||
da3c2755 RK |
63 | body.serif, |
64 | body.serif .remove-button { | |
65 | font-family: Georgia, "Times New Roman", serif; | |
21c0144b RK |
66 | } |
67 | ||
da3c2755 RK |
68 | #container { |
69 | max-width: 30em; | |
70 | margin: 0 auto; | |
71 | } | |
72 | ||
73 | #container.font-size1 { | |
21c0144b RK |
74 | font-size: 12px; |
75 | } | |
76 | ||
da3c2755 | 77 | #container.font-size2 { |
21c0144b RK |
78 | font-size: 14px; |
79 | } | |
80 | ||
da3c2755 | 81 | #container.font-size3 { |
21c0144b RK |
82 | font-size: 16px; |
83 | } | |
84 | ||
da3c2755 | 85 | #container.font-size4 { |
21c0144b RK |
86 | font-size: 18px; |
87 | } | |
88 | ||
da3c2755 | 89 | #container.font-size5 { |
21c0144b RK |
90 | font-size: 20px; |
91 | } | |
92 | ||
da3c2755 | 93 | #container.font-size6 { |
21c0144b RK |
94 | font-size: 22px; |
95 | } | |
96 | ||
da3c2755 | 97 | #container.font-size7 { |
21c0144b RK |
98 | font-size: 24px; |
99 | } | |
100 | ||
da3c2755 | 101 | #container.font-size8 { |
21c0144b RK |
102 | font-size: 26px; |
103 | } | |
104 | ||
da3c2755 RK |
105 | #container.font-size9 { |
106 | font-size: 28px; | |
e6947267 | 107 | } |
21c0144b | 108 | |
dae45075 RK |
109 | #container.content-width1 { |
110 | max-width: 20em; | |
111 | } | |
112 | ||
113 | #container.content-width2 { | |
114 | max-width: 25em; | |
115 | } | |
116 | ||
117 | #container.content-width3 { | |
118 | max-width: 30em; | |
119 | } | |
120 | ||
121 | #container.content-width4 { | |
122 | max-width: 35em; | |
123 | } | |
124 | ||
125 | #container.content-width5 { | |
126 | max-width: 40em; | |
127 | } | |
128 | ||
129 | #container.content-width6 { | |
130 | max-width: 45em; | |
131 | } | |
132 | ||
133 | #container.content-width7 { | |
134 | max-width: 50em; | |
135 | } | |
136 | ||
137 | #container.content-width8 { | |
138 | max-width: 55em; | |
139 | } | |
140 | ||
141 | #container.content-width9 { | |
142 | max-width: 60em; | |
143 | } | |
144 | ||
da3c2755 | 145 | /* Override some controls and content styles based on color scheme */ |
21c0144b | 146 | |
da3c2755 RK |
147 | body.light > .container > .header > .domain { |
148 | border-bottom-color: #333333 !important; | |
21c0144b RK |
149 | } |
150 | ||
da3c2755 RK |
151 | body.sepia > .container > .header > .domain { |
152 | border-bottom-color: #5b4636 !important; | |
21c0144b RK |
153 | } |
154 | ||
da3c2755 RK |
155 | body.dark > .container > .header > .domain { |
156 | border-bottom-color: #eeeeee !important; | |
21c0144b RK |
157 | } |
158 | ||
da3c2755 RK |
159 | body.sepia > .container > .footer { |
160 | background-color: #dedad4 !important; | |
e6947267 RK |
161 | } |
162 | ||
da3c2755 | 163 | body.light blockquote { |
dae45075 | 164 | border-inline-start: 2px solid #333333 !important; |
21c0144b RK |
165 | } |
166 | ||
da3c2755 | 167 | body.sepia blockquote { |
dae45075 | 168 | border-inline-start: 2px solid #5b4636 !important; |
21c0144b RK |
169 | } |
170 | ||
da3c2755 | 171 | body.dark blockquote { |
dae45075 RK |
172 | border-inline-start: 2px solid #eeeeee !important; |
173 | } | |
174 | ||
175 | /* Add toolbar transition base on loaded class */ | |
176 | ||
177 | body.loaded .toolbar { | |
178 | transition: transform 0.3s ease-out; | |
179 | } | |
180 | ||
181 | body:not(.loaded) .toolbar:-moz-locale-dir(ltr) { | |
182 | transform: translateX(-100%); | |
183 | } | |
184 | ||
185 | body:not(.loaded) .toolbar:-moz-locale-dir(rtl) { | |
186 | transform: translateX(100%); | |
21c0144b | 187 | } |