countdown-timer.css in Product Labels, Quick View, Buy Now, Pre-Orders, Frequently Bought Together & More for WooCommerce – Merchant 2.3.1, at assets/css/modules/countdown-timer/countdown-timer.css

473 lines 15.0 KB Raw Download Zip

1	/**
2	* Countdown Timer.
3	*
4	*/
5	li .merchant-countdown-timer {
6	display: none !important;
7	}
8
9	.merchant-countdown-timer {
10	margin-block: 25px;
11	}
12	.merchant-countdown-timer, .merchant-countdown-timer-inner {
13	display: -webkit-box;
14	display: -ms-flexbox;
15	display: flex;
16	-webkit-box-orient: vertical;
17	-webkit-box-direction: normal;
18	-ms-flex-direction: column;
19	flex-direction: column;
20	gap: 10px;
21	}
22	.merchant-countdown-timer--left {
23	-webkit-box-align: start;
24	-ms-flex-align: start;
25	align-items: flex-start;
26	}
27	.merchant-countdown-timer--center,
28	.merchant-countdown-timer--center .merchant-countdown-timer-inner {
29	-webkit-box-align: center;
30	-ms-flex-align: center;
31	align-items: center;
32	}
33	.merchant-countdown-timer--right,
34	.merchant-countdown-timer--right .merchant-countdown-timer-inner {
35	-webkit-box-align: end;
36	-ms-flex-align: end;
37	align-items: flex-end;
38	}
39	.merchant-countdown-timer-text {
40	color: var(--merchant-sale-ending-color);
41	}
42	.merchant-countdown-timer-countdown {
43	color: var(--merchant-digits-color);
44	font-weight: bold;
45	}
46	.merchant-countdown-timer .cd-value {
47	font-size: var(--merchant-digits-font-size, 16px);
48	font-weight: 500;
49	}
50	.merchant-countdown-timer .cd-label {
51	font-size: var(--merchant-labels-font-size, 16px);
52	color: var(--merchant-labels-color, #444444);
53	font-weight: 300;
54	}
55	.merchant-countdown-timer-circles .merchant-countdown-timer-countdown, .merchant-countdown-timer-squares .merchant-countdown-timer-countdown, .merchant-countdown-timer-cards .merchant-countdown-timer-countdown, .merchant-countdown-timer-modern .merchant-countdown-timer-countdown, .merchant-countdown-timer-minimalist .merchant-countdown-timer-countdown {
56	display: -webkit-box;
57	display: -ms-flexbox;
58	display: flex;
59	text-align: center;
60	text-transform: uppercase;
61	line-height: 1;
62	}
63	.merchant-countdown-timer-circles .merchant-countdown-timer-countdown > div, .merchant-countdown-timer-squares .merchant-countdown-timer-countdown > div, .merchant-countdown-timer-cards .merchant-countdown-timer-countdown > div, .merchant-countdown-timer-modern .merchant-countdown-timer-countdown > div, .merchant-countdown-timer-minimalist .merchant-countdown-timer-countdown > div {
64	display: -webkit-box;
65	display: -ms-flexbox;
66	display: flex;
67	-webkit-box-orient: vertical;
68	-webkit-box-direction: normal;
69	-ms-flex-direction: column;
70	flex-direction: column;
71	-webkit-box-pack: center;
72	-ms-flex-pack: center;
73	justify-content: center;
74	gap: 10px;
75	}
76	.merchant-countdown-timer-classic .merchant-countdown-timer-countdown {
77	font-size: var(--merchant-digits-font-size, 16px);
78	}
79	.merchant-countdown-timer-classic .merchant-countdown-timer-inner {
80	-webkit-box-align: center;
81	-ms-flex-align: center;
82	align-items: center;
83	-webkit-box-orient: horizontal;
84	-webkit-box-direction: normal;
85	-ms-flex-direction: row;
86	flex-direction: row;
87	gap: 5px;
88	}
89	.merchant-countdown-timer-classic .merchant-countdown-timer svg {
90	fill: var(--merchant-icon-color, #626262);
91	}
92	.merchant-countdown-timer-progress .merchant-countdown-timer-countdown {
93	font-size: var(--merchant-digits-font-size, 16px);
94	}
95	.merchant-countdown-timer-progress .merchant-countdown-timer-inner {
96	gap: 15px;
97	width: 100%;
98	-webkit-box-flex: 1;
99	-ms-flex: 1;
100	flex: 1;
101	}
102	.merchant-countdown-timer-progress progress {
103	background-color: #cccccc;
104	width: 70%;
105	height: 10px;
106	border: none;
107	border-radius: 5px;
108	overflow: hidden;
109	-webkit-appearance: none;
110	-moz-appearance: none;
111	appearance: none;
112	}
113	.merchant-countdown-timer-progress progress::-webkit-progress-value {
114	background-color: var(--merchant-progress-color, #3858e9);
115	border-radius: 5px;
116	}
117	.merchant-countdown-timer-progress progress::-moz-progress-bar {
118	background-color: var(--merchant-progress-color, #3858e9);
119	border-radius: 5px;
120	}
121	.merchant-countdown-timer-progress progress::-webkit-progress-bar {
122	background-color: #cccccc;
123	border-radius: 5px;
124	}
125	.merchant-countdown-timer-circles .merchant-countdown-timer-countdown {
126	gap: 10px;
127	}
128	.merchant-countdown-timer-circles .merchant-countdown-timer-countdown > div {
129	width: var(--merchant-digits-width, 80px);
130	height: var(--merchant-digits-height, 80px);
131	position: relative;
132	}
133	.merchant-countdown-timer-circles .merchant-countdown-timer-countdown > div > div {
134	position: absolute;
135	inset: 0;
136	display: -webkit-box;
137	display: -ms-flexbox;
138	display: flex;
139	-webkit-box-orient: vertical;
140	-webkit-box-direction: normal;
141	-ms-flex-direction: column;
142	flex-direction: column;
143	-webkit-box-align: center;
144	-ms-flex-align: center;
145	align-items: center;
146	-webkit-box-pack: center;
147	-ms-flex-pack: center;
148	justify-content: center;
149	gap: 5px;
150	}
151	.merchant-countdown-timer-circles .merchant-countdown-timer-countdown .cd-value {
152	font-size: var(--merchant-digits-font-size, 22px);
153	font-weight: 400;
154	}
155	.merchant-countdown-timer-circles .merchant-countdown-timer-countdown .cd-label {
156	font-size: var(--merchant-labels-font-size, 10px);
157	font-weight: 400;
158	}
159	.merchant-countdown-timer-circles .merchant-countdown-timer-countdown .cd-svg {
160	fill: none;
161	width: var(--merchant-digits-width, 80px);
162	height: var(--merchant-digits-height, 80px);
163	-webkit-transform: rotate(-90deg);
164	transform: rotate(-90deg);
165	}
166	.merchant-countdown-timer-circles .merchant-countdown-timer-countdown .cd-svg circle.circle-static {
167	stroke: var(--merchant-digits-border, #444);
168	stroke-linecap: round;
169	stroke-width: 1px;
170	fill: var(--merchant-digits-background, none);
171	font-size: 0;
172	line-height: 1;
173	}
174	.merchant-countdown-timer-circles .merchant-countdown-timer-countdown .cd-svg circle.circle-dynamic {
175	stroke: var(--merchant-progress-color, #3858E9);
176	stroke-linecap: round;
177	stroke-width: 4px;
178	fill: none;
179	stroke-dashoffset: 0;
180	}
181	.merchant-countdown-timer-squares.merchant-countdown-timer--left .merchant-countdown-timer-countdown {
182	margin-left: 3%;
183	}
184	.merchant-countdown-timer-squares.merchant-countdown-timer--right .merchant-countdown-timer-countdown {
185	margin-right: 3%;
186	}
187	.merchant-countdown-timer-squares .merchant-countdown-timer-inner {
188	gap: 25px;
189	}
190	.merchant-countdown-timer-squares .merchant-countdown-timer-countdown {
191	gap: 35px;
192	}
193	.merchant-countdown-timer-squares .merchant-countdown-timer-countdown > div {
194	gap: 30px;
195	width: var(--merchant-digits-width, 65px);
196	height: auto;
197	}
198	.merchant-countdown-timer-squares .merchant-countdown-timer-countdown .cd-value {
199	position: relative;
200	-webkit-transform: rotate(45deg);
201	transform: rotate(45deg);
202	height: var(--merchant-digits-height, 65px);
203	background: var(--merchant-digits-background, #fff);
204	border: 2px solid var(--merchant-digits-border, #000000);
205	border-radius: 5px;
206	font-size: 0;
207	}
208	.merchant-countdown-timer-squares .merchant-countdown-timer-countdown .cd-value:after {
209	content: attr(data-time);
210	font-size: var(--merchant-digits-font-size, 28px);
211	-webkit-transform: rotate(-45deg);
212	transform: rotate(-45deg);
213	position: absolute;
214	inset: 0;
215	display: -webkit-box;
216	display: -ms-flexbox;
217	display: flex;
218	-webkit-box-align: center;
219	-ms-flex-align: center;
220	align-items: center;
221	-webkit-box-pack: center;
222	-ms-flex-pack: center;
223	justify-content: center;
224	}
225	.merchant-countdown-timer-squares .merchant-countdown-timer-countdown .cd-label {
226	font-size: var(--merchant-labels-font-size, 12px);
227	}
228	.merchant-countdown-timer-minimalist .merchant-countdown-timer-countdown {
229	background: var(--merchant-digits-background, #F6F7F7);
230	border-radius: 10px;
231	-webkit-box-shadow: 0 0 10px rgba(221, 221, 221, 0.5882352941);
232	box-shadow: 0 0 10px rgba(221, 221, 221, 0.5882352941);
233	gap: 15px;
234	padding: 10px;
235	}
236	.merchant-countdown-timer-minimalist .merchant-countdown-timer-countdown > div {
237	display: -webkit-box;
238	display: -ms-flexbox;
239	display: flex;
240	-webkit-box-orient: vertical;
241	-webkit-box-direction: normal;
242	-ms-flex-direction: column;
243	flex-direction: column;
244	width: var(--merchant-digits-width, 80px);
245	height: var(--merchant-digits-height, 80px);
246	}
247	.merchant-countdown-timer-minimalist .merchant-countdown-timer-countdown > div:not(.cd-seconds) .cd-value {
248	position: relative;
249	}
250	.merchant-countdown-timer-minimalist .merchant-countdown-timer-countdown > div:not(.cd-seconds) .cd-value:after {
251	content: ":";
252	position: absolute;
253	top: -2px;
254	right: -12px;
255	}
256	.merchant-countdown-timer-minimalist .merchant-countdown-timer-countdown .cd-value {
257	font-size: var(--merchant-digits-font-size, 40px);
258	}
259	.merchant-countdown-timer-minimalist .merchant-countdown-timer-countdown .cd-label {
260	font-size: var(--merchant-labels-font-size, 12px);
261	}
262	.merchant-countdown-timer-cards .merchant-countdown-timer-countdown {
263	gap: 10px;
264	}
265	.merchant-countdown-timer-cards .merchant-countdown-timer-countdown > div {
266	width: var(--merchant-digits-width, 80px);
267	height: auto;
268	gap: 3px;
269	}
270	.merchant-countdown-timer-cards .merchant-countdown-timer-countdown .cd-value,
271	.merchant-countdown-timer-cards .merchant-countdown-timer-countdown .cd-label {
272	background: var(--merchant-digits-background, #E0E2EC);
273	border-radius: 1px;
274	}
275	.merchant-countdown-timer-cards .merchant-countdown-timer-countdown .cd-value {
276	display: -webkit-box;
277	display: -ms-flexbox;
278	display: flex;
279	-webkit-box-align: center;
280	-ms-flex-align: center;
281	align-items: center;
282	-webkit-box-pack: center;
283	-ms-flex-pack: center;
284	justify-content: center;
285	font-size: var(--merchant-digits-font-size, 40px);
286	height: var(--merchant-digits-height, 80px);
287	padding: 10px;
288	}
289	.merchant-countdown-timer-cards .merchant-countdown-timer-countdown .cd-label {
290	font-size: var(--merchant-labels-font-size, 12px);
291	font-weight: 500;
292	padding: 8px;
293	}
294	.merchant-countdown-timer-modern .merchant-countdown-timer-countdown > div {
295	width: auto;
296	height: auto;
297	}
298	.merchant-countdown-timer-modern .merchant-countdown-timer-countdown .cd-flip {
299	-webkit-perspective: 400px;
300	perspective: 400px;
301	-webkit-box-orient: horizontal;
302	-webkit-box-direction: normal;
303	-ms-flex-direction: row;
304	flex-direction: row;
305	}
306	.merchant-countdown-timer-modern .merchant-countdown-timer-countdown .cd-flip-card {
307	display: -webkit-box;
308	display: -ms-flexbox;
309	display: flex;
310	-webkit-box-orient: vertical;
311	-webkit-box-direction: normal;
312	-ms-flex-direction: column;
313	flex-direction: column;
314	gap: 10px;
315	}
316	.merchant-countdown-timer-modern .merchant-countdown-timer-countdown .cd-flip-card-wrapper {
317	display: -webkit-box;
318	display: -ms-flexbox;
319	display: flex;
320	-webkit-box-align: center;
321	-ms-flex-align: center;
322	align-items: center;
323	-webkit-box-pack: center;
324	-ms-flex-pack: center;
325	justify-content: center;
326	height: var(--merchant-digits-height, 95px);
327	width: var(--merchant-digits-width, 80px);
328	color: var(--merchant-digits-color, #fff);
329	background: var(--merchant-digits-background, #180B40);
330	border-radius: 5px;
331	}
332	.merchant-countdown-timer-modern .merchant-countdown-timer-countdown .cd-flip-card-inner {
333	position: relative;
334	font-size: var(--merchant-digits-font-size, 40px);
335	overflow: hidden;
336	}
337	.merchant-countdown-timer-modern .merchant-countdown-timer-countdown .cd-flip-card-inner:after, .merchant-countdown-timer-modern .merchant-countdown-timer-countdown .cd-flip-card-inner:before {
338	content: "";
339	position: absolute;
340	top: 50%;
341	-webkit-transform: translateY(-50%);
342	transform: translateY(-50%);
343	width: 6px;
344	height: 5px;
345	background: #fff;
346	border-radius: 20px;
347	z-index: 9;
348	}
349	.merchant-countdown-timer-modern .merchant-countdown-timer-countdown .cd-flip-card-inner:after {
350	right: -3px;
351	}
352	.merchant-countdown-timer-modern .merchant-countdown-timer-countdown .cd-flip-card-inner:before {
353	left: -3px;
354	}
355	.merchant-countdown-timer-modern .merchant-countdown-timer-countdown .cd-flip-card-top, .merchant-countdown-timer-modern .merchant-countdown-timer-countdown .cd-flip-card-bottom, .merchant-countdown-timer-modern .merchant-countdown-timer-countdown .cd-flip-card-back::before, .merchant-countdown-timer-modern .merchant-countdown-timer-countdown .cd-flip-card-back::after {
356	display: block;
357	font-size: var(--merchant-digits-font-size, 36px);
358	font-weight: 700;
359	line-height: 1;
360	width: var(--merchant-digits-width, 80px);
361	color: var(--merchant-digits-color, #fff);
362	background: var(--merchant-digits-background, #180B40);
363	-webkit-backface-visibility: hidden;
364	backface-visibility: hidden;
365	-webkit-transform-style: preserve-3d;
366	transform-style: preserve-3d;
367	-webkit-transform: translateZ(0);
368	transform: translateZ(0);
369	}
370	.merchant-countdown-timer-modern .merchant-countdown-timer-countdown .cd-flip-card-back {
371	position: absolute;
372	top: 0;
373	height: 100%;
374	left: 0;
375	pointer-events: none;
376	}
377	.merchant-countdown-timer-modern .merchant-countdown-timer-countdown .cd-flip-card-back:before {
378	content: attr(data-time);
379	position: relative;
380	z-index: -1;
381	overflow: hidden;
382	}
383	.merchant-countdown-timer-modern .merchant-countdown-timer-countdown .cd-flipped .cd-flip-card-back:before {
384	-webkit-animation: flipTop 0.3s ease-in;
385	animation: flipTop 0.3s ease-in;
386	-webkit-animation-fill-mode: both;
387	animation-fill-mode: both;
388	-webkit-transform-origin: center bottom;
389	transform-origin: center bottom;
390	}
391	.merchant-countdown-timer-modern .merchant-countdown-timer-countdown .cd-flipped .cd-flip-card-back .cd-flip-card-bottom {
392	-webkit-animation: flipBottom 0.6s ease-out;
393	animation: flipBottom 0.6s ease-out;
394	-webkit-animation-fill-mode: both;
395	animation-fill-mode: both;
396	-webkit-transform-origin: center top;
397	transform-origin: center top;
398	}
399	.merchant-countdown-timer-modern .merchant-countdown-timer-countdown .cd-label {
400	font-size: var(--merchant-labels-font-size, 12px);
401	font-weight: 500;
402	}
403
404	.rtl .merchant-countdown-timer svg {
405	margin-right: unset;
406	margin-left: 5px;
407	}
408
409	@-webkit-keyframes flipTop {
410	0% {
411	-webkit-transform: rotateX(0deg);
412	transform: rotateX(0deg);
413	z-index: 2;
414	}
415	0%, 99% {
416	opacity: 0.99;
417	}
418	100% {
419	-webkit-transform: rotateX(-90deg);
420	transform: rotateX(-90deg);
421	opacity: 0;
422	}
423	}
424
425	@keyframes flipTop {
426	0% {
427	-webkit-transform: rotateX(0deg);
428	transform: rotateX(0deg);
429	z-index: 2;
430	}
431	0%, 99% {
432	opacity: 0.99;
433	}
434	100% {
435	-webkit-transform: rotateX(-90deg);
436	transform: rotateX(-90deg);
437	opacity: 0;
438	}
439	}
440	@-webkit-keyframes flipBottom {
441	0%, 50% {
442	z-index: -1;
443	-webkit-transform: rotateX(90deg);
444	transform: rotateX(90deg);
445	opacity: 0;
446	}
447	51% {
448	opacity: 0.99;
449	}
450	100% {
451	opacity: 0.99;
452	-webkit-transform: rotateX(0deg);
453	transform: rotateX(0deg);
454	z-index: 5;
455	}
456	}
457	@keyframes flipBottom {
458	0%, 50% {
459	z-index: -1;
460	-webkit-transform: rotateX(90deg);
461	transform: rotateX(90deg);
462	opacity: 0;
463	}
464	51% {
465	opacity: 0.99;
466	}
467	100% {
468	opacity: 0.99;
469	-webkit-transform: rotateX(0deg);
470	transform: rotateX(0deg);
471	z-index: 5;
472	}
473	}