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

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