← All changes | assets/css/conditionals/lightbox.css +36 -43 4.1.0-dev1 → 3.25.4 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);
		@@ -133,9 +155,9 @@
133	155	.elementor-lightbox .elementor-video-container .elementor-video-portrait video {
134	156	height: 100%;
135	157	max-width: 90vw;
136	158	}
137		-@media (min-width: 1025px) {
	159	+@media (min-width: ELEMENTOR_SCREEN_TABLET_NEXT) {
138	160	.elementor-lightbox .elementor-video-container .elementor-video-landscape {
139	161	width: 85vw;
140	162	max-height: 85vh;
141	163	}
		@@ -143,9 +165,9 @@
143	165	height: 85vh;
144	166	max-width: 85vw;
145	167	}
146	168	}
147		-@media (max-width: 1024px) {
	169	+@media (max-width: ELEMENTOR_SCREEN_TABLET_MAX) {
148	170	.elementor-lightbox .elementor-video-container .elementor-video-landscape {
149	171	width: 95vw;
150	172	max-height: 95vh;
151	173	}
		@@ -153,17 +175,20 @@
153	175	height: 95vh;
154	176	max-width: 95vw;
155	177	}
156	178	}
157		-.elementor-lightbox .swiper .elementor-swiper-button-prev {
	179	+.elementor-lightbox .swiper .elementor-swiper-button-prev,
	180	+.elementor-lightbox .swiper-container .elementor-swiper-button-prev {
158	181	left: 0;
159	182	}
160		-.elementor-lightbox .swiper .elementor-swiper-button-next {
	183	+.elementor-lightbox .swiper .elementor-swiper-button-next,
	184	+.elementor-lightbox .swiper-container .elementor-swiper-button-next {
161	185	right: 0;
162	186	}
163		-.elementor-lightbox .swiper .swiper-pagination-fraction {
	187	+.elementor-lightbox .swiper .swiper-pagination-fraction,
	188	+.elementor-lightbox .swiper-container .swiper-pagination-fraction {
164	189	width: max-content;
165		- color: currentColor;
	190	+ color: #ffffff;
166	191	}
167	192	.elementor-lightbox .elementor-swiper-button:focus {
168	193	outline-width: 1px;
169	194	}
		@@ -174,49 +199,17 @@
174	199	width: 15%;
175	200	justify-content: center;
176	201	font-size: var(--lightbox-navigation-icons-size);
177	202	}
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) {
	203	+@media (max-width: ELEMENTOR_SCREEN_MOBILE_MAX) {
196	204	.elementor-lightbox .elementor-swiper-button:focus {
197	205	outline: none;
198	206	}
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	207	.elementor-lightbox .elementor-swiper-button-prev, .elementor-lightbox .elementor-swiper-button-next {
204	208	width: 20%;
205	209	}
206	210	.elementor-lightbox .elementor-swiper-button-prev i, .elementor-lightbox .elementor-swiper-button-next i {
207	211	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	212	background-color: rgba(0, 0, 0, 0.5);
220	213	}
221	214	.elementor-lightbox .elementor-swiper-button-prev {
222	215	left: 0;