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/. */
7 background-color: #ffffff;
12 background-color: #333333;
17 background-color: #f4ecd8;
21 font-family: Helvetica, Arial, sans-serif;
25 font-family: Georgia, "Times New Roman", serif;
28 /* Loading/error message */
49 font-family: Helvetica, Arial, sans-serif;
50 text-decoration: none;
51 border-bottom: 1px solid;
71 .header > .meta-data {
76 /*======= Controls toolbar =======*/
79 font-family: Helvetica, Arial, sans-serif;
87 background-color: #fbfbfb;
88 -moz-user-select: none;
89 border-right: 1px solid #b5b5b5;
95 background-size: 24px 24px;
96 background-repeat: no-repeat;
98 background-color: #fbfbfb;
105 background-position: center;
109 border-right: 1px solid #b5b5b5;
110 border-bottom: 1px solid #c1c1c1;
129 /*======= Popup =======*/
135 left: 48px; /* offset to account for toolbar width */
137 background-color: #fbfbfb;
140 border: 1px solid #b5b5b5;
141 border-bottom-width: 0;
142 box-shadow: 0 1px 3px #c1c1c1;
145 .keep-open .dropdown-popup {
149 .dropdown-popup > hr {
153 .open > .dropdown-popup {
159 top: 30px; /* offset arrow from top of popup */
163 background-image: url("chrome://global/skin/reader/RM-Type-Controls-Arrow.svg");
167 /*======= Font style popup =======*/
171 #color-scheme-buttons,
172 #content-width-buttons,
173 #line-height-buttons {
178 #font-type-buttons > button:first-child {
179 border-top-left-radius: 3px;
181 #font-type-buttons > button:last-child {
182 border-top-right-radius: 3px;
184 #color-scheme-buttons > button:first-child {
185 border-bottom-left-radius: 3px;
187 #color-scheme-buttons > button:last-child {
188 border-bottom-right-radius: 3px;
191 #font-type-buttons > button,
192 #font-size-buttons > button,
193 #color-scheme-buttons > button,
194 #content-width-buttons > button,
195 #line-height-buttons > button {
200 #font-type-buttons > button,
201 #font-size-buttons > button,
202 #content-width-buttons > button,
203 #line-height-buttons > button {
205 background-color: transparent;
206 border-left: 1px solid #B5B5B5;
207 border-bottom: 1px solid #B5B5B5;
210 #color-scheme-buttons > button {
215 #color-scheme-buttons > .dark-button {
220 #font-type-buttons > button:first-child,
221 #font-size-buttons > button:first-child,
222 #content-width-buttons > button:first-child,
223 #line-height-buttons > button:first-child {
227 #font-type-buttons > button {
228 display: inline-block;
233 #font-size-buttons > button,
234 #color-scheme-buttons > button,
235 #content-width-buttons > button,
236 #line-height-buttons > button {
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;
247 #font-type-buttons > button:active:hover,
248 #font-type-buttons > button.selected {
249 border-bottom: 1px solid #FC6420;
252 /* Make the serif button content the same size as the sans-serif button content. */
253 #font-type-buttons > button > .description {
259 /* Font sizes are different per-platform, so we need custom CSS to line them up. */
261 #font-type-buttons > .sans-serif-button > .name {
265 #font-type-buttons > .sans-serif-button > .description {
269 #font-type-buttons > .serif-button > .name {
273 #font-type-buttons > .sans-serif-button > .name {
277 #font-type-buttons > .sans-serif-button > .description {
281 #font-type-buttons > .serif-button > .name {
285 #font-type-buttons > .sans-serif-button > .name {
289 #font-type-buttons > .sans-serif-button > .description {
293 #font-type-buttons > .serif-button > .name {
299 #font-size-buttons > button:hover,
300 #font-type-buttons > button:hover,
301 #content-width-buttons > button:hover,
302 #line-height-buttons > button:hover {
303 background-color: #ebebeb;
308 #font-size-buttons > button:active,
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 {
314 background-color: #dadada;
317 /* Only used on Android */
324 .content-width-minus-button,
325 .content-width-plus-button,
326 .line-height-minus-button,
327 .line-height-plus-button {
328 background-color: transparent;
330 background-size: 18px 18px;
331 background-repeat: no-repeat;
332 background-position: center;
335 /*======= Toolbar icons =======*/
338 background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg");
339 -moz-context-properties: fill;
342 background-position: center 8px;
345 .close-button:hover {
347 background-color: #d94141;
348 border-bottom: 1px solid #d94141;
349 border-right: 1px solid #d94141;
352 .close-button:hover:active {
353 background-color: #AE2325;
354 border-bottom: 1px solid #AE2325;
355 border-right: 1px solid #AE2325;
359 background-image: url("chrome://global/skin/reader/RM-Type-Controls-24x24.svg");
363 background-image: url("chrome://global/skin/reader/RM-Minus-24x24.svg");
367 background-image: url("chrome://global/skin/reader/RM-Plus-24x24.svg");
370 .content-width-minus-button {
371 background-size: 42px 16px;
372 background-image: url("chrome://global/skin/reader/RM-Content-Width-Minus-42x16.svg");
375 .content-width-plus-button {
376 background-size: 44px 16px;
377 background-image: url("chrome://global/skin/reader/RM-Content-Width-Plus-44x16.svg");
380 .line-height-minus-button {
381 background-size: 34px 14px;
382 background-image: url("chrome://global/skin/reader/RM-Line-Height-Minus-38x14.svg");
385 .line-height-plus-button {
386 background-size: 34px 24px;
387 background-image: url("chrome://global/skin/reader/RM-Line-Height-Plus-38x24.svg");
392 display: none !important;