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;
238 border-top: 2px solid;
239 border-bottom: 2px solid;
247 /* Secondary UI: menu drawers, full screen overlays, etc. */
249 background-color: rgba(15, 15, 15, .9);
253 /* Custom checkbox design */
254 .secondaryUI input[type="checkbox"] {
258 .secondaryUI input[type="checkbox"] + label:before {
259 content: '\00A0'; /* non-breaking space */
260 display: inline-block;
265 vertical-align: middle;
266 background-color: rgba(204, 204, 204, .2);
267 border: 1px solid #CCCCCC;
271 .secondaryUI input[type="checkbox"]:hover + label:before {
272 background-color: rgba(204, 204, 204, .4);
273 border: 1px solid #FFFFFF;
275 .secondaryUI input[type="checkbox"]:hover + label {
281 .secondaryUI input[type="checkbox"]:active + label:before {
282 background-color: rgba(204, 204, 255, .3);
283 border: 1px solid #FFCCAA;
285 .secondaryUI input[type="checkbox"]:active + label {
289 .secondaryUI input[type="checkbox"]:checked + label:before {
290 content: '\2714'; /* tick mark */
293 /* Custom button design */
294 .secondaryUI input[type="button"],
295 .secondaryUI button {
297 vertical-align: middle;
298 background-image: none;
299 background-color: rgba(204, 204, 204, .2);
302 border: 1px solid #CCCCCC;
306 .secondaryUI input[type="button"]:disabled,
307 .secondaryUI button:disabled {
308 background-color: rgba(204, 204, 204, .1);
309 color: rgba(204, 204, 204, .5);
310 border: 1px solid rgba(255, 255, 255, .5);
313 .secondaryUI input[type="button"]:not(:disabled):hover,
314 .secondaryUI button:not(:disabled):hover {
315 background-color: rgba(204, 204, 204, .4);
316 border: 1px solid #FFFFFF;
319 .secondaryUI input[type="button"]:not(:disabled):active,
320 .secondaryUI button:not(:disabled):active {
321 background-color: rgba(204, 204, 255, .3);
324 padding-right: calc(.5em - 1px);
326 padding-left: calc(.5em + 1px);
329 /* Custom select design */
330 .secondaryUI select {
332 vertical-align: middle;
333 background-image: none;
334 background-color: rgba(204, 204, 204, .2);
337 border: 1px solid #CCCCCC;
341 .secondaryUI select:hover {
342 background-color: rgba(204, 204, 204, .4);
343 border: 1px solid #FFFFFF;
346 .secondaryUI select:active {
347 background-color: rgba(204, 204, 255, .3);
351 .secondaryUI option:checked:not(:hover) {
352 background-color: rgba(204, 204, 204, .1);
355 .secondaryUI option:hover {
356 background-color: #CCCCCC;
360 /* Custom textbox design */
361 .secondaryUI input[type="text"],
362 .secondaryUI input[type="number"] {
364 vertical-align: middle;
365 background-image: none;
366 background-color: rgba(204, 204, 204, .7);
369 border: 1px solid #CCCCCC;
373 .secondaryUI input[type="text"] {
377 .secondaryUI input[type="number"] {
381 .secondaryUI input[type="text"]:disabled,
382 .secondaryUI input[type="number"]:disabled {
383 background-color: rgba(204, 204, 204, .1);
384 color: rgba(204, 204, 204, .5);
385 border: 1px solid rgba(255, 255, 255, .5);
388 .secondaryUI input[type="text"]:not(:disabled):hover,
389 .secondaryUI input[type="number"]:not(:disabled):hover {
390 border: 1px solid #FFFFFF;
393 .secondaryUI input[type="text"]:not(:disabled):focus,
394 .secondaryUI input[type="number"]:not(:disabled):focus {
395 background-color: rgba(204, 204, 255, .8);
396 border: 1px solid #FFFFFF;
400 /* custom style for paragraphs and links */
401 .secondaryUI p.subTitle {
402 margin: .75em 0 .5em;
406 .secondaryUI a:link {
410 .secondaryUI a:visited {
414 .secondaryUI a:hover {
418 /* dialog area - only used for loading error */
426 background-color: rgba(255, 255, 255, .8);
438 /* full screen overlay - library, etc. */
447 background-color: rgba(15, 15, 15, 1.0);
454 .fullScreenOverlay.hidden {
461 .fullScreenOverlay > .closeButtonContainer {
470 .fullScreenOverlay > .closeButtonContainer > .closeButton {
475 /* small screen media adaptations */
476 @media screen and (max-width: 500px),
477 screen and (max-height: 500px) {