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;
23 /* Main window UI areas */
44 transition-property: opacity;
45 transition-duration: .2s;
50 transition-duration: 1s;
66 .autoFade > input[type="button"],
67 .autoFade > .controlButton {
73 background-color: rgba(255, 255, 255, .25);
74 background-image: radial-gradient(circle 1.5em, #FFFFFF, transparent);
79 #zoomArea > input[type="button"] {
80 border: 2px solid #0000FF;
83 .autoFade > input[type="button"]:hover,
84 .autoFade > .controlButton:hover {
85 background-color: rgba(255, 255, 255, .8);
88 .autoFade > input[type="button"]:active,
89 .autoFade > .controlButton:active {
90 background-color: rgba(255, 255, 127, .8);
93 .autoFade > input[type="button"]:focus,
94 .autoFade > .controlButton:focus {
95 background-color: rgba(255, 255, 255, .5);
105 /* background-color: rgba(255, 255, 255, .8); */
106 background-image: radial-gradient(circle 1.5em, #FFFFFF, transparent);
118 background-color: rgba(255, 255, 255, .8);
124 vertical-align: text-bottom;
134 background-color: rgba(255, 255, 255, 1);
144 .overlayArea:-moz-system-metric(touch-enabled),
145 .menuDrawer:-moz-system-metric(touch-enabled) {
149 .overlayArea input[type="button"],
152 .menuDrawer input[type="button"],
154 .menuDrawer input[type="text"],
155 .menuDrawer input[type="number"],
166 transform: translateX(calc(-40ch - 1ch)); /* account for padding */
168 max-width: 95%; /* make sure we don't overflow the screen */
170 padding: 0 .5ch; /* account for legend */
173 transition-property: transform;
174 transition-duration: 1s;
175 transition-timing-function: ease;
178 .menuDrawer:not(.hidden) {
179 transform: translateX(0);
182 @media screen and (max-width: 330px) {
184 left: calc(-300px - 1ch); /* account for padding */
198 background-color: #CCCCCC;
204 .menuDrawer > h2 > img {
205 vertical-align: text-top;
209 /* For optical conveniece, display an "x" for closing. */
210 .menuDrawer > h2:after {
211 content: '\00D7'; /* multiplication sign */
212 display: inline-block;
213 vertical-align: text-top;
236 border-top: 2px solid;
237 border-bottom: 2px solid;
245 /* Secondary UI: menu drawers, full screen overlays, etc. */
247 background-color: rgba(15, 15, 15, .9);
251 /* Custom checkbox design */
252 .secondaryUI input[type="checkbox"] {
256 .secondaryUI input[type="checkbox"] + label:before {
257 content: '\00A0'; /* non-breaking space */
258 display: inline-block;
263 vertical-align: middle;
264 background-color: rgba(204, 204, 204, .2);
265 border: 1px solid #CCCCCC;
269 .secondaryUI input[type="checkbox"]:hover + label:before {
270 background-color: rgba(204, 204, 204, .4);
271 border: 1px solid #FFFFFF;
273 .secondaryUI input[type="checkbox"]:hover + label {
279 .secondaryUI input[type="checkbox"]:active + label:before {
280 background-color: rgba(204, 204, 255, .3);
281 border: 1px solid #FFCCAA;
283 .secondaryUI input[type="checkbox"]:active + label {
287 .secondaryUI input[type="checkbox"]:checked + label:before {
288 content: '\2714'; /* tick mark */
291 /* Custom button design */
292 .secondaryUI input[type="button"],
293 .secondaryUI button {
295 vertical-align: middle;
296 background-image: none;
297 background-color: rgba(204, 204, 204, .2);
300 border: 1px solid #CCCCCC;
304 .secondaryUI input[type="button"]:disabled,
305 .secondaryUI button:disabled {
306 background-color: rgba(204, 204, 204, .1);
307 color: rgba(204, 204, 204, .5);
308 border: 1px solid rgba(255, 255, 255, .5);
311 .secondaryUI input[type="button"]:not(:disabled):hover,
312 .secondaryUI button:not(:disabled):hover {
313 background-color: rgba(204, 204, 204, .4);
314 border: 1px solid #FFFFFF;
317 .secondaryUI input[type="button"]:not(:disabled):active,
318 .secondaryUI button:not(:disabled):active {
319 background-color: rgba(204, 204, 255, .3);
322 padding-right: calc(.5em - 1px);
324 padding-left: calc(.5em + 1px);
327 /* Custom select design */
328 .secondaryUI select {
330 vertical-align: middle;
331 background-image: none;
332 background-color: rgba(204, 204, 204, .2);
335 border: 1px solid #CCCCCC;
339 .secondaryUI select:hover {
340 background-color: rgba(204, 204, 204, .4);
341 border: 1px solid #FFFFFF;
344 .secondaryUI select:active {
345 background-color: rgba(204, 204, 255, .3);
349 .secondaryUI option:checked:not(:hover) {
350 background-color: rgba(204, 204, 204, .1);
353 .secondaryUI option:hover {
354 background-color: #CCCCCC;
358 /* Custom textbox design */
359 .secondaryUI input[type="text"],
360 .secondaryUI input[type="number"] {
362 vertical-align: middle;
363 background-image: none;
364 background-color: rgba(204, 204, 204, .7);
367 border: 1px solid #CCCCCC;
371 .secondaryUI input[type="text"] {
375 .secondaryUI input[type="number"] {
379 .secondaryUI input[type="text"]:disabled,
380 .secondaryUI input[type="number"]:disabled {
381 background-color: rgba(204, 204, 204, .1);
382 color: rgba(204, 204, 204, .5);
383 border: 1px solid rgba(255, 255, 255, .5);
386 .secondaryUI input[type="text"]:not(:disabled):hover,
387 .secondaryUI input[type="number"]:not(:disabled):hover {
388 border: 1px solid #FFFFFF;
391 .secondaryUI input[type="text"]:not(:disabled):focus,
392 .secondaryUI input[type="number"]:not(:disabled):focus {
393 background-color: rgba(204, 204, 255, .8);
394 border: 1px solid #FFFFFF;
398 /* custom style for paragraphs and links */
399 .secondaryUI p.subTitle {
400 margin: .75em 0 .5em;
404 .secondaryUI a:link {
408 .secondaryUI a:visited {
412 .secondaryUI a:hover {
416 /* dialog area - only used for loading error */
424 background-color: rgba(255, 255, 255, .8);
436 /* full screen overlay - library, etc. */
444 background-color: rgba(15, 15, 15, 1.0);
451 .fullScreenOverlay.hidden {
458 .fullScreenOverlay > .closeButtonContainer {
467 .fullScreenOverlay > .closeButtonContainer > .closeButton {
472 /* small screen media adaptations */
473 @media screen and (max-width: 500px),
474 screen and (max-height: 500px) {