summaryrefslogtreecommitdiff
path: root/src/chrome/global/aboutReader.css
diff options
context:
space:
mode:
authorVineet Kumar <git@vineetk.net>2022-08-29 17:02:12 -0400
committerVineet Kumar <git@vineetk.net>2026-05-14 17:02:12 -0400
commit199c684366d6cf7431513ff15bae9861166a3a19 (patch)
treeab143c779ca20d6ba39be37b2ee2b93b2802cfa2 /src/chrome/global/aboutReader.css
parent48c977ab7fcab19dc4da19bba4b209b220c0a33e (diff)
stuffHEADmaster
Diffstat (limited to 'src/chrome/global/aboutReader.css')
-rw-r--r--src/chrome/global/aboutReader.css538
1 files changed, 252 insertions, 286 deletions
diff --git a/src/chrome/global/aboutReader.css b/src/chrome/global/aboutReader.css
index c2dc2cf..fd78418 100644
--- a/src/chrome/global/aboutReader.css
+++ b/src/chrome/global/aboutReader.css
@@ -6,327 +6,293 @@
6 * inadvertently match elements in the article content. */ 6 * inadvertently match elements in the article content. */
7 7
8body { 8body {
9 padding: 64px 51px; 9 padding: 64px 51px;
10} 10}
11 11
12body.loaded { 12body.loaded {
13 transition: color 0.4s, background-color 0.4s; 13 transition: color 0.4s, background-color 0.4s;
14} 14}
15 15
16body.light { 16body.light {
17 color: #000000; 17 color: #000000;
18 background-color: #ffffff; 18 background-color: #bfbbb6;
19} 19}
20 20
21body.dark { 21body.dark {
22 color: #eeeeee; 22 color: #bfbbb6;
23 background-color: #000000; 23 background-color: #181411;
24} 24}
25 25
26body.dark *::-moz-selection { 26body.dark *::-moz-selection {
27 background-color: #FFFFFF; 27 background-color: #bfbbb6;
28 color: #0095DD; 28 color: #33658a;
29} 29}
30body.dark a::-moz-selection { 30body.dark a::-moz-selection {
31 color: #DD4800; 31 color: #a63221;
32} 32}
33 33
34body.sepia { 34body.sepia {
35 color: #5b4636; 35 color: #5b4636;
36 background-color: #f4ecd8; 36 background-color: #f4ecd8;
37} 37}
38 38
39body.sans-serif, 39body.sans-serif,
40body.sans-serif .remove-button { 40body.sans-serif .remove-button {
41 font-family: Helvetica, Arial, sans-serif; 41 font-family: sans-serif;
42} 42}
43 43
44body.serif, 44body.serif,
45body.serif .remove-button { 45body.serif .remove-button {
46 font-family: Georgia, "Times New Roman", serif; 46 font-family: serif;
47} 47}
48 48
49.container { 49.container {
50 max-width: 30em; 50 --font-size: 12;
51 margin: 0 auto; 51 max-width: 30em;
52} 52 margin: 0 auto;
53 53 font-size: var(--font-size);
54.container.font-size1 {
55 font-size: 12px;
56}
57
58.container.font-size2 {
59 font-size: 14px;
60}
61
62.container.font-size3 {
63 font-size: 16px;
64}
65
66.container.font-size4 {
67 font-size: 18px;
68}
69
70.container.font-size5 {
71 font-size: 20px;
72}
73
74.container.font-size6 {
75 font-size: 22px;
76}
77
78.container.font-size7 {
79 font-size: 24px;
80}
81
82.container.font-size8 {
83 font-size: 26px;
84}
85
86.container.font-size9 {
87 font-size: 28px;
88} 54}
89 55
90.container.content-width1 { 56.container.content-width1 {
91 max-width: 20em; 57 max-width: 20em;
92} 58}
93 59
94.container.content-width2 { 60.container.content-width2 {
95 max-width: 25em; 61 max-width: 25em;
96} 62}
97 63
98.container.content-width3 { 64.container.content-width3 {
99 max-width: 30em; 65 max-width: 30em;
100} 66}
101 67
102.container.content-width4 { 68.container.content-width4 {
103 max-width: 35em; 69 max-width: 35em;
104} 70}
105 71
106.container.content-width5 { 72.container.content-width5 {
107 max-width: 40em; 73 max-width: 40em;
108} 74}
109 75
110.container.content-width6 { 76.container.content-width6 {
111 max-width: 45em; 77 max-width: 45em;
112} 78}
113 79
114.container.content-width7 { 80.container.content-width7 {
115 max-width: 50em; 81 max-width: 50em;
116} 82}
117 83
118.container.content-width8 { 84.container.content-width8 {
119 max-width: 55em; 85 max-width: 55em;
120} 86}
121 87
122.container.content-width9 { 88.container.content-width9 {
123 max-width: 60em; 89 max-width: 60em;
124} 90}
125 91
126/* Override some controls and content styles based on color scheme */ 92/* Override some controls and content styles based on color scheme */
127 93
128body.light > .container > .header > .domain { 94body.light > .container > .header > .domain {
129 border-bottom-color: #333333 !important; 95 border-bottom-color: #333333 !important;
130} 96}
131 97
132body.sepia > .container > .header > .domain { 98body.sepia > .container > .header > .domain {
133 border-bottom-color: #5b4636 !important; 99 border-bottom-color: #5b4636 !important;
134} 100}
135 101
136body.dark > .container > .header > .domain { 102body.dark > .container > .header > .domain {
137 border-bottom-color: #eeeeee !important; 103 border-bottom-color: #eeeeee !important;
138} 104}
139 105
140body.sepia > .container > .footer { 106body.sepia > .container > .footer {
141 background-color: #dedad4 !important; 107 background-color: #dedad4 !important;
142} 108}
143 109
144body.light blockquote { 110body.light blockquote {
145 border-inline-start: 2px solid #333333 !important; 111 border-inline-start: 2px solid #333333 !important;
146} 112}
147 113
148body.sepia blockquote { 114body.sepia blockquote {
149 border-inline-start: 2px solid #5b4636 !important; 115 border-inline-start: 2px solid #5b4636 !important;
150} 116}
151 117
152body.dark blockquote { 118body.dark blockquote {
153 border-inline-start: 2px solid #eeeeee !important; 119 border-inline-start: 2px solid #eeeeee !important;
154} 120}
155 121
156/* Add toolbar transition base on loaded class */ 122/* Add toolbar transition base on loaded class */
157 123
158body.loaded .toolbar { 124body.loaded .toolbar {
159 transition: transform 0.3s ease-out; 125 transition: transform 0.3s ease-out;
160} 126}
161 127
162body:not(.loaded) .toolbar:-moz-locale-dir(ltr) { 128body:not(.loaded) .toolbar:-moz-locale-dir(ltr) {
163 transform: translateX(-100%); 129 transform: translateX(-100%);
164} 130}
165 131
166body:not(.loaded) .toolbar:-moz-locale-dir(rtl) { 132body:not(.loaded) .toolbar:-moz-locale-dir(rtl) {
167 transform: translateX(100%); 133 transform: translateX(100%);
168} 134}
169 135
170.light-button { 136.light-button {
171 color: #000000; 137 color: #000000;
172 background-color: #ffffff; 138 background-color: #bfbbb6;
173} 139}
174 140
175.dark-button { 141.dark-button {
176 color: #eeeeee; 142 color: #eeeeee;
177 background-color: #000000; 143 background-color: #181411;
178} 144}
179 145
180.sepia-button { 146.sepia-button {
181 color: #5b4636; 147 color: #5b4636;
182 background-color: #f4ecd8; 148 background-color: #f4ecd8;
183} 149}
184 150
185.sans-serif-button { 151.sans-serif-button {
186 font-family: Helvetica, Arial, sans-serif; 152 font-family: sans-serif;
187} 153}
188 154
189.serif-button { 155.serif-button {
190 font-family: Georgia, "Times New Roman", serif; 156 font-family: serif;
191} 157}
192 158
193/* Loading/error message */ 159/* Loading/error message */
194 160
195.reader-message { 161.reader-message {
196 margin-top: 40px; 162 margin-top: 40px;
197 display: none; 163 display: none;
198 text-align: center; 164 text-align: center;
199 width: 100%; 165 width: 100%;
200 font-size: 0.9em; 166 font-size: 0.9em;
201} 167}
202 168
203/* Header */ 169/* Header */
204 170
205.header { 171.header {
206 text-align: start; 172 text-align: start;
207 display: none; 173 display: none;
208} 174}
209 175
210.domain { 176.domain {
211 font-size: 0.9em; 177 font-size: 0.9em;
212 line-height: 1.48em; 178 line-height: 1.48em;
213 padding-bottom: 4px; 179 padding-bottom: 4px;
214 font-family: Helvetica, Arial, sans-serif; 180 font-family: sans-serif;
215 text-decoration: none; 181 text-decoration: none;
216 border-bottom: 1px solid; 182 border-bottom: 1px solid;
217 color: #0095dd; 183 color: #0095dd;
218} 184}
219 185
220.header > h1 { 186.header > h1 {
221 font-size: 1.6em; 187 font-size: 1.6em;
222 line-height: 1.25em; 188 line-height: 1.25em;
223 width: 100%; 189 width: 100%;
224 margin: 30px 0; 190 margin: 30px 0;
225 padding: 0; 191 padding: 0;
226} 192}
227 193
228.header > .credits { 194.header > .credits {
229 font-size: 0.9em; 195 font-size: 0.9em;
230 line-height: 1.48em; 196 line-height: 1.48em;
231 margin: 0 0 10px 0; 197 margin: 0 0 10px 0;
232 padding: 0; 198 padding: 0;
233 font-style: italic; 199 font-style: italic;
234} 200}
235 201
236.header > .meta-data { 202.header > .meta-data {
237 font-size: 0.65em; 203 font-size: 0.65em;
238 margin: 0 0 15px 0; 204 margin: 0 0 15px 0;
239} 205}
240 206
241/*======= Controls toolbar =======*/ 207/*======= Controls toolbar =======*/
242 208
243.toolbar { 209.toolbar {
244 font-family: Helvetica, Arial, sans-serif; 210 font-family: sans-serif;
245 position: fixed; 211 position: fixed;
246 height: 100%; 212 height: 100%;
247 top: 0; 213 top: 0;
248 left: 0; 214 left: 0;
249 margin: 0; 215 margin: 0;
250 padding: 0; 216 padding: 0;
251 list-style: none; 217 list-style: none;
252 background-color: #000000; 218 background-color: #181411;
253 -moz-user-select: none; 219 -moz-user-select: none;
254 border-right: 1px solid #b5b5b5; 220 border-right: 1px solid #b5b5b5;
255 z-index: 1; 221 z-index: 1;
256} 222}
257 223
258.button { 224.button {
259 display: block; 225 display: block;
260 background-size: 24px 24px; 226 background-size: 24px 24px;
261 background-repeat: no-repeat; 227 background-repeat: no-repeat;
262 color: #333; 228 color: #333;
263 background-color: #000000; 229 background-color: #181411;
264 height: 40px; 230 height: 40px;
265 padding: 0; 231 padding: 0;
266} 232}
267 233
268.toolbar .button { 234.toolbar .button {
269 width: 40px; 235 width: 40px;
270 background-position: center; 236 background-position: center;
271 margin-right: -1px; 237 margin-right: -1px;
272 border-top: 0; 238 border-top: 0;
273 border-left: 0; 239 border-left: 0;
274 border-right: 1px solid #b5b5b5; 240 border-right: 1px solid #b5b5b5;
275 border-bottom: 1px solid #c1c1c1; 241 border-bottom: 1px solid #c1c1c1;
276} 242}
277 243
278.button[hidden] { 244.button[hidden] {
279 display: none; 245 display: none;
280} 246}
281 247
282.dropdown { 248.dropdown {
283 text-align: center; 249 text-align: center;
284 list-style: none; 250 list-style: none;
285 margin: 0; 251 margin: 0;
286 padding: 0; 252 padding: 0;
287} 253}
288 254
289.dropdown li { 255.dropdown li {
290 margin: 0; 256 margin: 0;
291 padding: 0; 257 padding: 0;
292} 258}
293 259
294/*======= Popup =======*/ 260/*======= Popup =======*/
295 261
296.dropdown-popup { 262.dropdown-popup {
297 min-width: 300px; 263 min-width: 300px;
298 text-align: start; 264 text-align: start;
299 position: absolute; 265 position: absolute;
300 left: 48px; /* offset to account for toolbar width */ 266 left: 48px; /* offset to account for toolbar width */
301 z-index: 1000; 267 z-index: 1000;
302 background-color: #000000; 268 background-color: #181411;
303 visibility: hidden; 269 visibility: hidden;
304 border-radius: 4px; 270 border-radius: 4px;
305 border: 1px solid #b5b5b5; 271 border: 1px solid #b5b5b5;
306 border-bottom-width: 0; 272 border-bottom-width: 0;
307 box-shadow: 0 1px 3px #c1c1c1; 273 box-shadow: 0 1px 3px #c1c1c1;
308} 274}
309 275
310.keep-open .dropdown-popup { 276.keep-open .dropdown-popup {
311 z-index: initial; 277 z-index: initial;
312} 278}
313 279
314.dropdown-popup > hr { 280.dropdown-popup > hr {
315 display: none; 281 display: none;
316} 282}
317 283
318.open > .dropdown-popup { 284.open > .dropdown-popup {
319 visibility: visible; 285 visibility: visible;
320} 286}
321 287
322.dropdown-arrow { 288.dropdown-arrow {
323 position: absolute; 289 position: absolute;
324 top: 30px; /* offset arrow from top of popup */ 290 top: 30px; /* offset arrow from top of popup */
325 left: -16px; 291 left: -16px;
326 width: 16px; 292 width: 16px;
327 height: 24px; 293 height: 24px;
328 background-image: url("chrome://global/skin/reader/RM-Type-Controls-Arrow.svg"); 294 background-image: url("chrome://global/skin/reader/RM-Type-Controls-Arrow.svg");
329 display: block; 295 display: block;
330} 296}
331 297
332/*======= Font style popup =======*/ 298/*======= Font style popup =======*/
@@ -336,21 +302,21 @@ body:not(.loaded) .toolbar:-moz-locale-dir(rtl) {
336.color-scheme-buttons, 302.color-scheme-buttons,
337.content-width-buttons, 303.content-width-buttons,
338.line-height-buttons { 304.line-height-buttons {
339 display: flex; 305 display: flex;
340 flex-direction: row; 306 flex-direction: row;
341} 307}
342 308
343.font-type-buttons > button:first-child { 309.font-type-buttons > button:first-child {
344 border-top-left-radius: 3px; 310 border-top-left-radius: 3px;
345} 311}
346.font-type-buttons > button:last-child { 312.font-type-buttons > button:last-child {
347 border-top-right-radius: 3px; 313 border-top-right-radius: 3px;
348} 314}
349.color-scheme-buttons > button:first-child { 315.color-scheme-buttons > button:first-child {
350 border-bottom-left-radius: 3px; 316 border-bottom-left-radius: 3px;
351} 317}
352.color-scheme-buttons > button:last-child { 318.color-scheme-buttons > button:last-child {
353 border-bottom-right-radius: 3px; 319 border-bottom-right-radius: 3px;
354} 320}
355 321
356.font-type-buttons > button, 322.font-type-buttons > button,
@@ -358,105 +324,105 @@ body:not(.loaded) .toolbar:-moz-locale-dir(rtl) {
358.color-scheme-buttons > button, 324.color-scheme-buttons > button,
359.content-width-buttons > button, 325.content-width-buttons > button,
360.line-height-buttons > button { 326.line-height-buttons > button {
361 text-align: center; 327 text-align: center;
362 border: 0; 328 border: 0;
363} 329}
364 330
365.font-type-buttons > button, 331.font-type-buttons > button,
366.font-size-buttons > button, 332.font-size-buttons > button,
367.content-width-buttons > button, 333.content-width-buttons > button,
368.line-height-buttons > button { 334.line-height-buttons > button {
369 width: 50%; 335 width: 50%;
370 background-color: transparent; 336 background-color: transparent;
371 border-left: 1px solid #B5B5B5; 337 border-left: 1px solid #B5B5B5;
372 border-bottom: 1px solid #B5B5B5; 338 border-bottom: 1px solid #B5B5B5;
373} 339}
374 340
375.color-scheme-buttons > button { 341.color-scheme-buttons > button {
376 width: 33.33%; 342 width: 33.33%;
377 font-size: 14px; 343 font-size: 14px;
378} 344}
379 345
380.color-scheme-buttons > .dark-button { 346.color-scheme-buttons > .dark-button {
381 margin-top: -1px; 347 margin-top: -1px;
382 height: 61px; 348 height: 61px;
383} 349}
384 350
385.font-type-buttons > button:first-child, 351.font-type-buttons > button:first-child,
386.font-size-buttons > button:first-child, 352.font-size-buttons > button:first-child,
387.content-width-buttons > button:first-child, 353.content-width-buttons > button:first-child,
388.line-height-buttons > button:first-child { 354.line-height-buttons > button:first-child {
389 border-left: 0; 355 border-left: 0;
390} 356}
391 357
392.font-type-buttons > button { 358.font-type-buttons > button {
393 display: inline-block; 359 display: inline-block;
394 font-size: 62px; 360 font-size: 62px;
395 height: 100px; 361 height: 100px;
396} 362}
397 363
398.font-size-buttons > button, 364.font-size-buttons > button,
399.color-scheme-buttons > button, 365.color-scheme-buttons > button,
400.content-width-buttons > button, 366.content-width-buttons > button,
401.line-height-buttons > button { 367.line-height-buttons > button {
402 height: 60px; 368 height: 60px;
403} 369}
404 370
405.font-type-buttons > button:active:hover, 371.font-type-buttons > button:active:hover,
406.font-type-buttons > button.selected, 372.font-type-buttons > button.selected,
407.color-scheme-buttons > button:active:hover, 373.color-scheme-buttons > button:active:hover,
408.color-scheme-buttons > button.selected { 374.color-scheme-buttons > button.selected {
409 box-shadow: inset 0 -3px 0 0 #fc6420; 375 box-shadow: inset 0 -3px 0 0 #fc6420;
410} 376}
411 377
412.font-type-buttons > button:active:hover, 378.font-type-buttons > button:active:hover,
413.font-type-buttons > button.selected { 379.font-type-buttons > button.selected {
414 border-bottom: 1px solid #FC6420; 380 border-bottom: 1px solid #FC6420;
415} 381}
416 382
417/* Make the serif button content the same size as the sans-serif button content. */ 383/* Make the serif button content the same size as the sans-serif button content. */
418.font-type-buttons > button > .description { 384.font-type-buttons > button > .description {
419 color: #666; 385 color: #666;
420 font-size: 12px; 386 font-size: 12px;
421 margin-top: -5px; 387 margin-top: -5px;
422} 388}
423 389
424/* Font sizes are different per-platform, so we need custom CSS to line them up. */ 390/* Font sizes are different per-platform, so we need custom CSS to line them up. */
425%ifdef XP_MACOSX 391%ifdef XP_MACOSX
426.font-type-buttons > .sans-serif-button > .name { 392.font-type-buttons > .sans-serif-button > .name {
427 margin-top: 10px; 393 margin-top: 10px;
428} 394}
429 395
430.font-type-buttons > .sans-serif-button > .description { 396.font-type-buttons > .sans-serif-button > .description {
431 margin-top: -4px; 397 margin-top: -4px;
432} 398}
433 399
434.font-type-buttons > .serif-button > .name { 400.font-type-buttons > .serif-button > .name {
435 font-size: 63px; 401 font-size: 63px;
436} 402}
437%elifdef XP_WIN 403%elifdef XP_WIN
438.font-type-buttons > .sans-serif-button > .name { 404.font-type-buttons > .sans-serif-button > .name {
439 margin-top: 2px; 405 margin-top: 2px;
440} 406}
441 407
442.font-type-buttons > .sans-serif-button > .description { 408.font-type-buttons > .sans-serif-button > .description {
443 margin-top: -4px; 409 margin-top: -4px;
444} 410}
445 411
446.font-type-buttons > .serif-button > .name { 412.font-type-buttons > .serif-button > .name {
447 font-size: 63px; 413 font-size: 63px;
448} 414}
449%else 415%else
450.font-type-buttons > .sans-serif-button > .name { 416.font-type-buttons > .sans-serif-button > .name {
451 margin-top: 5px; 417 margin-top: 5px;
452} 418}
453 419
454.font-type-buttons > .sans-serif-button > .description { 420.font-type-buttons > .sans-serif-button > .description {
455 margin-top: -8px; 421 margin-top: -8px;
456} 422}
457 423
458.font-type-buttons > .serif-button > .name { 424.font-type-buttons > .serif-button > .name {
459 font-size: 70px; 425 font-size: 70px;
460} 426}
461%endif 427%endif
462 428
@@ -465,7 +431,7 @@ body:not(.loaded) .toolbar:-moz-locale-dir(rtl) {
465.font-type-buttons > button:hover, 431.font-type-buttons > button:hover,
466.content-width-buttons > button:hover, 432.content-width-buttons > button:hover,
467.line-height-buttons > button:hover { 433.line-height-buttons > button:hover {
468 background-color: #000000; 434 background-color: #181411;
469} 435}
470 436
471.dropdown.open, 437.dropdown.open,
@@ -476,12 +442,12 @@ body:not(.loaded) .toolbar:-moz-locale-dir(rtl) {
476.content-width-buttons > button.selected, 442.content-width-buttons > button.selected,
477.line-height-buttons > button:active, 443.line-height-buttons > button:active,
478.line-height-buttons > button.selected { 444.line-height-buttons > button.selected {
479 background-color: #000000; 445 background-color: #181411;
480} 446}
481 447
482/* Only used on Android */ 448/* Only used on Android */
483.font-size-sample { 449.font-size-sample {
484 display: none; 450 display: none;
485} 451}
486 452
487.minus-button, 453.minus-button,
@@ -490,71 +456,71 @@ body:not(.loaded) .toolbar:-moz-locale-dir(rtl) {
490.content-width-plus-button, 456.content-width-plus-button,
491.line-height-minus-button, 457.line-height-minus-button,
492.line-height-plus-button { 458.line-height-plus-button {
493 background-color: transparent; 459 background-color: transparent;
494 border: 0; 460 border: 0;
495 background-size: 18px 18px; 461 background-size: 18px 18px;
496 background-repeat: no-repeat; 462 background-repeat: no-repeat;
497 background-position: center; 463 background-position: center;
498} 464}
499 465
500/*======= Toolbar icons =======*/ 466/*======= Toolbar icons =======*/
501 467
502.close-button { 468.close-button {
503 background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg#close"); 469 background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg#close");
504 height: 68px; 470 height: 68px;
505 background-position: center 8px; 471 background-position: center 8px;
506} 472}
507 473
508.close-button:hover { 474.close-button:hover {
509 background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg#close-hover"); 475 background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg#close-hover");
510 background-color: #d94141; 476 background-color: #d94141;
511 border-bottom: 1px solid #d94141; 477 border-bottom: 1px solid #d94141;
512 border-right: 1px solid #d94141; 478 border-right: 1px solid #d94141;
513} 479}
514 480
515.close-button:hover:active { 481.close-button:hover:active {
516 background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg#close-hover"); 482 background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg#close-hover");
517 background-color: #AE2325; 483 background-color: #AE2325;
518 border-bottom: 1px solid #AE2325; 484 border-bottom: 1px solid #AE2325;
519 border-right: 1px solid #AE2325; 485 border-right: 1px solid #AE2325;
520} 486}
521 487
522.style-button { 488.style-button {
523 background-image: url("chrome://global/skin/reader/RM-Type-Controls-24x24.svg"); 489 background-image: url("chrome://global/skin/reader/RM-Type-Controls-24x24.svg");
524} 490}
525 491
526.minus-button { 492.minus-button {
527 background-image: url("chrome://global/skin/reader/RM-Minus-24x24.svg"); 493 background-image: url("chrome://global/skin/reader/RM-Minus-24x24.svg");
528} 494}
529 495
530.plus-button { 496.plus-button {
531 background-image: url("chrome://global/skin/reader/RM-Plus-24x24.svg"); 497 background-image: url("chrome://global/skin/reader/RM-Plus-24x24.svg");
532} 498}
533 499
534.content-width-minus-button { 500.content-width-minus-button {
535 background-size: 42px 16px; 501 background-size: 42px 16px;
536 background-image: url("chrome://global/skin/reader/RM-Content-Width-Minus-42x16.svg"); 502 background-image: url("chrome://global/skin/reader/RM-Content-Width-Minus-42x16.svg");
537} 503}
538 504
539.content-width-plus-button { 505.content-width-plus-button {
540 background-size: 44px 16px; 506 background-size: 44px 16px;
541 background-image: url("chrome://global/skin/reader/RM-Content-Width-Plus-44x16.svg"); 507 background-image: url("chrome://global/skin/reader/RM-Content-Width-Plus-44x16.svg");
542} 508}
543 509
544.line-height-minus-button { 510.line-height-minus-button {
545 background-size: 34px 14px; 511 background-size: 34px 14px;
546 background-image: url("chrome://global/skin/reader/RM-Line-Height-Minus-38x14.svg"); 512 background-image: url("chrome://global/skin/reader/RM-Line-Height-Minus-38x14.svg");
547} 513}
548 514
549.line-height-plus-button { 515.line-height-plus-button {
550 background-size: 34px 24px; 516 background-size: 34px 24px;
551 background-image: url("chrome://global/skin/reader/RM-Line-Height-Plus-38x24.svg"); 517 background-image: url("chrome://global/skin/reader/RM-Line-Height-Plus-38x24.svg");
552} 518}
553 519
554@media print { 520@media print {
555 .toolbar { 521 .toolbar {
556 display: none !important; 522 display: none !important;
557 } 523 }
558} 524}
559 525
560/*======= Article content =======*/ 526/*======= Article content =======*/
@@ -564,101 +530,101 @@ body:not(.loaded) .toolbar:-moz-locale-dir(rtl) {
564 * Readability.js doesn't strip them out */ 530 * Readability.js doesn't strip them out */
565 531
566.moz-reader-content { 532.moz-reader-content {
567 display: none; 533 display: none;
568 font-size: 1em; 534 font-size: 1em;
569 line-height: 1.6em; 535 line-height: 1.6em;
570} 536}
571 537
572.moz-reader-content.line-height1 { 538.moz-reader-content.line-height1 {
573 line-height: 1em; 539 line-height: 1em;
574} 540}
575 541
576.moz-reader-content.line-height2 { 542.moz-reader-content.line-height2 {
577 line-height: 1.2em; 543 line-height: 1.2em;
578} 544}
579 545
580.moz-reader-content.line-height3 { 546.moz-reader-content.line-height3 {
581 line-height: 1.4em; 547 line-height: 1.4em;
582} 548}
583 549
584.moz-reader-content.line-height4 { 550.moz-reader-content.line-height4 {
585 line-height: 1.6em; 551 line-height: 1.6em;
586} 552}
587 553
588.moz-reader-content.line-height5 { 554.moz-reader-content.line-height5 {
589 line-height: 1.8em; 555 line-height: 1.8em;
590} 556}
591 557
592.moz-reader-content.line-height6 { 558.moz-reader-content.line-height6 {
593 line-height: 2.0em; 559 line-height: 2.0em;
594} 560}
595 561
596.moz-reader-content.line-height7 { 562.moz-reader-content.line-height7 {
597 line-height: 2.2em; 563 line-height: 2.2em;
598} 564}
599 565
600.moz-reader-content.line-height8 { 566.moz-reader-content.line-height8 {
601 line-height: 2.4em; 567 line-height: 2.4em;
602} 568}
603 569
604.moz-reader-content.line-height9 { 570.moz-reader-content.line-height9 {
605 line-height: 2.6em; 571 line-height: 2.6em;
606} 572}
607 573
608@media print { 574@media print {
609 .moz-reader-content p, 575 .moz-reader-content p,
610 .moz-reader-content code, 576 .moz-reader-content code,
611 .moz-reader-content pre, 577 .moz-reader-content pre,
612 .moz-reader-content blockquote, 578 .moz-reader-content blockquote,
613 .moz-reader-content ul, 579 .moz-reader-content ul,
614 .moz-reader-content ol, 580 .moz-reader-content ol,
615 .moz-reader-content li, 581 .moz-reader-content li,
616 .moz-reader-content figure, 582 .moz-reader-content figure,
617 .moz-reader-content .wp-caption { 583 .moz-reader-content .wp-caption {
618 margin: 0 0 10px 0 !important; 584 margin: 0 0 10px 0 !important;
619 padding: 0 !important; 585 padding: 0 !important;
620 } 586 }
621} 587}
622 588
623.moz-reader-content h1, 589.moz-reader-content h1,
624.moz-reader-content h2, 590.moz-reader-content h2,
625.moz-reader-content h3 { 591.moz-reader-content h3 {
626 font-weight: bold; 592 font-weight: bold;
627} 593}
628 594
629.moz-reader-content h1 { 595.moz-reader-content h1 {
630 font-size: 1.6em; 596 font-size: 1.6em;
631 line-height: 1.25em; 597 line-height: 1.25em;
632} 598}
633 599
634.moz-reader-content h2 { 600.moz-reader-content h2 {
635 font-size: 1.2em; 601 font-size: 1.2em;
636 line-height: 1.51em; 602 line-height: 1.51em;
637} 603}
638 604
639.moz-reader-content h3 { 605.moz-reader-content h3 {
640 font-size: 1em; 606 font-size: 1em;
641 line-height: 1.66em; 607 line-height: 1.66em;
642} 608}
643 609
644.moz-reader-content a:link { 610.moz-reader-content a:link {
645 text-decoration: underline; 611 text-decoration: underline;
646 font-weight: normal; 612 font-weight: normal;
647} 613}
648 614
649.moz-reader-content a:link, 615.moz-reader-content a:link,
650.moz-reader-content a:link:hover, 616.moz-reader-content a:link:hover,
651.moz-reader-content a:link:active { 617.moz-reader-content a:link:active {
652 color: #0095dd; 618 color: #0095dd;
653} 619}
654 620
655.moz-reader-content a:visited { 621.moz-reader-content a:visited {
656 color: #c2e; 622 color: #c2e;
657} 623}
658 624
659.moz-reader-content * { 625.moz-reader-content * {
660 max-width: 100%; 626 max-width: 100%;
661 height: auto; 627 height: auto;
662} 628}
663 629
664.moz-reader-content p, 630.moz-reader-content p,
@@ -671,63 +637,63 @@ body:not(.loaded) .toolbar:-moz-locale-dir(rtl) {
671.moz-reader-content li, 637.moz-reader-content li,
672.moz-reader-content figure, 638.moz-reader-content figure,
673.moz-reader-content .wp-caption { 639.moz-reader-content .wp-caption {
674 margin: -10px -10px 20px -10px; 640 margin: -10px -10px 20px -10px;
675 padding: 10px; 641 padding: 10px;
676 border-radius: 5px; 642 border-radius: 5px;
677} 643}
678 644
679.moz-reader-content li { 645.moz-reader-content li {
680 margin-bottom: 0; 646 margin-bottom: 0;
681} 647}
682 648
683.moz-reader-content li > ul, 649.moz-reader-content li > ul,
684.moz-reader-content li > ol { 650.moz-reader-content li > ol {
685 margin-bottom: -10px; 651 margin-bottom: -10px;
686} 652}
687 653
688.moz-reader-content p > img:only-child, 654.moz-reader-content p > img:only-child,
689.moz-reader-content p > a:only-child > img:only-child, 655.moz-reader-content p > a:only-child > img:only-child,
690.moz-reader-content .wp-caption img, 656.moz-reader-content .wp-caption img,
691.moz-reader-content figure img { 657.moz-reader-content figure img {
692 display: block; 658 display: block;
693} 659}
694 660
695.moz-reader-content img[moz-reader-center] { 661.moz-reader-content img[moz-reader-center] {
696 margin-left: auto; 662 margin-left: auto;
697 margin-right: auto; 663 margin-right: auto;
698} 664}
699 665
700.moz-reader-content .caption, 666.moz-reader-content .caption,
701.moz-reader-content .wp-caption-text 667.moz-reader-content .wp-caption-text
702.moz-reader-content figcaption { 668.moz-reader-content figcaption {
703 font-size: 0.9em; 669 font-size: 0.9em;
704 line-height: 1.48em; 670 line-height: 1.48em;
705 font-style: italic; 671 font-style: italic;
706} 672}
707 673
708.moz-reader-content code, 674.moz-reader-content code,
709.moz-reader-content pre { 675.moz-reader-content pre {
710 white-space: pre-wrap; 676 white-space: pre-wrap;
711} 677}
712 678
713.moz-reader-content blockquote { 679.moz-reader-content blockquote {
714 padding: 0; 680 padding: 0;
715 padding-inline-start: 16px; 681 padding-inline-start: 16px;
716} 682}
717 683
718.moz-reader-content ul, 684.moz-reader-content ul,
719.moz-reader-content ol { 685.moz-reader-content ol {
720 padding: 0; 686 padding: 0;
721} 687}
722 688
723.moz-reader-content ul { 689.moz-reader-content ul {
724 padding-inline-start: 30px; 690 padding-inline-start: 30px;
725 list-style: disc; 691 list-style: disc;
726} 692}
727 693
728.moz-reader-content ol { 694.moz-reader-content ol {
729 padding-inline-start: 30px; 695 padding-inline-start: 30px;
730 list-style: decimal; 696 list-style: decimal;
731} 697}
732 698
733/* Hide elements with common "hidden" class names */ 699/* Hide elements with common "hidden" class names */
@@ -736,5 +702,5 @@ body:not(.loaded) .toolbar:-moz-locale-dir(rtl) {
736.moz-reader-content .hidden, 702.moz-reader-content .hidden,
737.moz-reader-content .invisible, 703.moz-reader-content .invisible,
738.moz-reader-content .sr-only { 704.moz-reader-content .sr-only {
739 display: none; 705 display: none;
740} 706}
generated by cgit v1.2.3 (git 2.25.1) at 2026-09-03 05:35:42 +0000