PluginProbe
Image Hotspot – Map Image Annotation / 3.0
Image Hotspot – Map Image Annotation v3.0
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.0, at output-common-css.css

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