PluginProbe
Elementor Website Builder – more than just a page builder / 3.24.4
Elementor Website Builder – more than just a page builder v3.24.4
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.24.4, at assets/css/conditionals/lightbox.css

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