Commit | Line | Data |
---|---|---|
a7393a71 RK |
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/. */ | |
23cd2dcc RK |
4 | |
5 | body { | |
6 | font-family: sans-serif; | |
b47b4a65 | 7 | margin: 0; |
68afcd96 | 8 | background: url("loading.png") repeat; |
b47b4a65 RK |
9 | } |
10 | ||
11 | h1 { | |
12 | display: none; | |
13 | } | |
14 | ||
43255174 | 15 | #dialogArea, |
8389557a | 16 | .overlayArea { |
c5378747 | 17 | position: absolute; |
c5378747 | 18 | z-index: 5; |
7a549148 RK |
19 | transition-property: opacity; |
20 | transition-duration: .2s; | |
21 | } | |
22 | ||
43255174 | 23 | #dialogArea.hidden, |
7a549148 RK |
24 | .overlayArea.hidden { |
25 | opacity: 0; | |
26 | transition-duration: 1s; | |
27 | } | |
28 | ||
43255174 | 29 | #dialogArea:-moz-system-metric(touch-enabled), |
336097e2 | 30 | .overlayArea:-moz-system-metric(touch-enabled) { |
ac788e28 RK |
31 | font-size: 3mozmm; |
32 | } | |
33 | ||
43255174 RK |
34 | #dialogArea input[type="button"]:-moz-system-metric(touch-enabled), |
35 | #dialogArea input[type="text"]:-moz-system-metric(touch-enabled), | |
36 | #dialogArea select:-moz-system-metric(touch-enabled), | |
336097e2 RK |
37 | .overlayArea input[type="button"]:-moz-system-metric(touch-enabled), |
38 | .overlayArea select:-moz-system-metric(touch-enabled) { | |
9ef896ad | 39 | font-size: 3mozmm; |
ac788e28 RK |
40 | } |
41 | ||
8389557a RK |
42 | #menuArea { |
43 | /* width: 30em; */ | |
44 | left: 1%; | |
45 | top: 1em; | |
46 | } | |
47 | ||
48 | #zoomArea { | |
49 | right: 1%; | |
50 | top: 1em; | |
51 | text-align: center; | |
52 | } | |
53 | ||
ed4c478c RK |
54 | #zoomArea > input[type="button"], |
55 | #fullscreenArea > input[type="button"] { | |
858b60b8 | 56 | font-size: 1.2em; |
ac45368e RK |
57 | font-weight: bold; |
58 | width: 2em; | |
59 | height: 2em; | |
60 | border-radius: 2em; | |
858b60b8 RK |
61 | background-color: rgba(255, 255, 255, .25); |
62 | background-image: radial-gradient(circle 1.5em, #FFFFFF, transparent); | |
ac45368e | 63 | color: #0000FF; |
ed4c478c RK |
64 | border: none; |
65 | } | |
66 | ||
67 | #zoomArea > input[type="button"] { | |
ac45368e RK |
68 | border: 2px solid #0000FF; |
69 | } | |
70 | ||
ed4c478c RK |
71 | #zoomArea > input[type="button"]:hover, |
72 | #fullscreenArea > input[type="button"]:hover { | |
ac45368e RK |
73 | background-color: rgba(255, 255, 255, .8); |
74 | } | |
75 | ||
ed4c478c RK |
76 | #zoomArea > input[type="button"]:active, |
77 | #fullscreenArea > input[type="button"]:active { | |
ac45368e RK |
78 | background-color: rgba(255, 255, 127, .8); |
79 | } | |
80 | ||
ed4c478c RK |
81 | #zoomArea > input[type="button"]:focus, |
82 | #fullscreenArea > input[type="button"]:focus { | |
858b60b8 RK |
83 | background-color: rgba(255, 255, 255, .5); |
84 | } | |
85 | ||
8389557a RK |
86 | #fullscreenArea { |
87 | right: 1%; | |
88 | bottom: 2em; | |
89 | text-align: center; | |
90 | } | |
91 | ||
b395419b | 92 | #zoomLevel { |
858b60b8 RK |
93 | /* background-color: rgba(255, 255, 255, .8); */ |
94 | background-image: radial-gradient(circle 1.5em, #FFFFFF, transparent); | |
95 | border-radius: .5em; | |
96 | padding: .5em .2em; | |
ac45368e | 97 | margin: 2px 0; |
b395419b RK |
98 | } |
99 | ||
993fd081 RK |
100 | #settingsArea, |
101 | #trackArea { | |
b47b4a65 RK |
102 | display: none; |
103 | background-color: rgba(255, 255, 255, .8); | |
104 | border: 0; | |
105 | border-radius: 5px; | |
106 | } | |
107 | ||
993fd081 RK |
108 | #settingsArea > legend, |
109 | #trackArea > legend { | |
b47b4a65 RK |
110 | display: none; |
111 | background-color: rgba(255, 255, 255, .8); | |
112 | border-radius: 3px; | |
113 | } | |
114 | ||
7a076538 RK |
115 | #trackData { |
116 | margin: 0; | |
117 | } | |
118 | ||
ac6286bd | 119 | #map, #track { |
4b1d0915 | 120 | position: fixed; |
b47b4a65 | 121 | border: 0; |
c5378747 RK |
122 | top: 0; |
123 | left: 0; | |
124 | right: 0; | |
125 | bottom: 0; | |
ecde0af2 RK |
126 | } |
127 | ||
128 | #map { | |
b47b4a65 | 129 | z-index: 1; |
23cd2dcc RK |
130 | } |
131 | ||
ecde0af2 RK |
132 | #track { |
133 | z-index: 3; | |
134 | } | |
135 | ||
68afcd96 | 136 | #action { |
b395419b | 137 | position: absolute; |
6b1e7340 | 138 | bottom: 5px; |
b395419b RK |
139 | left: .5em; |
140 | margin: 0; | |
6b1e7340 RK |
141 | z-index: 3; |
142 | background-color: rgba(255, 255, 255, .8); | |
143 | border-radius: 3px; | |
144 | padding: 0 3px; | |
b395419b RK |
145 | } |
146 | ||
68afcd96 RK |
147 | #actionimg { |
148 | vertical-align: text-bottom; | |
149 | } | |
150 | ||
4b12da3a RK |
151 | .debugHide { |
152 | display: none; | |
153 | } | |
154 | ||
8389557a RK |
155 | .settingsSubTitle { |
156 | margin: .5em 0 0; | |
157 | font-weight: bold; | |
158 | } | |
159 | ||
23cd2dcc | 160 | #copyright { |
6b1e7340 | 161 | bottom: 5px; |
23cd2dcc RK |
162 | right: .5em; |
163 | margin: 0; | |
164 | font-size: small; | |
6b1e7340 RK |
165 | opacity: .66; |
166 | z-index: 2; | |
167 | background-color: rgba(255, 255, 255, 1); | |
168 | border-radius: 3px; | |
169 | padding: 0 3px; | |
23cd2dcc | 170 | } |
1e48ccb4 | 171 | |
b5c85133 RK |
172 | #copyright.hidden { |
173 | opacity: 0; | |
174 | } | |
1e48ccb4 | 175 | |
43255174 RK |
176 | #dialogArea { |
177 | top: 20%; | |
178 | right: 0; | |
179 | left: 0; | |
180 | width: 30ch; | |
181 | max-width: 92%; | |
182 | z-index: 10; | |
183 | background-color: rgba(255, 255, 255, .8); | |
184 | border: 0; | |
185 | margin: auto; | |
186 | padding: .5em; | |
187 | border-radius: 5px; | |
188 | } | |
189 | ||
190 | #dialogArea.hidden { | |
191 | top: -100%; | |
192 | } | |
193 | ||
194 | .dialogTitle { | |
195 | margin: 0 0 .5em; | |
196 | font-weight: bold; | |
197 | } | |
198 | ||
199 | .dialogHelp { | |
200 | margin: .5em 0; | |
201 | font-size: small; | |
202 | opacity: .66; | |
203 | } | |
204 | ||
d7ffc7b8 RK |
205 | #uploadDesc { |
206 | max-width: 95%; | |
207 | } | |
208 | ||
1e48ccb4 | 209 | @media screen and (max-width: 500px) { |
f84a3fd4 RK |
210 | body { |
211 | font-size: 10px; | |
212 | } | |
336097e2 | 213 | #menuArea { |
20cd2fc1 RK |
214 | top: 1px; |
215 | left: 1px; | |
0c08f848 | 216 | } |
336097e2 RK |
217 | #zoomArea { |
218 | top: 1px; | |
219 | right: 1px; | |
220 | } | |
c5378747 RK |
221 | #fullscreenArea { |
222 | right: 1px; | |
223 | bottom: 10px; | |
224 | } | |
a9c9022b | 225 | #copyright { |
f84a3fd4 RK |
226 | bottom: 1px; |
227 | right: 1px; | |
05d87bde | 228 | font-size: 8px; |
1e48ccb4 RK |
229 | } |
230 | } |