← All changes | assets/css/templates/lightbox.css +36 -44 4.2.0-dev2 → 3.24.8 View file →

		@@ -1,5 +1,5 @@
1		-:where(.elementor-lightbox) {
	1	+.elementor-lightbox {
2	2	--lightbox-ui-color: rgba(238, 238, 238, 0.9);
3	3	--lightbox-ui-color-hover: #fff;
4	4	--lightbox-text-color: var(--lightbox-ui-color);
5	5	--lightbox-header-icons-size: 20px;
		@@ -4,9 +4,8 @@
4	4	--lightbox-text-color: var(--lightbox-ui-color);
5	5	--lightbox-header-icons-size: 20px;
6	6	--lightbox-navigation-icons-size: 25px;
7	7	}
8		-
9	8	.elementor-lightbox:not(.elementor-popup-modal) .dialog-header,
10	9	.elementor-lightbox:not(.elementor-popup-modal) .dialog-message {
11	10	text-align: center;
12	11	}
		@@ -58,9 +57,10 @@
58	57	.elementor-lightbox .dialog-lightbox-close-button:hover svg,
59	58	.elementor-lightbox .elementor-swiper-button:hover svg {
60	59	fill: var(--lightbox-ui-color-hover);
61	60	}
62		-.elementor-lightbox .swiper {
	61	+.elementor-lightbox .swiper,
	62	+.elementor-lightbox .swiper-container {
63	63	height: 100%;
64	64	}
65	65	.elementor-lightbox .elementor-lightbox-item {
66	66	display: flex;
		@@ -71,9 +71,9 @@
71	71	box-sizing: border-box;
72	72	height: 100%;
73	73	margin: auto;
74	74	}
75		-@media (max-width: 767px) {
	75	+@media (max-width: ELEMENTOR_SCREEN_MOBILE_MAX) {
76	76	.elementor-lightbox .elementor-lightbox-item {
77	77	padding: 70px 0;
78	78	}
79	79	}
		@@ -117,8 +117,30 @@
117	117	.elementor-lightbox .elementor-video-container .elementor-video-portrait iframe,
118	118	.elementor-lightbox .elementor-video-container .elementor-video-portrait video {
119	119	aspect-ratio: var(--video-aspect-ratio, 1.77777);
120	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	+}
121	143	.elementor-lightbox .elementor-video-container .elementor-video-square iframe,
122	144	.elementor-lightbox .elementor-video-container .elementor-video-square video {
123	145	width: min(90vh, 90vw);
124	146	height: min(90vh, 90vw);
		@@ -126,9 +148,8 @@
126	148	.elementor-lightbox .elementor-video-container .elementor-video-landscape iframe,
127	149	.elementor-lightbox .elementor-video-container .elementor-video-landscape video {
128	150	width: 100%;
129	151	max-height: 90vh;
130		- height: auto;
131	152	}
132	153	.elementor-lightbox .elementor-video-container .elementor-video-portrait iframe,
133	154	.elementor-lightbox .elementor-video-container .elementor-video-portrait video {
134	155	height: 100%;
		@@ -133,9 +154,9 @@
133	154	.elementor-lightbox .elementor-video-container .elementor-video-portrait video {
134	155	height: 100%;
135	156	max-width: 90vw;
136	157	}
137		-@media (min-width: 1025px) {
	158	+@media (min-width: ELEMENTOR_SCREEN_TABLET_NEXT) {
138	159	.elementor-lightbox .elementor-video-container .elementor-video-landscape {
139	160	width: 85vw;
140	161	max-height: 85vh;
141	162	}
		@@ -143,9 +164,9 @@
143	164	height: 85vh;
144	165	max-width: 85vw;
145	166	}
146	167	}
147		-@media (max-width: 1024px) {
	168	+@media (max-width: ELEMENTOR_SCREEN_TABLET_MAX) {
148	169	.elementor-lightbox .elementor-video-container .elementor-video-landscape {
149	170	width: 95vw;
150	171	max-height: 95vh;
151	172	}
		@@ -153,17 +174,20 @@
153	174	height: 95vh;
154	175	max-width: 95vw;
155	176	}
156	177	}
157		-.elementor-lightbox .swiper .elementor-swiper-button-prev {
	178	+.elementor-lightbox .swiper .elementor-swiper-button-prev,
	179	+.elementor-lightbox .swiper-container .elementor-swiper-button-prev {
158	180	left: 0;
159	181	}
160		-.elementor-lightbox .swiper .elementor-swiper-button-next {
	182	+.elementor-lightbox .swiper .elementor-swiper-button-next,
	183	+.elementor-lightbox .swiper-container .elementor-swiper-button-next {
161	184	right: 0;
162	185	}
163		-.elementor-lightbox .swiper .swiper-pagination-fraction {
	186	+.elementor-lightbox .swiper .swiper-pagination-fraction,
	187	+.elementor-lightbox .swiper-container .swiper-pagination-fraction {
164	188	width: max-content;
165		- color: currentColor;
	189	+ color: #ffffff;
166	190	}
167	191	.elementor-lightbox .elementor-swiper-button:focus {
168	192	outline-width: 1px;
169	193	}
		@@ -174,49 +198,17 @@
174	198	width: 15%;
175	199	justify-content: center;
176	200	font-size: var(--lightbox-navigation-icons-size);
177	201	}
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) {
	202	+@media (max-width: ELEMENTOR_SCREEN_MOBILE_MAX) {
196	203	.elementor-lightbox .elementor-swiper-button:focus {
197	204	outline: none;
198	205	}
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	206	.elementor-lightbox .elementor-swiper-button-prev, .elementor-lightbox .elementor-swiper-button-next {
204	207	width: 20%;
205	208	}
206	209	.elementor-lightbox .elementor-swiper-button-prev i, .elementor-lightbox .elementor-swiper-button-next i {
207	210	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	211	background-color: rgba(0, 0, 0, 0.5);
220	212	}
221	213	.elementor-lightbox .elementor-swiper-button-prev {
222	214	left: 0;