PluginProbe
Image Hotspot – Map Image Annotation / 3.8
Image Hotspot – Map Image Annotation v3.8
3.8 3.7 3.6 trunk 1.0 1.1 1.2 1.3 1.4 1.5 1.6 1.7 1.8 1.9 2.0 2.1 2.2 2.3 2.4 2.5 2.6 2.7 2.8 2.9 3.0 All 30 releases
image-map-hotspots / output-common-css.css

output-common-css.css in Image Hotspot – Map Image Annotation 3.8, at output-common-css.css

475 lines 9.6 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 .imh-6310-drag {
2 width: auto;
3 height: auto;
4 display: inline-block !important;
5 position: absolute;
6 bottom: 0;
7 left: 0;
8 cursor: pointer;
9 background: transparent !important;
10 border: none !important;
11 }
12
13 .imh-6310-hide {
14 display: none;
15 }
16
17 .imh-6310-point-icons,
18 .imh-6310-point-icons * {
19 float: left;
20 }
21
22 .imh-6310-annotation-box {
23 width: 100%;
24 padding: 0;
25 position: relative;
26 max-width: 100% !important;
27 overflow: hidden;
28 }
29
30 .imh-6310-annotation-box-inner {
31 transition: transform 0.3s ease;
32 }
33 .imh-6310-annotation-box-inner:active {
34 cursor: grabbing;
35 }
36
37 .imh-6310-annotation-box .imh-6310-main-image {
38 width: 100%;
39 height: auto;
40 padding: 0;
41 margin: 0;
42 vertical-align: top;
43 }
44
45 .imh-6310-drag .imh-6310-pin-main-img,
46 .imh-6310-drag .imh-6310-pin-hover-img {
47 position: relative;
48 text-decoration: none;
49 }
50
51 .imh-6310-pin-hover-img {
52 display: none !important;
53 text-decoration: none;
54 }
55
56 .imh-6310-drag:hover .imh-6310-pin-hover-img {
57 display: inline-block !important;
58 text-decoration: none;
59 }
60
61 .imh-6310-drag:hover .imh-6310-pin-main-img {
62 display: none !important;
63 }
64
65 /* Template CSS Start */
66
67 /* temp 01 */
68
69 .imh-6310-tooltip.imh-6310-template-01 a {
70 text-decoration: none;
71 font-size: 20px;
72 color: #000000;
73 }
74
75 .imh-6310-tooltip.imh-6310-template-01 {
76 float: left;
77 width: auto;
78 background: lightcoral;
79 position: relative;
80 margin-top: 50px;
81 margin-left: 50px;
82 }
83
84 .imh-6310-template-01-hover-content {
85 width: auto;
86 background-color: transparent;
87 color: rgb(0, 0, 0);
88 text-align: center;
89 border-radius: 6px;
90 z-index: 1;
91 float: left;
92 position: relative;
93 width: 100%;
94 height: 100%;
95 }
96
97 /* temp 02 */
98
99 .imh-6310-template-02-hover-content {
100 background-color: transparent;
101 color: #fff;
102 text-align: center;
103 position: relative;
104 border-radius: 6px;
105 z-index: 1;
106 left: 0;
107 }
108
109 .imh-6310-template-02-content {
110 display: flex;
111 align-items: center;
112 width: 100%;
113 height: 100%;
114 justify-content: center;
115 }
116
117 .imh-6310-pos-right-tooltip::after {
118 content: "";
119 position: absolute;
120 width: 0;
121 height: 0;
122 border-top: 10px solid transparent;
123 border-bottom: 10px solid transparent;
124 border-right: 10px solid black;
125 left: -9px;
126 top: 50%;
127 }
128
129 .imh-6310-template-02-content iframe {
130 max-height: 96% !important;
131 max-width: 97% !important;
132 position: absolute;
133 }
134
135 /* temp 03 */
136
137 .imh-6310-template-03-hover-content {
138 transition: 0.5s;
139 position: relative;
140 z-index: 1;
141 }
142
143 .imh-6310-template-03-tooltip-testimonial {
144 padding: 20px;
145 background: cornsilk;
146 float: left;
147 width: 100%;
148 }
149
150 .imh-6310-template-03-tooltip-testimonial .imh-6310-template-03-tooltip-pic {
151 width: 30%;
152 height: auto;
153 float: left;
154 margin-right: 50px;
155 position: relative;
156 }
157
158 .imh-6310-template-03-tooltip-testimonial
159 .imh-6310-template-03-tooltip-pic:before,
160 .imh-6310-template-03-tooltip-testimonial
161 .imh-6310-template-03-tooltip-pic:after {
162 content: "";
163 display: block;
164 height: 50%;
165 width: 50%;
166 position: absolute;
167 }
168
169 .imh-6310-template-03-tooltip-testimonial
170 .imh-6310-template-03-tooltip-pic:before {
171 bottom: -10%;
172 left: -10%;
173 border-bottom: 3px solid #e16b47;
174 border-left: 3px solid #e16b47;
175 }
176
177 .imh-6310-template-03-tooltip-testimonial
178 .imh-6310-template-03-tooltip-pic:after {
179 top: -10%;
180 right: -10%;
181 border-top: 3px solid #e16b47;
182 border-right: 3px solid #e16b47;
183 }
184
185 .imh-6310-template-03-tooltip-testimonial
186 .imh-6310-template-03-tooltip-pic
187 img {
188 width: 100% !important;
189 height: auto !important;
190 border-radius: 0 !important;
191 animation: unset !important;
192 }
193
194 .imh-6310-template-03-tooltip-testimonial
195 .imh-6310-template-03-tooltip-testimonial-content {
196 width: calc(70% - 50px);
197 float: left;
198 }
199
200 .imh-6310-template-03-tooltip-testimonial
201 .imh-6310-template-03-tooltip-testimonial-title {
202 font-size: 24px;
203 color: #e16b47;
204 text-transform: capitalize;
205 width: 100%;
206 float: left;
207 }
208
209 .imh-6310-template-03-tooltip-testimonial
210 .imh-6310-template-03-tooltip-description {
211 font-size: 13px;
212 color: #7c7c7c;
213 line-height: 22px;
214 float: left;
215 width: 100%;
216 }
217
218 /* temp 04 */
219
220 .imh-6310-template-04-tooltip-testimonial {
221 background: #3e2a41;
222 transition: 0.5s;
223 bottom: 0;
224 position: relative;
225 display: flex;
226 flex-direction: column;
227 justify-content: center;
228 align-items: center;
229 margin-top: 50px;
230 }
231
232 .imh-6310-template-04-tooltip-testimonial-content {
233 justify-content: center;
234 align-items: center;
235 display: flex;
236 flex-direction: column;
237 }
238
239 .imh-6310-template-04-tooltip-pic {
240 width: 120px;
241 height: 120px;
242 border-radius: 50%;
243 margin-top: -50px;
244 overflow: hidden;
245 border: 8px solid rgba(255, 255, 255, 0.15);
246 }
247
248 .imh-6310-template-04-tooltip-pic img {
249 width: 100% !important;
250 height: 100% !important;
251 position: relative !important;
252 }
253
254 .imh-6310-template-04-tooltip-title {
255 font-size: 25px;
256 font-weight: bold;
257 color: rgb(255, 255, 255);
258 margin: 10px 0 0 0;
259 font-family: sans-serif;
260 }
261
262 .imh-6310-template-04-tooltip-description {
263 display: inline-block;
264 margin: 10px;
265 padding: 8px;
266 border: 1px solid rgb(0 0 0 / 15%);
267 font-size: 14px;
268 color: rgb(255, 255, 255);
269 position: relative;
270 box-sizing: border-box;
271 font-family: sans-serif;
272 text-decoration: none;
273 }
274
275 /* temp 05 */
276
277 .imh-6310-template-05-hover-content {
278 background: #3e2a41;
279 transition: 0.5s;
280 bottom: 0;
281 position: relative;
282 z-index: 1;
283 float: left;
284 }
285
286 .imh-6310-template-05-hover-content .imh-6310-template-05-tooltip-testimonial {
287 margin: 20px 0;
288 float: left;
289 width: 100%;
290 }
291
292 .imh-6310-template-05-tooltip-testimonial-content {
293 width: calc(50% - 8px);
294 float: left;
295 flex-direction: column;
296 align-items: center;
297 margin: 8px 0 8px 8px;
298 }
299
300 .imh-6310-template-05-tooltip-pic {
301 width: 100%;
302 border-radius: 50%;
303 margin: 0 auto;
304 overflow: hidden;
305 display: flex;
306 justify-content: center;
307 align-items: center;
308 }
309
310 .imh-6310-template-05-tooltip-pic img {
311 width: 100% !important;
312 height: auto;
313 position: relative !important;
314 }
315
316 .imh-6310-template-05-tooltip-testimonial-content
317 .imh-6310-template-05-tooltip-title {
318 font-size: 16px;
319 font-weight: bold;
320 color: #fff;
321 margin: 10px 0 0 0;
322 }
323
324 .imh-6310-template-05-tooltip-description {
325 display: inline-block;
326 padding: 10px;
327 border: 1px solid rgb(255 255 255 / 15%);
328 font-size: 14px;
329 color: white;
330 position: relative;
331 margin: 8px;
332 font-family: sans-serif;
333 line-height: 20px;
334 float: left;
335 width: calc(50% - 16px);
336 text-align: left;
337 }
338
339 /* media queries */
340
341 @media only screen and (max-width: 425px) {
342 /* temp 03 */
343
344 .imh-6310-template-03-hover-content {
345 width: 300px;
346 }
347 .imh-6310-template-03-tooltip-testimonial {
348 display: flex;
349 flex-direction: column;
350 align-items: center;
351 padding: 15px 5px;
352 }
353 .imh-6310-template-03-tooltip-testimonial .imh-6310-template-03-tooltip-pic {
354 margin: 0 auto;
355 width: 50%;
356 }
357 .imh-6310-template-03-tooltip-testimonial
358 .imh-6310-template-03-tooltip-testimonial-content {
359 width: 100%;
360 }
361 .imh-6310-template-03-tooltip-testimonial-title {
362 width: 100%;
363 text-align: center;
364 margin: 15px 0;
365 }
366 .imh-6310-template-03-tooltip-description {
367 width: 100%;
368 text-align: center;
369 }
370
371 /* temp 04 */
372
373 .imh-6310-template-04-tooltip-testimonial {
374 width: 300px;
375 }
376 .imh-6310-template-04-tooltip-pic {
377 /* width: 50%; */
378 }
379
380 /* temp 05 */
381
382 .imh-6310-template-05-tooltip-testimonial {
383 width: 300px;
384 }
385 .imh-6310-template-05-tooltip-testimonial {
386 flex-direction: column;
387 align-items: center;
388 }
389 .imh-6310-template-05-hover-content {
390 width: 100%;
391 }
392 .imh-6310-template-05-tooltip-testimonial-content {
393 width: calc(100% - 16px);
394 }
395 .imh-6310-template-05-hover-content
396 .imh-6310-template-05-tooltip-testimonial {
397 margin: 0 auto;
398 }
399
400 .imh-6310-template-05-tooltip-pic {
401 width: 50%;
402 }
403 }
404
405 /* button */
406
407 .imh-6310-template-tooltip-button {
408 text-align: center;
409 float: left;
410 width: 100%;
411 }
412 .imh-6310-template-tooltip-button a {
413 text-decoration: none;
414 display: inline-block;
415 text-align: center;
416 width: 100px;
417 height: 30px;
418 line-height: 30px;
419 border-radius: 10px;
420 }
421 /* output model section */
422 .imh-6310-modal {
423 display: none;
424 position: fixed;
425 z-index: 9999;
426 padding-top: 70px;
427 left: 0;
428 top: 0;
429 width: 100%;
430 height: 100%;
431 overflow: auto;
432 background-color: rgba(0, 0, 0, 0.6);
433 }
434 .imh-6310-modal-content {
435 position: relative;
436 background-color: #fefefe;
437 margin: auto;
438 padding: 0;
439 width: 70%;
440 padding: 0;
441 box-shadow: 0 0 12px 1px rgba(0, 0, 0, 0.9);
442 -webkit-animation-duration: 0.4s;
443 animation-duration: 0.4s;
444 }
445 .imh-6310-hover-content * {
446 text-decoration: none !important;
447 }
448 .imh-6310-close-button {
449 background-repeat: no-repeat;
450 position: absolute;
451 cursor: pointer;
452 z-index: 9999999;
453 }
454 .imh-6310-popup {
455 float: left;
456 padding: 0 0 50px !important;
457 margin: 0 !important;
458 /* line-height: 0!important; */
459 }
460 .imh-6310-slider-content {
461 width: 100%;
462 }
463 .imh-6310-annotation-box-wrapper{
464 width: 100% !important;
465 max-width: 100% !important;
466 padding: 0 !important;
467 margin: 0 !important;
468 flex: 1 1 100% !important;
469 position: relative;
470 }
471 .imh-6310-builder-box-divider{
472 width: 100%;
473 height: 1px;
474 background: #bfbfbf;
475 }