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 /*======= Controls toolbar =======*/
74 font-family: Helvetica, Arial, sans-serif;
82 background-color: #fbfbfb;
83 -moz-user-select: none;
84 border-right: 1px solid #b5b5b5;
89 background-size: 24px 24px;
90 background-repeat: no-repeat;
92 background-color: #fbfbfb;
99 background-position: center;
103 border-right: 1px solid #b5b5b5;
104 border-bottom: 1px solid #c1c1c1;
123 /*======= Popup =======*/
129 left: 48px; /* offset to account for toolbar width */
131 background-color: #fbfbfb;
134 border: 1px solid #b5b5b5;
135 border-bottom-width: 0;
136 box-shadow: 0 1px 12px #666;
139 .keep-open .dropdown-popup {
143 .dropdown-popup > hr {
147 .open > .dropdown-popup {
153 top: 30px; /* offset arrow from top of popup */
157 background-image: url("chrome://global/skin/reader/RM-Type-Controls-Arrow.svg");
161 /*======= Font style popup =======*/
165 #color-scheme-buttons,
166 #content-width-buttons,
167 #line-height-buttons {
172 #font-type-buttons > button:first-child {
173 border-top-left-radius: 3px;
175 #font-type-buttons > button:last-child {
176 border-top-right-radius: 3px;
178 #color-scheme-buttons > button:first-child {
179 border-bottom-left-radius: 3px;
181 #color-scheme-buttons > button:last-child {
182 border-bottom-right-radius: 3px;
185 #font-type-buttons > button,
186 #font-size-buttons > button,
187 #color-scheme-buttons > button,
188 #content-width-buttons > button,
189 #line-height-buttons > button {
194 #font-type-buttons > button,
195 #font-size-buttons > button,
196 #content-width-buttons > button,
197 #line-height-buttons > button {
199 background-color: transparent;
200 border-left: 1px solid #B5B5B5;
201 border-bottom: 1px solid #B5B5B5;
204 #color-scheme-buttons > button {
209 #color-scheme-buttons > .dark-button {
214 #font-type-buttons > button:first-child,
215 #font-size-buttons > button:first-child,
216 #content-width-buttons > button:first-child,
217 #line-height-buttons > button:first-child {
221 #font-type-buttons > button {
222 display: inline-block;
227 #font-size-buttons > button,
228 #color-scheme-buttons > button,
229 #content-width-buttons > button,
230 #line-height-buttons > button {
234 #font-type-buttons > button:active:hover,
235 #font-type-buttons > button.selected,
236 #color-scheme-buttons > button:active:hover,
237 #color-scheme-buttons > button.selected {
238 box-shadow: inset 0 -3px 0 0 #fc6420;
241 #font-type-buttons > button:active:hover,
242 #font-type-buttons > button.selected {
243 border-bottom: 1px solid #FC6420;
246 /* Make the serif button content the same size as the sans-serif button content. */
247 #font-type-buttons > button > .description {
253 /* Font sizes are different per-platform, so we need custom CSS to line them up. */
254 #font-type-buttons > .sans-serif-button > .name {
258 #font-type-buttons > .sans-serif-button > .description {
262 #font-type-buttons > .serif-button > .name {
267 #font-size-buttons > button:hover,
268 #font-type-buttons > button:hover,
269 #content-width-buttons > button:hover,
270 #line-height-buttons > button:hover {
271 background-color: #ebebeb;
276 #font-size-buttons > button:active,
277 #font-size-buttons > button.selected,
278 #content-width-buttons > button:active,
279 #content-width-buttons > button.selected,
280 #line-height-buttons > button:active,
281 #line-height-buttons > button.selected {
282 background-color: #dadada;
285 /* Only used on Android */
292 .content-width-minus-button,
293 .content-width-plus-button,
294 .line-height-minus-button,
295 .line-height-plus-button {
296 background-color: transparent;
298 background-size: 18px 18px;
299 background-repeat: no-repeat;
300 background-position: center;
303 /*======= Toolbar icons =======*/
306 background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg#close");
308 background-position: center 8px;
311 .close-button:hover {
312 background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg#close-hover");
313 background-color: #d94141;
314 border-bottom: 1px solid #d94141;
315 border-right: 1px solid #d94141;
318 .close-button:hover:active {
319 background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg#close-hover");
320 background-color: #AE2325;
321 border-bottom: 1px solid #AE2325;
322 border-right: 1px solid #AE2325;
326 background-image: url("chrome://global/skin/reader/RM-Type-Controls-24x24.svg");
330 background-image: url("chrome://global/skin/reader/RM-Minus-24x24.svg");
334 background-image: url("chrome://global/skin/reader/RM-Plus-24x24.svg");
338 background-image: url("chrome://global/skin/reader/pocket.svg#pocket-mark");
341 #pocket-button:hover:active {
342 background-image: url("chrome://global/skin/reader/pocket.svg#pocket-mark-added");
345 .content-width-minus-button {
346 background-size: 42px 16px;
347 background-image: url("chrome://global/skin/reader/RM-Content-Width-Minus-42x16.svg");
350 .content-width-plus-button {
351 background-size: 44px 16px;
352 background-image: url("chrome://global/skin/reader/RM-Content-Width-Plus-44x16.svg");
355 .line-height-minus-button {
356 background-size: 34px 14px;
357 background-image: url("chrome://global/skin/reader/RM-Line-Height-Minus-38x14.svg");
360 .line-height-plus-button {
361 background-size: 34px 24px;
362 background-image: url("chrome://global/skin/reader/RM-Line-Height-Plus-38x24.svg");
367 display: none !important;