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 transition-property: opacity;
24 transition-duration: .2s;
30 transition-duration: 1s;
34 #dialogArea:-moz-system-metric(touch-enabled),
35 .overlayArea:-moz-system-metric(touch-enabled),
36 .menuDrawer:-moz-system-metric(touch-enabled) {
40 #dialogArea input[type="button"],
42 #dialogArea input[type="text"],
44 .overlayArea input[type="button"],
47 .menuDrawer input[type="button"],
65 #zoomArea > input[type="button"],
66 #fullscreenArea > input[type="button"],
74 background-color: rgba(255, 255, 255, .25);
75 background-image: radial-gradient(circle 1.5em, #FFFFFF, transparent);
80 #zoomArea > input[type="button"] {
81 border: 2px solid #0000FF;
84 #zoomArea > input[type="button"]:hover,
85 #fullscreenArea > input[type="button"]:hover,
87 #settingsButton:hover {
88 background-color: rgba(255, 255, 255, .8);
91 #zoomArea > input[type="button"]:active,
92 #fullscreenArea > input[type="button"]:active,
94 #settingsButton:active {
95 background-color: rgba(255, 255, 127, .8);
98 #zoomArea > input[type="button"]:focus,
99 #fullscreenArea > input[type="button"]:focus,
101 #settingsButton:focus {
102 background-color: rgba(255, 255, 255, .5);
112 /* background-color: rgba(255, 255, 255, .8); */
113 background-image: radial-gradient(circle 1.5em, #FFFFFF, transparent);
123 transform: translateX(calc(-40ch - 1ch)); /* account for padding */
125 max-width: 95%; /* make sure we don't overflow the screen */
126 background-color: rgba(15, 15, 15, .9);
129 padding: 0 .5ch; /* account for legend */
132 transition-property: transform;
133 transition-duration: 1s;
134 transition-timing-function: ease;
137 .menuDrawer:not(.hidden) {
138 transform: translateX(0);
141 @media screen and (max-width: 330px) {
143 left: calc(-300px - 1ch); /* account for padding */
157 background-color: #CCCCCC;
163 .menuDrawer > h2 > img {
164 vertical-align: text-top;
168 /* For optical conveniece, display an "x" for closing. */
169 .menuDrawer > h2:after {
170 content: '\00D7'; /* multiplication sign */
171 display: inline-block;
172 vertical-align: text-top;
179 /* Custom checkbox design */
180 .menuDrawer input[type="checkbox"] {
184 .menuDrawer input[type="checkbox"] + label:before {
185 content: '\00A0'; /* non-breaking space */
186 display: inline-block;
191 vertical-align: middle;
192 background-color: rgba(204, 204, 204, .2);
193 border: 1px solid #CCCCCC;
197 .menuDrawer input[type="checkbox"]:hover + label:before {
198 background-color: rgba(204, 204, 204, .4);
199 border: 1px solid #FFFFFF;
201 .menuDrawer input[type="checkbox"]:hover + label {
207 .menuDrawer input[type="checkbox"]:active + label:before {
208 background-color: rgba(204, 204, 255, .3);
209 border: 1px solid #FFCCAA;
211 .menuDrawer input[type="checkbox"]:active + label {
215 .menuDrawer input[type="checkbox"]:checked + label:before {
216 content: '\2714'; /* tick mark */
219 /* Custom button design */
220 .menuDrawer input[type="button"],
223 vertical-align: middle;
224 background-image: none;
225 background-color: rgba(204, 204, 204, .2);
228 border: 1px solid #CCCCCC;
232 .menuDrawer input[type="button"]:disabled,
233 .menuDrawer button:disabled {
234 background-color: rgba(204, 204, 204, .1);
235 color: rgba(204, 204, 204, .5);
236 border: 1px solid rgba(255, 255, 255, .5);
239 .menuDrawer input[type="button"]:not(:disabled):hover,
240 .menuDrawer button:not(:disabled):hover {
241 background-color: rgba(204, 204, 204, .4);
242 border: 1px solid #FFFFFF;
245 .menuDrawer input[type="button"]:not(:disabled):active,
246 .menuDrawer button:not(:disabled):active {
247 background-color: rgba(204, 204, 255, .3);
250 padding-right: calc(.5em - 1px);
252 padding-left: calc(.5em + 1px);
255 /* Custom select design */
258 vertical-align: middle;
259 background-image: none;
260 background-color: rgba(204, 204, 204, .2);
263 border: 1px solid #CCCCCC;
267 .menuDrawer select:hover {
268 background-color: rgba(204, 204, 204, .4);
269 border: 1px solid #FFFFFF;
272 .menuDrawer select:active {
273 background-color: rgba(204, 204, 255, .3);
277 .menuDrawer option:checked:not(:hover) {
278 background-color: rgba(204, 204, 204, .1);
281 .menuDrawer option:hover {
282 background-color: #CCCCCC;
286 .menuDrawer input[type="text"],
287 .menuDrawer input[type="number"] {
289 vertical-align: middle;
290 background-image: none;
291 background-color: rgba(204, 204, 204, .7);
294 border: 1px solid #CCCCCC;
298 .menuDrawer input[type="text"] {
302 .menuDrawer input[type="number"] {
306 .menuDrawer input[type="text"]:disabled,
307 .menuDrawer input[type="number"]: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 .menuDrawer input[type="text"]:not(:disabled):hover,
314 .menuDrawer input[type="number"]:not(:disabled):hover {
315 border: 1px solid #FFFFFF;
318 .menuDrawer input[type="text"]:not(:disabled):focus,
319 .menuDrawer input[type="number"]:not(:disabled):focus {
320 background-color: rgba(204, 204, 255, .8);
321 border: 1px solid #FFFFFF;
325 .menuDrawer p.subTitle {
326 margin: .75em 0 .5em;
335 border-top: 2px solid;
336 border-bottom: 2px solid;
363 background-color: rgba(255, 255, 255, .8);
369 vertical-align: text-bottom;
383 background-color: rgba(255, 255, 255, 1);
400 background-color: rgba(255, 255, 255, .8);
427 @media screen and (max-width: 500px),
428 screen and (max-height: 500px) {