PluginProbe
Elementor Website Builder – more than just a page builder / 3.26.2
Elementor Website Builder – more than just a page builder v3.26.2
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 / conditionals / lightbox.css

lightbox.css in Elementor Website Builder – more than just a page builder 3.26.2, at assets/css/conditionals/lightbox.css

404 lines 11.8 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 @supports not (aspect-ratio: 1/1) {
121 .elementor-lightbox .elementor-video-container .elementor-video-square,
122 .elementor-lightbox .elementor-video-container .elementor-video-landscape,
123 .elementor-lightbox .elementor-video-container .elementor-video-portrait {
124 position: relative;
125 overflow: hidden;
126 height: 0;
127 padding-bottom: calc(100% / var(--video-aspect-ratio, 1.77777));
128 }
129 .elementor-lightbox .elementor-video-container .elementor-video-square iframe,
130 .elementor-lightbox .elementor-video-container .elementor-video-square video,
131 .elementor-lightbox .elementor-video-container .elementor-video-landscape iframe,
132 .elementor-lightbox .elementor-video-container .elementor-video-landscape video,
133 .elementor-lightbox .elementor-video-container .elementor-video-portrait iframe,
134 .elementor-lightbox .elementor-video-container .elementor-video-portrait video {
135 position: absolute;
136 inset: 0;
137 }
138 }
139 .elementor-lightbox .elementor-video-container .elementor-video-square iframe,
140 .elementor-lightbox .elementor-video-container .elementor-video-square video {
141 width: min(90vh, 90vw);
142 height: min(90vh, 90vw);
143 }
144 .elementor-lightbox .elementor-video-container .elementor-video-landscape iframe,
145 .elementor-lightbox .elementor-video-container .elementor-video-landscape video {
146 width: 100%;
147 max-height: 90vh;
148 height: auto;
149 }
150 .elementor-lightbox .elementor-video-container .elementor-video-portrait iframe,
151 .elementor-lightbox .elementor-video-container .elementor-video-portrait video {
152 height: 100%;
153 max-width: 90vw;
154 }
155 @media (min-width: 1025px) {
156 .elementor-lightbox .elementor-video-container .elementor-video-landscape {
157 width: 85vw;
158 max-height: 85vh;
159 }
160 .elementor-lightbox .elementor-video-container .elementor-video-portrait {
161 height: 85vh;
162 max-width: 85vw;
163 }
164 }
165 @media (max-width: 1024px) {
166 .elementor-lightbox .elementor-video-container .elementor-video-landscape {
167 width: 95vw;
168 max-height: 95vh;
169 }
170 .elementor-lightbox .elementor-video-container .elementor-video-portrait {
171 height: 95vh;
172 max-width: 95vw;
173 }
174 }
175 .elementor-lightbox .swiper .elementor-swiper-button-prev {
176 left: 0;
177 }
178 .elementor-lightbox .swiper .elementor-swiper-button-next {
179 right: 0;
180 }
181 .elementor-lightbox .swiper .swiper-pagination-fraction {
182 width: max-content;
183 color: #ffffff;
184 }
185 .elementor-lightbox .elementor-swiper-button:focus {
186 outline-width: 1px;
187 }
188 .elementor-lightbox .elementor-swiper-button-prev, .elementor-lightbox .elementor-swiper-button-next {
189 height: 100%;
190 display: flex;
191 align-items: center;
192 width: 15%;
193 justify-content: center;
194 font-size: var(--lightbox-navigation-icons-size);
195 }
196 @media (max-width: 767px) {
197 .elementor-lightbox .elementor-swiper-button:focus {
198 outline: none;
199 }
200 .elementor-lightbox .elementor-swiper-button-prev, .elementor-lightbox .elementor-swiper-button-next {
201 width: 20%;
202 }
203 .elementor-lightbox .elementor-swiper-button-prev i, .elementor-lightbox .elementor-swiper-button-next i {
204 padding: 10px;
205 background-color: rgba(0, 0, 0, 0.5);
206 }
207 .elementor-lightbox .elementor-swiper-button-prev {
208 left: 0;
209 justify-content: flex-start;
210 }
211 .elementor-lightbox .elementor-swiper-button-next {
212 right: 0;
213 justify-content: flex-end;
214 }
215 }
216
217 .elementor-slideshow__counter {
218 color: currentColor;
219 font-size: 0.75em;
220 width: max-content;
221 }
222 .elementor-slideshow__header, .elementor-slideshow__footer {
223 position: absolute;
224 left: 0;
225 width: 100%;
226 padding: 15px 20px;
227 transition: 0.3s;
228 }
229 .elementor-slideshow__footer {
230 color: var(--lightbox-text-color);
231 }
232 .elementor-slideshow__header {
233 color: var(--lightbox-ui-color);
234 display: flex;
235 flex-direction: row-reverse;
236 font-size: var(--lightbox-header-icons-size);
237 padding-inline-start: 1em;
238 padding-inline-end: 2.6em;
239 top: 0;
240 align-items: center;
241 z-index: 10;
242 }
243 .elementor-slideshow__header > i,
244 .elementor-slideshow__header > svg {
245 cursor: pointer;
246 padding: 0.25em;
247 margin: 0 0.35em;
248 }
249 .elementor-slideshow__header > i {
250 font-size: inherit;
251 }
252 .elementor-slideshow__header > i:hover {
253 color: var(--lightbox-ui-color-hover);
254 }
255 .elementor-slideshow__header > svg {
256 box-sizing: content-box;
257 fill: var(--lightbox-ui-color);
258 height: 1em;
259 width: 1em;
260 }
261 .elementor-slideshow__header > svg:hover {
262 fill: var(--lightbox-ui-color-hover);
263 }
264 .elementor-slideshow__header .elementor-slideshow__counter {
265 margin-inline-end: auto;
266 }
267 .elementor-slideshow__header .elementor-icon-share {
268 z-index: 5;
269 }
270 .elementor-slideshow__share-menu {
271 background-color: rgba(0, 0, 0, 0);
272 width: 0;
273 height: 0;
274 position: absolute;
275 overflow: hidden;
276 transition: background-color 400ms;
277 }
278 .elementor-slideshow__share-menu .elementor-slideshow__share-links a {
279 color: #0C0D0E;
280 }
281 .elementor-slideshow__share-links {
282 display: block;
283 position: absolute;
284 min-width: 200px;
285 inset-inline-end: 2.8em;
286 top: 3em;
287 background-color: #fff;
288 border-radius: 3px;
289 padding: 14px 20px;
290 transform: scale(0);
291 opacity: 0;
292 transform-origin: 90% 10%;
293 transition: all 250ms 100ms;
294 box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
295 }
296 .elementor-slideshow__share-links a {
297 text-align: start;
298 color: #3f444b;
299 font-size: 12px;
300 line-height: 2.5;
301 display: block;
302 opacity: 0;
303 transition: opacity 500ms 100ms;
304 }
305 .elementor-slideshow__share-links a:hover {
306 color: #000;
307 }
308 .elementor-slideshow__share-links a i,
309 .elementor-slideshow__share-links a svg {
310 margin-inline-end: 0.75em;
311 }
312 .elementor-slideshow__share-links a i {
313 font-size: 1.25em;
314 }
315 .elementor-slideshow__share-links a svg {
316 height: 1.25em;
317 width: 1.25em;
318 }
319 .elementor-slideshow__share-links:before {
320 content: "";
321 display: block;
322 position: absolute;
323 top: 1px;
324 inset-inline-end: 0.5em;
325 border: 0.45em solid;
326 border-color: transparent transparent #fff transparent;
327 transform: translateY(-100%) scaleX(0.7);
328 }
329 .elementor-slideshow__footer {
330 bottom: 0;
331 z-index: 5;
332 position: fixed;
333 }
334 .elementor-slideshow__title, .elementor-slideshow__description {
335 margin: 0;
336 }
337 .elementor-slideshow__title {
338 font-size: 16px;
339 font-weight: bold;
340 }
341 .elementor-slideshow__description {
342 font-size: 14px;
343 }
344 .elementor-slideshow--ui-hidden .elementor-slideshow__header, .elementor-slideshow--ui-hidden .elementor-slideshow__footer {
345 opacity: 0;
346 pointer-events: none;
347 }
348 .elementor-slideshow--ui-hidden .elementor-swiper-button-prev, .elementor-slideshow--ui-hidden .elementor-swiper-button-next {
349 opacity: 0;
350 }
351 .elementor-slideshow--fullscreen-mode .elementor-video-container {
352 width: 100%;
353 }
354 .elementor-slideshow--zoom-mode .elementor-slideshow__header, .elementor-slideshow--zoom-mode .elementor-slideshow__footer {
355 background-color: rgba(0, 0, 0, 0.5);
356 }
357 .elementor-slideshow--zoom-mode .elementor-swiper-button-prev, .elementor-slideshow--zoom-mode .elementor-swiper-button-next {
358 opacity: 0;
359 pointer-events: none;
360 }
361 .elementor-slideshow--share-mode .elementor-slideshow__share-menu {
362 top: 0;
363 left: 0;
364 width: 100vw;
365 height: 100vh;
366 opacity: 1;
367 cursor: default;
368 background-color: rgba(0, 0, 0, 0.5);
369 }
370 .elementor-slideshow--share-mode .elementor-slideshow__share-links {
371 transform: scale(1);
372 }
373 .elementor-slideshow--share-mode .elementor-slideshow__share-links, .elementor-slideshow--share-mode .elementor-slideshow__share-links a {
374 opacity: 1;
375 }
376 .elementor-slideshow--share-mode .elementor-slideshow__share-links .eicon-twitter {
377 color: #1DA1F2;
378 }
379 .elementor-slideshow--share-mode .elementor-slideshow__share-links .eicon-facebook {
380 color: #3b5998;
381 }
382 .elementor-slideshow--share-mode .elementor-slideshow__share-links .eicon-pinterest {
383 color: #bd081c;
384 }
385 .elementor-slideshow--share-mode .elementor-slideshow__share-links .eicon-download-bold {
386 color: #9DA5AE;
387 }
388 .elementor-slideshow--share-mode .elementor-slideshow__share-links .e-eicon-twitter {
389 fill: #1DA1F2;
390 }
391 .elementor-slideshow--share-mode .elementor-slideshow__share-links .e-eicon-facebook {
392 fill: #3b5998;
393 }
394 .elementor-slideshow--share-mode .elementor-slideshow__share-links .e-eicon-pinterest {
395 fill: #bd081c;
396 }
397 .elementor-slideshow--share-mode .elementor-slideshow__share-links .e-eicon-download-bold {
398 fill: #9DA5AE;
399 }
400 .elementor-slideshow--share-mode .eicon-share-arrow {
401 z-index: 2;
402 }
403
404 /*# sourceMappingURL=lightbox.css.map */