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);
81 #zoomArea > input[type="button"] {
82 border: 2px solid #0000FF;
85 .autoFade > input[type="button"]:hover,
86 .autoFade > .controlButton:hover {
87 background-color: rgba(255, 255, 255, .8);
90 .autoFade > input[type="button"]:active,
91 .autoFade > .controlButton:active {
92 background-color: rgba(255, 255, 127, .8);
95 .autoFade > input[type="button"]:focus,
96 .autoFade > .controlButton:focus {
97 background-color: rgba(255, 255, 255, .5);
107 /* background-color: rgba(255, 255, 255, .8); */
108 background-image: radial-gradient(circle 1.5em, #FFFFFF, transparent);
120 background-color: rgba(255, 255, 255, .8);
126 vertical-align: text-bottom;
136 background-color: rgba(255, 255, 255, 1);
146 .overlayArea:-moz-system-metric(touch-enabled),
147 .menuDrawer:-moz-system-metric(touch-enabled) {
151 .overlayArea input[type="button"],
154 .menuDrawer input[type="button"],
156 .menuDrawer input[type="text"],
157 .menuDrawer input[type="number"],
168 transform: translateX(calc(-40ch - 1ch)); /* account for padding */
170 max-width: 95%; /* make sure we don't overflow the screen */
172 padding: 0 .5ch; /* account for legend */
175 transition-property: transform;
176 transition-duration: 1s;
177 transition-timing-function: ease;
180 .menuDrawer:not(.hidden) {
181 transform: translateX(0);
184 @media screen and (max-width: 330px) {
186 left: calc(-300px - 1ch); /* account for padding */
200 background-color: #CCCCCC;
206 .menuDrawer > h2 > img {
207 vertical-align: text-top;
211 /* For optical conveniece, display an "x" for closing. */
212 .menuDrawer > h2:after {
213 content: '\00D7'; /* multiplication sign */
214 display: inline-block;
215 vertical-align: text-top;
233 border-top: 2px solid;
234 border-bottom: 2px solid;
242 /* Secondary UI: menu drawers, full screen overlays, etc. */
244 background-color: rgba(15, 15, 15, .9);
248 /* Custom checkbox design */
249 .secondaryUI input[type="checkbox"] {
253 .secondaryUI input[type="checkbox"] + label:before {
254 content: '\00A0'; /* non-breaking space */
255 display: inline-block;
260 vertical-align: middle;
261 background-color: rgba(204, 204, 204, .2);
262 border: 1px solid #CCCCCC;
266 .secondaryUI input[type="checkbox"]:hover + label:before {
267 background-color: rgba(204, 204, 204, .4);
268 border: 1px solid #FFFFFF;
270 .secondaryUI input[type="checkbox"]:hover + label {
276 .secondaryUI input[type="checkbox"]:active + label:before {
277 background-color: rgba(204, 204, 255, .3);
278 border: 1px solid #FFCCAA;
280 .secondaryUI input[type="checkbox"]:active + label {
284 .secondaryUI input[type="checkbox"]:checked + label:before {
285 content: '\2714'; /* tick mark */
288 /* Custom button design */
289 .secondaryUI input[type="button"],
290 .secondaryUI button {
292 vertical-align: middle;
293 background-image: none;
294 background-color: rgba(204, 204, 204, .2);
297 border: 1px solid #CCCCCC;
301 .secondaryUI input[type="button"]:disabled,
302 .secondaryUI button:disabled {
303 background-color: rgba(204, 204, 204, .1);
304 color: rgba(204, 204, 204, .5);
305 border: 1px solid rgba(255, 255, 255, .5);
308 .secondaryUI input[type="button"]:not(:disabled):hover,
309 .secondaryUI button:not(:disabled):hover {
310 background-color: rgba(204, 204, 204, .4);
311 border: 1px solid #FFFFFF;
314 .secondaryUI input[type="button"]:not(:disabled):active,
315 .secondaryUI button:not(:disabled):active {
316 background-color: rgba(204, 204, 255, .3);
319 padding-right: calc(.5em - 1px);
321 padding-left: calc(.5em + 1px);
324 /* Custom select design */
325 .secondaryUI select {
327 vertical-align: middle;
328 background-image: none;
329 background-color: rgba(204, 204, 204, .2);
332 border: 1px solid #CCCCCC;
336 .secondaryUI select:hover {
337 background-color: rgba(204, 204, 204, .4);
338 border: 1px solid #FFFFFF;
341 .secondaryUI select:active {
342 background-color: rgba(204, 204, 255, .3);
346 .secondaryUI option:checked:not(:hover) {
347 background-color: rgba(204, 204, 204, .1);
350 .secondaryUI option:hover {
351 background-color: #CCCCCC;
355 /* Custom textbox design */
356 .secondaryUI input[type="text"],
357 .secondaryUI input[type="number"] {
359 vertical-align: middle;
360 background-image: none;
361 background-color: rgba(204, 204, 204, .7);
364 border: 1px solid #CCCCCC;
368 .secondaryUI input[type="text"] {
372 .secondaryUI input[type="number"] {
376 .secondaryUI input[type="text"]:disabled,
377 .secondaryUI input[type="number"]:disabled {
378 background-color: rgba(204, 204, 204, .1);
379 color: rgba(204, 204, 204, .5);
380 border: 1px solid rgba(255, 255, 255, .5);
383 .secondaryUI input[type="text"]:not(:disabled):hover,
384 .secondaryUI input[type="number"]:not(:disabled):hover {
385 border: 1px solid #FFFFFF;
388 .secondaryUI input[type="text"]:not(:disabled):focus,
389 .secondaryUI input[type="number"]:not(:disabled):focus {
390 background-color: rgba(204, 204, 255, .8);
391 border: 1px solid #FFFFFF;
395 /* custom style for paragraphs and links */
396 .secondaryUI p.subTitle {
397 margin: .75em 0 .5em;
401 .secondaryUI a:link {
405 .secondaryUI a:visited {
409 .secondaryUI a:hover {
413 /* dialog area - for loading error and welcome messages */
422 background-color: rgba(255, 255, 255, .8);
443 /* full screen overlay - library, etc. */
451 background-color: rgba(15, 15, 15, 1.0);
458 .fullScreenOverlay.hidden {
465 .fullScreenOverlay > .closeButtonContainer {
474 .fullScreenOverlay > .closeButtonContainer > .closeButton {
479 .fullScreenOverlay p {
483 .fullScreenOverlay > p:first-child {
485 /* leave space for close button */
491 /* 2em is top/bottom margin, and one line is shown above and below, with .5em margin each */
492 height: calc(100% - 5em);
499 /* small screen media adaptations */
500 @media screen and (max-width: 500px),
501 screen and (max-height: 500px) {