first part of syncing LCARStrek with Firefox 55 browser windows theme changes
[themes.git] / EarlyBlue / global / aboutReaderControls.css
CommitLineData
da3c2755
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.light-button {
6 color: #333333;
7 background-color: #ffffff;
8}
9
10.dark-button {
11 color: #eeeeee;
12 background-color: #333333;
13}
14
15.sepia-button {
16 color: #5b4636;
17 background-color: #f4ecd8;
18}
19
20.sans-serif-button {
21 font-family: Helvetica, Arial, sans-serif;
22}
23
24.serif-button {
25 font-family: Georgia, "Times New Roman", serif;
26}
27
28/* Loading/error message */
29
30#reader-message {
31 margin-top: 40px;
32 display: none;
33 text-align: center;
34 width: 100%;
35 font-size: 0.9em;
36}
37
38/* Header */
39
40.header {
41 text-align: start;
42 display: none;
43}
44
45.domain {
46 font-size: 0.9em;
47 line-height: 1.48em;
48 padding-bottom: 4px;
49 font-family: Helvetica, Arial, sans-serif;
50 text-decoration: none;
51 border-bottom: 1px solid;
52 color: #0095dd;
53}
54
55.header > h1 {
56 font-size: 1.6em;
57 line-height: 1.25em;
58 width: 100%;
59 margin: 30px 0;
60 padding: 0;
61}
62
63.header > .credits {
64 font-size: 0.9em;
65 line-height: 1.48em;
0282321d 66 margin: 0 0 10px 0;
da3c2755
RK
67 padding: 0;
68 font-style: italic;
69}
70
0282321d
RK
71.header > .meta-data {
72 font-size: 0.65em;
73 margin: 0 0 15px 0;
74}
75
da3c2755
RK
76/*======= Controls toolbar =======*/
77
78.toolbar {
79 font-family: Helvetica, Arial, sans-serif;
80 position: fixed;
81 height: 100%;
82 top: 0;
83 left: 0;
84 margin: 0;
85 padding: 0;
86 list-style: none;
87 background-color: #fbfbfb;
88 -moz-user-select: none;
89 border-right: 1px solid #b5b5b5;
987dae1b 90 z-index: 1;
da3c2755
RK
91}
92
93.button {
94 display: block;
95 background-size: 24px 24px;
96 background-repeat: no-repeat;
97 color: #333;
98 background-color: #fbfbfb;
99 height: 40px;
100 padding: 0;
101}
102
103.toolbar .button {
104 width: 40px;
105 background-position: center;
106 margin-right: -1px;
107 border-top: 0;
108 border-left: 0;
109 border-right: 1px solid #b5b5b5;
110 border-bottom: 1px solid #c1c1c1;
111}
112
113.button[hidden] {
114 display: none;
115}
116
117.dropdown {
118 text-align: center;
119 list-style: none;
120 margin: 0;
121 padding: 0;
122}
123
124.dropdown li {
125 margin: 0;
126 padding: 0;
127}
128
7729765c 129/*======= Popup =======*/
da3c2755
RK
130
131.dropdown-popup {
132 min-width: 300px;
133 text-align: start;
134 position: absolute;
135 left: 48px; /* offset to account for toolbar width */
136 z-index: 1000;
137 background-color: #fbfbfb;
138 visibility: hidden;
139 border-radius: 4px;
140 border: 1px solid #b5b5b5;
141 border-bottom-width: 0;
0282321d 142 box-shadow: 0 1px 3px #c1c1c1;
da3c2755
RK
143}
144
7729765c
RK
145.keep-open .dropdown-popup {
146 z-index: initial;
147}
148
da3c2755
RK
149.dropdown-popup > hr {
150 display: none;
151}
152
153.open > .dropdown-popup {
154 visibility: visible;
155}
156
157.dropdown-arrow {
158 position: absolute;
159 top: 30px; /* offset arrow from top of popup */
160 left: -16px;
0282321d 161 width: 16px;
da3c2755
RK
162 height: 24px;
163 background-image: url("chrome://global/skin/reader/RM-Type-Controls-Arrow.svg");
164 display: block;
165}
166
7729765c
RK
167/*======= Font style popup =======*/
168
da3c2755
RK
169#font-type-buttons,
170#font-size-buttons,
dae45075
RK
171#color-scheme-buttons,
172#content-width-buttons,
173#line-height-buttons {
da3c2755
RK
174 display: flex;
175 flex-direction: row;
176}
177
178#font-type-buttons > button:first-child {
179 border-top-left-radius: 3px;
180}
181#font-type-buttons > button:last-child {
182 border-top-right-radius: 3px;
183}
184#color-scheme-buttons > button:first-child {
185 border-bottom-left-radius: 3px;
186}
187#color-scheme-buttons > button:last-child {
188 border-bottom-right-radius: 3px;
189}
190
191#font-type-buttons > button,
192#font-size-buttons > button,
dae45075
RK
193#color-scheme-buttons > button,
194#content-width-buttons > button,
195#line-height-buttons > button {
da3c2755
RK
196 text-align: center;
197 border: 0;
198}
199
200#font-type-buttons > button,
dae45075
RK
201#font-size-buttons > button,
202#content-width-buttons > button,
203#line-height-buttons > button {
da3c2755
RK
204 width: 50%;
205 background-color: transparent;
206 border-left: 1px solid #B5B5B5;
207 border-bottom: 1px solid #B5B5B5;
208}
209
210#color-scheme-buttons > button {
211 width: 33.33%;
212 font-size: 14px;
213}
214
215#color-scheme-buttons > .dark-button {
216 margin-top: -1px;
217 height: 61px;
218}
219
220#font-type-buttons > button:first-child,
dae45075
RK
221#font-size-buttons > button:first-child,
222#content-width-buttons > button:first-child,
223#line-height-buttons > button:first-child {
da3c2755
RK
224 border-left: 0;
225}
226
227#font-type-buttons > button {
228 display: inline-block;
229 font-size: 62px;
230 height: 100px;
231}
232
233#font-size-buttons > button,
dae45075
RK
234#color-scheme-buttons > button,
235#content-width-buttons > button,
236#line-height-buttons > button {
da3c2755
RK
237 height: 60px;
238}
239
240#font-type-buttons > button:active:hover,
241#font-type-buttons > button.selected,
242#color-scheme-buttons > button:active:hover,
243#color-scheme-buttons > button.selected {
244 box-shadow: inset 0 -3px 0 0 #fc6420;
245}
246
247#font-type-buttons > button:active:hover,
248#font-type-buttons > button.selected {
249 border-bottom: 1px solid #FC6420;
250}
251
252/* Make the serif button content the same size as the sans-serif button content. */
253#font-type-buttons > button > .description {
254 color: #666;
255 font-size: 12px;
256 margin-top: -5px;
257}
258
259/* Font sizes are different per-platform, so we need custom CSS to line them up. */
dbad77ea
RK
260%ifdef XP_MACOSX
261#font-type-buttons > .sans-serif-button > .name {
262 margin-top: 10px;
263}
264
265#font-type-buttons > .sans-serif-button > .description {
266 margin-top: -4px;
267}
268
269#font-type-buttons > .serif-button > .name {
270 font-size: 63px;
271}
272%elifdef XP_WIN
da3c2755
RK
273#font-type-buttons > .sans-serif-button > .name {
274 margin-top: 2px;
275}
276
277#font-type-buttons > .sans-serif-button > .description {
278 margin-top: -4px;
279}
280
281#font-type-buttons > .serif-button > .name {
282 font-size: 63px;
283}
dbad77ea
RK
284%else
285#font-type-buttons > .sans-serif-button > .name {
286 margin-top: 5px;
287}
288
289#font-type-buttons > .sans-serif-button > .description {
290 margin-top: -8px;
291}
292
293#font-type-buttons > .serif-button > .name {
294 font-size: 70px;
295}
296%endif
da3c2755
RK
297
298.button:hover,
299#font-size-buttons > button:hover,
dae45075
RK
300#font-type-buttons > button:hover,
301#content-width-buttons > button:hover,
302#line-height-buttons > button:hover {
da3c2755
RK
303 background-color: #ebebeb;
304}
305
306.dropdown.open,
307.button:active,
308#font-size-buttons > button:active,
dae45075
RK
309#font-size-buttons > button.selected,
310#content-width-buttons > button:active,
311#content-width-buttons > button.selected,
312#line-height-buttons > button:active,
313#line-height-buttons > button.selected {
da3c2755
RK
314 background-color: #dadada;
315}
316
317/* Only used on Android */
318#font-size-sample {
319 display: none;
320}
321
322.minus-button,
dae45075
RK
323.plus-button,
324.content-width-minus-button,
325.content-width-plus-button,
326.line-height-minus-button,
0282321d 327.line-height-plus-button {
da3c2755
RK
328 background-color: transparent;
329 border: 0;
330 background-size: 18px 18px;
331 background-repeat: no-repeat;
332 background-position: center;
333}
334
da3c2755
RK
335/*======= Toolbar icons =======*/
336
da3c2755 337.close-button {
dbad77ea
RK
338 background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg");
339 -moz-context-properties: fill;
340 fill: #808080;
da3c2755
RK
341 height: 68px;
342 background-position: center 8px;
343}
344
345.close-button:hover {
dbad77ea 346 fill: #fff;
da3c2755
RK
347 background-color: #d94141;
348 border-bottom: 1px solid #d94141;
349 border-right: 1px solid #d94141;
350}
351
352.close-button:hover:active {
da3c2755
RK
353 background-color: #AE2325;
354 border-bottom: 1px solid #AE2325;
355 border-right: 1px solid #AE2325;
356}
357
358.style-button {
359 background-image: url("chrome://global/skin/reader/RM-Type-Controls-24x24.svg");
360}
361
da3c2755
RK
362.minus-button {
363 background-image: url("chrome://global/skin/reader/RM-Minus-24x24.svg");
364}
365
366.plus-button {
367 background-image: url("chrome://global/skin/reader/RM-Plus-24x24.svg");
368}
369
dae45075
RK
370.content-width-minus-button {
371 background-size: 42px 16px;
372 background-image: url("chrome://global/skin/reader/RM-Content-Width-Minus-42x16.svg");
373}
374
375.content-width-plus-button {
376 background-size: 44px 16px;
377 background-image: url("chrome://global/skin/reader/RM-Content-Width-Plus-44x16.svg");
378}
379
380.line-height-minus-button {
381 background-size: 34px 14px;
382 background-image: url("chrome://global/skin/reader/RM-Line-Height-Minus-38x14.svg");
383}
384
385.line-height-plus-button {
386 background-size: 34px 24px;
387 background-image: url("chrome://global/skin/reader/RM-Line-Height-Plus-38x24.svg");
388}
389
da3c2755
RK
390@media print {
391 .toolbar {
392 display: none !important;
393 }
da3c2755 394}