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/. */
6 font-family: sans-serif;
8 background: url("loading.png") repeat;
24 transition-property: opacity;
25 transition-duration: .2s;
32 transition-duration: 1s;
36 #dialogArea:-moz-system-metric(touch-enabled),
37 #libraryArea.hidden:-moz-system-metric(touch-enabled),
38 .overlayArea:-moz-system-metric(touch-enabled),
39 .menuDrawer:-moz-system-metric(touch-enabled) {
43 #dialogArea input[type="button"],
45 #dialogArea input[type="text"],
47 #libraryArea input[type="button"],
49 .overlayArea input[type="button"],
52 .menuDrawer input[type="button"],
54 .menuDrawer input[type="text"],
55 .menuDrawer input[type="number"],
72 #zoomArea > input[type="button"],
73 #fullscreenArea > input[type="button"],
81 background-color: rgba(255, 255, 255, .25);
82 background-image: radial-gradient(circle 1.5em, #FFFFFF, transparent);
87 #zoomArea > input[type="button"] {
88 border: 2px solid #0000FF;
91 #zoomArea > input[type="button"]:hover,
92 #fullscreenArea > input[type="button"]:hover,
94 #settingsButton:hover {
95 background-color: rgba(255, 255, 255, .8);
98 #zoomArea > input[type="button"]:active,
99 #fullscreenArea > input[type="button"]:active,
101 #settingsButton:active {
102 background-color: rgba(255, 255, 127, .8);
105 #zoomArea > input[type="button"]:focus,
106 #fullscreenArea > input[type="button"]:focus,
108 #settingsButton:focus {
109 background-color: rgba(255, 255, 255, .5);
119 /* background-color: rgba(255, 255, 255, .8); */
120 background-image: radial-gradient(circle 1.5em, #FFFFFF, transparent);
130 transform: translateX(calc(-40ch - 1ch)); /* account for padding */
132 max-width: 95%; /* make sure we don't overflow the screen */
133 background-color: rgba(15, 15, 15, .9);
136 padding: 0 .5ch; /* account for legend */
139 transition-property: transform;
140 transition-duration: 1s;
141 transition-timing-function: ease;
144 .menuDrawer:not(.hidden) {
145 transform: translateX(0);
148 @media screen and (max-width: 330px) {
150 left: calc(-300px - 1ch); /* account for padding */
164 background-color: #CCCCCC;
170 .menuDrawer > h2 > img {
171 vertical-align: text-top;
175 /* For optical conveniece, display an "x" for closing. */
176 .menuDrawer > h2:after {
177 content: '\00D7'; /* multiplication sign */
178 display: inline-block;
179 vertical-align: text-top;
186 /* Custom checkbox design */
187 .menuDrawer input[type="checkbox"] {
191 .menuDrawer input[type="checkbox"] + label:before {
192 content: '\00A0'; /* non-breaking space */
193 display: inline-block;
198 vertical-align: middle;
199 background-color: rgba(204, 204, 204, .2);
200 border: 1px solid #CCCCCC;
204 .menuDrawer input[type="checkbox"]:hover + label:before {
205 background-color: rgba(204, 204, 204, .4);
206 border: 1px solid #FFFFFF;
208 .menuDrawer input[type="checkbox"]:hover + label {
214 .menuDrawer input[type="checkbox"]:active + label:before {
215 background-color: rgba(204, 204, 255, .3);
216 border: 1px solid #FFCCAA;
218 .menuDrawer input[type="checkbox"]:active + label {
222 .menuDrawer input[type="checkbox"]:checked + label:before {
223 content: '\2714'; /* tick mark */
226 /* Custom button design */
227 .menuDrawer input[type="button"],
230 vertical-align: middle;
231 background-image: none;
232 background-color: rgba(204, 204, 204, .2);
235 border: 1px solid #CCCCCC;
239 .menuDrawer input[type="button"]:disabled,
240 .menuDrawer button:disabled {
241 background-color: rgba(204, 204, 204, .1);
242 color: rgba(204, 204, 204, .5);
243 border: 1px solid rgba(255, 255, 255, .5);
246 .menuDrawer input[type="button"]:not(:disabled):hover,
247 .menuDrawer button:not(:disabled):hover {
248 background-color: rgba(204, 204, 204, .4);
249 border: 1px solid #FFFFFF;
252 .menuDrawer input[type="button"]:not(:disabled):active,
253 .menuDrawer button:not(:disabled):active {
254 background-color: rgba(204, 204, 255, .3);
257 padding-right: calc(.5em - 1px);
259 padding-left: calc(.5em + 1px);
262 /* Custom select design */
265 vertical-align: middle;
266 background-image: none;
267 background-color: rgba(204, 204, 204, .2);
270 border: 1px solid #CCCCCC;
274 .menuDrawer select:hover {
275 background-color: rgba(204, 204, 204, .4);
276 border: 1px solid #FFFFFF;
279 .menuDrawer select:active {
280 background-color: rgba(204, 204, 255, .3);
284 .menuDrawer option:checked:not(:hover) {
285 background-color: rgba(204, 204, 204, .1);
288 .menuDrawer option:hover {
289 background-color: #CCCCCC;
293 .menuDrawer input[type="text"],
294 .menuDrawer input[type="number"] {
296 vertical-align: middle;
297 background-image: none;
298 background-color: rgba(204, 204, 204, .7);
301 border: 1px solid #CCCCCC;
305 .menuDrawer input[type="text"] {
309 .menuDrawer input[type="number"] {
313 .menuDrawer input[type="text"]:disabled,
314 .menuDrawer input[type="number"]:disabled {
315 background-color: rgba(204, 204, 204, .1);
316 color: rgba(204, 204, 204, .5);
317 border: 1px solid rgba(255, 255, 255, .5);
320 .menuDrawer input[type="text"]:not(:disabled):hover,
321 .menuDrawer input[type="number"]:not(:disabled):hover {
322 border: 1px solid #FFFFFF;
325 .menuDrawer input[type="text"]:not(:disabled):focus,
326 .menuDrawer input[type="number"]:not(:disabled):focus {
327 background-color: rgba(204, 204, 255, .8);
328 border: 1px solid #FFFFFF;
332 .menuDrawer p.subTitle {
333 margin: .75em 0 .5em;
342 border-top: 2px solid;
343 border-bottom: 2px solid;
370 background-color: rgba(255, 255, 255, .8);
376 vertical-align: text-bottom;
390 background-color: rgba(255, 255, 255, 1);
407 background-color: rgba(255, 255, 255, .8);
436 background-color: rgba(255, 255, 255, .95);
443 #libraryArea.hidden {
456 padding: 0 0.5em 0.5em;
464 @media screen and (max-width: 500px),
465 screen and (max-height: 500px) {