May 28, 2024

Как перестилизовать стандартный таймер Taplink

Видеоинструкция:

Коды нужно добавлять в блок HTML-код. Все коды, представленные ниже, должны быть обернуты в тег <style></style>, иначе они не будут работать

Коды из видео:

/*Сменить размер таймера на мобильниках*/
@media (max-width: 767px) {
  .block-timer .timer {
    --block-timer-size: 34px !important;
  }
}
.block-timer .timer.has-theme-light {
  /*Цвет фона у цифр*/
  --block-timer-card-top-color: transparent;
  --block-timer-card-bottom-color: transparent;
  /*Цвет текста цифр*/
  --block-timer-card-color: #222;
  /*Цвет надписей*/
  --block-timer-label-color: #faf a;
  /*Цвет точек */
  --block-timer-dots-color: #e2e2e2;
  /*Тень таймера*/
  --block-timer-text-shadow: 0 1px 2px #fff;
  /*Цвет разделителя между анимированными половинками цифр*/
  --block-timer-card-separator: #b5b5b5;
}
.block-timer .timer-dots em:first-child {
  /*Верхние точки между цифрами*/
  translate: 0 -50%;
}
/*Нижние точки между цифрами*/
.block-timer .timer-dots em:last-child {
  display: none;
}
/*Код, который уберет анимация перелистывания*/
.block-timer .timer-card b:not(.timer-card-top) {
  display: none;
}