PluginProbe
Elementor Website Builder – more than just a page builder / 3.29.0-dev4
Elementor Website Builder – more than just a page builder v3.29.0-dev4
4.3.0-beta2 4.3.0-beta1 4.2.4 4.2.3 4.2.2 4.2.1 4.2.0 4.1.5 4.2.0-beta2 4.2.0-dev2 4.2.0-beta1 4.1.4 4.1.3 4.1.2 4.1.1 4.1.0 4.1.0-beta3 4.1.0-dev3 4.0.9 4.1.0-beta2 4.1.0-dev2 4.0.8 4.1.0-beta1 4.1.0-dev1 4.0.7 All 451 releases
elementor / assets / css / templates / lightbox.css

lightbox.css in Elementor Website Builder – more than just a page builder 3.29.0-dev4, at assets/css/templates/lightbox.css

417 lines 12.5 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 .elementor-lightbox {
2 --lightbox-ui-color: rgba(238, 238, 238, 0.9);
3 --lightbox-ui-color-hover: #fff;
4 --lightbox-text-color: var(--lightbox-ui-color);
5 --lightbox-header-icons-size: 20px;
6 --lightbox-navigation-icons-size: 25px;
7 }
8 .elementor-lightbox:not(.elementor-popup-modal) .dialog-header,
9 .elementor-lightbox:not(.elementor-popup-modal) .dialog-message {
10 text-align: center;
11 }
12 .elementor-lightbox .dialog-header {
13 display: none;
14 }
15 .elementor-lightbox .dialog-widget-content {
16 background: none;
17 box-shadow: none;
18 width: 100%;
19 height: 100%;
20 }
21 .elementor-lightbox .dialog-message {
22 animation-duration: 0.3s;
23 height: 100%;
24 }
25 .elementor-lightbox .dialog-message.dialog-lightbox-message {
26 padding: 0;
27 }
28 .elementor-lightbox .dialog-lightbox-close-button {
29 cursor: pointer;
30 position: absolute;
31 font-size: var(--lightbox-header-icons-size);
32 inset-inline-end: 0.75em;
33 margin-top: 13px;
34 padding: 0.25em;
35 z-index: 2;
36 line-height: 1;
37 display: flex;
38 }
39 .elementor-lightbox .dialog-lightbox-close-button svg {
40 height: 1em;
41 width: 1em;
42 }
43 .elementor-lightbox .dialog-lightbox-close-button,
44 .elementor-lightbox .elementor-swiper-button {
45 color: var(--lightbox-ui-color);
46 transition: all 0.3s;
47 opacity: 1;
48 }
49 .elementor-lightbox .dialog-lightbox-close-button svg,
50 .elementor-lightbox .elementor-swiper-button svg {
51 fill: var(--lightbox-ui-color);
52 }
53 .elementor-lightbox .dialog-lightbox-close-button:hover,
54 .elementor-lightbox .elementor-swiper-button:hover {
55 color: var(--lightbox-ui-color-hover);
56 }
57 .elementor-lightbox .dialog-lightbox-close-button:hover svg,
58 .elementor-lightbox .elementor-swiper-button:hover svg {
59 fill: var(--lightbox-ui-color-hover);
60 }
61 .elementor-lightbox .swiper {
62 height: 100%;
63 }
64 .elementor-lightbox .elementor-lightbox-item {
65 display: flex;
66 align-items: center;
67 justify-content: center;
68 position: relative;
69 padding: 70px;
70 box-sizing: border-box;
71 height: 100%;
72 margin: auto;
73 }
74 @media (max-width: 767px) {
75 .elementor-lightbox .elementor-lightbox-item {
76 padding: 70px 0;
77 }
78 }
79 .elementor-lightbox .elementor-lightbox-image {
80 max-height: 100%;
81 user-select: none;
82 }
83 .elementor-lightbox .elementor-lightbox-image, .elementor-lightbox .elementor-lightbox-image:hover {
84 opacity: 1;
85 filter: none;
86 border: none;
87 }
88 .elementor-lightbox .elementor-lightbox-image {
89 box-shadow: 0 0 30px rgba(0, 0, 0, 0.3), 0 0 8px -5px rgba(0, 0, 0, 0.3);
90 border-radius: 2px;
91 }
92 .elementor-lightbox .elementor-video-container {
93 width: 100%;
94 position: absolute;
95 top: 50%;
96 left: 50%;
97 transform: translate(-50%, -50%);
98 }
99 .elementor-lightbox .elementor-video-container .elementor-video-square,
100 .elementor-lightbox .elementor-video-container .elementor-video-landscape,
101 .elementor-lightbox .elementor-video-container .elementor-video-portrait {
102 width: 100%;
103 height: 100%;
104 margin: auto;
105 }
106 .elementor-lightbox .elementor-video-container .elementor-video-square iframe,
107 .elementor-lightbox .elementor-video-container .elementor-video-landscape iframe,
108 .elementor-lightbox .elementor-video-container .elementor-video-portrait iframe {
109 border: 0;
110 background-color: #000;
111 }
112 .elementor-lightbox .elementor-video-container .elementor-video-square iframe,
113 .elementor-lightbox .elementor-video-container .elementor-video-square video,
114 .elementor-lightbox .elementor-video-container .elementor-video-landscape iframe,
115 .elementor-lightbox .elementor-video-container .elementor-video-landscape video,
116 .elementor-lightbox .elementor-video-container .elementor-video-portrait iframe,
117 .elementor-lightbox .elementor-video-container .elementor-video-portrait video {
118 aspect-ratio: var(--video-aspect-ratio, 1.77777);
119 }
120 .elementor-lightbox .elementor-video-container .elementor-video-square iframe,
121 .elementor-lightbox .elementor-video-container .elementor-video-square video {
122 width: min(90vh, 90vw);
123 height: min(90vh, 90vw);
124 }
125 .elementor-lightbox .elementor-video-container .elementor-video-landscape iframe,
126 .elementor-lightbox .elementor-video-container .elementor-video-landscape video {
127 width: 100%;
128 max-height: 90vh;
129 height: auto;
130 }
131 .elementor-lightbox .elementor-video-container .elementor-video-portrait iframe,
132 .elementor-lightbox .elementor-video-container .elementor-video-portrait video {
133 height: 100%;
134 max-width: 90vw;
135 }
136 @media (min-width: 1025px) {
137 .elementor-lightbox .elementor-video-container .elementor-video-landscape {
138 width: 85vw;
139 max-height: 85vh;
140 }
141 .elementor-lightbox .elementor-video-container .elementor-video-portrait {
142 height: 85vh;
143 max-width: 85vw;
144 }
145 }
146 @media (max-width: 1024px) {
147 .elementor-lightbox .elementor-video-container .elementor-video-landscape {
148 width: 95vw;
149 max-height: 95vh;
150 }
151 .elementor-lightbox .elementor-video-container .elementor-video-portrait {
152 height: 95vh;
153 max-width: 95vw;
154 }
155 }
156 .elementor-lightbox .swiper .elementor-swiper-button-prev {
157 left: 0;
158 }
159 .elementor-lightbox .swiper .elementor-swiper-button-next {
160 right: 0;
161 }
162 .elementor-lightbox .swiper .swiper-pagination-fraction {
163 width: max-content;
164 color: #ffffff;
165 }
166 .elementor-lightbox .elementor-swiper-button:focus {
167 outline-width: 1px;
168 }
169 .elementor-lightbox .elementor-swiper-button-prev, .elementor-lightbox .elementor-swiper-button-next {
170 height: 100%;
171 display: flex;
172 align-items: center;
173 width: 15%;
174 justify-content: center;
175 font-size: var(--lightbox-navigation-icons-size);
176 }
177 @media (max-width: 1024px) {
178 .elementor-lightbox .elementor-swiper-button-prev:active, .elementor-lightbox .elementor-swiper-button-next:active {
179 -webkit-tap-highlight-color: transparent; /* fallback for some Androids */
180 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
181 }
182 .elementor-lightbox .elementor-swiper-button-prev svg,
183 .elementor-lightbox .elementor-swiper-button-prev i, .elementor-lightbox .elementor-swiper-button-next svg,
184 .elementor-lightbox .elementor-swiper-button-next i {
185 cursor: pointer;
186 }
187 .elementor-lightbox .elementor-swiper-button-prev svg:active,
188 .elementor-lightbox .elementor-swiper-button-prev i:active, .elementor-lightbox .elementor-swiper-button-next svg:active,
189 .elementor-lightbox .elementor-swiper-button-next i:active {
190 outline: none;
191 background-color: rgba(0, 0, 0, 0.5);
192 }
193 }
194 @media (max-width: 767px) {
195 .elementor-lightbox .elementor-swiper-button:focus {
196 outline: none;
197 }
198 .elementor-lightbox .elementor-swiper-button-prev, .elementor-lightbox .elementor-swiper-button-next {
199 width: 20%;
200 }
201 .elementor-lightbox .elementor-swiper-button-prev:active, .elementor-lightbox .elementor-swiper-button-next:active {
202 -webkit-tap-highlight-color: transparent; /* fallback for some Androids */
203 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
204 }
205 .elementor-lightbox .elementor-swiper-button-prev i, .elementor-lightbox .elementor-swiper-button-next i {
206 padding: 10px;
207 background-color: rgba(0, 0, 0, 0.5);
208 }
209 .elementor-lightbox .elementor-swiper-button-prev svg,
210 .elementor-lightbox .elementor-swiper-button-prev i, .elementor-lightbox .elementor-swiper-button-next svg,
211 .elementor-lightbox .elementor-swiper-button-next i {
212 cursor: pointer;
213 }
214 .elementor-lightbox .elementor-swiper-button-prev svg:active,
215 .elementor-lightbox .elementor-swiper-button-prev i:active, .elementor-lightbox .elementor-swiper-button-next svg:active,
216 .elementor-lightbox .elementor-swiper-button-next i:active {
217 outline: none;
218 background-color: rgba(0, 0, 0, 0.5);
219 }
220 .elementor-lightbox .elementor-swiper-button-prev {
221 left: 0;
222 justify-content: flex-start;
223 }
224 .elementor-lightbox .elementor-swiper-button-next {
225 right: 0;
226 justify-content: flex-end;
227 }
228 }
229
230 .elementor-slideshow__counter {
231 color: currentColor;
232 font-size: 0.75em;
233 width: max-content;
234 }
235 .elementor-slideshow__header, .elementor-slideshow__footer {
236 position: absolute;
237 left: 0;
238 width: 100%;
239 padding: 15px 20px;
240 transition: 0.3s;
241 }
242 .elementor-slideshow__footer {
243 color: var(--lightbox-text-color);
244 }
245 .elementor-slideshow__header {
246 color: var(--lightbox-ui-color);
247 display: flex;
248 flex-direction: row-reverse;
249 font-size: var(--lightbox-header-icons-size);
250 padding-inline-start: 1em;
251 padding-inline-end: 2.6em;
252 top: 0;
253 align-items: center;
254 z-index: 10;
255 }
256 .elementor-slideshow__header > i,
257 .elementor-slideshow__header > svg {
258 cursor: pointer;
259 padding: 0.25em;
260 margin: 0 0.35em;
261 }
262 .elementor-slideshow__header > i {
263 font-size: inherit;
264 }
265 .elementor-slideshow__header > i:hover {
266 color: var(--lightbox-ui-color-hover);
267 }
268 .elementor-slideshow__header > svg {
269 box-sizing: content-box;
270 fill: var(--lightbox-ui-color);
271 height: 1em;
272 width: 1em;
273 }
274 .elementor-slideshow__header > svg:hover {
275 fill: var(--lightbox-ui-color-hover);
276 }
277 .elementor-slideshow__header .elementor-slideshow__counter {
278 margin-inline-end: auto;
279 }
280 .elementor-slideshow__header .elementor-icon-share {
281 z-index: 5;
282 }
283 .elementor-slideshow__share-menu {
284 background-color: rgba(0, 0, 0, 0);
285 width: 0;
286 height: 0;
287 position: absolute;
288 overflow: hidden;
289 transition: background-color 400ms;
290 }
291 .elementor-slideshow__share-menu .elementor-slideshow__share-links a {
292 color: #0C0D0E;
293 }
294 .elementor-slideshow__share-links {
295 display: block;
296 position: absolute;
297 min-width: 200px;
298 inset-inline-end: 2.8em;
299 top: 3em;
300 background-color: #fff;
301 border-radius: 3px;
302 padding: 14px 20px;
303 transform: scale(0);
304 opacity: 0;
305 transform-origin: 90% 10%;
306 transition: all 250ms 100ms;
307 box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
308 }
309 .elementor-slideshow__share-links a {
310 text-align: start;
311 color: #3f444b;
312 font-size: 12px;
313 line-height: 2.5;
314 display: block;
315 opacity: 0;
316 transition: opacity 500ms 100ms;
317 }
318 .elementor-slideshow__share-links a:hover {
319 color: #000;
320 }
321 .elementor-slideshow__share-links a i,
322 .elementor-slideshow__share-links a svg {
323 margin-inline-end: 0.75em;
324 }
325 .elementor-slideshow__share-links a i {
326 font-size: 1.25em;
327 }
328 .elementor-slideshow__share-links a svg {
329 height: 1.25em;
330 width: 1.25em;
331 }
332 .elementor-slideshow__share-links:before {
333 content: "";
334 display: block;
335 position: absolute;
336 top: 1px;
337 inset-inline-end: 0.5em;
338 border: 0.45em solid;
339 border-color: transparent transparent #fff transparent;
340 transform: translateY(-100%) scaleX(0.7);
341 }
342 .elementor-slideshow__footer {
343 bottom: 0;
344 z-index: 5;
345 position: fixed;
346 }
347 .elementor-slideshow__title, .elementor-slideshow__description {
348 margin: 0;
349 }
350 .elementor-slideshow__title {
351 font-size: 16px;
352 font-weight: bold;
353 }
354 .elementor-slideshow__description {
355 font-size: 14px;
356 }
357 .elementor-slideshow--ui-hidden .elementor-slideshow__header, .elementor-slideshow--ui-hidden .elementor-slideshow__footer {
358 opacity: 0;
359 pointer-events: none;
360 }
361 .elementor-slideshow--ui-hidden .elementor-swiper-button-prev, .elementor-slideshow--ui-hidden .elementor-swiper-button-next {
362 opacity: 0;
363 }
364 .elementor-slideshow--fullscreen-mode .elementor-video-container {
365 width: 100%;
366 }
367 .elementor-slideshow--zoom-mode .elementor-slideshow__header, .elementor-slideshow--zoom-mode .elementor-slideshow__footer {
368 background-color: rgba(0, 0, 0, 0.5);
369 }
370 .elementor-slideshow--zoom-mode .elementor-swiper-button-prev, .elementor-slideshow--zoom-mode .elementor-swiper-button-next {
371 opacity: 0;
372 pointer-events: none;
373 }
374 .elementor-slideshow--share-mode .elementor-slideshow__share-menu {
375 top: 0;
376 left: 0;
377 width: 100vw;
378 height: 100vh;
379 opacity: 1;
380 cursor: default;
381 background-color: rgba(0, 0, 0, 0.5);
382 }
383 .elementor-slideshow--share-mode .elementor-slideshow__share-links {
384 transform: scale(1);
385 }
386 .elementor-slideshow--share-mode .elementor-slideshow__share-links, .elementor-slideshow--share-mode .elementor-slideshow__share-links a {
387 opacity: 1;
388 }
389 .elementor-slideshow--share-mode .elementor-slideshow__share-links .eicon-twitter {
390 color: #1DA1F2;
391 }
392 .elementor-slideshow--share-mode .elementor-slideshow__share-links .eicon-facebook {
393 color: #3b5998;
394 }
395 .elementor-slideshow--share-mode .elementor-slideshow__share-links .eicon-pinterest {
396 color: #bd081c;
397 }
398 .elementor-slideshow--share-mode .elementor-slideshow__share-links .eicon-download-bold {
399 color: #9DA5AE;
400 }
401 .elementor-slideshow--share-mode .elementor-slideshow__share-links .e-eicon-twitter {
402 fill: #1DA1F2;
403 }
404 .elementor-slideshow--share-mode .elementor-slideshow__share-links .e-eicon-facebook {
405 fill: #3b5998;
406 }
407 .elementor-slideshow--share-mode .elementor-slideshow__share-links .e-eicon-pinterest {
408 fill: #bd081c;
409 }
410 .elementor-slideshow--share-mode .elementor-slideshow__share-links .e-eicon-download-bold {
411 fill: #9DA5AE;
412 }
413 .elementor-slideshow--share-mode .eicon-share-arrow {
414 z-index: 2;
415 }
416
417 /*# sourceMappingURL=lightbox.css.map */