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;
19 transition-property: opacity;
20 transition-duration: .2s;
26 transition-duration: 1s;
29 #dialogArea:-moz-system-metric(touch-enabled),
30 .overlayArea:-moz-system-metric(touch-enabled),
31 .menuDrawer:-moz-system-metric(touch-enabled) {
35 #dialogArea input[type="button"],
36 #dialogArea input[type="text"],
38 .overlayArea input[type="button"],
40 .menuDrawer input[type="button"],
57 #zoomArea > input[type="button"],
58 #fullscreenArea > input[type="button"],
66 background-color: rgba(255, 255, 255, .25);
67 background-image: radial-gradient(circle 1.5em, #FFFFFF, transparent);
72 #zoomArea > input[type="button"] {
73 border: 2px solid #0000FF;
76 #zoomArea > input[type="button"]:hover,
77 #fullscreenArea > input[type="button"]:hover,
79 #settingsButton:hover {
80 background-color: rgba(255, 255, 255, .8);
83 #zoomArea > input[type="button"]:active,
84 #fullscreenArea > input[type="button"]:active,
86 #settingsButton:active {
87 background-color: rgba(255, 255, 127, .8);
90 #zoomArea > input[type="button"]:focus,
91 #fullscreenArea > input[type="button"]:focus,
93 #settingsButton:focus {
94 background-color: rgba(255, 255, 255, .5);
104 /* background-color: rgba(255, 255, 255, .8); */
105 background-image: radial-gradient(circle 1.5em, #FFFFFF, transparent);
115 left: calc(-40ch - 1ch); /* account for padding */
117 background-color: rgba(15, 15, 15, .9);
120 padding: 0 .5ch; /* account for legend */
123 transition-property: left;
124 transition-duration: 1s;
125 transition-timing-function: ease;
128 .menuDrawer:not(.hidden) {
132 @media screen and (max-width: 330px) {
134 left: calc(-300px - 1ch); /* account for padding */
148 background-color: #CCCCCC;
154 .menuDrawer > h2 > img {
155 vertical-align: text-top;
159 /* Custom checkbox design */
160 .menuDrawer input[type="checkbox"] {
164 .menuDrawer input[type="checkbox"] + label:before {
165 content: '\00A0'; /* non-breaking space */
166 display: inline-block;
171 vertical-align: middle;
172 background-color: rgba(204, 204, 204, .2);
173 border: 1px solid #CCCCCC;
177 .menuDrawer input[type="checkbox"]:hover + label:before {
178 background-color: rgba(204, 204, 204, .4);
179 border: 1px solid #FFFFFF;
181 .menuDrawer input[type="checkbox"]:hover + label {
187 .menuDrawer input[type="checkbox"]:active + label:before {
188 background-color: rgba(204, 204, 255, .3);
189 border: 1px solid #FFCCAA;
191 .menuDrawer input[type="checkbox"]:active + label {
195 .menuDrawer input[type="checkbox"]:checked + label:before {
196 content: '\2714'; /* tick mark */
199 /* Custom button design */
200 .menuDrawer input[type="button"] {
202 vertical-align: middle;
203 background-image: none;
204 background-color: rgba(204, 204, 204, .2);
207 border: 1px solid #CCCCCC;
211 .menuDrawer input[type="button"]:hover {
212 background-color: rgba(204, 204, 204, .4);
213 border: 1px solid #FFFFFF;
216 .menuDrawer input[type="button"]:active {
217 background-color: rgba(204, 204, 255, .3);
220 padding-right: calc(.5em - 1px);
222 padding-left: calc(.5em + 1px);
225 /* Custom select design */
228 vertical-align: middle;
229 background-image: none;
230 background-color: rgba(204, 204, 204, .2);
233 border: 1px solid #CCCCCC;
237 .menuDrawer select:hover {
238 background-color: rgba(204, 204, 204, .4);
239 border: 1px solid #FFFFFF;
242 .menuDrawer select:active {
243 background-color: rgba(204, 204, 255, .3);
247 .menuDrawer option:checked:not(:hover) {
248 background-color: rgba(204, 204, 204, .1);
251 .menuDrawer option:hover {
252 background-color: #CCCCCC;
283 background-color: rgba(255, 255, 255, .8);
289 vertical-align: text-bottom;
308 background-color: rgba(255, 255, 255, 1);
324 background-color: rgba(255, 255, 255, .8);
350 @media screen and (max-width: 500px),
351 screen and (max-height: 500px) {