mobile/android/themes/core/aboutReader.css@b8a032363ba2
mobile/android/themes/core/aboutReader.css
Thu, 22 Jan 2015 13:21:57 +0100
- author
- Michael Schloh von Bennewitz <michael@schloh.com>
- date
- Thu, 22 Jan 2015 13:21:57 +0100
- branch
- TOR_BUG_9701
- changeset 15
- b8a032363ba2
- permissions
- -rw-r--r--
Incorporate requested changes from Mozilla in review:
https://bugzilla.mozilla.org/show_bug.cgi?id=1123480#c6
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/. */
5 html {
6 -moz-text-size-adjust: none;
7 }
9 body {
10 padding: 20px;
11 transition-property: background-color, color;
12 transition-duration: 0.4s;
13 max-width: 35em;
14 margin-left: auto;
15 margin-right: auto;
16 }
18 .light {
19 background-color: #ffffff;
20 color: #222222;
21 }
23 .dark {
24 background-color: #000000;
25 color: #eeeeee;
26 }
28 .sans-serif {
29 font-family: sans-serif;
30 }
32 .serif {
33 font-family: serif;
34 }
36 .message {
37 margin-top: 40px;
38 display: none;
39 text-align: center;
40 width: 100%;
41 font-size: 16px;
42 }
44 .header {
45 text-align: start;
46 display: none;
47 }
49 .domain,
50 .credits {
51 font-family: sans-serif;
52 }
54 .domain {
55 margin-top: 10px;
56 padding-bottom: 10px;
57 color: #00acff !important;
58 text-decoration: none;
59 }
61 .domain-border {
62 margin-top: 15px;
63 border-bottom: 1.5px solid #777777;
64 width: 50%;
65 }
67 .header > h1 {
68 font-size: 2.625em;
69 font-weight: 700;
70 line-height: 1.1em;
71 width: 100%;
72 margin: 0px;
73 margin-top: 32px;
74 margin-bottom: 16px;
75 padding: 0px;
76 }
78 .header > .credits {
79 padding: 0px;
80 margin: 0px;
81 margin-bottom: 32px;
82 }
84 .light > .header > .domain {
85 color: #ee7600;
86 border-bottom-color: #d0d0d0;
87 }
89 .light > .header > h1 {
90 color: #222222;
91 }
93 .light > .header > .credits {
94 color: #898989;
95 }
97 .dark > .header > .domain {
98 color: #ff9400;
99 border-bottom-color: #777777;
100 }
102 .dark > .header > h1 {
103 color: #eeeeee;
104 }
106 .dark > .header > .credits {
107 color: #aaaaaa;
108 }
110 .font-size1 > .header > h1 {
111 font-size: 27px;
112 }
114 .font-size2 > .header > h1 {
115 font-size: 29px;
116 }
118 .font-size3 > .header > h1 {
119 font-size: 31px;
120 }
122 .font-size4 > .header > h1 {
123 font-size: 33px;
124 }
126 .font-size5 > .header > h1 {
127 font-size: 35px;
128 }
130 /* This covers caption, domain, and credits
131 texts in the reader UI */
133 .font-size1 > .content .wp-caption-text,
134 .font-size1 > .content figcaption,
135 .font-size1 > .header > .domain,
136 .font-size1 > .header > .credits {
137 font-size: 10px;
138 }
140 .font-size2 > .content .wp-caption-text,
141 .font-size2 > .content figcaption,
142 .font-size2 > .header > .domain,
143 .font-size2 > .header > .credits {
144 font-size: 13px;
145 }
147 .font-size3 > .content .wp-caption-text,
148 .font-size3 > .content figcaption,
149 .font-size3 > .header > .domain,
150 .font-size3 > .header > .credits {
151 font-size: 15px;
152 }
154 .font-size4 > .content .wp-caption-text,
155 .font-size4 > .content figcaption,
156 .font-size4 > .header > .domain,
157 .font-size4 > .header > .credits {
158 font-size: 17px;
159 }
161 .font-size5 > .content .wp-caption-text,
162 .font-size5 > .content figcaption,
163 .font-size5 > .header > .domain,
164 .font-size5 > .header > .credits {
165 font-size: 19px;
166 }
168 .content {
169 display: none;
170 }
172 .content a {
173 text-decoration: underline !important;
174 font-weight: normal;
175 }
177 .light > .content a,
178 .light > .content a:visited,
179 .light > .content a:hover,
180 .light > .content a:active {
181 color: #00acff !important;
182 }
184 .dark > .content a,
185 .dark > .content a:visited,
186 .dark > .content a:hover,
187 .dark > .content a:active {
188 color: #00acff !important;
189 }
191 .content * {
192 max-width: 100% !important;
193 height: auto !important;
194 }
196 .content p {
197 line-height: 1.4em !important;
198 margin: 0px !important;
199 margin-bottom: 20px !important;
200 }
202 /* Covers all images showing edge-to-edge using a
203 an optional caption text */
204 .content .wp-caption,
205 .content figure {
206 display: block !important;
207 width: 100% !important;
208 margin: 0px !important;
209 margin-bottom: 32px !important;
210 }
212 /* Images marked to be shown edge-to-edge with an
213 optional captio ntext */
214 .content p > img:only-child,
215 .content p > a:only-child > img:only-child,
216 .content .wp-caption img,
217 .content figure img {
218 max-width: none !important;
219 height: auto !important;
220 display: block !important;
221 margin-top: 0px !important;
222 margin-bottom: 32px !important;
223 }
225 /* If image is place inside one of these blocks
226 there's no need to add margin at the bottom */
227 .content .wp-caption img,
228 .content figure img {
229 margin-bottom: 0px !important;
230 }
232 /* Image caption text */
233 .content .caption,
234 .content .wp-caption-text,
235 .content figcaption {
236 font-family: sans-serif;
237 margin: 0px !important;
238 padding-top: 4px !important;
239 }
241 .light > .content .caption,
242 .light > .content .wp-caption-text,
243 .light > .content figcaption {
244 color: #898989;
245 }
247 .dark > .content .caption,
248 .dark > .content .wp-caption-text,
249 .dark > .content figcaption {
250 color: #aaaaaa;
251 }
253 /* Ensure all pre-formatted code inside the reader content
254 are properly wrapped inside content width */
255 .content code,
256 .content pre {
257 white-space: pre-wrap !important;
258 margin-bottom: 20px !important;
259 }
261 .content blockquote {
262 margin: 0px !important;
263 margin-bottom: 20px !important;
264 padding: 0px !important;
265 -moz-padding-start: 16px !important;
266 border: 0px !important;
267 border-left: 2px solid !important;
268 }
270 .light > .content blockquote {
271 color: #898989 !important;
272 border-left-color: #d0d0d0 !important;
273 }
275 .dark > .content blockquote {
276 color: #aaaaaa !important;
277 border-left-color: #777777 !important;
278 }
280 .content ul,
281 .content ol {
282 margin: 0px !important;
283 margin-bottom: 20px !important;
284 padding: 0px !important;
285 line-height: 1.5em;
286 }
288 .content ul {
289 -moz-padding-start: 30px !important;
290 list-style: disk !important;
291 }
293 .content ol {
294 -moz-padding-start: 35px !important;
295 list-style: decimal !important;
296 }
298 .font-size1-sample,
299 .font-size1 > .content {
300 font-size: 14px !important;
301 }
303 .font-size2-sample,
304 .font-size2 > .content {
305 font-size: 16px !important;
306 }
308 .font-size3-sample,
309 .font-size3 > .content {
310 font-size: 18px !important;
311 }
313 .font-size4-sample,
314 .font-size4 > .content {
315 font-size: 20px !important;
316 }
318 .font-size5-sample,
319 .font-size5 > .content {
320 font-size: 22px !important;
321 }
323 .toolbar {
324 font-family: "Clear Sans",sans-serif;
325 transition-property: visibility, opacity;
326 transition-duration: 0.7s;
327 visibility: visible;
328 opacity: 1.0;
329 position: fixed;
330 width: 100%;
331 bottom: 0px;
332 left: 0px;
333 margin: 0;
334 padding: 0;
335 list-style: none;
336 background-color: #ced7de;
337 -moz-user-select: none;
338 }
340 .toolbar-hidden {
341 transition-property: visibility, opacity;
342 transition-duration: 0.7s;
343 visibility: hidden;
344 opacity: 0.0;
345 }
347 .toolbar > * {
348 float: right;
349 width: 33%;
350 }
352 .button {
353 color: white;
354 display: block;
355 background-position: center;
356 background-size: 30px 24px;
357 background-repeat: no-repeat;
358 }
360 .dropdown {
361 text-align: center;
362 display: inline-block;
363 list-style: none;
364 margin: 0px;
365 padding: 0px;
366 }
368 .dropdown li {
369 margin: 0px;
370 padding: 0px;
371 }
373 .dropdown-toggle {
374 margin: 0px;
375 padding: 0px;
376 }
378 .dropdown-popup {
379 text-align: start;
380 position: absolute;
381 left: 0px;
382 z-index: 1000;
383 float: left;
384 background: #dde2e7;
385 margin-top: 12px;
386 margin-bottom: 10px;
387 padding-top: 4px;
388 padding-bottom: 8px;
389 font-size: 14px;
390 box-shadow: 0px -1px 12px #333;
391 border-radius: 3px;
392 visibility: hidden;
393 }
395 .dropdown-popup > hr {
396 width: 100%;
397 height: 0px;
398 border: 0px;
399 border-top: 1px solid #C5D0DA;
400 margin: 0;
401 }
403 .open > .dropdown-popup {
404 margin-top: 0px;
405 margin-bottom: 6px;
406 bottom: 100%;
407 visibility: visible;
408 }
410 .dropdown-arrow {
411 position: absolute;
412 width: 40px;
413 height: 18px;
414 bottom: -18px;
415 background-image: url('chrome://browser/skin/images/reader-dropdown-arrow-mdpi.png');
416 background-size: 40px 18px;
417 background-position: center;
418 display: block;
419 }
421 #font-type-buttons,
422 .segmented-button {
423 display: flex;
424 flex-direction: row;
425 list-style: none;
426 padding: 10px 5px;
427 white-space: nowrap;
428 }
430 #font-type-buttons > li,
431 .segmented-button > li {
432 width: 50px; /* combined with flex, this acts as a minimum width */
433 flex: 1 0 auto;
434 text-align: center;
435 line-height: 20px;
436 }
438 #font-type-buttons > li {
439 padding: 10px 0;
440 }
442 .segmented-button > li {
443 border-left: 1px solid #C5D0DA;
444 }
446 .segmented-button > li:first-child {
447 border-left: 0px;
448 }
450 #font-type-buttons > li > a,
451 .segmented-button > li > a {
452 vertical-align: middle;
453 text-decoration: none;
454 color: black;
455 }
457 #font-type-buttons > li > a {
458 display: inline-block;
459 font-size: 48px;
460 line-height: 50px;
461 margin-bottom: 5px;
462 border-bottom: 3px solid transparent;
463 }
465 .segmented-button > li > a {
466 display: block;
467 padding: 5px 0;
468 font-family: "Clear Sans",sans-serif;
469 font-weight: lighter;
470 }
472 #font-type-buttons > li > a:active,
473 #font-type-buttons > li.selected > a {
474 border-color: #ff9400;
475 }
477 .segmented-button > li > a:active,
478 .segmented-button > li.selected > a {
479 font-weight: bold;
480 }
482 #font-type-buttons > li > .sans-serif {
483 font-weight: lighter;
484 }
486 #font-type-buttons > li > div {
487 color: #666;
488 font-size: 12px;
489 }
491 .toggle-button.on {
492 background-image: url('chrome://browser/skin/images/reader-toggle-on-icon-mdpi.png');
493 }
495 .toggle-button {
496 background-image: url('chrome://browser/skin/images/reader-toggle-off-icon-mdpi.png');
497 }
499 .share-button {
500 background-image: url('chrome://browser/skin/images/reader-share-icon-mdpi.png');
501 }
503 .style-button {
504 background-image: url('chrome://browser/skin/images/reader-style-icon-mdpi.png');
505 }
507 @media screen and (min-resolution: 1.25dppx) {
508 .dropdown-arrow {
509 background-image: url('chrome://browser/skin/images/reader-dropdown-arrow-hdpi.png');
510 }
512 .step-control > .plus-button {
513 background-image: url('chrome://browser/skin/images/reader-plus-icon-hdpi.png');
514 }
516 .step-control > .minus-button {
517 background-image: url('chrome://browser/skin/images/reader-minus-icon-hdpi.png');
518 }
520 .toggle-button.on {
521 background-image: url('chrome://browser/skin/images/reader-toggle-on-icon-hdpi.png');
522 }
524 .toggle-button {
525 background-image: url('chrome://browser/skin/images/reader-toggle-off-icon-hdpi.png');
526 }
528 .share-button {
529 background-image: url('chrome://browser/skin/images/reader-share-icon-hdpi.png');
530 }
532 .style-button {
533 background-image: url('chrome://browser/skin/images/reader-style-icon-hdpi.png');
534 }
535 }
537 @media screen and (min-resolution: 2dppx) {
538 .dropdown-arrow {
539 background-image: url('chrome://browser/skin/images/reader-dropdown-arrow-xhdpi.png');
540 }
542 .step-control > .plus-button {
543 background-image: url('chrome://browser/skin/images/reader-plus-icon-xhdpi.png');
544 }
546 .step-control > .minus-button {
547 background-image: url('chrome://browser/skin/images/reader-minus-icon-xhdpi.png');
548 }
550 .toggle-button.on {
551 background-image: url('chrome://browser/skin/images/reader-toggle-on-icon-xhdpi.png');
552 }
554 .toggle-button {
555 background-image: url('chrome://browser/skin/images/reader-toggle-off-icon-xhdpi.png');
556 }
558 .share-button {
559 background-image: url('chrome://browser/skin/images/reader-share-icon-xhdpi.png');
560 }
562 .style-button {
563 background-image: url('chrome://browser/skin/images/reader-style-icon-xhdpi.png');
564 }
565 }
567 @media screen and (orientation: portrait) {
568 .button {
569 height: 48px;
570 }
571 }
573 @media screen and (orientation: landscape) {
574 .button {
575 height: 40px;
576 }
577 }
579 @media screen and (min-width: 960px) {
580 .button {
581 width: 56px;
582 height: 56px;
583 }
585 .toolbar > * {
586 width: 56px;
587 }
588 }
