Mercurial > hg > LGMap
comparison geotemco/lib/openlayers/theme/default/style.css @ 0:57bde4830927
first commit
author | Zoe Hong <zhong@mpiwg-berlin.mpg.de> |
---|---|
date | Tue, 24 Mar 2015 11:37:17 +0100 |
parents | |
children |
comparison
equal
deleted
inserted
replaced
-1:000000000000 | 0:57bde4830927 |
---|---|
1 div.olMap { | |
2 z-index: 0; | |
3 padding: 0 !important; | |
4 margin: 0 !important; | |
5 cursor: default; | |
6 } | |
7 | |
8 div.olMapViewport { | |
9 text-align: left; | |
10 -ms-touch-action: none; | |
11 } | |
12 | |
13 div.olLayerDiv { | |
14 -moz-user-select: none; | |
15 -khtml-user-select: none; | |
16 } | |
17 | |
18 .olLayerGoogleCopyright { | |
19 left: 2px; | |
20 bottom: 2px; | |
21 } | |
22 .olLayerGoogleV3.olLayerGoogleCopyright { | |
23 right: auto !important; | |
24 } | |
25 .olLayerGooglePoweredBy { | |
26 left: 2px; | |
27 bottom: 15px; | |
28 } | |
29 .olLayerGoogleV3.olLayerGooglePoweredBy { | |
30 bottom: 15px !important; | |
31 } | |
32 /* GMaps should not set styles on its container */ | |
33 .olForeignContainer { | |
34 opacity: 1 !important; | |
35 } | |
36 .olControlAttribution { | |
37 font-size: smaller; | |
38 left: 3px; | |
39 bottom: 1.5em; | |
40 position: absolute; | |
41 display: block; | |
42 } | |
43 .olControlScale { | |
44 right: 3px; | |
45 bottom: 3em; | |
46 display: block; | |
47 position: absolute; | |
48 font-size: smaller; | |
49 } | |
50 .olControlScaleLine { | |
51 display: block; | |
52 position: absolute; | |
53 left: 10px; | |
54 bottom: 15px; | |
55 font-size: xx-small; | |
56 } | |
57 .olControlScaleLineBottom { | |
58 border: solid 2px black; | |
59 border-bottom: none; | |
60 margin-top:-2px; | |
61 text-align: center; | |
62 } | |
63 .olControlScaleLineTop { | |
64 border: solid 2px black; | |
65 border-top: none; | |
66 text-align: center; | |
67 } | |
68 | |
69 .olControlPermalink { | |
70 right: 3px; | |
71 bottom: 1.5em; | |
72 display: block; | |
73 position: absolute; | |
74 font-size: smaller; | |
75 } | |
76 | |
77 div.olControlMousePosition { | |
78 bottom: 0; | |
79 right: 3px; | |
80 display: block; | |
81 position: absolute; | |
82 font-family: Arial; | |
83 font-size: smaller; | |
84 } | |
85 | |
86 .olControlOverviewMapContainer { | |
87 position: absolute; | |
88 bottom: 0; | |
89 right: 0; | |
90 } | |
91 | |
92 .olControlOverviewMapElement { | |
93 padding: 10px 18px 10px 10px; | |
94 background-color: #00008B; | |
95 -moz-border-radius: 1em 0 0 0; | |
96 } | |
97 | |
98 .olControlOverviewMapMinimizeButton, | |
99 .olControlOverviewMapMaximizeButton { | |
100 height: 18px; | |
101 width: 18px; | |
102 right: 0; | |
103 bottom: 80px; | |
104 cursor: pointer; | |
105 } | |
106 | |
107 .olControlOverviewMapExtentRectangle { | |
108 overflow: hidden; | |
109 background-image: url("img/blank.gif"); | |
110 cursor: move; | |
111 border: 2px dotted red; | |
112 } | |
113 .olControlOverviewMapRectReplacement { | |
114 overflow: hidden; | |
115 cursor: move; | |
116 background-image: url("img/overview_replacement.gif"); | |
117 background-repeat: no-repeat; | |
118 background-position: center; | |
119 } | |
120 | |
121 .olLayerGeoRSSDescription { | |
122 float:left; | |
123 width:100%; | |
124 overflow:auto; | |
125 font-size:1.0em; | |
126 } | |
127 .olLayerGeoRSSClose { | |
128 float:right; | |
129 color:gray; | |
130 font-size:1.2em; | |
131 margin-right:6px; | |
132 font-family:sans-serif; | |
133 } | |
134 .olLayerGeoRSSTitle { | |
135 float:left;font-size:1.2em; | |
136 } | |
137 | |
138 .olPopupContent { | |
139 padding:5px; | |
140 overflow: auto; | |
141 } | |
142 | |
143 .olControlNavigationHistory { | |
144 background-image: url("img/navigation_history.png"); | |
145 background-repeat: no-repeat; | |
146 width: 24px; | |
147 height: 24px; | |
148 | |
149 } | |
150 .olControlNavigationHistoryPreviousItemActive { | |
151 background-position: 0 0; | |
152 } | |
153 .olControlNavigationHistoryPreviousItemInactive { | |
154 background-position: 0 -24px; | |
155 } | |
156 .olControlNavigationHistoryNextItemActive { | |
157 background-position: -24px 0; | |
158 } | |
159 .olControlNavigationHistoryNextItemInactive { | |
160 background-position: -24px -24px; | |
161 } | |
162 | |
163 div.olControlSaveFeaturesItemActive { | |
164 background-image: url(img/save_features_on.png); | |
165 background-repeat: no-repeat; | |
166 background-position: 0 1px; | |
167 } | |
168 div.olControlSaveFeaturesItemInactive { | |
169 background-image: url(img/save_features_off.png); | |
170 background-repeat: no-repeat; | |
171 background-position: 0 1px; | |
172 } | |
173 | |
174 .olHandlerBoxZoomBox { | |
175 border: 2px solid red; | |
176 position: absolute; | |
177 background-color: white; | |
178 opacity: 0.50; | |
179 font-size: 1px; | |
180 filter: alpha(opacity=50); | |
181 } | |
182 .olHandlerBoxSelectFeature { | |
183 border: 2px solid blue; | |
184 position: absolute; | |
185 background-color: white; | |
186 opacity: 0.50; | |
187 font-size: 1px; | |
188 filter: alpha(opacity=50); | |
189 } | |
190 | |
191 .olControlPanPanel { | |
192 top: 10px; | |
193 left: 5px; | |
194 } | |
195 | |
196 .olControlPanPanel div { | |
197 background-image: url(img/pan-panel.png); | |
198 height: 18px; | |
199 width: 18px; | |
200 cursor: pointer; | |
201 position: absolute; | |
202 } | |
203 | |
204 .olControlPanPanel .olControlPanNorthItemInactive { | |
205 top: 0; | |
206 left: 9px; | |
207 background-position: 0 0; | |
208 } | |
209 .olControlPanPanel .olControlPanSouthItemInactive { | |
210 top: 36px; | |
211 left: 9px; | |
212 background-position: 18px 0; | |
213 } | |
214 .olControlPanPanel .olControlPanWestItemInactive { | |
215 position: absolute; | |
216 top: 18px; | |
217 left: 0; | |
218 background-position: 0 18px; | |
219 } | |
220 .olControlPanPanel .olControlPanEastItemInactive { | |
221 top: 18px; | |
222 left: 18px; | |
223 background-position: 18px 18px; | |
224 } | |
225 | |
226 .olControlZoomPanel { | |
227 top: 71px; | |
228 left: 14px; | |
229 } | |
230 | |
231 .olControlZoomPanel div { | |
232 background-image: url(img/zoom-panel.png); | |
233 position: absolute; | |
234 height: 18px; | |
235 width: 18px; | |
236 cursor: pointer; | |
237 } | |
238 | |
239 .olControlZoomPanel .olControlZoomInItemInactive { | |
240 top: 0; | |
241 left: 0; | |
242 background-position: 0 0; | |
243 } | |
244 | |
245 .olControlZoomPanel .olControlZoomToMaxExtentItemInactive { | |
246 top: 18px; | |
247 left: 0; | |
248 background-position: 0 -18px; | |
249 } | |
250 | |
251 .olControlZoomPanel .olControlZoomOutItemInactive { | |
252 top: 36px; | |
253 left: 0; | |
254 background-position: 0 18px; | |
255 } | |
256 | |
257 /* | |
258 * When a potential text is bigger than the image it move the image | |
259 * with some headers (closes #3154) | |
260 */ | |
261 .olControlPanZoomBar div { | |
262 font-size: 1px; | |
263 } | |
264 | |
265 .olPopupCloseBox { | |
266 background: url("img/close.gif") no-repeat; | |
267 cursor: pointer; | |
268 } | |
269 | |
270 .olFramedCloudPopupContent { | |
271 padding: 5px; | |
272 overflow: auto; | |
273 } | |
274 | |
275 .olControlNoSelect { | |
276 -moz-user-select: none; | |
277 -khtml-user-select: none; | |
278 } | |
279 | |
280 .olImageLoadError { | |
281 background-color: pink; | |
282 opacity: 0.5; | |
283 filter: alpha(opacity=50); /* IE */ | |
284 } | |
285 | |
286 /** | |
287 * Cursor styles | |
288 */ | |
289 | |
290 .olCursorWait { | |
291 cursor: wait; | |
292 } | |
293 .olDragDown { | |
294 cursor: move; | |
295 } | |
296 .olDrawBox { | |
297 cursor: crosshair; | |
298 } | |
299 .olControlDragFeatureOver { | |
300 cursor: move; | |
301 } | |
302 .olControlDragFeatureActive.olControlDragFeatureOver.olDragDown { | |
303 cursor: -moz-grabbing; | |
304 } | |
305 | |
306 /** | |
307 * Layer switcher | |
308 */ | |
309 .olControlLayerSwitcher { | |
310 position: absolute; | |
311 top: 25px; | |
312 right: 0; | |
313 width: 20em; | |
314 font-family: sans-serif; | |
315 font-weight: bold; | |
316 margin-top: 3px; | |
317 margin-left: 3px; | |
318 margin-bottom: 3px; | |
319 font-size: smaller; | |
320 color: white; | |
321 background-color: transparent; | |
322 } | |
323 | |
324 .olControlLayerSwitcher .layersDiv { | |
325 padding-top: 5px; | |
326 padding-left: 10px; | |
327 padding-bottom: 5px; | |
328 padding-right: 10px; | |
329 background-color: darkblue; | |
330 } | |
331 | |
332 .olControlLayerSwitcher .layersDiv .baseLbl, | |
333 .olControlLayerSwitcher .layersDiv .dataLbl { | |
334 margin-top: 3px; | |
335 margin-left: 3px; | |
336 margin-bottom: 3px; | |
337 } | |
338 | |
339 .olControlLayerSwitcher .layersDiv .baseLayersDiv, | |
340 .olControlLayerSwitcher .layersDiv .dataLayersDiv { | |
341 padding-left: 10px; | |
342 } | |
343 | |
344 .olControlLayerSwitcher .maximizeDiv, | |
345 .olControlLayerSwitcher .minimizeDiv { | |
346 width: 18px; | |
347 height: 18px; | |
348 top: 5px; | |
349 right: 0; | |
350 cursor: pointer; | |
351 } | |
352 | |
353 .olBingAttribution { | |
354 color: #DDD; | |
355 } | |
356 .olBingAttribution.road { | |
357 color: #333; | |
358 } | |
359 | |
360 .olGoogleAttribution.hybrid, .olGoogleAttribution.satellite { | |
361 color: #EEE; | |
362 } | |
363 .olGoogleAttribution { | |
364 color: #333; | |
365 } | |
366 span.olGoogleAttribution a { | |
367 color: #77C; | |
368 } | |
369 span.olGoogleAttribution.hybrid a, span.olGoogleAttribution.satellite a { | |
370 color: #EEE; | |
371 } | |
372 | |
373 /** | |
374 * Editing and navigation icons. | |
375 * (using the editing_tool_bar.png sprint image) | |
376 */ | |
377 .olControlNavToolbar , | |
378 .olControlEditingToolbar { | |
379 margin: 5px 5px 0 0; | |
380 } | |
381 .olControlNavToolbar div, | |
382 .olControlEditingToolbar div { | |
383 background-image: url("img/editing_tool_bar.png"); | |
384 background-repeat: no-repeat; | |
385 margin: 0 0 5px 5px; | |
386 width: 24px; | |
387 height: 22px; | |
388 cursor: pointer | |
389 } | |
390 /* positions */ | |
391 .olControlEditingToolbar { | |
392 right: 0; | |
393 top: 0; | |
394 } | |
395 .olControlNavToolbar { | |
396 top: 295px; | |
397 left: 9px; | |
398 } | |
399 /* layouts */ | |
400 .olControlEditingToolbar div { | |
401 float: right; | |
402 } | |
403 /* individual controls */ | |
404 .olControlNavToolbar .olControlNavigationItemInactive, | |
405 .olControlEditingToolbar .olControlNavigationItemInactive { | |
406 background-position: -103px -1px; | |
407 } | |
408 .olControlNavToolbar .olControlNavigationItemActive , | |
409 .olControlEditingToolbar .olControlNavigationItemActive { | |
410 background-position: -103px -24px; | |
411 } | |
412 .olControlNavToolbar .olControlZoomBoxItemInactive { | |
413 background-position: -128px -1px; | |
414 } | |
415 .olControlNavToolbar .olControlZoomBoxItemActive { | |
416 background-position: -128px -24px; | |
417 } | |
418 .olControlEditingToolbar .olControlDrawFeaturePointItemInactive { | |
419 background-position: -77px -1px; | |
420 } | |
421 .olControlEditingToolbar .olControlDrawFeaturePointItemActive { | |
422 background-position: -77px -24px; | |
423 } | |
424 .olControlEditingToolbar .olControlDrawFeaturePathItemInactive { | |
425 background-position: -51px -1px; | |
426 } | |
427 .olControlEditingToolbar .olControlDrawFeaturePathItemActive { | |
428 background-position: -51px -24px; | |
429 } | |
430 .olControlEditingToolbar .olControlDrawFeaturePolygonItemInactive{ | |
431 background-position: -26px -1px; | |
432 } | |
433 .olControlEditingToolbar .olControlDrawFeaturePolygonItemActive { | |
434 background-position: -26px -24px; | |
435 } | |
436 | |
437 div.olControlZoom { | |
438 position: absolute; | |
439 top: 8px; | |
440 left: 8px; | |
441 background: rgba(255,255,255,0.4); | |
442 border-radius: 4px; | |
443 padding: 2px; | |
444 } | |
445 div.olControlZoom a { | |
446 display: block; | |
447 margin: 1px; | |
448 padding: 0; | |
449 color: white; | |
450 font-size: 18px; | |
451 font-family: 'Lucida Grande', Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif; | |
452 font-weight: bold; | |
453 text-decoration: none; | |
454 text-align: center; | |
455 height: 22px; | |
456 width:22px; | |
457 line-height: 19px; | |
458 background: #130085; /* fallback for IE - IE6 requires background shorthand*/ | |
459 background: rgba(0, 60, 136, 0.5); | |
460 filter: alpha(opacity=80); | |
461 } | |
462 div.olControlZoom a:hover { | |
463 background: #130085; /* fallback for IE */ | |
464 background: rgba(0, 60, 136, 0.7); | |
465 filter: alpha(opacity=100); | |
466 } | |
467 @media only screen and (max-width: 600px) { | |
468 div.olControlZoom a:hover { | |
469 background: rgba(0, 60, 136, 0.5); | |
470 } | |
471 } | |
472 a.olControlZoomIn { | |
473 border-radius: 4px 4px 0 0; | |
474 } | |
475 a.olControlZoomOut { | |
476 border-radius: 0 0 4px 4px; | |
477 } | |
478 | |
479 | |
480 /** | |
481 * Animations | |
482 */ | |
483 | |
484 .olLayerGrid .olTileImage { | |
485 -webkit-transition: opacity 0.2s linear; | |
486 -moz-transition: opacity 0.2s linear; | |
487 -o-transition: opacity 0.2s linear; | |
488 transition: opacity 0.2s linear; | |
489 } | |
490 | |
491 /* Turn on GPU support where available */ | |
492 .olTileImage { | |
493 -webkit-transform: translateZ(0); | |
494 -moz-transform: translateZ(0); | |
495 -o-transform: translateZ(0); | |
496 -ms-transform: translateZ(0); | |
497 transform: translateZ(0); | |
498 -webkit-backface-visibility: hidden; | |
499 -moz-backface-visibility: hidden; | |
500 -ms-backface-visibility: hidden; | |
501 backface-visibility: hidden; | |
502 -webkit-perspective: 1000; | |
503 -moz-perspective: 1000; | |
504 -ms-perspective: 1000; | |
505 perspective: 1000; | |
506 } | |
507 | |
508 /* when replacing tiles, do not show tile and backbuffer at the same time */ | |
509 .olTileReplacing { | |
510 display: none; | |
511 } | |
512 | |
513 /* override any max-width image settings (e.g. bootstrap.css) */ | |
514 img.olTileImage { | |
515 max-width: none; | |
516 } |