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 /*======= Font style 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 .dropdown-popup > hr {
143 .open > .dropdown-popup {
149 top: 30px; /* offset arrow from top of popup */
153 background-image: url("chrome://global/skin/reader/RM-Type-Controls-Arrow.svg");
159 #color-scheme-buttons {
164 #font-type-buttons > button:first-child {
165 border-top-left-radius: 3px;
167 #font-type-buttons > button:last-child {
168 border-top-right-radius: 3px;
170 #color-scheme-buttons > button:first-child {
171 border-bottom-left-radius: 3px;
173 #color-scheme-buttons > button:last-child {
174 border-bottom-right-radius: 3px;
177 #font-type-buttons > button,
178 #font-size-buttons > button,
179 #color-scheme-buttons > button {
184 #font-type-buttons > button,
185 #font-size-buttons > button {
187 background-color: transparent;
188 border-left: 1px solid #B5B5B5;
189 border-bottom: 1px solid #B5B5B5;
192 #color-scheme-buttons > button {
197 #color-scheme-buttons > .dark-button {
202 #font-type-buttons > button:first-child,
203 #font-size-buttons > button:first-child {
207 #font-type-buttons > button {
208 display: inline-block;
213 #font-size-buttons > button,
214 #color-scheme-buttons > button {
218 #font-type-buttons > button:active:hover,
219 #font-type-buttons > button.selected,
220 #color-scheme-buttons > button:active:hover,
221 #color-scheme-buttons > button.selected {
222 box-shadow: inset 0 -3px 0 0 #fc6420;
225 #font-type-buttons > button:active:hover,
226 #font-type-buttons > button.selected {
227 border-bottom: 1px solid #FC6420;
230 /* Make the serif button content the same size as the sans-serif button content. */
231 #font-type-buttons > button > .description {
237 /* Font sizes are different per-platform, so we need custom CSS to line them up. */
239 #font-type-buttons > .sans-serif-button > .name {
243 #font-type-buttons > .sans-serif-button > .description {
247 #font-type-buttons > .serif-button > .name {
251 #font-type-buttons > .sans-serif-button > .name {
255 #font-type-buttons > .sans-serif-button > .description {
259 #font-type-buttons > .serif-button > .name {
263 #font-type-buttons > .sans-serif-button > .name {
267 #font-type-buttons > .sans-serif-button > .description {
271 #font-type-buttons > .serif-button > .name {
277 #font-size-buttons > button:hover,
278 #font-type-buttons > button:hover {
279 background-color: #ebebeb;
284 #font-size-buttons > button:active,
285 #font-size-buttons > button.selected {
286 background-color: #dadada;
289 /* Only used on Android */
296 background-color: transparent;
298 background-size: 18px 18px;
299 background-repeat: no-repeat;
300 background-position: center;
305 background-color: #ebebeb;
311 box-sizing: border-box;
312 box-shadow: 0 3px 3px -3px rgba(0, 0, 0, 0.35) inset;
316 background-image: url("chrome://global/skin/reader/RM-Delete-24x24.svg");
318 border: 1px solid #c1c1c1;
319 background-position: 10px 7px;
323 box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
328 /*======= Toolbar icons =======*/
330 /* Android-only controls */
336 background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg#close");
338 background-position: center 8px;
341 .close-button:hover {
342 background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg#close-hover");
343 background-color: #d94141;
344 border-bottom: 1px solid #d94141;
345 border-right: 1px solid #d94141;
348 .close-button:hover:active {
349 background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg#close-hover");
350 background-color: #AE2325;
351 border-bottom: 1px solid #AE2325;
352 border-right: 1px solid #AE2325;
356 background-image: url("chrome://global/skin/reader/RM-Type-Controls-24x24.svg");
360 background-image: url("chrome://global/skin/reader/RM-Delete-24x24.svg");
364 background-image: url("chrome://global/skin/reader/RM-Add-24x24.svg");
368 background-image: url("chrome://global/skin/reader/RM-Reading-List-24x24.svg");
371 background-color: #d9d9d9;
375 background-image: url("chrome://global/skin/reader/RM-Minus-24x24.svg");
379 background-image: url("chrome://global/skin/reader/RM-Plus-24x24.svg");
383 background-image: url("chrome://global/skin/reader/pocket.svg#pocket-mark");
386 #pocket-button:hover:active {
387 background-image: url("chrome://global/skin/reader/pocket.svg#pocket-mark-added");
392 display: none !important;
395 display: none !important;