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 /* For optical conveniece, display an "x" for closing. */
160 .menuDrawer > h2:after {
161 content: '\00D7'; /* multiplication sign */
162 display: inline-block;
163 vertical-align: text-top;
170 /* Custom checkbox design */
171 .menuDrawer input[type="checkbox"] {
175 .menuDrawer input[type="checkbox"] + label:before {
176 content: '\00A0'; /* non-breaking space */
177 display: inline-block;
182 vertical-align: middle;
183 background-color: rgba(204, 204, 204, .2);
184 border: 1px solid #CCCCCC;
188 .menuDrawer input[type="checkbox"]:hover + label:before {
189 background-color: rgba(204, 204, 204, .4);
190 border: 1px solid #FFFFFF;
192 .menuDrawer input[type="checkbox"]:hover + label {
198 .menuDrawer input[type="checkbox"]:active + label:before {
199 background-color: rgba(204, 204, 255, .3);
200 border: 1px solid #FFCCAA;
202 .menuDrawer input[type="checkbox"]:active + label {
206 .menuDrawer input[type="checkbox"]:checked + label:before {
207 content: '\2714'; /* tick mark */
210 /* Custom button design */
211 .menuDrawer input[type="button"] {
213 vertical-align: middle;
214 background-image: none;
215 background-color: rgba(204, 204, 204, .2);
218 border: 1px solid #CCCCCC;
222 .menuDrawer input[type="button"]:hover {
223 background-color: rgba(204, 204, 204, .4);
224 border: 1px solid #FFFFFF;
227 .menuDrawer input[type="button"]:active {
228 background-color: rgba(204, 204, 255, .3);
231 padding-right: calc(.5em - 1px);
233 padding-left: calc(.5em + 1px);
236 /* Custom select design */
239 vertical-align: middle;
240 background-image: none;
241 background-color: rgba(204, 204, 204, .2);
244 border: 1px solid #CCCCCC;
248 .menuDrawer select:hover {
249 background-color: rgba(204, 204, 204, .4);
250 border: 1px solid #FFFFFF;
253 .menuDrawer select:active {
254 background-color: rgba(204, 204, 255, .3);
258 .menuDrawer option:checked:not(:hover) {
259 background-color: rgba(204, 204, 204, .1);
262 .menuDrawer option:hover {
263 background-color: #CCCCCC;
294 background-color: rgba(255, 255, 255, .8);
300 vertical-align: text-bottom;
319 background-color: rgba(255, 255, 255, 1);
335 background-color: rgba(255, 255, 255, .8);
361 @media screen and (max-width: 500px),
362 screen and (max-height: 500px) {