PluginProbe
Elementor Website Builder – more than just a page builder / 4.1.0-dev3
Elementor Website Builder – more than just a page builder v4.1.0-dev3
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 4.1.0-dev3, at assets/css/conditionals/lightbox.css

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