1 | .ol-box {
|
2 | box-sizing: border-box;
|
3 | border-radius: 2px;
|
4 | border: 2px solid blue;
|
5 | }
|
6 |
|
7 | .ol-mouse-position {
|
8 | top: 8px;
|
9 | right: 8px;
|
10 | position: absolute;
|
11 | }
|
12 |
|
13 | .ol-scale-line {
|
14 | background: rgba(0,60,136,0.3);
|
15 | border-radius: 4px;
|
16 | bottom: 8px;
|
17 | left: 8px;
|
18 | padding: 2px;
|
19 | position: absolute;
|
20 | }
|
21 | .ol-scale-line-inner {
|
22 | border: 1px solid #eee;
|
23 | border-top: none;
|
24 | color: #eee;
|
25 | font-size: 10px;
|
26 | text-align: center;
|
27 | margin: 1px;
|
28 | will-change: contents, width;
|
29 | }
|
30 | .ol-overlay-container {
|
31 | will-change: left,right,top,bottom;
|
32 | }
|
33 |
|
34 | .ol-unsupported {
|
35 | display: none;
|
36 | }
|
37 | .ol-viewport, .ol-unselectable {
|
38 | -webkit-touch-callout: none;
|
39 | -webkit-user-select: none;
|
40 | -moz-user-select: none;
|
41 | -ms-user-select: none;
|
42 | user-select: none;
|
43 | -webkit-tap-highlight-color: rgba(0,0,0,0);
|
44 | }
|
45 | .ol-selectable {
|
46 | -webkit-touch-callout: default;
|
47 | -webkit-user-select: auto;
|
48 | -moz-user-select: auto;
|
49 | -ms-user-select: auto;
|
50 | user-select: auto;
|
51 | }
|
52 | .ol-grabbing {
|
53 | cursor: -webkit-grabbing;
|
54 | cursor: -moz-grabbing;
|
55 | cursor: grabbing;
|
56 | }
|
57 | .ol-grab {
|
58 | cursor: move;
|
59 | cursor: -webkit-grab;
|
60 | cursor: -moz-grab;
|
61 | cursor: grab;
|
62 | }
|
63 | .ol-control {
|
64 | position: absolute;
|
65 | background-color: rgba(255,255,255,0.4);
|
66 | border-radius: 4px;
|
67 | padding: 2px;
|
68 | }
|
69 | .ol-control:hover {
|
70 | background-color: rgba(255,255,255,0.6);
|
71 | }
|
72 | .ol-zoom {
|
73 | top: .5em;
|
74 | left: .5em;
|
75 | }
|
76 | .ol-rotate {
|
77 | top: .5em;
|
78 | right: .5em;
|
79 | transition: opacity .25s linear, visibility 0s linear;
|
80 | }
|
81 | .ol-rotate.ol-hidden {
|
82 | opacity: 0;
|
83 | visibility: hidden;
|
84 | transition: opacity .25s linear, visibility 0s linear .25s;
|
85 | }
|
86 | .ol-zoom-extent {
|
87 | top: 4.643em;
|
88 | left: .5em;
|
89 | }
|
90 | .ol-full-screen {
|
91 | right: .5em;
|
92 | top: .5em;
|
93 | }
|
94 | @media print {
|
95 | .ol-control {
|
96 | display: none;
|
97 | }
|
98 | }
|
99 |
|
100 | .ol-control button {
|
101 | display: block;
|
102 | margin: 1px;
|
103 | padding: 0;
|
104 | color: white;
|
105 | font-size: 1.14em;
|
106 | font-weight: bold;
|
107 | text-decoration: none;
|
108 | text-align: center;
|
109 | height: 1.375em;
|
110 | width: 1.375em;
|
111 | line-height: .4em;
|
112 | background-color: rgba(0,60,136,0.5);
|
113 | border: none;
|
114 | border-radius: 2px;
|
115 | }
|
116 | .ol-control button::-moz-focus-inner {
|
117 | border: none;
|
118 | padding: 0;
|
119 | }
|
120 | .ol-zoom-extent button {
|
121 | line-height: 1.4em;
|
122 | }
|
123 | .ol-compass {
|
124 | display: block;
|
125 | font-weight: normal;
|
126 | font-size: 1.2em;
|
127 | will-change: transform;
|
128 | }
|
129 | .ol-touch .ol-control button {
|
130 | font-size: 1.5em;
|
131 | }
|
132 | .ol-touch .ol-zoom-extent {
|
133 | top: 5.5em;
|
134 | }
|
135 | .ol-control button:hover,
|
136 | .ol-control button:focus {
|
137 | text-decoration: none;
|
138 | background-color: rgba(0,60,136,0.7);
|
139 | }
|
140 | .ol-zoom .ol-zoom-in {
|
141 | border-radius: 2px 2px 0 0;
|
142 | }
|
143 | .ol-zoom .ol-zoom-out {
|
144 | border-radius: 0 0 2px 2px;
|
145 | }
|
146 |
|
147 |
|
148 | .ol-attribution {
|
149 | text-align: right;
|
150 | bottom: .5em;
|
151 | right: .5em;
|
152 | max-width: calc(100% - 1.3em);
|
153 | }
|
154 |
|
155 | .ol-attribution ul {
|
156 | margin: 0;
|
157 | padding: 0 .5em;
|
158 | font-size: .7rem;
|
159 | line-height: 1.375em;
|
160 | color: #000;
|
161 | text-shadow: 0 0 2px #fff;
|
162 | }
|
163 | .ol-attribution li {
|
164 | display: inline;
|
165 | list-style: none;
|
166 | line-height: inherit;
|
167 | }
|
168 | .ol-attribution li:not(:last-child):after {
|
169 | content: " ";
|
170 | }
|
171 | .ol-attribution img {
|
172 | max-height: 2em;
|
173 | max-width: inherit;
|
174 | vertical-align: middle;
|
175 | }
|
176 | .ol-attribution ul, .ol-attribution button {
|
177 | display: inline-block;
|
178 | }
|
179 | .ol-attribution.ol-collapsed ul {
|
180 | display: none;
|
181 | }
|
182 | .ol-attribution.ol-logo-only ul {
|
183 | display: block;
|
184 | }
|
185 | .ol-attribution:not(.ol-collapsed) {
|
186 | background: rgba(255,255,255,0.8);
|
187 | }
|
188 | .ol-attribution.ol-uncollapsible {
|
189 | bottom: 0;
|
190 | right: 0;
|
191 | border-radius: 4px 0 0;
|
192 | height: 1.1em;
|
193 | line-height: 1em;
|
194 | }
|
195 | .ol-attribution.ol-logo-only {
|
196 | background: transparent;
|
197 | bottom: .4em;
|
198 | height: 1.1em;
|
199 | line-height: 1em;
|
200 | }
|
201 | .ol-attribution.ol-uncollapsible img {
|
202 | margin-top: -.2em;
|
203 | max-height: 1.6em;
|
204 | }
|
205 | .ol-attribution.ol-logo-only button,
|
206 | .ol-attribution.ol-uncollapsible button {
|
207 | display: none;
|
208 | }
|
209 |
|
210 | .ol-zoomslider {
|
211 | top: 4.5em;
|
212 | left: .5em;
|
213 | height: 200px;
|
214 | }
|
215 | .ol-zoomslider button {
|
216 | position: relative;
|
217 | height: 10px;
|
218 | }
|
219 |
|
220 | .ol-touch .ol-zoomslider {
|
221 | top: 5.5em;
|
222 | }
|
223 |
|
224 | .ol-overviewmap {
|
225 | left: 0.5em;
|
226 | bottom: 0.5em;
|
227 | }
|
228 | .ol-overviewmap.ol-uncollapsible {
|
229 | bottom: 0;
|
230 | left: 0;
|
231 | border-radius: 0 4px 0 0;
|
232 | }
|
233 | .ol-overviewmap .ol-overviewmap-map,
|
234 | .ol-overviewmap button {
|
235 | display: inline-block;
|
236 | }
|
237 | .ol-overviewmap .ol-overviewmap-map {
|
238 | border: 1px solid #7b98bc;
|
239 | height: 150px;
|
240 | margin: 2px;
|
241 | width: 150px;
|
242 | }
|
243 | .ol-overviewmap:not(.ol-collapsed) button{
|
244 | bottom: 1px;
|
245 | left: 2px;
|
246 | position: absolute;
|
247 | }
|
248 | .ol-overviewmap.ol-collapsed .ol-overviewmap-map,
|
249 | .ol-overviewmap.ol-uncollapsible button {
|
250 | display: none;
|
251 | }
|
252 | .ol-overviewmap:not(.ol-collapsed) {
|
253 | background: rgba(255,255,255,0.8);
|
254 | }
|
255 | .ol-overviewmap-box {
|
256 | border: 2px dotted rgba(0,60,136,0.7);
|
257 | }
|
258 |
|
259 | .ol-overviewmap .ol-overviewmap-box:hover {
|
260 | cursor: move;
|
261 | }
|