PluginProbe
Image Hotspot – Map Image Annotation / 1.2
Image Hotspot – Map Image Annotation v1.2
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 1.2, at output-common-css.css

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