/* Точка входу стилів і єдине місце, де оголошено, що за чим іде. Кроку збірки в деплої немає й тут: цей файл читає сам застосунок на старті й підставляє замість кожного @import вміст названого файлу, загорнутий у його шар (shared/assets.py). Для каскаду це те саме — @import ... layer(X) і @layer X { … } рівносильні за специфікацією. Для браузера різниця велика: доти він дізнавався про ці тридцять файлів лише розібравши цей, тобто перше малювання сторінки чекало два оберти по мережі замість одного. Правити тут і в сусідніх файлах — як і раніше; ASSETS_CACHE=false у .env перескладає все на кожен запит, тож локально нічого не змінилось. Порядок шарів нижче ВАЖЛИВІШИЙ за специфічність: правило з пізнішого шару виграє в правила з ранішого, хай яким «сильним» той селектор був. Завдяки цьому в проєкті майже немає !important і немає гонки селекторів. Хто де: rhythm — вертикальні відступи МІЖ блоками сторінки (мусить стояти після components, бо гасить власні margin компонентів), service — інлайнові стилі конкретного сервіса, utilities — точкові класи-виправлення. */ @layer reset, tokens, base, layout, components, rhythm, service, utilities; @layer reset { /* 00-reset.css */ /* Мінімальний ресет — лише те, без чого дефолти браузера справді заважають. Свідомо не «обнуляємо все»: типографіку й відступи задає 20-base.css. */ *, *::before, *::after { box-sizing: border-box; } /* Атрибут hidden має вимикати елемент незалежно від того, який display йому задав компонентний клас. Без цього правила будь-який .hint чи .badge із власним display перебиває стиль браузера й лишається на видноті — саме через це підказка про Caps Lock висіла на сторінці входу завжди. !important тут не «сильніший селектор», а перемикач порядку шарів: для важливих оголошень шари рахуються у зворотному порядку, тож reset — найраніший у списку — б'є і components, і utilities. Єдине місце в проєкті, де це доречно: правило має діяти скрізь і без винятків. */ [hidden] { display: none !important; } /* display:block прибирає «зайвий» відступ під картинкою від рядкового потоку, max-width не дає їй вилізти за контейнер. */ img, svg, video, canvas { display: block; max-width: 100%; } /* Поля форм не успадковують шрифт від сторінки самі — доводиться просити. */ input, button, textarea, select { font: inherit; color: inherit; } table { border-collapse: collapse; } } @layer tokens { /* 10-tokens.css */ /* Токени дизайн-системи — єдине місце, де задаються кольори, відступи й розміри. Далі всі компоненти беруть готові змінні й не рахують нічого самі. Дві ідеї, на яких усе тримається: 1. Кольори виводяться з ВІДТІНКУ (hue), а не задаються поштучно. Одне число --h-accent → і вся акцентна гама сторінки перерахувалась. Саме тому сервіс отримує свій колір одним рядком у registry.py. 2. Світла й темна теми живуть в одному оголошенні через light-dark(). Ніяких дублів на кожен колір і жодного окремого «темного файлу». Перемикає їх color-scheme нижче. */ :root { /* Обидві теми доступні; фактичну обирає data-theme або система. */ color-scheme: light dark; --h-brand: 265; /* Відтінки станів. Вибрані так, щоб читались і на світлому, і на темному. */ --h-ok: 150; --h-warn: 75; --h-fail: 25; --h-info: 230; /* Акцент сторінки. Дефолт — брендовий, але base.html перебиває його інлайном на , підставляючи hue поточного сервісу. */ --h-accent: var(--h-brand); /* Поверхні: bg — тло сторінки, далі за зростанням «підняття». Легка домішка brand-відтінку не дає сірому виглядати брудним. Світла тема: тло НЕ біле (.977), а картки — білі. Різниця в 2-3% світлоти й дає те «підняття», заради якого раніше довелося б малювати рамку. Коли тло було .985, картка від нього майже не відрізнялась, і межу тримала сама рамка — звідси й відчуття креслення, а не інтерфейсу. Темна тема: тло опущене до .152 — глибше, але це не чорний. Чистий чорний на OLED дає різкий обрив на межі з карткою, а домішка brand- відтінку лишає темряву кольоровою (slate), а не сірою. Крок між сусідніми поверхнями всюди ~.036 — рівний, тож три рівні підняття читаються однаково і в світлій, і в темній. */ --bg: light-dark(oklch(.977 .004 var(--h-brand)), oklch(.152 .016 var(--h-brand))); --surface: light-dark(oklch(1 0 0), oklch(.196 .019 var(--h-brand))); --surface-2: light-dark(oklch(.972 .005 var(--h-brand)), oklch(.232 .021 var(--h-brand))); --surface-3: light-dark(oklch(.949 .007 var(--h-brand)), oklch(.272 .023 var(--h-brand))); /* Текст: ink — основний, muted — другорядний, subtle — ледь помітний. У темній темі порядок muted/subtle за світлістю навмисно перевернутий: там «тихіший» означає темніший, а не світліший. */ --ink: light-dark(oklch(.250 .020 var(--h-brand)), oklch(.940 .008 var(--h-brand))); --ink-muted: light-dark(oklch(.550 .020 var(--h-brand)), oklch(.680 .020 var(--h-brand))); --ink-subtle: light-dark(oklch(.680 .015 var(--h-brand)), oklch(.550 .018 var(--h-brand))); /* Рамки навмисно послаблені: межу коробки тепер тримає різниця поверхонь і тінь, а рамка лише окреслює її на випадок, коли тіні не видно (друк, forced-colors, поверхня на поверхні того ж рівня). Раніше .910/.300 робили з неї головну лінію інтерфейсу — звідси й «різкість», з якою сітка карток читалась як таблиця. */ --border: light-dark(oklch(.922 .006 var(--h-brand)), oklch(.282 .019 var(--h-brand))); --border-strong: light-dark(oklch(.862 .010 var(--h-brand)), oklch(.358 .023 var(--h-brand))); --brand: light-dark(oklch(.550 .20 var(--h-brand)), oklch(.700 .16 var(--h-brand))); --brand-ink: light-dark(oklch(1 0 0), oklch(.170 .02 var(--h-brand))); /* Похідні від --brand через color-mix: підмішування до поверхні. Пари hover/active тут більше немає. Вона існувала під заливку головної кнопки, а кнопка тепер фарбується акцентом сервісу, і ті два токени лишились оголошеними без жодного використання. Брендові лишаються рівно ті, що справді потрібні: soft — підкладка (фокус поля, ::selection), line — рамка. ЗМІШУЄМО В oklab, А НЕ В oklch — і це не стильова дрібниця, а умова того, щоб домішка взагалі зберігала свій колір. oklch полярний: у ньому колір це світлота, насиченість і КУТ відтінку. Змішуючи, браузер інтерполює всі три — зокрема кут. А біла поверхня (oklch(1 0 0)) має кут 0, бо в безбарвного кольору відтінку немає й формально він нульовий. Тому «12% зеленого (150°) на білому» давало 0.12 × 150 = 18° — рожевий. Так само шапка таблиці з 7% синього акценту (265°) виходила рожевою на 18°. oklab прямокутний: ті самі кольори, але в осях «зелений↔червоний» і «синій↔жовтий», де в білого просто нулі. Домішка зменшує насиченість, не обертаючи відтінок, — тобто робить рівно те, чого від неї й чекають. Правило просте: підмішуємо до поверхні, рамки чи прозорого — oklab. oklch лишається там, де колір ОГОЛОШУЄТЬСЯ (усі рядки з oklch(...) вище й нижче): задавати колір відтінком зручно, обертати відтінок при змішуванні — ні. */ --brand-soft: color-mix(in oklab, var(--brand) 12%, var(--surface)); --brand-line: color-mix(in oklab, var(--brand) 35%, var(--border)); --focus-offset: 2px; /* Стани — одна трійка на кожен: ink (текст/іконка), bg (тло), line (рамка). Пропорції домішування скрізь однакові, тож алерти, бейджі й рядки таблиць виглядають як одна сім'я. */ --ok-ink: light-dark(oklch(.450 .13 var(--h-ok)), oklch(.800 .14 var(--h-ok))); --ok-bg: color-mix(in oklab, var(--ok-ink) 12%, var(--surface)); --ok-line: color-mix(in oklab, var(--ok-ink) 32%, var(--border)); --warn-ink: light-dark(oklch(.500 .12 var(--h-warn)), oklch(.820 .14 var(--h-warn))); --warn-bg: color-mix(in oklab, var(--warn-ink) 12%, var(--surface)); --warn-line: color-mix(in oklab, var(--warn-ink) 32%, var(--border)); --fail-ink: light-dark(oklch(.500 .18 var(--h-fail)), oklch(.780 .15 var(--h-fail))); --fail-bg: color-mix(in oklab, var(--fail-ink) 12%, var(--surface)); --fail-line: color-mix(in oklab, var(--fail-ink) 32%, var(--border)); --info-ink: light-dark(oklch(.500 .15 var(--h-info)), oklch(.800 .13 var(--h-info))); --info-bg: color-mix(in oklab, var(--info-ink) 12%, var(--surface)); --info-line: color-mix(in oklab, var(--info-ink) 32%, var(--border)); } /* АКЦЕНТ ОГОЛОШЕНИЙ НА , А НЕ НА :root — І ЦЕ ОБОВ'ЯЗКОВО. Обчислене значення власної властивості — це її текст із УЖЕ підставленими var(). Підстановка відбувається на тому елементі, де властивість ОГОЛОШЕНО, і далі вниз іде вже готове число. Тому --accent, що стояв тут-таки в :root, назавжди забирав собі --h-accent із :root, тобто брендові 265. Інлайновий hue сервісу, який base.html пише на , не змінював його ніколи: до моменту, коли браузер дійде до , у --accent уже вписано 265. Наслідок було видно неозброєним оком: смужка в шапці кожного сервісу мала однаковий фіолетовий колір, хоч у реєстрі в кожного свій. Працювали лише --tile-accent і --side-accent — саме тому, що оголошені на самій плитці й на самому посиланні, поруч зі своїм інлайновим hue. Оголошення на body ставить підстановку туди, де hue вже відомий. На сторінках входу й 403 інлайнового hue немає — там body успадкує --h-accent із :root, тобто брендовий, як і має бути. Набір навмисно повний — дзеркало брендового вище. Доти акцент умів рівно три речі (смужка в шапці, смужка плитки, рамка врізки); тепер у ньому головна кнопка, фокус, шапка таблиці й підсвітка рядка. */ body { --accent: light-dark(oklch(.550 .20 var(--h-accent)), oklch(.700 .16 var(--h-accent))); --accent-ink: light-dark(oklch(1 0 0), oklch(.170 .02 var(--h-accent))); /* Акцент під СУЦІЛЬНУ ЗАЛИВКУ з текстом на ній — головна кнопка. У світлій темі він на пів кроку темніший за звичайний (.50 проти .55), і це не смак, а порахована межа. Річ у тім, що акцент у кожного сервісу свій, а контраст білого тексту залежить від відтінку: при .55 фіолетовий (265°) дає 5.1, а бірюзовий (185°) — 3.83, тобто нижче за AA. Доки кнопка була брендовою, цього не було видно: 265° проходив, і питання не стояло. Щойно кнопка взяла колір сервісу, найгірший відтінок став реальним — і саме він задає число. .50 — найсвітліше, при якому AA (4.5) тримається на ВСІХ 360 відтінках, а не лише на тих восьми, що є в реєстрі сьогодні. Найгірший випадок там 4.68. У темній лишається .70: текст на кнопці там темний (--accent-ink), і затемнювати тло означало б зменшувати контраст, а не збільшувати. Звідси й вузьке вікно затемнення в самій кнопці — 88-100%: нижче за 88% темна тема провалює AA рівно з тієї ж причини. */ --accent-solid: light-dark(oklch(.500 .20 var(--h-accent)), oklch(.700 .16 var(--h-accent))); /* Дві сходинки затемнення заливки — під стани кнопки. Числа живуть тут, а не в button.css, бо вони не про кнопку, а про ту саму межу контрасту: 88% — найтемніше, при якому темна тема ще тримає AA (там текст на кнопці темний, і затемнення тла зближує їх, а не розводить). Домішуємо чорний, а не --ink: --ink у темній темі майже білий, і та сама формула освітлювала б кнопку замість затемнювати. Стан «натиснуто» має виглядати однаково в обох темах, тож і точка, до якої йдемо, мусить бути однакова. */ --accent-hover: color-mix(in oklab, var(--accent-solid) 92%, black); --accent-active: color-mix(in oklab, var(--accent-solid) 88%, black); --accent-soft: color-mix(in oklab, var(--accent) 12%, var(--surface)); --accent-line: color-mix(in oklab, var(--accent) 40%, var(--border)); /* Ледь помітна плівка кольору сервісу — під шапку сторінки, шапку таблиці, рядок під курсором. 7% домішки до поверхні: достатньо, щоб око побачило кольорову область, і замало, щоб текст на ній втратив контраст. Саме тому одне значення працює і в світлій, і в темній: у color-mix підмішується та поверхня, яка зараз чинна. */ --accent-wash: color-mix(in oklab, var(--accent) 7%, var(--surface)); --accent-wash-2: color-mix(in oklab, var(--accent) 14%, var(--surface)); /* Фокус переїхав із бренду на акцент — щоб обведення збігалося з рештою кольору сторінки. Живе тут, а не в :root, з тієї ж причини, що й решта блока: він посилається на --accent, і в :root той ще не існує. Ширина та сама: фокус це доступність, а не оздоба, і худнути йому нема з чого. */ --focus-ring: 2px solid var(--accent); } /* Решта токенів акценту не потребує, тож лишається на :root — там, де їй і місце: розміри, шрифти й тіні однакові для всієї сторінки, включно з тим, що лежить поза . */ :root { /* Один множник на всю сітку відступів: змінивши --density, можна згустити чи розрідити інтерфейс цілком, не чіпаючи компоненти. */ --density: 1; /* Півкроку. Потрібен рідко — там, де рядок списку має «дихати», але вже не поміщається в повний крок: стрічка кампаній, фішка в клітинці календаря. Окремим токеном, а не 2px у стилі сервісу, — інакше він перестає стискатись разом із рештою при зміні --density. */ --s-0: calc(2px * var(--density)); --s-1: calc(4px * var(--density)); --s-2: calc(8px * var(--density)); --s-3: calc(12px * var(--density)); --s-4: calc(16px * var(--density)); --s-5: calc(24px * var(--density)); --s-6: calc(32px * var(--density)); --s-7: calc(48px * var(--density)); --s-8: calc(64px * var(--density)); /* Розміри тексту в rem — щоб масштаб шрифту в налаштуваннях браузера працював як має. */ --t-xs: 0.6875rem; --t-sm: 0.75rem; --t-cmp: 0.8125rem; --t-md: 0.9375rem; --t-lg: 1.0625rem; --t-xl: 1.3125rem; --t-2xl: 1.6875rem; /* Системні шрифти: жодного веб-шрифту, тобто нуль зовнішніх запитів і нуль стрибків тексту при завантаженні. */ --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-mono: ui-monospace, "Cascadia Code", "Cascadia Mono", Menlo, Consolas, monospace; --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-full: 999px; /* У темній темі тіні помітно щільніші: на темному тлі слабка тінь просто не читається. У світлій вони більше не чорні, а підфарбовані brand-відтінком. Чорна тінь на кольоровому тлі дає сірий ореол — те саме «брудно», від якого поверхні вище рятує домішка hue; тінь того ж відтінку лягає на тло як його ж затемнення. У темній лишається чистий чорний: підфарбовувати темряву нема чим, вона й так кольорова від поверхні під нею. */ --shadow-1: light-dark(oklch(.45 .04 var(--h-brand) / .05), oklch(0 0 0 / .36)); --shadow-2: light-dark(oklch(.42 .05 var(--h-brand) / .07), oklch(0 0 0 / .46)); --shadow-3: light-dark(oklch(.38 .06 var(--h-brand) / .10), oklch(0 0 0 / .58)); /* Тінь на два шари: щільний контактний і широкий розсіяний з від'ємним розтягом. Один шар «0 4px 12px» дає рівну сіру пляму — саме за нею тінь і впізнається як намальована. Два шари повторюють те, як світло поводиться насправді: різка межа біля опори, м'який ореол далі. */ --e-1: 0 1px 2px var(--shadow-1); --e-2: 0 2px 4px var(--shadow-1), 0 6px 16px -4px var(--shadow-2); --e-3: 0 4px 8px var(--shadow-1), 0 16px 40px -8px var(--shadow-3); /* Рух. Дві тривалості, і третьої не буває: --dur-1 реакція контрола на курсор — колір, рамка. Має бути на межі непомітності, інакше кнопка «відстає» від миші; --dur-2 зсув коробки (підйом картки, виїзд шухляди) і згасання фону. Відстань більша за колірний перехід, тож і часу треба більше. Крива одна на все — стандартний ease-out матеріалу: швидкий старт, м'яке гальмування. Рух, що починається повільно (ease-in), читається як затримка інтерфейсу, а не як анімація. */ --dur-1: 0.12s; --dur-2: 0.2s; --ease: cubic-bezier(0.4, 0, 0.2, 1); /* Скло. Напівпрозора поверхня плюс розмиття того, що під нею — але лише там, де під нею СПРАВДІ щось є і воно рухається (див. .topbar на вузькому екрані, .menu, накладка модалки). Скло над нерухомим тлом відрізняється від звичайної поверхні нічим, крім ціни на перемальовку. saturate перед blur — не косметика: розмиття усереднює пікселі й тим з'їдає насиченість, тож без нього кольорова смужка сервісу під склом вицвітає до сірої. */ --glass: color-mix(in oklab, var(--surface) 72%, transparent); --glass-blur: saturate(180%) blur(12px); } /* Увесь перемикач теми — оці два правила. data-theme на звужує color-scheme до однієї схеми, і всі light-dark() вище перемикаються разом. Без атрибута лишається "light dark", тобто рішення за системою. Ставить атрибут shared/static/js/theme.js. */ :root[data-theme="light"] { color-scheme: light; } :root[data-theme="dark"] { color-scheme: dark; } } @layer base { /* 20-base.css */ /* Базова типографіка й вигляд «голих» тегів. Компоненти далі спираються на це й перевизначають лише те, що відрізняється. */ /* Сама сторінка не прокручується — прокрутка живе всередині .main (див. 30-layout.css). Резервувати тут жолоб під смугу не можна: він лежить ЗЗОВНІ , тож топбар і бічна панель не діставали б до краю екрана, а на короткій сторінці там лишалася б порожня смужка фону. */ body { margin: 0; font-family: var(--font-sans); font-size: var(--t-md); line-height: 1.55; background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { margin: 0; font-weight: 600; line-height: 1.25; letter-spacing: -0.011em; /* balance — щоб заголовок не лишав одне слово-сироту на другому рядку. */ text-wrap: balance; } h1 { font-size: var(--t-xl); } h2 { font-size: var(--t-lg); margin: var(--s-6) 0 var(--s-3); } h3 { font-size: var(--t-md); margin: var(--s-5) 0 var(--s-2); } h4 { font-size: var(--t-md); margin: var(--s-4) 0 var(--s-2); } p { margin: 0 0 var(--s-3); text-wrap: pretty; } a { color: var(--brand); /* Підкреслення напівпрозоре в спокої й суцільне на ховері: лінк лишається впізнаваним, але не рябить у щільному тексті. */ text-decoration-color: color-mix(in oklab, currentColor 35%, transparent); text-underline-offset: 0.2em; text-decoration-thickness: 1px; } a:hover { text-decoration-color: currentColor; } /* Один фокус-ринг на весь застосунок. :focus-visible, а не :focus — рамка з'являється при навігації клавіатурою, але не після кліку мишею. Прибирати її не можна: без неї з клавіатури працювати неможливо. */ :focus-visible { outline: var(--focus-ring); outline-offset: var(--focus-offset); } label { display: block; margin: var(--s-4) 0 var(--s-1); font-weight: 600; font-size: var(--t-md); } ::placeholder { color: var(--ink-subtle); opacity: 1; } code, kbd, samp { font-family: var(--font-mono); font-size: 0.9em; } code { padding: 0.1em 0.35em; background: var(--surface-3); border-radius: var(--r-sm); } pre { margin: 0; padding: var(--s-4); overflow-x: auto; font-family: var(--font-mono); font-size: var(--t-cmp); line-height: 1.5; background: var(--surface-2); color: var(--ink); border: 1px solid var(--border); border-radius: var(--r-md); } pre code { padding: 0; background: none; font-size: inherit; } hr { height: 1px; margin: var(--s-5) 0; border: 0; background: var(--border); } ::selection { background: var(--brand-soft); color: var(--ink); } /* Повага до системного «менше руху». Не вимикаємо анімації зовсім, а стискаємо до 0.01ms: так вони лишаються миттєвими, але події transitionend/animationend усе одно спрацьовують, і код, який на них розраховує, не зависає. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } } } @layer layout { /* 30-layout.css */ /* Каркас сторінки: бічна панель + топбар + контент. Стан панелі приходить із data-атрибутів на (їх ставить shell.js): data-sidebar="collapsed" — вузька смуга з іконок (широкий екран); data-drawer="open" — панель поверх контенту (вузький екран). Самі атрибути нічого не роблять — уся поведінка описана тут. */ :root { --sidebar-w: 248px; --sidebar-rail: 60px; /* ширина у згорнутому стані — лише під іконки */ --topbar-h: 52px; /* Три ширини контенту: форма (щоб рядок не був завдовжки), звичайна сторінка і на всю ширину — для таблиць. */ --w-form: 680px; --w-app: 1200px; --w-wide: 100%; } .app-shell { display: grid; grid-template-columns: var(--sidebar-w) 1fr; grid-template-rows: var(--topbar-h) 1fr; /* Панель займає обидва рядки — тому топбар починається праворуч від неї. */ grid-template-areas: "sidebar topbar" "sidebar main"; /* Рівно на висоту екрана, не min-height: прокручується лише .main, а панель із топбаром лишаються на місці. Так смуга прокрутки опиняється всередині контенту й не забирає собі праву межу каркаса. */ height: 100dvh; } /* Згортання — це просто інша ширина колонки. Решта підлаштовується сама. */ :root[data-sidebar="collapsed"] .app-shell { --sidebar-w: var(--sidebar-rail); } /* Вузький ноутбук: панель віддає контенту 32px, лишаючись повноцінною панеллю з підписами. Нижня межа 901px — щоб не перетнутись із діапазоном, де панель уже стала шухлядою й ширина колонки не значить нічого. Правило нижчої специфічності за «згорнуту» вище, тож ручне згортання тут головніше — як і має бути: людина вирішила, а не вікно. */ @media (min-width: 901px) and (max-width: 1180px) { .app-shell { --sidebar-w: 216px; } } .sidebar { grid-area: sidebar; view-transition-name: sidebar; display: flex; flex-direction: column; /* Висоту дає сітка каркаса; min-height: 0 — щоб вміст не розпирав комірку. Панель принципово не прокручується: власна смуга прокрутки поруч зі смугою контенту читалася як друга сторінка, а навігація має бути одним нерухомим полем, де пункт завжди на тому самому місці. Тому список компактний за розмірами (див. .side-link і @media height нижче) і вміщається цілком; зайве обрізається, а не гортається. */ min-height: 0; overflow: hidden; background: var(--surface); border-right: 1px solid var(--border); } /* Шапка панелі: бренд і кнопка згортання. Заввишки рівно з топбар — лінія під нею продовжує нижню межу топбару в один рівний рядок. */ .sidebar-head { display: flex; flex: none; align-items: center; gap: var(--s-1); height: var(--topbar-h); padding: 0 var(--s-2) 0 var(--s-4); border-bottom: 1px solid var(--border); } .brand { display: flex; /* Займає весь вільний рядок, кнопка лишається притиснутою до правого краю; min-width: 0 — щоб довга назва обрізалась, а не виштовхувала кнопку. */ flex: 1; min-width: 0; align-items: center; gap: var(--s-2); font-size: var(--t-md); font-weight: 700; color: var(--ink); text-decoration: none; white-space: nowrap; } .brand-name { overflow: hidden; text-overflow: ellipsis; } .collapse-toggle { flex: none; } /* Знак бренду — власний файл, а не іконка зі спрайта: спрайт за контрактом однотонний (stroke + currentColor), а знак кольоровий. Розмір в em, як у .ico, — щоб масштабувався разом із текстом поруч і не з'їжджав, коли сайдбар згортається. */ .brand-mark { flex: none; width: 1.45em; height: 1.45em; vertical-align: -0.3em; } .side-nav { flex: 1; min-height: 0; padding: var(--s-2); } /* Підгрупа сервісів: заголовок і пункти під ним (див. shared/base.html). Власних відступів не має — їх задає .side-group. Обгортка потрібна заради згорнутої панелі: там заголовки ховаються, і без неї групи не було б чим розділити (правило нижче, поруч із рештою «згорнутого»). */ .side-group { margin: var(--s-3) var(--s-2) 2px; font-size: var(--t-xs); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-subtle); } .side-link { /* --h-side ставить base.html інлайном на кожне посилання сервісу. Немає його (Дашборд, розділи адмінки) — беремо брендовий відтінок. */ --side-accent: light-dark( oklch(0.55 0.2 var(--h-side, var(--h-brand))), oklch(0.7 0.16 var(--h-side, var(--h-brand))) ); display: flex; align-items: center; gap: var(--s-2); min-height: 32px; padding: 0 var(--s-2); font-size: var(--t-cmp); font-weight: 600; color: var(--ink-muted); text-decoration: none; white-space: nowrap; border-radius: var(--r-md); border-left: 3px solid transparent; /* border-left-color у переліку — щоб кольорова позначка активного пункту проявлялась разом із тлом, а не вискакувала готовою на кадр раніше. */ transition: background-color var(--dur-2) var(--ease), border-left-color var(--dur-2) var(--ease), color var(--dur-1) var(--ease); } .side-link .ico { color: var(--ink-subtle); } /* Запобіжник під назви сервісів: замість того щоб розпирати панель, задовгий підпис обрізається трьома крапками. min-width: 0 обов'язковий — без нього флекс-елемент не стискається менше за свій вміст і обрізання не спрацює. Повну назву видно при наведенні: base.html кладе її в title посилання. */ .side-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; } /* Підсвічування бере відтінок самого сервісу, а не сірий --surface-3. Іконка під курсором і так фарбувалась у --side-accent (правило нижче) — тепер разом із нею фарбується й підкладка, тобто ховер став одним рухом кольору, а не «сіра плашка плюс кольорова іконка». Домішка мала (8%): це підказка «курсор тут», і сплутати її з активним пунктом не можна — у того і домішка вдвічі більша, і смужка ліворуч. */ .side-link:hover { color: var(--ink); background: color-mix(in oklab, var(--side-accent) 8%, var(--surface-2)); } .side-link:hover .ico { color: var(--side-accent); } .side-link.active { color: var(--ink); background: color-mix(in oklab, var(--side-accent) 16%, var(--surface-2)); border-left-color: var(--side-accent); } .side-link.active .ico { color: var(--side-accent); } /* Дуже низьке вікно (ноутбук з панеллю задач, відкрита консоль): панель не прокручується, тож замість смуги прокрутки список просто стає щільнішим. */ @media (max-height: 760px) { .side-link { min-height: 28px; } .side-group { margin-top: var(--s-2); } } /* Бренд у згорнутій панелі ховається цілком: на смузі в 60px він і кнопка згортання поруч не стоять, а сама кнопка потрібніша — без неї панель не розгорнути. На головну з вузької смуги веде пункт «Дашборд». */ :root[data-sidebar="collapsed"] .brand, :root[data-sidebar="collapsed"] .side-label, :root[data-sidebar="collapsed"] .side-group { display: none; } :root[data-sidebar="collapsed"] .sidebar-head { justify-content: center; padding-inline: 0; } /* Заголовків груп у вузькій панелі немає — лишаються самі іконки, і без розділювача вони злилися б в один суцільний стовпчик. Лінія каже те саме, що й напис: далі інша група. */ :root[data-sidebar="collapsed"] .side-section + .side-section { margin-top: var(--s-2); padding-top: var(--s-2); border-top: 1px solid var(--border); } :root[data-sidebar="collapsed"] .side-link { justify-content: center; padding-inline: 0; } /* У згорнутій панелі позначка активного пункту переїжджає ліворуч→праворуч: зліва вона зливалася б із краєм екрана, справа — межує з контентом. */ :root[data-sidebar="collapsed"] .side-link { border-left-width: 0; border-right: 3px solid transparent; } :root[data-sidebar="collapsed"] .side-link.active { border-right-color: var(--side-accent); } .topbar { grid-area: topbar; view-transition-name: topbar; /* На широкому екрані топбар і так нерухомий — це рядок сітки. sticky потрібен вузькому екрану, де прокручується сторінка цілком. */ position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: var(--s-2); padding: 0 var(--s-4); background: var(--surface); border-bottom: 1px solid var(--border); } .topbar-spacer { flex: 1; } .icon-btn { display: inline-flex; align-items: center; gap: var(--s-2); justify-content: center; min-width: 34px; min-height: 34px; padding: 0 var(--s-2); font-size: var(--t-cmp); font-weight: 600; color: var(--ink-muted); background: none; border: 1px solid transparent; border-radius: var(--r-md); cursor: pointer; transition: background-color var(--dur-2) var(--ease), color var(--dur-1) var(--ease), border-color var(--dur-2) var(--ease); } /* Тло проявляється м'яко, рамка більше не з'являється взагалі: рамка на ховері — це друга лінія поруч із тими, що вже малює топбар, і саме від неї кнопки в ряду смикались. Досить самої підкладки. */ .icon-btn:hover { color: var(--ink); background: var(--surface-2); } .icon-btn:active { background: var(--surface-3); transition-duration: var(--dur-1); } /* Довгий email обрізаємо трьома крапками — інакше він розпихає топбар. */ .user-name { max-width: 20ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .main { grid-area: main; /* min-width: 0 обов'язковий для grid-елемента: без нього широка таблиця всередині розпирає всю сітку замість того, щоб скролитись. min-height: 0 — те саме по вертикалі, щоб працював overflow нижче. */ min-width: 0; min-height: 0; /* position: relative — не для зсуву, а щоб .main став containing block для своїх абсолютних нащадків. Без цього ними опікується , і overflow нижче їх НЕ обрізає: вони лишаються в області прокрутки документа й тягнуть за собою другу смугу — поруч зі смугою .main. На кожній сторінці таких нащадків десятки: кожен