132 lines
5.4 KiB
CSS
132 lines
5.4 KiB
CSS
/* Variables */
|
|
.mfn-countdown {
|
|
--mfn-countdown-spacing: 15px;
|
|
--mfn-countdown-number-color: #0089F7;
|
|
--mfn-countdown-separator-size: 1px;
|
|
--mfn-countdown-separator-color: rgba(0,0,0,.1);
|
|
--mfn-countdown-countdown-item-spacing: 10px;
|
|
}
|
|
|
|
.mfn-countdown { display: flex; flex-wrap: wrap; gap: var(--mfn-countdown-spacing); }
|
|
.mfn-countdown .countdown-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--mfn-countdown-countdown-item-spacing); padding: 15px; box-sizing: border-box; }
|
|
.mfn-countdown .countdown-item > * { margin-bottom: 0; }
|
|
.mfn-countdown .countdown-item .counter-number { display: flex; justify-content: center; align-items: center; font-size: 2em; color: var(--mfn-countdown-number-color); box-sizing: border-box; }
|
|
.mfn-countdown .countdown-item .counter-number,
|
|
.mfn-countdown .countdown-item .counter-title { line-height: 1; }
|
|
.mfn-countdown .countdown-separator { display: flex; position:relative }
|
|
.mfn-countdown .countdown-separator.colon { align-items: center; font-size: 2em; }
|
|
|
|
.mfn-countdown-order-title-number .counter-title{order:1}
|
|
.mfn-countdown-order-title-number .counter-number{order:2}
|
|
|
|
/* Show */
|
|
|
|
.mfn-countdown-show-hms .hide-days,
|
|
.mfn-countdown-show-dhm .hide-seconds,
|
|
.mfn-countdown-show-dh .hide-minutes,
|
|
.mfn-countdown-show-dh .hide-seconds,
|
|
.mfn-countdown-show-d .hide-hours,
|
|
.mfn-countdown-show-d .hide-minutes,
|
|
.mfn-countdown-show-d .hide-seconds{display:none}
|
|
|
|
@media only screen and (max-width: 1440px) {
|
|
.mfn-countdown-show-laptop-hms .hide-hours,
|
|
.mfn-countdown-show-laptop-hms .hide-minutes,
|
|
.mfn-countdown-show-laptop-hms .hide-seconds,
|
|
.mfn-countdown-show-laptop-dhms .hide-days,
|
|
.mfn-countdown-show-laptop-dhms .hide-hours,
|
|
.mfn-countdown-show-laptop-dhms .hide-minutes,
|
|
.mfn-countdown-show-laptop-dhms .hide-seconds,
|
|
.mfn-countdown-show-laptop-dhm .hide-days,
|
|
.mfn-countdown-show-laptop-dhm .hide-hours,
|
|
.mfn-countdown-show-laptop-dhm .hide-minutes,
|
|
.mfn-countdown-show-laptop-dh .hide-days,
|
|
.mfn-countdown-show-laptop-dh .hide-hours{display:flex}
|
|
|
|
.mfn-countdown-show-laptop-hms .hide-days,
|
|
.mfn-countdown-show-laptop-dhm .hide-seconds,
|
|
.mfn-countdown-show-laptop-dh .hide-minutes,
|
|
.mfn-countdown-show-laptop-dh .hide-seconds,
|
|
.mfn-countdown-show-laptop-d .hide-hours,
|
|
.mfn-countdown-show-laptop-d .hide-minutes,
|
|
.mfn-countdown-show-laptop-d .hide-seconds{display:none}
|
|
}
|
|
@media only screen and (max-width: 959px) {
|
|
.mfn-countdown-show-tablet-hms .hide-hours,
|
|
.mfn-countdown-show-tablet-hms .hide-minutes,
|
|
.mfn-countdown-show-tablet-hms .hide-seconds,
|
|
.mfn-countdown-show-tablet-dhms .hide-days,
|
|
.mfn-countdown-show-tablet-dhms .hide-hours,
|
|
.mfn-countdown-show-tablet-dhms .hide-minutes,
|
|
.mfn-countdown-show-tablet-dhms .hide-seconds,
|
|
.mfn-countdown-show-tablet-dhm .hide-days,
|
|
.mfn-countdown-show-tablet-dhm .hide-hours,
|
|
.mfn-countdown-show-tablet-dhm .hide-minutes,
|
|
.mfn-countdown-show-tablet-dh .hide-days,
|
|
.mfn-countdown-show-tablet-dh .hide-hours{display:flex}
|
|
|
|
.mfn-countdown-show-tablet-hms .hide-days,
|
|
.mfn-countdown-show-tablet-dhm .hide-seconds,
|
|
.mfn-countdown-show-tablet-dh .hide-minutes,
|
|
.mfn-countdown-show-tablet-dh .hide-seconds,
|
|
.mfn-countdown-show-tablet-d .hide-hours,
|
|
.mfn-countdown-show-tablet-d .hide-minutes,
|
|
.mfn-countdown-show-tablet-d .hide-seconds{display:none}
|
|
}
|
|
@media only screen and (max-width: 767px) {
|
|
.mfn-countdown-show-mobile-hms .hide-hours,
|
|
.mfn-countdown-show-mobile-hms .hide-minutes,
|
|
.mfn-countdown-show-mobile-hms .hide-seconds,
|
|
.mfn-countdown-show-mobile-dhms .hide-days,
|
|
.mfn-countdown-show-mobile-dhms .hide-hours,
|
|
.mfn-countdown-show-mobile-dhms .hide-minutes,
|
|
.mfn-countdown-show-mobile-dhms .hide-seconds,
|
|
.mfn-countdown-show-mobile-dhm .hide-days,
|
|
.mfn-countdown-show-mobile-dhm .hide-hours,
|
|
.mfn-countdown-show-mobile-dhm .hide-minutes,
|
|
.mfn-countdown-show-mobile-dh .hide-days,
|
|
.mfn-countdown-show-mobile-dh .hide-hours{display:flex}
|
|
|
|
.mfn-countdown-show-mobile-hms .hide-days,
|
|
.mfn-countdown-show-mobile-dhm .hide-seconds,
|
|
.mfn-countdown-show-mobile-dh .hide-minutes,
|
|
.mfn-countdown-show-mobile-dh .hide-seconds,
|
|
.mfn-countdown-show-mobile-d .hide-hours,
|
|
.mfn-countdown-show-mobile-d .hide-minutes,
|
|
.mfn-countdown-show-mobile-d .hide-seconds{display:none}
|
|
}
|
|
|
|
/* Positions */
|
|
|
|
.mfn-countdown-left { justify-content: flex-start; }
|
|
.mfn-countdown-center { justify-content: center; }
|
|
.mfn-countdown-right { justify-content: flex-end; }
|
|
|
|
@media only screen and (max-width: 767px) {
|
|
.mfn-countdown .countdown-item{padding:5px 15px}
|
|
|
|
.mfn-countdown-mobile-left { justify-content: flex-start; }
|
|
.mfn-countdown-mobile-center { justify-content: center; }
|
|
.mfn-countdown-mobile-right { justify-content: flex-end; }
|
|
|
|
.mfn-countdown-mobile-vertical.mfn-countdown-mobile-left { align-items: flex-start; justify-content: unset; }
|
|
.mfn-countdown-mobile-vertical.mfn-countdown-mobile-center { align-items: center; justify-content: unset; }
|
|
.mfn-countdown-mobile-vertical.mfn-countdown-mobile-right { align-items: flex-end; justify-content: unset; }
|
|
}
|
|
|
|
/* Separator */
|
|
|
|
@media only screen and (min-width: 768px) {
|
|
.mfn-countdown-separator-off .countdown-separator { display: none !important; }
|
|
}
|
|
|
|
@media only screen and (max-width: 767px) {
|
|
.mfn-countdown-separator-mobile-off .countdown-separator { display: none !important; }
|
|
}
|
|
|
|
/* Mobile vertical */
|
|
|
|
@media only screen and (max-width: 767px) {
|
|
.mfn-countdown-mobile-vertical { flex-direction: column; align-items: center; }
|
|
}
|