/* * Цвета календаря. * * Плагин весь на своих токенах (`the-events-calendar/common/build/css/ * variables-skeleton.css`), поэтому файлов плагина здесь не касаемся вовсе: * переопределяются только значения токенов. * * Откуда взялись чужие цвета. Красное — от родительской темы: её интеграция * объявляет `--tec-color-accent-primary: var(--global-palette1)` * (`basetheme/inc/components/the_events_calendar/component.php`), а первый цвет * палитры на сайте красный. Чёрное — родное значение плагина * `--tec-color-accent-secondary` (#141827), тему оно не проходит вовсе. * * Токены объявлены на обёртках вида, а не на `:root`: у `:root` та же * специфичность, что у одного класса, и спор решался бы порядком подключения * таблиц. `body .tribe-common` этот спор снимает, а вся разметка календаря * лежит внутри обёртки и значения наследует. * * Полупрозрачные состояния считаются от того же токена через `color-mix`, а не * записываются вторым hex-ом: копии фирменного цвета в теме быть не должно * (`style.css`). */ body .tribe-common, body .tribe-events { /* Кнопка «Знайти події», лупа, ссылки событий, «+ще», выбор даты. */ --tec-color-accent-primary: var( --kmshvsm-brand-blue ); --tec-color-accent-primary-hover: color-mix( in srgb, var( --kmshvsm-brand-blue ) 80%, transparent ); --tec-color-accent-primary-active: color-mix( in srgb, var( --kmshvsm-brand-blue ) 90%, transparent ); --tec-color-accent-primary-background: color-mix( in srgb, var( --kmshvsm-brand-blue ) 7%, transparent ); /* Переключатель «Список / Місяць / День», стрелки, «Підписатись на календар». */ --tec-color-accent-secondary: var( --kmshvsm-brand-blue ); --tec-color-accent-secondary-hover: color-mix( in srgb, var( --kmshvsm-brand-blue ) 80%, transparent ); --tec-color-accent-secondary-active: color-mix( in srgb, var( --kmshvsm-brand-blue ) 90%, transparent ); --tec-color-accent-secondary-background: color-mix( in srgb, var( --kmshvsm-brand-blue ) 7%, transparent ); /* Ссылки и значки. */ --tec-color-link-accent: var( --kmshvsm-brand-blue ); --tec-color-link-accent-hover: color-mix( in srgb, var( --kmshvsm-brand-blue ) 80%, transparent ); --tec-color-icon-focus: var( --kmshvsm-brand-blue ); --tec-color-event-icon-hover: var( --kmshvsm-brand-blue ); /* Полосы многодневных событий в сетке месяца. */ --tec-color-background-primary-multiday: color-mix( in srgb, var( --kmshvsm-brand-blue ) 24%, transparent ); --tec-color-background-primary-multiday-hover: color-mix( in srgb, var( --kmshvsm-brand-blue ) 34%, transparent ); --tec-color-background-secondary-multiday: color-mix( in srgb, var( --kmshvsm-brand-blue ) 24%, transparent ); --tec-color-background-secondary-multiday-hover: color-mix( in srgb, var( --kmshvsm-brand-blue ) 34%, transparent ); /* * Полоса под клеткой месяца на наведении мыши. * * Единственный токен рамок, который здесь переопределяется, и по той же * причине, что и всё остальное в этом списке: это не линия сетки, а отклик * на действие. Полосу рисует `…__day:hover:after` — 2 px внизу клетки, * только на десктопе (`.tribe-common--breakpoint-medium`). Красной она была * потому, что умолчание плагина ведёт её к `--tec-color-border-active`, а * тот на этом сайте приходит из палитры родительской темы. * * Берётся самый узкий из подходящих токенов: во всей таблице стилей * плагина он читается ровно один раз — этой полосой. Толщина, положение, * `transition` и механика наведения остаются плагину; меняется только цвет. */ --tec-color-border-active-month-grid-hover: var( --kmshvsm-brand-blue ); /* * Нейтральным остаётся всё, что не действие: текст и заголовки событий, * числа месяца, линии сетки, фоны. Их токены (`--tec-color-text-*`, * `--tec-color-border-*`, `--tec-color-background*`) здесь не трогаются * намеренно — цветным должно быть то, на что можно нажать. */ } /* * Сегодняшний день. * * Единственное место жёлтого: плашка под числом, синий текст поверх неё. * Жёлтым текстом или значком по белому пришлось бы уйти в тёмную охру — это * уже не флаговый цвет, поэтому такого в оформлении нет. */ body .tribe-events-calendar-month__day--current .tribe-events-calendar-month__day-date-daynum { /* * Высота плашки над и под числом. Объявлена переменной, потому что ниже её * ровно на столько же и вычитают: два числа обязаны совпадать, а порознь * они рано или поздно разойдутся. */ --kmshvsm-today-pad: 0.15em; display: inline-block; min-width: 1.75em; padding: var( --kmshvsm-today-pad ) 0.35em; border-radius: 999px; background-color: var( --kmshvsm-brand-yellow ); color: var( --kmshvsm-brand-blue ); text-align: center; } /* * Плашка не должна поднимать строку с числом. * * Число сегодняшнего дня — единственное в сетке, у которого `display: * inline-block`: этого требует круглая плашка. А высоту строки inline-block * отдаёт **внешним** габаритом, вместе с полями, тогда как обычный текст * остальных дней — своим `line-height`. Разница ровно в вертикальных полях * плашки, и на неё строка `__day-date` у сегодняшнего дня выше соседних. * Часы стоят следующим блоком, поэтому уезжают вниз вместе с ней. * * Поля гасятся такими же отрицательными полями. Это не сдвиг «на глаз» и не * привязка к какому-то числу месяца: выражение считается от той же * переменной, что задаёт плашку, поэтому внешний габарит числа становится * равен его же строке — тому, что отдают все остальные дни. Верстка при этом * не трогается: отрицательное поле меняет только вклад в высоту строки, а * базовая линия, а с ней и само число, и плашка вокруг него, остаются на * месте. * * Правило десктопное: на телефоне в клетке нет ни часов, ни этой строки — там * своя сетка из одних чисел, и её вид не меняется. Признак ширины даёт сам * плагин (`tribe-common--breakpoint-medium`). */ body .tribe-common--breakpoint-medium.tribe-events .tribe-events-calendar-month__day--current .tribe-events-calendar-month__day-date-daynum { margin-top: calc( -1 * var( --kmshvsm-today-pad ) ); margin-bottom: calc( -1 * var( --kmshvsm-today-pad ) ); } /* * Три элемента, до которых токены не доходят. * * Лупа в поле поиска, кнопка «Знайти події» и «Цей місяць» остались красными * не из-за плагина: их перекрашивает интеграция родительской темы * (`basetheme/assets/css/tribe-events.min.css`) прямыми правилами по своей * палитре, минуя токены `--tec-*`. Красный приходит из `--global-palette5` * (#e61717) и из `--global-palette-btn-bg`, который на этом сайте тот же * palette5: умолчания палитры задаёт демо-код дочерней темы * (`inc/custom-theme.php:122`), в базе их нет. * * Поэтому здесь повторяются те же селекторы с добавленным `body` — минимальный * перевес силы — и меняется ровно одно свойство цвета в каждом. Геометрия, * рамки, шрифты и фоны остаются темой: ниже нет ни одного правила, кроме * цветового. */ /* Лупа в поле поиска: `#primary .tribe-events …-icon-svg path`, fill palette5. */ body #primary .tribe-events .tribe-events-c-search__input-control-icon-svg path { fill: var( --kmshvsm-brand-blue ); } /* Кнопка «Знайти події»: `.tribe-events .tribe-common-c-btn.…__search-button`. */ body .tribe-events .tribe-common-c-btn.tribe-events-c-search__button { background-color: var( --kmshvsm-brand-blue ); } body .tribe-events .tribe-common-c-btn.tribe-events-c-search__button:hover, body .tribe-events .tribe-common-c-btn.tribe-events-c-search__button:focus, body .tribe-events .tribe-common-c-btn.tribe-events-c-search__button:active { background-color: color-mix( in srgb, var( --kmshvsm-brand-blue ) 80%, transparent ); } /* * «Цей місяць»: `.tribe-events.tribe-common a.tribe-common-c-btn-border-small`. * Тема красит текст в palette5, на наведении уводит в palette3; синим он * остаётся в обоих состояниях, отклик даёт рамка — она нейтральная и не * трогается. */ body .tribe-events.tribe-common .tribe-common-c-btn-border-small, body .tribe-events.tribe-common a.tribe-common-c-btn-border-small, body .tribe-events.tribe-common .tribe-common-c-btn-border-small:hover, body .tribe-events.tribe-common .tribe-common-c-btn-border-small:focus, body .tribe-events.tribe-common .tribe-common-c-btn-border-small:active, body .tribe-events.tribe-common a.tribe-common-c-btn-border-small:hover, body .tribe-events.tribe-common a.tribe-common-c-btn-border-small:focus, body .tribe-events.tribe-common a.tribe-common-c-btn-border-small:active { color: var( --kmshvsm-brand-blue ); } /* * Кнопка «Отримувати сповіщення в Telegram». * * Печатается в панель управления календарём последним элементом, сразу за * переключателем видов (`inc/telegram.php`). Панель у плагина — flex-строка * (`.tribe-events-c-events-bar`), поэтому раскладка описывается ей же. * * Ширина решается не медиазапросом, а классом `tribe-common--breakpoint-medium`: * плагин вешает его на обёртку вида по ширине самой обёртки, а не экрана, и * все его собственные правила панели написаны через этот класс. Свой * медиазапрос разошёлся бы с ними на узкой колонке. * * Геометрия сетки, баннер и типографика остального календаря не затронуты: * ниже только новый элемент и перенос строки у самой панели. */ body .tribe-events .tribe-events-c-events-bar { flex-wrap: wrap; } /* Телефон: своя строка под переключателями, кнопка прижата вправо. */ body .tribe-events .kmshvsm-calendar-subscribe { display: flex; flex: 0 0 100%; justify-content: flex-end; margin-top: var( --tec-spacer-1 ); } /* Десктоп: та же строка, сразу после «День», по центру высоты панели. */ body .tribe-common--breakpoint-medium.tribe-events .kmshvsm-calendar-subscribe { flex: 0 0 auto; align-items: center; margin-top: 0; margin-right: var( --tec-spacer-2 ); margin-left: var( --tec-spacer-2 ); } body .tribe-events .kmshvsm-telegram-button { display: inline-block; padding: var( --tec-spacer-1 ) var( --tec-spacer-3 ); border-radius: var( --tec-border-radius-default ); background-color: var( --kmshvsm-brand-blue ); color: #fff; font-family: var( --tec-font-family-sans-serif ); font-size: var( --tec-font-size-1 ); line-height: 1.4; text-align: center; text-decoration: none; white-space: nowrap; } body .tribe-events .kmshvsm-telegram-button:hover, body .tribe-events .kmshvsm-telegram-button:focus, body .tribe-events .kmshvsm-telegram-button:active { background-color: color-mix( in srgb, var( --kmshvsm-brand-blue ) 80%, transparent ); color: #fff; text-decoration: none; } /* * На узком телефоне подпись длинная, и в одну строку она не всегда влезает: * там перенос разрешён, кнопка остаётся прижатой вправо. */ body .tribe-events:not( .tribe-common--breakpoint-medium ) .kmshvsm-telegram-button { max-width: 100%; white-space: normal; } /* * Цветовая иерархия сетки месяца (владелец, 2026-09-11). * * Фирменным синим окрашены три вещи, по которым читают календарь: числа * месяца, заголовок месяца и года над сеткой и названия дней недели. Всё * остальное остаётся нейтральным — названия событий, время, «+ще», подписи в * подсказках: синим должно быть то, что задаёт структуру, а не весь текст. * * **Только десктоп.** Все правила ниже начинаются с * `.tribe-common--breakpoint-medium` — класса, который плагин вешает на обёртку * вида на широком экране. На телефоне числа и дни недели остаются такими, как * их красит плагин. * * **Почему прямыми правилами, а не токенами.** Токены `--tec-color-day-marker-*` * и `--tec-color-text-day-of-week-month` до этих элементов не доходят: их * перекрывает интеграция родительской темы * (`basetheme/assets/css/tribe-events.min.css`), которая красит `…__day-date-link` * и `.tribe-common-b3` прямыми правилами по своей палитре, да ещё из-под * `#primary`. Поэтому здесь тот же приём, что и у лупы с кнопкой поиска выше: * те же селекторы с добавленным перевесом силы и ровно одно свойство цвета в * каждом. Вариант без `#primary` идёт рядом — на случай шаблона, где обёртки * темы нет. * * Размеры, начертание, отступы и поведение не трогаются: ниже нет ни одного * правила, кроме цветового. */ /* Числа месяца. */ body .tribe-common--breakpoint-medium.tribe-events .tribe-events-calendar-month__day:not( .tribe-events-calendar-month__day--past ) .tribe-events-calendar-month__day-date-daynum, body .tribe-common--breakpoint-medium.tribe-events .tribe-events-calendar-month__day:not( .tribe-events-calendar-month__day--past ) .tribe-events-calendar-month__day-date-link, body #primary .tribe-common--breakpoint-medium.tribe-events .tribe-events-calendar-month__day:not( .tribe-events-calendar-month__day--past ) .tribe-events-calendar-month__day-date-daynum, body #primary .tribe-common--breakpoint-medium.tribe-events .tribe-events-calendar-month__day:not( .tribe-events-calendar-month__day--past ) .tribe-events-calendar-month__day-date-link { color: var( --kmshvsm-brand-blue ); } /* * Наведение на число. Родительская тема уводит его в красный; отклик остаётся, * но в том же фирменном цвете, что и в остальных наведениях этого файла. */ body .tribe-common--breakpoint-medium.tribe-events .tribe-events-calendar-month__day:not( .tribe-events-calendar-month__day--past ) .tribe-events-calendar-month__day-date-link:hover, body .tribe-common--breakpoint-medium.tribe-events .tribe-events-calendar-month__day:not( .tribe-events-calendar-month__day--past ) .tribe-events-calendar-month__day-date-link:focus, body .tribe-common--breakpoint-medium.tribe-events .tribe-events-calendar-month__day:not( .tribe-events-calendar-month__day--past ) .tribe-events-calendar-month__day-date-link:active, body #primary .tribe-common--breakpoint-medium.tribe-events .tribe-events-calendar-month__day:not( .tribe-events-calendar-month__day--past ) .tribe-events-calendar-month__day-date-link:hover, body #primary .tribe-common--breakpoint-medium.tribe-events .tribe-events-calendar-month__day:not( .tribe-events-calendar-month__day--past ) .tribe-events-calendar-month__day-date-link:focus, body #primary .tribe-common--breakpoint-medium.tribe-events .tribe-events-calendar-month__day:not( .tribe-events-calendar-month__day--past ) .tribe-events-calendar-month__day-date-link:active { color: color-mix( in srgb, var( --kmshvsm-brand-blue ) 80%, transparent ); } /* * Прошедшие дни (владелец, 2026-09-12): приглушённый нейтрально-серый номер, * фон клетки белый, без плашек и без прозрачности клетки. * * Признак — штатный класс плагина `tribe-events-calendar-month__day--past`: его * ставит сервер при сборке сетки, сравнения дат в браузере нет. Сегодня этого * класса не получает, поэтому жёлтый круг и фон сегодняшней клетки не * затрагиваются. Прозрачность `.7`, которую плагин даёт самому номеру, здесь * снята: серый задан цветом, иначе он выходил бы разным на разных фонах. Цвет — * `--kmshvsm-cal-past-fg` в `assets/css/manege.css`. */ body .tribe-common--breakpoint-medium.tribe-events .tribe-events-calendar-month__day--past .tribe-events-calendar-month__day-date, body .tribe-common--breakpoint-medium.tribe-events .tribe-events-calendar-month__day--past .tribe-events-calendar-month__day-date-daynum, body .tribe-common--breakpoint-medium.tribe-events .tribe-events-calendar-month__day--past .tribe-events-calendar-month__day-date-link, body .tribe-common--breakpoint-medium.tribe-events .tribe-events-calendar-month__day--past .tribe-events-calendar-month__day-date-link:hover, body .tribe-common--breakpoint-medium.tribe-events .tribe-events-calendar-month__day--past .tribe-events-calendar-month__day-date-link:focus, body #primary .tribe-common--breakpoint-medium.tribe-events .tribe-events-calendar-month__day--past .tribe-events-calendar-month__day-date, body #primary .tribe-common--breakpoint-medium.tribe-events .tribe-events-calendar-month__day--past .tribe-events-calendar-month__day-date-daynum, body #primary .tribe-common--breakpoint-medium.tribe-events .tribe-events-calendar-month__day--past .tribe-events-calendar-month__day-date-link, body #primary .tribe-common--breakpoint-medium.tribe-events .tribe-events-calendar-month__day--past .tribe-events-calendar-month__day-date-link:hover, body #primary .tribe-common--breakpoint-medium.tribe-events .tribe-events-calendar-month__day--past .tribe-events-calendar-month__day-date-link:focus { color: var( --kmshvsm-cal-past-fg, #9aa1ab ); opacity: 1; } /* * Десктоп: без верхнего сообщения плагина «Немає найближчих подій.» * (владелец, 2026-09-12). Это десктопный вариант `components/messages` из * `components/header.php` — без модификатора `--mobile`. Мобильные варианты и * блок выбранного дня на телефоне не затрагиваются: правило действует только под * `tribe-common--breakpoint-medium`. */ body .tribe-common--breakpoint-medium.tribe-events .tribe-events-header__messages:not( .tribe-events-header__messages--mobile ) { display: none; } /* * Заголовок месяца и года над сеткой («Вересень 2026»). * * Красится сам `