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