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