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;
90 background-size: 24px 24px;
91 background-repeat: no-repeat;
93 background-color: #fbfbfb;
100 background-position: center;
104 border-right: 1px solid #b5b5b5;
105 border-bottom: 1px solid #c1c1c1;
124 /*======= Popup =======*/
130 left: 48px; /* offset to account for toolbar width */
132 background-color: #fbfbfb;
135 border: 1px solid #b5b5b5;
136 border-bottom-width: 0;
137 box-shadow: 0 1px 12px #666;
140 .keep-open .dropdown-popup {
144 .dropdown-popup > hr {
148 .open > .dropdown-popup {
154 top: 30px; /* offset arrow from top of popup */
158 background-image: url("chrome://global/skin/reader/RM-Type-Controls-Arrow.svg");
162 /*======= Font style popup =======*/
166 #color-scheme-buttons,
167 #content-width-buttons,
168 #line-height-buttons {
173 #font-type-buttons > button:first-child {
174 border-top-left-radius: 3px;
176 #font-type-buttons > button:last-child {
177 border-top-right-radius: 3px;
179 #color-scheme-buttons > button:first-child {
180 border-bottom-left-radius: 3px;
182 #color-scheme-buttons > button:last-child {
183 border-bottom-right-radius: 3px;
186 #font-type-buttons > button,
187 #font-size-buttons > button,
188 #color-scheme-buttons > button,
189 #content-width-buttons > button,
190 #line-height-buttons > button {
195 #font-type-buttons > button,
196 #font-size-buttons > button,
197 #content-width-buttons > button,
198 #line-height-buttons > button {
200 background-color: transparent;
201 border-left: 1px solid #B5B5B5;
202 border-bottom: 1px solid #B5B5B5;
205 #color-scheme-buttons > button {
210 #color-scheme-buttons > .dark-button {
215 #font-type-buttons > button:first-child,
216 #font-size-buttons > button:first-child,
217 #content-width-buttons > button:first-child,
218 #line-height-buttons > button:first-child {
222 #font-type-buttons > button {
223 display: inline-block;
228 #font-size-buttons > button,
229 #color-scheme-buttons > button,
230 #content-width-buttons > button,
231 #line-height-buttons > button {
235 #font-type-buttons > button:active:hover,
236 #font-type-buttons > button.selected,
237 #color-scheme-buttons > button:active:hover,
238 #color-scheme-buttons > button.selected {
239 box-shadow: inset 0 -3px 0 0 #fc6420;
242 #font-type-buttons > button:active:hover,
243 #font-type-buttons > button.selected {
244 border-bottom: 1px solid #FC6420;
247 /* Make the serif button content the same size as the sans-serif button content. */
248 #font-type-buttons > button > .description {
254 /* Font sizes are different per-platform, so we need custom CSS to line them up. */
255 #font-type-buttons > .sans-serif-button > .name {
259 #font-type-buttons > .sans-serif-button > .description {
263 #font-type-buttons > .serif-button > .name {
268 #font-size-buttons > button:hover,
269 #font-type-buttons > button:hover,
270 #content-width-buttons > button:hover,
271 #line-height-buttons > button:hover {
272 background-color: #ebebeb;
277 #font-size-buttons > button:active,
278 #font-size-buttons > button.selected,
279 #content-width-buttons > button:active,
280 #content-width-buttons > button.selected,
281 #line-height-buttons > button:active,
282 #line-height-buttons > button.selected {
283 background-color: #dadada;
286 /* Only used on Android */
293 .content-width-minus-button,
294 .content-width-plus-button,
295 .line-height-minus-button,
296 .line-height-plus-button {
297 background-color: transparent;
299 background-size: 18px 18px;
300 background-repeat: no-repeat;
301 background-position: center;
304 /*======= Toolbar icons =======*/
307 background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg#close");
309 background-position: center 8px;
312 .close-button:hover {
313 background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg#close-hover");
314 background-color: #d94141;
315 border-bottom: 1px solid #d94141;
316 border-right: 1px solid #d94141;
319 .close-button:hover:active {
320 background-image: url("chrome://global/skin/reader/RM-Close-24x24.svg#close-hover");
321 background-color: #AE2325;
322 border-bottom: 1px solid #AE2325;
323 border-right: 1px solid #AE2325;
327 background-image: url("chrome://global/skin/reader/RM-Type-Controls-24x24.svg");
331 background-image: url("chrome://global/skin/reader/RM-Minus-24x24.svg");
335 background-image: url("chrome://global/skin/reader/RM-Plus-24x24.svg");
338 .content-width-minus-button {
339 background-size: 42px 16px;
340 background-image: url("chrome://global/skin/reader/RM-Content-Width-Minus-42x16.svg");
343 .content-width-plus-button {
344 background-size: 44px 16px;
345 background-image: url("chrome://global/skin/reader/RM-Content-Width-Plus-44x16.svg");
348 .line-height-minus-button {
349 background-size: 34px 14px;
350 background-image: url("chrome://global/skin/reader/RM-Line-Height-Minus-38x14.svg");
353 .line-height-plus-button {
354 background-size: 34px 24px;
355 background-image: url("chrome://global/skin/reader/RM-Line-Height-Plus-38x24.svg");
360 display: none !important;