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. */
260 #font-type-buttons > .sans-serif-button > .name {
264 #font-type-buttons > .sans-serif-button > .description {
268 #font-type-buttons > .serif-button > .name {
273 #font-size-buttons > button:hover,
274 #font-type-buttons > button:hover,
275 #content-width-buttons > button:hover,
276 #line-height-buttons > button:hover {
277 background-color: #ebebeb;
282 #font-size-buttons > button:active,
283 #font-size-buttons > button.selected,
284 #content-width-buttons > button:active,
285 #content-width-buttons > button.selected,
286 #line-height-buttons > button:active,
287 #line-height-buttons > button.selected {
288 background-color: #dadada;
291 /* Only used on Android */
298 .content-width-minus-button,
299 .content-width-plus-button,
300 .line-height-minus-button,
301 .line-height-plus-button {
302 background-color: transparent;
304 background-size: 18px 18px;
305 background-repeat: no-repeat;
306 background-position: center;
309 /*======= Toolbar icons =======*/
312 background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg#close");
314 background-position: center 8px;
317 .close-button:hover {
318 background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg#close-hover");
319 background-color: #d94141;
320 border-bottom: 1px solid #d94141;
321 border-right: 1px solid #d94141;
324 .close-button:hover:active {
325 background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg#close-hover");
326 background-color: #AE2325;
327 border-bottom: 1px solid #AE2325;
328 border-right: 1px solid #AE2325;
332 background-image: url("chrome://global/skin/reader/RM-Type-Controls-24x24.svg");
336 background-image: url("chrome://global/skin/reader/RM-Minus-24x24.svg");
340 background-image: url("chrome://global/skin/reader/RM-Plus-24x24.svg");
343 .content-width-minus-button {
344 background-size: 42px 16px;
345 background-image: url("chrome://global/skin/reader/RM-Content-Width-Minus-42x16.svg");
348 .content-width-plus-button {
349 background-size: 44px 16px;
350 background-image: url("chrome://global/skin/reader/RM-Content-Width-Plus-44x16.svg");
353 .line-height-minus-button {
354 background-size: 34px 14px;
355 background-image: url("chrome://global/skin/reader/RM-Line-Height-Minus-38x14.svg");
358 .line-height-plus-button {
359 background-size: 34px 24px;
360 background-image: url("chrome://global/skin/reader/RM-Line-Height-Plus-38x24.svg");
365 display: none !important;