/* ============================================================================= ash-tokens.css — дизайн-система asho.to Снята 1:1 с боевого CSS источника ashoo.me: /var/www/asho_to_usr/data/_handoff/style/index-Cwib1x1t.css (293 КБ, минифицирован) ЧТО ЗДЕСЬ ЕСТЬ: 1 @font-face Golos Text Variable (4 файла, unicode-range) 2 базовый сброс и body 3 токены типографической шкалы (в источнике НЕ объявлены — см. tokens.md) 4 токены раскладки (--main-width и т.п.) + брейкпоинты Quasar 5 ТЕМЫ: body.body--light / body.body--dark — по 55 токенов 6 типографические классы text-h1..text-h4, text-body*, text-label*, text-caption* 7 цветовые утилиты text-* / bg-* / border-* (49 токенов × 3) 8 flex/grid, gap, отступы q-*, позиционирование, обрезка текста, видимость 9 каркас страницы: page-area / content-area / main / main-listing 10 мелкие служебные классы, без которых вёрстка источника не собирается ЧЕГО ЗДЕСЬ НЕТ (намеренно): — Quasar-компоненты (.q-btn, .q-card, .q-carousel, .q-field, .q-dialog …); — компонентные классы источника (.person-card, .person-tag, .hashtag, .price, .metro-list, .media-slider …) — они живут в Vue-scoped-блоках [data-v-…]; — animate.css (116 @keyframes) и Leaflet. ПОРЯДОК ПОДКЛЮЧЕНИЯ: этот файл идёт ПЕРВЫМ, до компонентных стилей. На обязателен класс body--light или body--dark (у источника ставит Vue; у нас — PHP/шаблон DLE). Без класса ни один токен не определён и страница будет чёрным текстом на прозрачном фоне. ============================================================================= */ /* ============================================================================= 1. ШРИФТ В источнике: Fontsource Golos Text Variable, 4 подмножества, переменный вес. Пути у источника были /assets/golos-text-*.woff2 — ниже подставлен наш /fonts/. Файлы лежат в _handoff/style/golos-text-*.woff2 — скопировать как есть. ============================================================================= */ @font-face { font-family: "Golos Text Variable"; font-style: normal; font-display: swap; font-weight: 400 900; src: url(/fonts/golos-text-cyrillic-ext-wght-normal.woff2) format("woff2-variations"); unicode-range: U+460-52F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family: "Golos Text Variable"; font-style: normal; font-display: swap; font-weight: 400 900; src: url(/fonts/golos-text-cyrillic-wght-normal.woff2) format("woff2-variations"); unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116; } @font-face { font-family: "Golos Text Variable"; font-style: normal; font-display: swap; font-weight: 400 900; src: url(/fonts/golos-text-latin-ext-wght-normal.woff2) format("woff2-variations"); unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: "Golos Text Variable"; font-style: normal; font-display: swap; font-weight: 400 900; src: url(/fonts/golos-text-latin-wght-normal.woff2) format("woff2-variations"); unicode-range: U+0-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* В источнике последний диапазон записан как U+?? — это сокращение Fontsource для U+0-FF. Развёрнуто, потому что «U+??» понимают не все сборщики CSS. */ /* ============================================================================= 2. БАЗОВЫЙ СБРОС (из Quasar, оставлено только реально работающее) ============================================================================= */ *, ::before, ::after { box-sizing: inherit; -webkit-tap-highlight-color: transparent; } html, body { box-sizing: border-box; margin: 0; width: 100%; direction: ltr; } body { min-width: 100px; min-height: 100%; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* Эмодзи в стеке обязательны: имена анкет ими набиты. */ font-family: "Golos Text Variable", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif; font-size: var(--Font-Size-Body, 16px); font-weight: var(--Font-Weight-Regular, 400); line-height: var(--Line-Height-Body, 20px); letter-spacing: 0; } h1, h2, h3, h4, h5, h6 { margin: 0; } p { margin: 0 0 16px; } a { color: unset; text-decoration: none !important; } /* БАГ 46: сброс отступов у контролов ТИП-селектором, как у источника (button,input,optgroup,select,textarea{font:inherit;margin:0}). Держать его здесь, а не в .q-btn: правило на классе перебивало утилиты .q-mt-*, из-за чего кнопка «Сообщить о нарушении» теряла свой q-mt-md. */ button, input, optgroup, select, textarea { margin: 0; } input::-webkit-outer-spin-button, input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } input[type=number] { -moz-appearance: textfield; } /* ============================================================================= 3. ТОКЕНЫ ТИПОГРАФИЧЕСКОЙ ШКАЛЫ ВНИМАНИЕ. В CSS источника этих переменных НЕ СУЩЕСТВУЕТ: они только читаются через var(--X, запасное) и всегда отдают запасное значение. Значит действующая шкала — это ровно те числа, что стоят ниже. Мы их объявляем явно: результат пиксель-в-пиксель тот же, но шкалу становится видно и можно менять в одном месте. Регистр имён сохранён как в источнике, включая две «строчные» переменные --font-size-label-m / --font-size-label-s — это не опечатка, так у них. ============================================================================= */ :root { --Font-Weight-Regular: 400; --Font-Weight-SemiBold: 600; --Font-Weight-Bold: 700; --Font-Size-Display-Large: 48px; --Line-Height-Display-Large: 56px; --Font-Size-H1: 24px; --Line-Height-H1: 32px; --Font-Size-H2: 20px; --Line-Height-H2: 24px; --Font-Size-H3: 16px; --Line-Height-H3: 20px; --Font-Size-H4: 14px; --Line-Height-H4: 20px; --Font-Size-Body: 16px; --Line-Height-Body: 20px; --Font-Size-Body-Small: 14px; --Line-Height-Body-Small: 16px; --Font-Size-Caption: 14px; --Line-Height-Caption: 16px; --Font-Size-Caption-Small: 12px; --Line-Height-Caption-Small: 16px; --Font-Size-Label: 14px; --Line-Height-Label: 16px; --font-size-label-m: 12px; --line-height-label-m: 16px; --font-size-label-s: 10px; --line-height-label-s: 12px; } /* На узком экране (<=1023.98px) источник переобъявляет display-large меньше. */ @media (max-width: 1023.98px) { :root { --Font-Size-Display-Large: 40px; --Line-Height-Display-Large: 48px; } } /* ============================================================================= 4. ТОКЕНЫ РАСКЛАДКИ И БРЕЙКПОИНТЫ Брейкпоинты источника (наследие Quasar, но работают именно они): xs < 600 | sm 600-1023.98 | md 1024-1439.98 | lg 1440-1919.98 | xl >= 1920 Обратите внимание на дробные .98 — так у источника, повторять как есть. ============================================================================= */ :root { --q-size-xs: 0; --q-size-sm: 600px; --q-size-md: 1024px; --q-size-lg: 1440px; --q-size-xl: 1920px; --main-padding: 16px; /* значения по умолчанию, чтобы файл работал и без медиазапросов */ --main-width: 100%; --main-screen-padding: 16px; } @media (min-width: 1024px) { :root { --main-width: 1024px; --main-screen-padding: 8px; } } @media (min-width: 1440px) { :root { --main-width: 1232px; --main-screen-padding: 0px; } } @media (max-width: 1023.98px) { :root { --main-width: 100%; --main-screen-padding: 16px; } } /* ============================================================================= 5. ТЕМЫ. 55 токенов в каждой, состав одинаковый — ни одного «односторонного». Оба блока заканчиваются background-color, как в источнике. ============================================================================= */ body.body--light { --Special-Primary: #ff5e7d; --Special-Primary-02: #ff5e7d33; --Special-Secondary: #242424; --Special-Accent: #426ed1; --Special-Green: #33c66e; --Special-Yellow: #fcb35a; --Special-White: #fff; --Special-Black: #242424; --Special-Blue: #028fe2; --Special-Telegram: #24a1de; --Special-Verified: #45d0ff; --Special-Polee: #616eea; --Special-Dark-Blue: #2d475f; --Special-Light-Yellow: #fff4d9; --Special-Gold: #f8dd7f; --Special-Gold-Light: #fff4d5; --Special-Gold-Dark: #433b25; --Badges-MainBG: #3d4758; --Badges-SecondBG: #e0e8ff; --Badges-TextTag: #2d475f; --Badges-PremiumMain: #e9d385; --Badges-PremiumBG: #fff4d9; --Background-BG: #fff; --Background-Black: #242424; --Background-Layer1: #fff; --Background-Layer2: #fff; --Background-Layer3: #fff; --Elements-Light-Gray: #f5f5f5; --Elements-Gray: #e0e0e0; --Elements-White: #fff; --Elements-Dark-Gray: #515151; --Elements-Dark-Blue: #2d475f; --Text-Primary: #242424; --Text-Secondary: #a8a8a8; --Text-Tertiary: #e0e0e0; --Text-Inverse: #fff; --Text-Link: #426ed1; --Border-Primary: #f5f5f5; --Border-Secondary: #e0e0e0; --Border-Black: #242424; --Icon-Primary: #242424; --Icon-Secondary: #a8a8a8; --Icon-Inverse: #fff; --Error-Back: #ffeff2; --Error-Text: #ff5e61; --Info-Back: #e0e8ff; --Warning-Back: #fff4d9; --States-Error--Hover: #ffabab; --States-Primary--Pressed: #ff5e7d; --States-Secondary--Pressed: #242424; --States-Accent--Pressed: #426ed1; --States-Green--Pressed: #33c66e; --States-Yellow--Pressed: #fcb35a; --States-White--Pressed: #fff; --States-Black--Pressed: #242424; background-color: var(--Background-BG); /* БАГ 53: нативные контролы (textarea, input, спиннеры) обязаны жить по схеме САЙТА, а не ОС. Иначе форма отзыва на светлой теме под тёмной ОС выходит чёрной. Парная строка — в body.body--dark ниже. */ color-scheme: light; } body.body--dark { --Special-Primary: #ff7597; --Special-Primary-02: #ff5e7d33; --Special-Secondary: #e0e0e0; --Special-Accent: #508df6; --Special-Green: #3fcf8e; --Special-Yellow: #f7a541; --Special-White: #fff; --Special-Black: #242424; --Special-Blue: #028fe2; --Special-Telegram: #2aabee; --Special-Verified: #45d0ff; --Special-Polee: #616eea; --Special-Dark-Blue: #3a5874; --Special-Light-Yellow: #ffe9b4; --Special-Gold: #d8b85f; --Special-Gold-Light: #2c2418; --Special-Gold-Dark: #433b25; --Badges-MainBG: #3a5764; --Badges-SecondBG: #202a33; --Badges-TextTag: #77a0c6; --Badges-PremiumMain: #e9d385; --Badges-PremiumBG: #1a160f; --Background-BG: #121212; --Background-Black: #242424; --Background-Layer1: #1a1a1a; --Background-Layer2: #222; --Background-Layer3: #2c2c2c; --Elements-Light-Gray: #222; --Elements-Gray: #404040; --Elements-White: #242424; --Elements-Dark-Gray: #515151; --Elements-Dark-Blue: #1b3a4b; --Text-Primary: #e0e0e0; --Text-Secondary: #8c8c8c; --Text-Tertiary: #707070; --Text-Inverse: #242424; --Text-Link: #5a8df6; --Border-Primary: #383838; --Border-Secondary: #707070; --Border-Black: #e0e0e0; --Icon-Primary: #e0e0e0; --Icon-Secondary: #8c8c8c; --Icon-Inverse: #242424; --Error-Back: #2a1c1f; --Error-Text: #ff8a8d; --Info-Back: #192b54; --Warning-Back: #f9e6b6; --States-Error--Hover: #ff7597; --States-Primary--Pressed: #ff7597; --States-Secondary--Pressed: #e0e0e0; --States-Accent--Pressed: #5a8df6; --States-Green--Pressed: #3fcf8e; --States-Yellow--Pressed: #f7a541; --States-White--Pressed: #fff; --States-Black--Pressed: #242424; background-color: var(--Background-BG); /* БАГ 53: см. парную строку в body.body--light. */ color-scheme: dark; } /* Замечание на будущее (НЕ применено, чтобы не расходиться с источником): --Special-Primary-02 в тёмной теме остался от светлой — #ff5e7d33, тогда как --Special-Primary там #ff7597. Если понадобится согласовать, в тёмной теме ставить #ff759733. В самом CSS источника эта переменная не используется ни разу. */ /* ============================================================================= 6. ТИПОГРАФИКА font-weight у h1..h4 / text-h1..text-h4 равен 700. В ДИЗАЙН_ASHOO.md написано, что имя анкеты (text-h3) не полужирное — по CSS источника это НЕ так, подробности и как переключить — в research/tokens.md. ============================================================================= */ .text-display-large { letter-spacing: 0; font-size: var(--Font-Size-Display-Large, 48px); font-weight: var(--Font-Weight-SemiBold, 600); line-height: var(--Line-Height-Display-Large, 56px); } h1, .text-h1 { letter-spacing: 0; font-size: var(--Font-Size-H1, 24px); font-weight: var(--Font-Weight-Bold, 700); line-height: var(--Line-Height-H1, 32px); } h2, .text-h2 { letter-spacing: 0; font-size: var(--Font-Size-H2, 20px); font-weight: var(--Font-Weight-Bold, 700); line-height: var(--Line-Height-H2, 24px); } h3, .text-h3 { letter-spacing: 0; font-size: var(--Font-Size-H3, 16px); font-weight: var(--Font-Weight-Bold, 700); line-height: var(--Line-Height-H3, 20px); } h4, .text-h4 { letter-spacing: 0; font-size: var(--Font-Size-H4, 14px); font-weight: var(--Font-Weight-Bold, 700); line-height: var(--Line-Height-H4, 20px); } .text-body, .text-body2 { letter-spacing: 0; font-size: var(--Font-Size-Body, 16px); font-weight: var(--Font-Weight-Regular, 400); line-height: var(--Line-Height-Body, 20px); } .text-body-m { letter-spacing: 0; font-size: var(--Font-Size-Body-Small, 14px); font-weight: var(--Font-Weight-Regular, 400); line-height: var(--Line-Height-Body-Small, 16px); } .text-caption { letter-spacing: 0; font-size: var(--Font-Size-Caption, 14px); font-weight: var(--Font-Weight-Regular, 400); line-height: var(--Line-Height-Caption, 16px); } .text-caption-m { letter-spacing: 0; font-size: var(--Font-Size-Caption-Small, 12px); font-weight: var(--Font-Weight-Regular, 400); line-height: var(--Line-Height-Caption-Small, 16px); } .text-label { letter-spacing: 0; font-size: var(--Font-Size-Label, 14px); font-weight: var(--Font-Weight-Regular, 400); line-height: var(--Line-Height-Label, 16px); } /* text-label-m — самый частый класс на странице источника: 2519 вхождений */ .text-label-m { letter-spacing: 0; font-size: var(--font-size-label-m, 12px); font-weight: var(--Font-Weight-Regular, 400); line-height: var(--line-height-label-m, 16px); } .text-label-s { letter-spacing: 0; font-size: var(--font-size-label-s, 10px); font-weight: var(--Font-Weight-Regular, 400); line-height: var(--line-height-label-s, 12px); } /* Источник дублирует text-label / -m / -s и внутри @media (max-width:1023.98px) ТЕМИ ЖЕ значениями — пустая работа, здесь не повторяем. Единственное, что реально меняется на узком экране, — display-large (см. раздел 3). */ .text-mono { font-family: monospace; } .text-bold { font-weight: 700; } .text-underline { text-decoration: underline !important; } .text-negative { color: var(--Error-Text) !important; } .text-white { color: #fff !important; } .text-center { text-align: center; } .text-left { text-align: left; } .text-no-wrap { white-space: nowrap; } /* ============================================================================= 7. ЦВЕТОВЫЕ УТИЛИТЫ ПО ТОКЕНАМ Источник генерирует тройку text-/bg-/border- для 49 из 55 токенов. БЕЗ утилит остались: --Special-Primary-02 и все пять --Badges-* — их можно применять только через var() в компонентных стилях. ============================================================================= */ .text-special-primary { color: var(--Special-Primary) !important; } .bg-special-primary { background: var(--Special-Primary) !important; } .border-special-primary { border: 1px solid var(--Special-Primary) !important; } .text-special-secondary { color: var(--Special-Secondary) !important; } .bg-special-secondary { background: var(--Special-Secondary) !important; } .border-special-secondary { border: 1px solid var(--Special-Secondary) !important; } .text-special-accent { color: var(--Special-Accent) !important; } .bg-special-accent { background: var(--Special-Accent) !important; } .border-special-accent { border: 1px solid var(--Special-Accent) !important; } .text-special-green { color: var(--Special-Green) !important; } .bg-special-green { background: var(--Special-Green) !important; } .border-special-green { border: 1px solid var(--Special-Green) !important; } .text-special-yellow { color: var(--Special-Yellow) !important; } .bg-special-yellow { background: var(--Special-Yellow) !important; } .border-special-yellow { border: 1px solid var(--Special-Yellow) !important; } .text-special-white { color: var(--Special-White) !important; } .bg-special-white { background: var(--Special-White) !important; } .border-special-white { border: 1px solid var(--Special-White) !important; } .text-special-black { color: var(--Special-Black) !important; } .bg-special-black { background: var(--Special-Black) !important; } .border-special-black { border: 1px solid var(--Special-Black) !important; } .text-special-blue { color: var(--Special-Blue) !important; } .bg-special-blue { background: var(--Special-Blue) !important; } .border-special-blue { border: 1px solid var(--Special-Blue) !important; } .text-special-telegram { color: var(--Special-Telegram) !important; } .bg-special-telegram { background: var(--Special-Telegram) !important; } .border-special-telegram { border: 1px solid var(--Special-Telegram) !important; } .text-special-verified { color: var(--Special-Verified) !important; } .bg-special-verified { background: var(--Special-Verified) !important; } .border-special-verified { border: 1px solid var(--Special-Verified) !important; } .text-special-polee { color: var(--Special-Polee) !important; } .bg-special-polee { background: var(--Special-Polee) !important; } .border-special-polee { border: 1px solid var(--Special-Polee) !important; } .text-special-dark-blue { color: var(--Special-Dark-Blue) !important; } .bg-special-dark-blue { background: var(--Special-Dark-Blue) !important; } .border-special-dark-blue { border: 1px solid var(--Special-Dark-Blue) !important; } .text-special-light-yellow { color: var(--Special-Light-Yellow) !important; } .bg-special-light-yellow { background: var(--Special-Light-Yellow) !important; } .border-special-light-yellow { border: 1px solid var(--Special-Light-Yellow) !important; } .text-special-gold { color: var(--Special-Gold) !important; } .bg-special-gold { background: var(--Special-Gold) !important; } .border-special-gold { border: 1px solid var(--Special-Gold) !important; } .text-special-gold-light { color: var(--Special-Gold-Light) !important; } .bg-special-gold-light { background: var(--Special-Gold-Light) !important; } .border-special-gold-light { border: 1px solid var(--Special-Gold-Light) !important; } .text-special-gold-dark { color: var(--Special-Gold-Dark) !important; } .bg-special-gold-dark { background: var(--Special-Gold-Dark) !important; } .border-special-gold-dark { border: 1px solid var(--Special-Gold-Dark) !important; } .text-background-bg { color: var(--Background-BG) !important; } .bg-background-bg { background: var(--Background-BG) !important; } .border-background-bg { border: 1px solid var(--Background-BG) !important; } .text-background-black { color: var(--Background-Black) !important; } .bg-background-black { background: var(--Background-Black) !important; } .border-background-black { border: 1px solid var(--Background-Black) !important; } .text-background-layer1 { color: var(--Background-Layer1) !important; } .bg-background-layer1 { background: var(--Background-Layer1) !important; } .border-background-layer1 { border: 1px solid var(--Background-Layer1) !important; } .text-background-layer2 { color: var(--Background-Layer2) !important; } .bg-background-layer2 { background: var(--Background-Layer2) !important; } .border-background-layer2 { border: 1px solid var(--Background-Layer2) !important; } .text-background-layer3 { color: var(--Background-Layer3) !important; } .bg-background-layer3 { background: var(--Background-Layer3) !important; } .border-background-layer3 { border: 1px solid var(--Background-Layer3) !important; } .text-elements-light-gray { color: var(--Elements-Light-Gray) !important; } .bg-elements-light-gray { background: var(--Elements-Light-Gray) !important; } .border-elements-light-gray { border: 1px solid var(--Elements-Light-Gray) !important; } .text-elements-gray { color: var(--Elements-Gray) !important; } .bg-elements-gray { background: var(--Elements-Gray) !important; } .border-elements-gray { border: 1px solid var(--Elements-Gray) !important; } .text-elements-white { color: var(--Elements-White) !important; } .bg-elements-white { background: var(--Elements-White) !important; } .border-elements-white { border: 1px solid var(--Elements-White) !important; } .text-elements-dark-gray { color: var(--Elements-Dark-Gray) !important; } .bg-elements-dark-gray { background: var(--Elements-Dark-Gray) !important; } .border-elements-dark-gray { border: 1px solid var(--Elements-Dark-Gray) !important; } .text-elements-dark-blue { color: var(--Elements-Dark-Blue) !important; } .bg-elements-dark-blue { background: var(--Elements-Dark-Blue) !important; } .border-elements-dark-blue { border: 1px solid var(--Elements-Dark-Blue) !important; } .text-text-primary { color: var(--Text-Primary) !important; } .bg-text-primary { background: var(--Text-Primary) !important; } .border-text-primary { border: 1px solid var(--Text-Primary) !important; } .text-text-secondary { color: var(--Text-Secondary) !important; } .bg-text-secondary { background: var(--Text-Secondary) !important; } .border-text-secondary { border: 1px solid var(--Text-Secondary) !important; } .text-text-tertiary { color: var(--Text-Tertiary) !important; } .bg-text-tertiary { background: var(--Text-Tertiary) !important; } .border-text-tertiary { border: 1px solid var(--Text-Tertiary) !important; } .text-text-inverse { color: var(--Text-Inverse) !important; } .bg-text-inverse { background: var(--Text-Inverse) !important; } .border-text-inverse { border: 1px solid var(--Text-Inverse) !important; } .text-text-link { color: var(--Text-Link) !important; } .bg-text-link { background: var(--Text-Link) !important; } .border-text-link { border: 1px solid var(--Text-Link) !important; } .text-border-primary { color: var(--Border-Primary) !important; } .bg-border-primary { background: var(--Border-Primary) !important; } .border-border-primary { border: 1px solid var(--Border-Primary) !important; } .text-border-secondary { color: var(--Border-Secondary) !important; } .bg-border-secondary { background: var(--Border-Secondary) !important; } .border-border-secondary { border: 1px solid var(--Border-Secondary) !important; } .text-border-black { color: var(--Border-Black) !important; } .bg-border-black { background: var(--Border-Black) !important; } .border-border-black { border: 1px solid var(--Border-Black) !important; } .text-icon-primary { color: var(--Icon-Primary) !important; } .bg-icon-primary { background: var(--Icon-Primary) !important; } .border-icon-primary { border: 1px solid var(--Icon-Primary) !important; } .text-icon-secondary { color: var(--Icon-Secondary) !important; } .bg-icon-secondary { background: var(--Icon-Secondary) !important; } .border-icon-secondary { border: 1px solid var(--Icon-Secondary) !important; } .text-icon-inverse { color: var(--Icon-Inverse) !important; } .bg-icon-inverse { background: var(--Icon-Inverse) !important; } .border-icon-inverse { border: 1px solid var(--Icon-Inverse) !important; } .text-error-back { color: var(--Error-Back) !important; } .bg-error-back { background: var(--Error-Back) !important; } .border-error-back { border: 1px solid var(--Error-Back) !important; } .text-error-text { color: var(--Error-Text) !important; } .bg-error-text { background: var(--Error-Text) !important; } .border-error-text { border: 1px solid var(--Error-Text) !important; } .text-info-back { color: var(--Info-Back) !important; } .bg-info-back { background: var(--Info-Back) !important; } .border-info-back { border: 1px solid var(--Info-Back) !important; } .text-warning-back { color: var(--Warning-Back) !important; } .bg-warning-back { background: var(--Warning-Back) !important; } .border-warning-back { border: 1px solid var(--Warning-Back) !important; } .text-states-error--hover { color: var(--States-Error--Hover) !important; } .bg-states-error--hover { background: var(--States-Error--Hover) !important; } .border-states-error--hover { border: 1px solid var(--States-Error--Hover) !important; } .text-states-primary--pressed { color: var(--States-Primary--Pressed) !important; } .bg-states-primary--pressed { background: var(--States-Primary--Pressed) !important; } .border-states-primary--pressed { border: 1px solid var(--States-Primary--Pressed) !important; } .text-states-secondary--pressed { color: var(--States-Secondary--Pressed) !important; } .bg-states-secondary--pressed { background: var(--States-Secondary--Pressed) !important; } .border-states-secondary--pressed { border: 1px solid var(--States-Secondary--Pressed) !important; } .text-states-accent--pressed { color: var(--States-Accent--Pressed) !important; } .bg-states-accent--pressed { background: var(--States-Accent--Pressed) !important; } .border-states-accent--pressed { border: 1px solid var(--States-Accent--Pressed) !important; } .text-states-green--pressed { color: var(--States-Green--Pressed) !important; } .bg-states-green--pressed { background: var(--States-Green--Pressed) !important; } .border-states-green--pressed { border: 1px solid var(--States-Green--Pressed) !important; } .text-states-yellow--pressed { color: var(--States-Yellow--Pressed) !important; } .bg-states-yellow--pressed { background: var(--States-Yellow--Pressed) !important; } .border-states-yellow--pressed { border: 1px solid var(--States-Yellow--Pressed) !important; } .text-states-white--pressed { color: var(--States-White--Pressed) !important; } .bg-states-white--pressed { background: var(--States-White--Pressed) !important; } .border-states-white--pressed { border: 1px solid var(--States-White--Pressed) !important; } .text-states-black--pressed { color: var(--States-Black--Pressed) !important; } .bg-states-black--pressed { background: var(--States-Black--Pressed) !important; } .border-states-black--pressed { border: 1px solid var(--States-Black--Pressed) !important; } /* Прочие фоновые утилиты источника (не из токенов) */ .bg-semi-transparent { background-color: #00000080 !important; } /* чёрный 50% прозрачности */ .bg-80-transparent { background-color: #000c !important; } /* чёрный 80% прозрачности */ .border-radius-inherit { border-radius: inherit; } /* ============================================================================= 8. FLEX / GRID / GAP / ОТСТУПЫ / ПОЗИЦИОНИРОВАНИЕ Взято из Quasar, но только то, что реально встречается в разметке источника. Частоты по сохранённым страницам: row 1025, items-center 766, gap-4 739, no-wrap 585, ellipsis 369, comma-separated 280, col 262, justify-center 258, q-mt-sm 301, q-mr-sm 254, flex 155, rounded 154, full-width 125. ============================================================================= */ .row, .column, .flex { display: flex; flex-wrap: wrap; } .row.inline, .column.inline, .flex.inline { display: inline-flex; } .row.reverse { flex-direction: row-reverse; } .column { flex-direction: column; } .column.reverse { flex-direction: column-reverse; } .no-wrap { flex-wrap: nowrap; } .wrap-reverse { flex-wrap: wrap-reverse; } .items-start { align-items: flex-start; } .items-center { align-items: center; } .items-end { align-items: flex-end; } .self-center { align-self: center; } .justify-start { justify-content: flex-start; } .justify-center { justify-content: center; } .justify-end { justify-content: flex-end; } .justify-between { justify-content: space-between; } /* flex-center = justify-content:center + align-items:center */ .flex-center { justify-content: center; align-items: center; } .flex-grow { flex-grow: 1; } .block { display: block !important; } .full-width { width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } .full-height { height: 100% !important; } /* .col внутри .row / .column / .flex: растягивается, но не ломает сетку */ .row > .col, .column > .col, .flex > .col { min-width: 0; max-width: 100%; min-height: 0; max-height: 100%; } .row > .col, .flex > .col { width: auto; } .column > .col { height: auto; } .col { flex: 10000; } /* gap-N: в источнике сгенерировано N = 0…100 с шагом 1px. Оставляем весь набор — иначе «gap-7» из шаблона молча схлопнется. */ .gap-0 { gap: 0px; } .gap-1 { gap: 1px; } .gap-2 { gap: 2px; } .gap-3 { gap: 3px; } .gap-4 { gap: 4px; } .gap-5 { gap: 5px; } .gap-6 { gap: 6px; } .gap-7 { gap: 7px; } .gap-8 { gap: 8px; } .gap-9 { gap: 9px; } .gap-10 { gap: 10px; } .gap-11 { gap: 11px; } .gap-12 { gap: 12px; } .gap-13 { gap: 13px; } .gap-14 { gap: 14px; } .gap-15 { gap: 15px; } .gap-16 { gap: 16px; } .gap-17 { gap: 17px; } .gap-18 { gap: 18px; } .gap-19 { gap: 19px; } .gap-20 { gap: 20px; } .gap-21 { gap: 21px; } .gap-22 { gap: 22px; } .gap-23 { gap: 23px; } .gap-24 { gap: 24px; } .gap-25 { gap: 25px; } .gap-26 { gap: 26px; } .gap-27 { gap: 27px; } .gap-28 { gap: 28px; } .gap-29 { gap: 29px; } .gap-30 { gap: 30px; } .gap-31 { gap: 31px; } .gap-32 { gap: 32px; } .gap-33 { gap: 33px; } .gap-34 { gap: 34px; } .gap-35 { gap: 35px; } .gap-36 { gap: 36px; } .gap-37 { gap: 37px; } .gap-38 { gap: 38px; } .gap-39 { gap: 39px; } .gap-40 { gap: 40px; } .gap-41 { gap: 41px; } .gap-42 { gap: 42px; } .gap-43 { gap: 43px; } .gap-44 { gap: 44px; } .gap-45 { gap: 45px; } .gap-46 { gap: 46px; } .gap-47 { gap: 47px; } .gap-48 { gap: 48px; } .gap-49 { gap: 49px; } .gap-50 { gap: 50px; } .gap-51 { gap: 51px; } .gap-52 { gap: 52px; } .gap-53 { gap: 53px; } .gap-54 { gap: 54px; } .gap-55 { gap: 55px; } .gap-56 { gap: 56px; } .gap-57 { gap: 57px; } .gap-58 { gap: 58px; } .gap-59 { gap: 59px; } .gap-60 { gap: 60px; } .gap-61 { gap: 61px; } .gap-62 { gap: 62px; } .gap-63 { gap: 63px; } .gap-64 { gap: 64px; } .gap-65 { gap: 65px; } .gap-66 { gap: 66px; } .gap-67 { gap: 67px; } .gap-68 { gap: 68px; } .gap-69 { gap: 69px; } .gap-70 { gap: 70px; } .gap-71 { gap: 71px; } .gap-72 { gap: 72px; } .gap-73 { gap: 73px; } .gap-74 { gap: 74px; } .gap-75 { gap: 75px; } .gap-76 { gap: 76px; } .gap-77 { gap: 77px; } .gap-78 { gap: 78px; } .gap-79 { gap: 79px; } .gap-80 { gap: 80px; } .gap-81 { gap: 81px; } .gap-82 { gap: 82px; } .gap-83 { gap: 83px; } .gap-84 { gap: 84px; } .gap-85 { gap: 85px; } .gap-86 { gap: 86px; } .gap-87 { gap: 87px; } .gap-88 { gap: 88px; } .gap-89 { gap: 89px; } .gap-90 { gap: 90px; } .gap-91 { gap: 91px; } .gap-92 { gap: 92px; } .gap-93 { gap: 93px; } .gap-94 { gap: 94px; } .gap-95 { gap: 95px; } .gap-96 { gap: 96px; } .gap-97 { gap: 97px; } .gap-98 { gap: 98px; } .gap-99 { gap: 99px; } .gap-100 { gap: 100px; } /* Отступы q-*: none 0 | xs 4 | sm 8 | md 16 | lg 24 | xl 48 */ .q-pa-none { padding: 0; } .q-pt-none { padding-top: 0; } .q-pr-none { padding-right: 0; } .q-pb-none { padding-bottom: 0; } .q-pl-none { padding-left: 0; } .q-px-none { padding-left: 0; padding-right: 0; } .q-py-none { padding-top: 0; padding-bottom: 0; } .q-ma-none { margin: 0; } .q-mt-none { margin-top: 0; } .q-mr-none { margin-right: 0; } .q-mb-none { margin-bottom: 0; } .q-ml-none { margin-left: 0; } .q-mx-none { margin-left: 0; margin-right: 0; } .q-my-none { margin-top: 0; margin-bottom: 0; } .q-pa-xs { padding: 4px; } .q-pt-xs { padding-top: 4px; } .q-pr-xs { padding-right: 4px; } .q-pb-xs { padding-bottom: 4px; } .q-pl-xs { padding-left: 4px; } .q-px-xs { padding-left: 4px; padding-right: 4px; } .q-py-xs { padding-top: 4px; padding-bottom: 4px; } .q-ma-xs { margin: 4px; } .q-mt-xs { margin-top: 4px; } .q-mr-xs { margin-right: 4px; } .q-mb-xs { margin-bottom: 4px; } .q-ml-xs { margin-left: 4px; } .q-mx-xs { margin-left: 4px; margin-right: 4px; } .q-my-xs { margin-top: 4px; margin-bottom: 4px; } .q-pa-sm { padding: 8px; } .q-pt-sm { padding-top: 8px; } .q-pr-sm { padding-right: 8px; } .q-pb-sm { padding-bottom: 8px; } .q-pl-sm { padding-left: 8px; } .q-px-sm { padding-left: 8px; padding-right: 8px; } .q-py-sm { padding-top: 8px; padding-bottom: 8px; } .q-ma-sm { margin: 8px; } .q-mt-sm { margin-top: 8px; } .q-mr-sm { margin-right: 8px; } .q-mb-sm { margin-bottom: 8px; } .q-ml-sm { margin-left: 8px; } .q-mx-sm { margin-left: 8px; margin-right: 8px; } .q-my-sm { margin-top: 8px; margin-bottom: 8px; } .q-pa-md { padding: 16px; } .q-pt-md { padding-top: 16px; } .q-pr-md { padding-right: 16px; } .q-pb-md { padding-bottom: 16px; } .q-pl-md { padding-left: 16px; } .q-px-md { padding-left: 16px; padding-right: 16px; } .q-py-md { padding-top: 16px; padding-bottom: 16px; } .q-ma-md { margin: 16px; } .q-mt-md { margin-top: 16px; } .q-mr-md { margin-right: 16px; } .q-mb-md { margin-bottom: 16px; } .q-ml-md { margin-left: 16px; } .q-mx-md { margin-left: 16px; margin-right: 16px; } .q-my-md { margin-top: 16px; margin-bottom: 16px; } .q-pa-lg { padding: 24px; } .q-pt-lg { padding-top: 24px; } .q-pr-lg { padding-right: 24px; } .q-pb-lg { padding-bottom: 24px; } .q-pl-lg { padding-left: 24px; } .q-px-lg { padding-left: 24px; padding-right: 24px; } .q-py-lg { padding-top: 24px; padding-bottom: 24px; } .q-ma-lg { margin: 24px; } .q-mt-lg { margin-top: 24px; } .q-mr-lg { margin-right: 24px; } .q-mb-lg { margin-bottom: 24px; } .q-ml-lg { margin-left: 24px; } .q-mx-lg { margin-left: 24px; margin-right: 24px; } .q-my-lg { margin-top: 24px; margin-bottom: 24px; } .q-pa-xl { padding: 48px; } .q-pt-xl { padding-top: 48px; } .q-pr-xl { padding-right: 48px; } .q-pb-xl { padding-bottom: 48px; } .q-pl-xl { padding-left: 48px; } .q-px-xl { padding-left: 48px; padding-right: 48px; } .q-py-xl { padding-top: 48px; padding-bottom: 48px; } .q-ma-xl { margin: 48px; } .q-mt-xl { margin-top: 48px; } .q-mr-xl { margin-right: 48px; } .q-mb-xl { margin-bottom: 48px; } .q-ml-xl { margin-left: 48px; } .q-mx-xl { margin-left: 48px; margin-right: 48px; } .q-my-xl { margin-top: 48px; margin-bottom: 48px; } .q-ma-auto { margin: auto; } .q-mt-auto { margin-top: auto; } /* этим кнопка «Контакты» прижата к низу карточки */ .q-mr-auto { margin-right: auto; } .q-mb-auto { margin-bottom: auto; } .q-ml-auto { margin-left: auto; } .q-mx-auto { margin-left: auto; margin-right: auto; } .q-my-auto { margin-top: auto; margin-bottom: auto; } /* Позиционирование */ .relative-position { position: relative; } .absolute { position: absolute; } .absolute-full { position: absolute; top: 0; bottom: 0; left: 0; right: 0; } .absolute-top { position: absolute; top: 0; left: 0; right: 0; } .absolute-bottom { position: absolute; bottom: 0; left: 0; right: 0; } .absolute-top-left { position: absolute; top: 0; left: 0; } .absolute-top-right { position: absolute; top: 0; right: 0; } .absolute-bottom-left { position: absolute; bottom: 0; left: 0; } .absolute-bottom-right { position: absolute; bottom: 0; right: 0; } .fixed-bottom { position: fixed; bottom: 0; left: 0; right: 0; } .fixed-bottom-right { position: fixed; bottom: 0; right: 0; } .sticky { position: sticky; } .top-16 { top: 16px; } .height-40 { height: 40px; } /* Форма, радиусы */ .rounded, .rounded-8 { border-radius: 8px; } .rounded-4 { border-radius: 4px; } .rounded-16 { border-radius: 16px; } .round { border-radius: 50%; } .avatar { aspect-ratio: 1; border-radius: 50%; } .square { aspect-ratio: 1; } /* Обрезка и перенос текста */ .ellipsis { text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } .ellipsis-2-lines { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; } .ellipsis-4-lines { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; line-clamp: 4; overflow: hidden; } .overflow-hidden { overflow: hidden !important; } .overflow-word-wrap { overflow-wrap: anywhere; } .scroll { overflow: auto; -webkit-overflow-scrolling: touch; will-change: scroll-position; } /* comma-separated: перечисление через запятую БЕЗ запятых в разметке. Так собраны станции метро и значения свойств анкеты. */ .comma-separated > :after { content: ", "; } .comma-separated > :last-child:after { content: ""; } /* Мелочи */ .cursor-pointer { cursor: pointer !important; } .non-selectable { -webkit-user-select: none !important; user-select: none !important; } .blur-10 { filter: blur(10px); } .brightness-05 { filter: brightness(.5); } /* ============================================================================= 9. ВИДИМОСТЬ ПО БРЕЙКПОИНТАМ xs < 600 | sm 600-1023.98 | md 1024-1439.98 | lg 1440-1919.98 | xl >= 1920 В разметке источника реально встречаются gt-xs, gt-sm, lt-md. Остальные оставлены для полноты набора — они ничего не весят. ============================================================================= */ @media (max-width: 599.98px) { .xs-hide, .gt-xs, .sm, .gt-sm, .md, .gt-md, .lg, .gt-lg, .xl { display: none !important; } } @media (min-width: 600px) and (max-width: 1023.98px) { .sm-hide, .xs, .lt-sm, .gt-sm, .md, .gt-md, .lg, .gt-lg, .xl { display: none !important; } } @media (min-width: 1024px) and (max-width: 1439.98px) { .md-hide, .xs, .lt-sm, .sm, .lt-md, .gt-md, .lg, .gt-lg, .xl { display: none !important; } } @media (min-width: 1440px) and (max-width: 1919.98px) { .lg-hide, .xs, .lt-sm, .sm, .lt-md, .md, .lt-lg, .gt-lg, .xl { display: none !important; } } @media (min-width: 1920px) { .xl-hide, .xs, .lt-sm, .sm, .lt-md, .md, .lt-lg, .lg, .lt-xl { display: none !important; } } /* ============================================================================= 10. КАРКАС СТРАНИЦЫ Это и есть ответ на вопрос из ДИЗАЙН_ASHOO.md §7 «почему .page-content замерился как #242424 в светлой теме». Никакой это не глюк: внешняя обойма .page-area в СВЕТЛОЙ теме залита --Background-Black (#242424), а белый .content-area лежит на ней и скруглён сверху на 16px. В ТЁМНОЙ теме обойма перекрашивается в --Background-BG и «рамка» исчезает. Разметка источника: .q-page-container.row > .page-area.full-width > .content-area > main.q-page(.main | .main-listing …) ============================================================================= */ .page-area { background: var(--Background-Black); padding-bottom: 16px; } body.body--dark .page-area { background: var(--Background-BG); } .content-area { background: var(--Background-BG); border-top-left-radius: 16px; border-top-right-radius: 16px; padding-bottom: 16px; } /* .main — обычные страницы (анкета, салон, города). 1232px при >=1440. */ .main { width: var(--main-width) !important; padding-left: var(--main-screen-padding); padding-right: var(--main-screen-padding); margin-left: auto; margin-right: auto; } .main-padding { padding-left: var(--main-padding); padding-right: var(--main-padding); } /* Страховка: .main внутри .main — всегда ошибка разметки. Класс несёт width: var(--main-width) !important, то есть это обойма страницы; вложенная обойма форсит 1024px внутри 1008px и рвёт страницу горизонтальной прокруткой. Один такой случай уже был на главной (h1 внутри .row.main). */ .main .main { width: auto !important; padding-left: 0; padding-right: 0; margin-left: 0; margin-right: 0; } /* .main-listing — обойма каталога. Именно ОНА даёт 1200px при >=1440. В разметке источника класс висит на том же элементе, что и .persons-grid:
. */ @media (min-width: 1024px) { .main-listing { width: 1024px !important; padding-left: var(--main-padding); padding-right: var(--main-padding); margin-left: auto; margin-right: auto; } } @media (min-width: 1440px) { .main-listing { width: 1200px !important; padding-left: 0; padding-right: 0; margin-left: auto; margin-right: auto; } } @media (max-width: 1023.98px) { .main-listing { padding-left: var(--main-padding); padding-right: var(--main-padding); margin-left: auto; margin-right: auto; } } @media (max-width: 599.98px) { .main-listing { margin-left: 0; margin-right: 0; padding-left: 0; padding-right: 0; } } /* Правая колонка анкеты и хлебные крошки */ .page-content .left-content { height: fit-content; } @media (min-width: 600px) { .page-content .left-content > div.page-carousel { border-radius: 16px; } .page-content .left-content > div:not(.page-carousel):not(:first-child) { margin-top: 16px; } } .contact-sticky-block { display: flex; gap: 8px; } .contact-sticky-block > :first-child { flex-grow: 1; } .contact-sticky-block > :not(:first-child){ flex-shrink: 0; } /* ============================================================================= 11. МЕЛКИЕ СЛУЖЕБНЫЕ КЛАССЫ ИСТОЧНИКА Все встречаются в сохранённой разметке; без них вёрстка «рассыпается». ============================================================================= */ /* Хлебные крошки: разделитель-точка между звеньями */ .bc-list > div:not(:last-child):after { content: "•"; color: var(--Text-Secondary); letter-spacing: 0; font-size: var(--font-size-label-m, 12px); font-weight: var(--Font-Weight-Regular, 400); line-height: var(--line-height-label-m, 16px); } .breadcrumbs { height: 32px; } /* Раскрывающиеся блоки на странице анкеты */ .expansion-title { letter-spacing: 0; font-size: var(--Font-Size-H2, 20px); font-weight: var(--Font-Weight-Bold, 700); line-height: var(--Line-Height-H2, 24px); } .expansion-block { border: 1px solid var(--Border-Secondary); border-radius: 16px; padding: 16px; } @media (max-width: 599.98px) { .expansion-block { border: unset; border-radius: unset; padding-left: unset; padding-right: unset; } } .expansion-block-mobile { border: unset; border-radius: unset; padding: unset; } /* Подвал с SEO-текстом и сетка перелинковки */ .seo-footer { color: var(--Text-Secondary); letter-spacing: 0; font-size: var(--Font-Size-Body-Small, 14px); font-weight: var(--Font-Weight-Regular, 400); line-height: var(--Line-Height-Body-Small, 16px); } .seo-footer h3 { color: var(--Text-Primary); } .seo-footer a, .seo-footer li a { color: var(--Text-Secondary); } .seo-footer > p:last-child{ margin-bottom: 0; } .all-seo-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px 12px; } @media (max-width: 1023.98px) { .all-seo-grid { grid-template-columns: repeat(2, 1fr); } } /* Текст описания анкеты */ .html-content a { color: var(--Text-Link); text-decoration: underline !important; } /* Иконки-пометки поверх галереи */ .top-health-icons { display: flex; flex-flow: column; align-items: flex-start; gap: 4px; background-color: unset; } .top-health-icons > img { width: auto; height: 20px; } /* Разделитель-полоска, видимая только на мобильном */ .mobile-delimiter { display: inline-block; height: 8px; background: var(--Elements-Light-Gray); } @media (min-width: 600px) { .mobile-delimiter { display: none; } } /* Блок «во всю ширину экрана» на мобильном: вылезает за 16px-паддинги родителя */ @media (max-width: 599.98px) { .screen-width:not(.fullscreen), .mobile-delimiter:not(.fullscreen) { width: calc(100% + 32px) !important; margin-left: -16px !important; margin-right: -16px !important; border-radius: 0 !important; } } /* Точка-разделитель в строке параметров («37 лет · 170 см») */ div.dot { width: 3px; height: 3px; border-radius: 50%; background: var(--Text-Secondary); } /* Светлая рамка-карточка. Атрибутные селекторы источника, повторяем как есть. */ [lightborder] { border: 1px solid var(--Border-Secondary); background: var(--Background-Layer1); } body.body--dark [lightborder] { background: var(--Background-Layer1); border: none; } @media (max-width: 1023.98px) { body.body--dark [lightborder][squaremobile] { background: var(--Background-BG); } [squaremobile] { border: none; border-radius: 0 !important; } } /* Контейнер инлайнового SVG-спрайта иконок услуг. Спрайт обязан лежать ВНУТРИ разметки: у источника прямо в коде оставлено пояснение, что внешняя ссылка в WebKit/iOS не отрисует градиентные заливки. */ .h-icon-sprite { width: 0; height: 0; position: absolute; overflow: hidden; } /* Подсказка */ .q-tooltip { background: var(--Special-Primary); color: var(--Special-White); box-shadow: none; border-radius: 4px; padding: 4px 8px; }