, body-шрифт по наследованию * • Дата — , body-шрифт по наследованию * * Структура (flex/gap/aspect-ratio) — наше единственное локальное. */ /* === Карточка: rating + quote + links сверху, author прижат к низу ====== */ /* Без space-between (он распределял пустоту равномерно — author уезжал выше когда нет read-more). margin-top:auto на author выравнивает нижнюю строку футера у всех карточек на одной линии. */ .wm-review__card { display: flex; flex-direction: column; min-height: auto; position: relative; } .wm-review__author { margin-top: auto; } /* === Декоративная кавычка-иконка top-right (UIKit) ===================== */ /* color: inherit → на dark-ряду белая, на solid → ink. Opacity 0.2 — заметна на фоне, но не отбирает внимание у цитаты. */ .wm-review__quote-icon { position: absolute; top: var(--wintra-padding-medium); right: var(--wintra-padding-medium); color: inherit; opacity: 0.2; pointer-events: none; } /* === Цитата — базовый body-шрифт + italic, обрезка до 5 строк ========= */ /* margin-top: padding-small — равен отступу от звёзд до цитаты. margin-bottom:auto толкает author-footer вниз карточки. */ .wm-review__quote { margin: var(--wintra-padding-small) 0 0 0; font-style: italic; font-size: var(--wintra-type-size-body); line-height: var(--wintra-type-line-height-body); color: inherit; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; } /* === Автор: аватар + блок текста ====================================== */ .wm-review__author { display: flex; align-items: center; gap: var(--wintra-padding-small); padding-top: var(--wintra-padding-medium); } /* Author-text — все вертикальные отступы убраны + сжатый line-height. Раньше role/date имели line-height 1.6 (body) → между строками воздух. line-height 1.2 прижимает строки плотно. */ .wm-review__author-text { display: flex; flex-direction: column; min-width: 0; gap: 0; } .wm-review__author-text > * { margin: 0; padding: 0; line-height: 1.2; } /* === Должность + дата — приглушение 0.5 от текущего цвета карточки ==== */ .wm-review__role, .wm-review__date { opacity: 0.5; } /* === Рейтинг звёздами =================================================== */ /* UIKit-иконка star — outline (path fill:none, stroke:currentColor). Перебиваем path[fill] на currentColor чтобы звезда стала заполненной. */ .wm-review__rating { display: inline-flex; /* 2px = micro-spacing внутри иконочной группы. Не token: меньше --wintra-padding-small, специфика декоративной шкалы рейтинга. */ gap: 2px; } /* Жёлтый звёзд — канонический цвет рейтинга Я.Карт/2ГИС/Google. Не темизируется (rating везде жёлтый), потому inline-литерал без токена модуля. */ .wm-review__star.is-on { color: #ffb800; } .wm-review__star.is-off { color: inherit; opacity: 0.2; } .wm-review__star.is-on svg * { fill: currentColor !important; stroke: currentColor !important; } .wm-review__star.is-off svg * { fill: currentColor !important; stroke: currentColor !important; } /* === Блок ссылок (читать полностью + оригинал отзыва) ================== */ /* Группа right-aligned, ссылки плотно. Отступ от цитаты — padding-small. */ .wm-review__links { display: flex; flex-direction: column; align-items: flex-end; /* 2px = плотный стык двух строчек-ссылок (read-more + оригинал). Не token: меньше --wintra-padding-small, спец-плотность для links-кластера. */ gap: 2px; margin-top: var(--wintra-padding-small); } .wm-review__read-more { display: none; } .wm-review__card.is-truncated .wm-review__read-more { display: inline-block; } /* === Ссылка «Оригинал отзыва» */ .wm-review__source-link { display: inline-flex; align-items: center; /* 6px = зазор между текстом ссылки и иконкой external-link. Не token: micro-spacing внутри inline-flex, меньше padding-small. */ gap: 6px; color: inherit; text-decoration: var(--wintra-type-link-decoration); text-transform: var(--wintra-type-link-transform); } .wm-review-modal__source { align-self: flex-start; margin-bottom: var(--wintra-padding-medium); } /* === Аватар-кружок (общий контейнер для image + initials) =============== */ /* 3rem = 48px при body 16 — стандартный аватар. */ .wm-review__avatar { flex-shrink: 0; width: 3rem; height: 3rem; border-radius: 50%; background: var(--wintra-color-primary); color: var(--wintra-color-on-primary); display: inline-flex; align-items: center; justify-content: center; overflow: hidden; font-weight: var(--wintra-type-weight-heading-bold); } .wm-review__avatar--picture { object-fit: cover; background: transparent; } /* === Ссылка на компанию (если COMPANY_URL задан) ====================== */ /* color: inherit чтобы ссылка не отрывалась цветом от строки role/company. Подчёркивание — браузерный default (без перебивания). hover/focus/active не объявляем: общая система ссылок модуля включит свой стиль (см. feedback_webcreator_animations_global_planned.md). */ .wm-review__company-link { color: inherit; } /* === Стиль кнопки «Читать полностью» (внутри .wm-review__links) === */ .wm-review__read-more { padding: 0; background: transparent; border: 0; color: inherit; cursor: pointer; font: inherit; text-decoration: var(--wintra-type-link-decoration); text-transform: var(--wintra-type-link-transform); } /* === Modal полнотекстового отзыва ===================================== */ /* Окно по центру по вертикали — UIKit по дефолту прижимает dialog к верху через margin-top:50px. Перебиваем через flex на open-state. */ .wm-review-modal.uk-modal.uk-open { display: flex !important; align-items: center; justify-content: center; /* UIKit ставит padding-top:50px/padding-bottom:30px → ассиметрия 20px. Симметричный padding-medium токен с обеих сторон — dialog по центру. */ padding: var(--wintra-padding-medium) !important; } .wm-review-modal .wm-review-modal__dialog { margin: 0 !important; } /* Dialog держит overflow:hidden + radius (чтоб scrollbar не вылазил из скругления). Body внутри — скроллящийся контейнер. width 600px — стандарт modal-dialog модуля (общего токена ещё нет: когда появятся другие wm-* модалы — выносим в --wintra-modal-width). max-width 92vw / max-height 80vh — обычные viewport-фоллбеки. */ .wm-review-modal__dialog { width: 600px; max-width: 92vw; max-height: min(600px, 80vh); overflow: hidden; border-radius: var(--wintra-radius); /* перебиваем uk-modal-body padding (был на dialog'е) — padding переезжает на body. */ padding: 0; } .wm-review-modal__body { max-height: inherit; overflow-y: auto; /* top > others чтобы под крестиком .uk-modal-close-default (UIKit рисует его в правом-верхнем углу с offset ~10px) был зазор и крестик не наезжал на первый строчный элемент. */ padding: calc(var(--wintra-padding-large) * 1.5) var(--wintra-padding-large) var(--wintra-padding-large); } .wm-review-modal__quote { font-style: italic; margin: 0; } .wm-review-modal__author { display: flex; align-items: center; gap: var(--wintra-padding-small); margin-top: var(--wintra-padding-medium); padding-top: var(--wintra-padding-medium); /* Граница-разделитель между цитатой и автором в modal'е. 1px solid rgba — оправдан (тонкая полупрозрачная линия на любом фоне modal'а: и светлый, и тёмный glass-вариант). Не token: общая система разделителей модуля ещё не сформирована (см. TODO). */ border-top: 1px solid rgba(0, 0, 0, 0.08); } .wm-review-modal__author .wm-review__role, .wm-review-modal__author .wm-review__date { opacity: 0.5; }