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 transform: translateX(calc(-40ch - 1ch)); /* account for padding */
117 max-width: 95%; /* make sure we don't overflow the screen */
118 background-color: rgba(15, 15, 15, .9);
121 padding: 0 .5ch; /* account for legend */
124 transition-property: transform;
125 transition-duration: 1s;
126 transition-timing-function: ease;
129 .menuDrawer:not(.hidden) {
130 transform: translateX(0);
133 @media screen and (max-width: 330px) {
135 left: calc(-300px - 1ch); /* account for padding */
149 background-color: #CCCCCC;
155 .menuDrawer > h2 > img {
156 vertical-align: text-top;
160 /* For optical conveniece, display an "x" for closing. */
161 .menuDrawer > h2:after {
162 content: '\00D7'; /* multiplication sign */
163 display: inline-block;
164 vertical-align: text-top;
171 /* Custom checkbox design */
172 .menuDrawer input[type="checkbox"] {
176 .menuDrawer input[type="checkbox"] + label:before {
177 content: '\00A0'; /* non-breaking space */
178 display: inline-block;
183 vertical-align: middle;
184 background-color: rgba(204, 204, 204, .2);
185 border: 1px solid #CCCCCC;
189 .menuDrawer input[type="checkbox"]:hover + label:before {
190 background-color: rgba(204, 204, 204, .4);
191 border: 1px solid #FFFFFF;
193 .menuDrawer input[type="checkbox"]:hover + label {
199 .menuDrawer input[type="checkbox"]:active + label:before {
200 background-color: rgba(204, 204, 255, .3);
201 border: 1px solid #FFCCAA;
203 .menuDrawer input[type="checkbox"]:active + label {
207 .menuDrawer input[type="checkbox"]:checked + label:before {
208 content: '\2714'; /* tick mark */
211 /* Custom button design */
212 .menuDrawer input[type="button"] {
214 vertical-align: middle;
215 background-image: none;
216 background-color: rgba(204, 204, 204, .2);
219 border: 1px solid #CCCCCC;
223 .menuDrawer input[type="button"]:hover {
224 background-color: rgba(204, 204, 204, .4);
225 border: 1px solid #FFFFFF;
228 .menuDrawer input[type="button"]:active {
229 background-color: rgba(204, 204, 255, .3);
232 padding-right: calc(.5em - 1px);
234 padding-left: calc(.5em + 1px);
237 /* Custom select design */
240 vertical-align: middle;
241 background-image: none;
242 background-color: rgba(204, 204, 204, .2);
245 border: 1px solid #CCCCCC;
249 .menuDrawer select:hover {
250 background-color: rgba(204, 204, 204, .4);
251 border: 1px solid #FFFFFF;
254 .menuDrawer select:active {
255 background-color: rgba(204, 204, 255, .3);
259 .menuDrawer option:checked:not(:hover) {
260 background-color: rgba(204, 204, 204, .1);
263 .menuDrawer option:hover {
264 background-color: #CCCCCC;
295 background-color: rgba(255, 255, 255, .8);
301 vertical-align: text-bottom;
320 background-color: rgba(255, 255, 255, 1);
336 background-color: rgba(255, 255, 255, .8);
362 @media screen and (max-width: 500px),
363 screen and (max-height: 500px) {