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; | |
7 | max-width: 660px; | |
8 | margin-left: auto; | |
9 | margin-right: auto; | |
10 | } | |
11 | ||
12 | .light, | |
13 | .light-button { | |
14 | color: #333333; | |
15 | background-color: #ffffff; | |
16 | } | |
17 | ||
18 | .dark, | |
19 | .dark-button { | |
20 | color: #eeeeee; | |
21 | background-color: #333333; | |
22 | } | |
23 | ||
24 | .sepia, | |
25 | .sepia-button { | |
26 | color: #333333; | |
27 | background-color: #f0ece7; | |
28 | } | |
29 | ||
30 | .sans-serif { | |
31 | font-family: "Fira Sans", Helvetica, Arial, sans-serif; | |
32 | } | |
33 | ||
34 | .serif { | |
35 | font-family: "Charis SIL", Georgia, "Times New Roman", serif; | |
36 | } | |
37 | ||
38 | .font-size1 { | |
39 | font-size: 10px; | |
40 | } | |
41 | ||
42 | .font-size2 { | |
43 | font-size: 12px; | |
44 | } | |
45 | ||
46 | .font-size3 { | |
47 | font-size: 14px; | |
48 | } | |
49 | ||
50 | .font-size4 { | |
51 | font-size: 16px; | |
52 | } | |
53 | ||
54 | .font-size5 { | |
55 | font-size: 18px; | |
56 | } | |
57 | ||
58 | .font-size6 { | |
59 | font-size: 20px; | |
60 | } | |
61 | ||
62 | .font-size7 { | |
63 | font-size: 22px; | |
64 | } | |
65 | ||
66 | .font-size8 { | |
67 | font-size: 24px; | |
68 | } | |
69 | ||
70 | .font-size9 { | |
71 | font-size: 26px; | |
72 | } | |
73 | ||
74 | ||
75 | /* Loading/error message */ | |
76 | ||
77 | .message { | |
78 | margin-top: 40px; | |
79 | display: none; | |
80 | text-align: center; | |
81 | width: 100%; | |
82 | font-size: 0.9rem; | |
83 | } | |
84 | ||
85 | /* Header */ | |
86 | ||
87 | .header { | |
88 | text-align: start; | |
89 | display: none; | |
90 | } | |
91 | ||
92 | .domain { | |
93 | font-size: 0.9rem; | |
94 | line-height: 1.33rem; | |
95 | padding-bottom: 4px; | |
96 | font-family: "Fira Sans", Helvetica, Arial, sans-serif; | |
97 | text-decoration: none; | |
98 | border-bottom: 1px solid; | |
99 | color: #0095dd; | |
100 | } | |
101 | ||
102 | .light > .container > .header > .domain, | |
103 | .sepia > .container > .header > .domain { | |
104 | border-bottom-color: #333333; | |
105 | } | |
106 | ||
107 | .dark > .container > .header > .domain { | |
108 | border-bottom-color: #eeeeee; | |
109 | } | |
110 | ||
111 | .header > h1 { | |
112 | font-size: 1.33rem; | |
113 | line-height: 1.66rem; | |
114 | width: 100%; | |
115 | margin: 30px 0; | |
116 | padding: 0; | |
117 | } | |
118 | ||
119 | .header > .credits { | |
120 | font-size: 0.9rem; | |
121 | line-height: 1.33rem; | |
122 | margin: 0 0 30px 0; | |
123 | padding: 0; | |
124 | font-style: italic; | |
125 | } | |
126 | ||
127 | /* Content */ | |
128 | ||
129 | .content { | |
130 | display: none; | |
131 | font-size: 1rem; | |
132 | line-height: 1.44rem; | |
133 | } | |
134 | ||
135 | .content h1, | |
136 | .content h2, | |
137 | .content h3 { | |
138 | font-weight: bold; | |
139 | } | |
140 | ||
141 | .content h1 { | |
142 | font-size: 1.33rem; | |
143 | line-height: 1.66rem; | |
144 | } | |
145 | ||
146 | .content h2 { | |
147 | font-size: 1.1rem; | |
148 | line-height: 1.66rem; | |
149 | } | |
150 | ||
151 | .content h3 { | |
152 | font-size: 1rem; | |
153 | line-height: 1.66rem; | |
154 | } | |
155 | ||
156 | .content a { | |
157 | text-decoration: underline; | |
158 | font-weight: normal; | |
159 | } | |
160 | ||
161 | .content a, | |
162 | .content a:visited, | |
163 | .content a:hover, | |
164 | .content a:active { | |
165 | color: #0095dd; | |
166 | } | |
167 | ||
168 | .content * { | |
169 | max-width: 100%; | |
170 | height: auto; | |
171 | } | |
172 | ||
173 | .content p, | |
174 | .content img, | |
175 | .content code, | |
176 | .content pre, | |
177 | .content blockquote, | |
178 | .content ul, | |
179 | .content ol, | |
180 | .content li { | |
181 | margin: 0 0 30px 0; | |
182 | } | |
183 | ||
184 | .content .wp-caption, | |
185 | .content figure { | |
186 | margin: 0 30px 30px 30px; | |
187 | } | |
188 | ||
189 | .content .caption, | |
190 | .content .wp-caption-text, | |
191 | .content figcaption { | |
192 | font-size: 0.9rem; | |
193 | line-height: 1.33rem; | |
194 | font-style: italic; | |
195 | } | |
196 | ||
197 | .content code, | |
198 | .content pre { | |
199 | white-space: pre-wrap; | |
200 | } | |
201 | ||
202 | .content blockquote { | |
203 | padding: 0; | |
204 | -moz-padding-start: 16px; | |
205 | } | |
206 | ||
207 | .light > .container > .content blockquote, | |
208 | .sepia > .container > .content blockquote { | |
209 | -moz-border-start: 2px solid #333333; | |
210 | } | |
211 | ||
212 | .dark > .container > .content blockquote { | |
213 | -moz-border-start: 2px solid #eeeeee; | |
214 | } | |
215 | ||
216 | .content ul, | |
217 | .content ol { | |
218 | padding: 0; | |
219 | } | |
220 | ||
221 | .content ul { | |
222 | -moz-padding-start: 30px; | |
223 | list-style: disk; | |
224 | } | |
225 | ||
226 | .content ol { | |
227 | -moz-padding-start: 30px; | |
228 | list-style: decimal; | |
229 | } | |
230 | ||
231 | /*======= Controls toolbar =======*/ | |
232 | ||
233 | .toolbar { | |
234 | font-family: "Fira Sans", Helvetica, Arial, sans-serif; | |
235 | position: fixed; | |
236 | height: 100%; | |
237 | top: 0px; | |
238 | left: 0px; | |
239 | margin: 0; | |
240 | padding: 0; | |
241 | list-style: none; | |
242 | background-color: #FBFBFB; | |
243 | -moz-user-select: none; | |
244 | border-right: 1px solid #B5B5B5; | |
245 | } | |
246 | ||
247 | .button { | |
248 | color: white; | |
249 | display: block; | |
250 | background-position: center; | |
251 | background-size: 24px 24px; | |
252 | background-repeat: no-repeat; | |
253 | background-color: transparent; | |
254 | height: 40px; | |
255 | width: 40px; | |
256 | border-top: 0; | |
257 | border-left: 0; | |
258 | border-right: 0; | |
259 | border-bottom: 1px solid #c1c1c1; | |
260 | padding: 0; | |
261 | } | |
262 | ||
263 | .button[hidden] { | |
264 | display: none; | |
265 | } | |
266 | ||
267 | .dropdown { | |
268 | text-align: center; | |
269 | list-style: none; | |
270 | margin: 0px; | |
271 | padding: 0px; | |
272 | } | |
273 | ||
274 | .dropdown li { | |
275 | margin: 0px; | |
276 | padding: 0px; | |
277 | } | |
278 | ||
279 | /*======= Font style popup =======*/ | |
280 | ||
281 | .dropdown-popup { | |
282 | min-width: 250px; | |
283 | text-align: start; | |
284 | position: absolute; | |
285 | left: 48px; /* offset to account for toolbar width */ | |
286 | z-index: 1000; | |
287 | background-color: #FBFBFB; | |
288 | visibility: hidden; | |
289 | border-radius: 4px; | |
290 | border: 1px 1px 0 1px solid #B5B5B5; | |
291 | box-shadow: 0px 1px 12px #666; | |
292 | } | |
293 | ||
294 | .dropdown-popup > hr { | |
295 | width: 100%; | |
296 | height: 0px; | |
297 | border: 0px; | |
298 | border-top: 1px solid #B5B5B5; | |
299 | margin: 0; | |
300 | } | |
301 | ||
302 | .open > .dropdown-popup { | |
303 | visibility: visible; | |
304 | } | |
305 | ||
306 | .dropdown-arrow { | |
307 | position: absolute; | |
308 | top: 30px; /* offset arrow from top of popup */ | |
309 | left: -16px; | |
310 | width: 24px; | |
311 | height: 24px; | |
312 | background-image: url("chrome://global/skin/reader/RM-Type-Controls-Arrow.svg"); | |
313 | display: block; | |
314 | } | |
315 | ||
316 | #font-type-buttons, | |
317 | #font-size-buttons, | |
318 | #color-scheme-buttons { | |
319 | display: flex; | |
320 | flex-direction: row; | |
321 | } | |
322 | ||
323 | #font-type-buttons > button:first-child { | |
324 | border-top-left-radius: 3px; | |
325 | } | |
326 | #font-type-buttons > button:last-child { | |
327 | border-top-right-radius: 3px; | |
328 | } | |
329 | #color-scheme-buttons > button:first-child { | |
330 | border-bottom-left-radius: 3px; | |
331 | } | |
332 | #color-scheme-buttons > button:last-child { | |
333 | border-bottom-right-radius: 3px; | |
334 | } | |
335 | ||
336 | #font-type-buttons > button, | |
337 | #font-size-buttons > button, | |
338 | #color-scheme-buttons > button { | |
339 | text-align: center; | |
340 | border-left: 1px solid #B5B5B5; | |
341 | border-right: 0; | |
342 | border-top: 0; | |
343 | border-bottom: 0; | |
344 | padding: 10px; | |
345 | } | |
346 | ||
347 | #font-type-buttons > button, | |
348 | #font-size-buttons > button { | |
349 | width: 50%; | |
350 | background-color: transparent; | |
351 | } | |
352 | ||
353 | #color-scheme-buttons > button { | |
354 | width: 33.33%; | |
355 | font-size: 14px; | |
356 | } | |
357 | ||
358 | #font-type-buttons > button:first-child, | |
359 | #font-size-buttons > button:first-child, | |
360 | #color-scheme-buttons > button:first-child { | |
361 | border-left: 0px; | |
362 | } | |
363 | ||
364 | #font-type-buttons > button { | |
365 | display: inline-block; | |
366 | font-size: 48px; | |
367 | } | |
368 | ||
369 | #font-type-buttons > button:active:hover, | |
370 | #font-type-buttons > button.selected, | |
371 | #color-scheme-buttons > button:active:hover, | |
372 | #color-scheme-buttons > button.selected { | |
373 | box-shadow: inset 0 -3px 0 0 #FC6420; | |
374 | } | |
375 | ||
376 | #font-type-buttons > button > div { | |
377 | color: #666; | |
378 | font-size: 12px; | |
379 | } | |
380 | ||
381 | .button:hover, | |
382 | #font-size-buttons > button:hover, | |
383 | #font-type-buttons > button:hover { | |
384 | background-color: #EBEBEB; | |
385 | } | |
386 | ||
387 | .dropdown.open, | |
388 | .button:active, | |
389 | #font-size-buttons > button:active, | |
390 | #font-size-buttons > button.selected { | |
391 | background-color: #DADADA; | |
392 | } | |
393 | ||
394 | /* Only used on Android */ | |
395 | #font-size-sample { | |
396 | display: none; | |
397 | } | |
398 | ||
399 | .serif-button { | |
400 | font-family: "Charis SIL", Georgia, "Times New Roman", serif; | |
401 | } | |
402 | ||
403 | .minus-button, | |
404 | .plus-button { | |
405 | background-color: transparent; | |
406 | border: 0; | |
407 | height: 50px; | |
408 | background-size: 18px 18px; | |
409 | background-repeat: no-repeat; | |
410 | background-position: center; | |
411 | } | |
412 | ||
413 | /*======= Toolbar icons =======*/ | |
414 | ||
415 | /* Android-only controls */ | |
416 | .share-button { | |
417 | display: none; | |
418 | } | |
419 | ||
420 | .close-button { | |
421 | background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg"); | |
422 | height: 68px; | |
423 | background-position: center 8px; | |
424 | } | |
425 | ||
426 | .close-button:active, | |
427 | .close-button:hover { | |
428 | background-image: url("chrome://global/skin/reader/RM-Close-hover-24x24.svg"); | |
429 | background-color: #d94141; | |
430 | } | |
431 | ||
432 | .style-button { | |
433 | background-image: url("chrome://global/skin/reader/RM-Type-Controls-24x24.svg"); | |
434 | } | |
435 | ||
436 | .toggle-button.on { | |
437 | background-image: url("chrome://global/skin/reader/RM-Delete-24x24.svg"); | |
438 | } | |
439 | ||
440 | .toggle-button { | |
441 | background-image: url("chrome://global/skin/reader/RM-Add-24x24.svg"); | |
442 | } | |
443 | ||
444 | .list-button { | |
445 | background-image: url("chrome://global/skin/reader/RM-Reading-List-24x24.svg"); | |
446 | } | |
447 | .list-button.on { | |
448 | background-color: #d9d9d9; | |
449 | } | |
450 | ||
451 | .minus-button { | |
452 | background-image: url("chrome://global/skin/reader/RM-Minus-24x24.svg"); | |
453 | } | |
454 | ||
455 | .plus-button { | |
456 | background-image: url("chrome://global/skin/reader/RM-Plus-24x24.svg"); | |
457 | } | |
458 | ||
459 | @media print { | |
460 | .toolbar { | |
461 | display: none; | |
462 | } | |
463 | } |