/* ========================================================================== 03-components.css — всё, что живёт внутри каркаса: кнопки, карточки, формы, бейджи, алерты, пагинация, дропдауны, сайдбарные карточки, поиск, облако тегов, профиль, маскоты, jsTree. Четвёртый: уточняет базу (01) и наполняет каркас (02). Внутри (в исходном порядке blog.css): • .user-dropdown*, .header-search, .theme-toggle-btn (базовый); • .post-card*, .sidebar-*, дерево категорий в сайдбаре; • .search-*, .list-*, .page-header-center, .tags-cloud-page, .sort-*; • .pagination / .page-links; • .button* и .btn* (ОДИН компонент под двумя наборами имён), .card*, .alert*, .badge*, утилиты (.mb-3, .d-flex, .gap-2, .space-y-8, …), .page-item/.page-link, .tab-pane, .form-control; • .comments-section и компоненты комментариев; • .row / .col-md-6, облако тегов в main-content; • .header-nav a (иконки в шапке) и мобильные стили профиля; • пиксельные маскоты (кот и дуб) с анимациями; • FORMS: .field/.form-group, .auth-*, .btn-flat, .vk-btn, .form-check; • тема jsTree для .category-tree; • контрастные ховеры .social-link (перекрывают 02-layout.css — см. комментарий у самого блока в конце файла). ЧТО СТОИТ ЗНАТЬ О ПОРЯДКЕ: • .theme-toggle-btn здесь — базовое правило десктопной кнопки. Мобильный кластер .theme-toggle-btn.mobile-theme-toggle лежит ВЫШЕ, в 02-layout.css, и это соответствует исходному порядку blog.css. • .header-nav a (блок «Header Nav Icons») объявлен ниже медиазапроса .header-nav в 02-layout.css — как и в blog.css. Свойства не пересекаются (там font/color, здесь display/gap), но порядок сохранён на случай будущих правок. • Переменные маскотов (--cat-*, --oak-*) и облака тегов (--tag-*) переехали в 00-tokens.css; правила, которые их читают, остались здесь. ========================================================================== */ /* ========================================================================== КЛАВИАТУРНЫЙ ФОКУС (этап 10.6, WCAG 2.1 SC 2.4.7 «Focus Visible») До этого этапа на 3490 строк CSS приходилось три упоминания :focus-visible — то есть обводку получали кнопки (.button/.btn), карточки постов и .vk-btn, а ссылки в тексте, пункты навигации, элементы сайдбара, вкладки и пагинация полагались на браузерную обводку по умолчанию. Она есть, но её толщина и цвет не зависят от темы: тонкая тёмная линия Chromium на тёмном фоне сайта почти не видна. Базовое правило намеренно объявлено с минимальной специфичностью (0,1,0): любое уже существующее правило компонента (.theme-toggle-btn:focus, .post-card:focus-visible, .btn-flat:focus-visible — все они гасят outline и рисуют кольцо через box-shadow, потому что лежат в контейнерах с overflow/скруглениями) перебивает его, и переезд ничего не ломает визуально. Мышиный клик обводку НЕ вызывает: :focus-visible, а не :focus. Цвет — только var(--ring) (= --primary, зависит от темы): светлая тема #0073B8 на фоне страницы #F6F6F6 — 4.86:1, на карточке 5.25:1 тёмная тема #4FA0F5 на фоне страницы #020202 — 7.92:1, на карточке 7.73:1 При норме 3:1 для нетекстовых индикаторов (SC 1.4.11) запас двукратный. ========================================================================== */ :focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; } /* Skip-link «Перейти к содержимому» (base.html, первый элемент ). ПОЧЕМУ ВСЁ ОФОРМЛЕНИЕ ВНУТРИ :focus. Прятать ссылку — не наша забота: в разметке она несёт .sr-only + .sr-only-focusable, обе объявлены в 01-base.css. .sr-only держит её вырезанной из потока, а .sr-only-focusable в фокусе возвращает поток (position: static). Если бы координаты плашки стояли в базовом правиле .skip-link (0,1,0), утилита (0,2,0) перебила бы их в момент фокуса и ссылка вылезла бы в начало документа, сдвинув шапку. Здесь селектор той же силы (0,2,0) и объявлен позже — выигрывает он. Заливка --primary-surface, а не --primary: это плашка, и требование к ней — контраст с ТЕКСТОМ поверх, а не с фоном страницы (см. комментарий у токена). Замеры: текст --primary-foreground на --primary-surface — 4.77:1 в светлой теме и 5.38:1 в тёмной (норма 4.5:1); сама плашка против фона страницы — 4.67:1 и 3.65:1 (норма 3:1). z-index выше шапки (.header — 50), панели .mobile-nav (1000) и гамбургера (1001): иначе ссылка вылезала бы под ними. */ .skip-link:focus { position: fixed; top: 0.5rem; left: 0.5rem; z-index: 1100; width: auto; height: auto; padding: 0.625rem 1rem; border-radius: var(--radius); background-color: var(--primary-surface); color: var(--primary-foreground); font-weight: 600; text-decoration: none; } /*
— цель skip-link, а не интерактивный элемент: он получает фокус программно (tabindex="-1"), чтобы чтение продолжилось с содержимого. Обводка вокруг всей страницы в этот момент только дезориентирует, а факт перехода скринридер и так озвучивает — он начинает читать регион main. Это ЕДИНСТВЕННОЕ снятие обводки без замены во всём этапе, и оно не нарушает SC 2.4.7: критерий говорит об элементах, получающих фокус с клавиатуры в порядке табуляции, а main из него исключён. */ main[tabindex="-1"]:focus { outline: none; } /* User Dropdown Styles */ .user-dropdown { position: relative; } .user-dropdown-toggle { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; background-color: var(--muted); border: 1px solid var(--border); border-radius: 0.5rem; color: var(--foreground); font-size: 0.875rem; font-weight: 500; cursor: pointer; transition: all 0.2s ease; } /* Раньше здесь стояли var(--muted-hover) и var(--border-hover) — токены, которых в проекте нет и не было. Без fallback такое объявление не просто игнорируется: значение схлопывается в initial, то есть фон становился прозрачным, а рамка — цветом текста. Ховер меню пользователя молча не работал. Роли «наведённая плашка» в системе нет отдельного токена и не нужно: --secondary для этого и заведён, а рамке нужен интерактивный контраст 3:1 — его даёт --border-interactive. */ .user-dropdown-toggle:hover { background-color: var(--secondary); border-color: var(--border-interactive); } .user-avatar { display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; /* Аватар-инициал: буква лежит поверх заливки — нужен --primary-surface. */ background-color: var(--primary-surface); color: var(--primary-foreground); border-radius: 50%; font-size: 0.75rem; font-weight: 600; } .user-name { display: none; } @media (min-width: 768px) { .user-name { display: block; } } .dropdown-arrow { /* 12px — прежний размер инлайн-SVG (viewBox 0 0 12 12, width/height=12). Этап 10.8 перевёл стрелку на спрайт с viewBox 0 0 24 24; размер теперь задаётся здесь, чтобы сохранить оптику dropdown-меню пользователя. */ width: 0.75rem; height: 0.75rem; transition: transform 0.2s ease; } .user-dropdown.active .dropdown-arrow { transform: rotate(180deg); } .user-dropdown-menu { position: absolute; top: calc(100% + 0.5rem); right: 0; min-width: 12rem; background-color: var(--background); border: 1px solid var(--border); border-radius: 0.5rem; box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); padding: 0.5rem; z-index: 50; opacity: 0; visibility: hidden; transform: translateY(-0.5rem); transition: all 0.2s ease; } .user-dropdown.active .user-dropdown-menu { opacity: 1; visibility: visible; transform: translateY(0); } .dropdown-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; color: var(--foreground); text-decoration: none; border-radius: 0.375rem; font-size: 0.875rem; font-weight: 500; transition: background-color 0.2s ease; } .dropdown-item:hover { background-color: var(--muted); color: var(--foreground); } .dropdown-item svg { flex-shrink: 0; } .header-search { display: none; /* Hidden on mobile */ } @media (min-width: 768px) { .header-search { display: flex; align-items: center; gap: 0.5rem; background-color: var(--muted); border-radius: 0.5rem; padding: 0.5rem 0.75rem; min-width: 200px; } .header-search input { background: transparent; border: none; /* `outline: none` здесь стоял БЕЗУСЛОВНО (не в :focus) — то есть поле теряло обводку и при фокусе с клавиатуры, а своей замены у него не было: собственной границы у input нет, её рисует .header-search. Снято; кольцо ниже — внутрь (offset отрицательный), потому что обёртка со скруглением обрезала бы внешнее. */ font-size: 0.875rem; color: var(--foreground); width: 100%; } .header-search input:focus-visible { outline: 2px solid var(--ring); outline-offset: -2px; } .header-search input::placeholder { color: var(--muted-foreground); } } /* Theme Toggle Button */ .theme-toggle-btn { background: transparent; border: 1px solid var(--border); border-radius: 0.5rem; padding: 0.5rem; cursor: pointer; display: flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; color: var(--foreground); transition: all 0.2s ease; position: relative; } .theme-toggle-btn:hover { background-color: var(--accent); border-color: var(--border); } .theme-toggle-btn:focus { outline: none; /* `ring`/`ring-offset` are Tailwind utilities, not CSS properties — emulate the intended focus ring with a box-shadow so keyboard users actually get a visible focus indicator. */ box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring); } .theme-toggle-btn span { font-size: 1.125rem; line-height: 1; transition: transform 0.2s ease; } .theme-toggle-btn:hover span { transform: scale(1.1); } /* Theme icons: show the moon in light mode (click → go dark) and the sun in dark mode (click → go light). Both SVGs live in the button; CSS toggles visibility based on the data-theme attribute on . This replaces the previous emoji (🌙/☀) that were set via JS textContent. */ .theme-icon-wrap { display: inline-flex; align-items: center; justify-content: center; line-height: 0; } .theme-icon { display: none; } /* default (no attribute) == light → show moon */ .theme-icon-moon { display: block; } .theme-icon-sun { display: none; } :root[data-theme="dark"] .theme-icon-sun { display: block; } :root[data-theme="dark"] .theme-icon-moon { display: none; } /* Responsive theme button */ @media (max-width: 767px) { .theme-toggle-btn { width: 2rem; height: 2rem; padding: 0.375rem; } .theme-toggle-btn span { font-size: 1rem; } } /* Blog Post Card Redesigned: tighter type scale (was sized for the old 20px body base), a coloured accent bar on the left, and a lift-on-hover with a soft shadow for a more clickable, modern feel. The whole card is an . */ .post-card { display: block; text-decoration: none; background-color: var(--card); border: 1px solid var(--border); padding: 1.25rem 1.5rem; border-radius: var(--radius); transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; cursor: pointer; font-size: 1rem; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); /* accent bar grows from the left edge on hover */ position: relative; overflow: hidden; } .post-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--primary); transform: scaleY(0); transform-origin: top; transition: transform 0.25s ease; } .post-card:hover { transform: translateY(-3px); border-color: var(--primary); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12); } .post-card:hover::before { transform: scaleY(1); } .post-card:focus-visible { outline: none; box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--ring); } .post-card-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 0.625rem; } .post-card-category { font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; padding: 0.25rem 0.625rem; border-radius: 9999px; background-color: var(--secondary); color: var(--secondary-foreground); } .post-card-info { display: flex; align-items: center; flex-wrap: wrap; gap: 0.875rem; font-size: 0.8125rem; color: var(--muted-foreground); } .post-card-info span { display: inline-flex; align-items: center; gap: 0.3rem; } .post-card-info svg { flex-shrink: 0; } .post-card-title { font-size: 1.375rem; font-weight: 600; color: var(--foreground); margin-bottom: 0.5rem; transition: color 0.2s ease; line-height: 1.3; } .post-card:hover .post-card-title { color: var(--primary); } .post-card-excerpt { font-size: 0.9375rem; color: var(--muted-foreground); line-height: 1.6; margin-bottom: 1rem; /* clamp long excerpts so card heights stay even */ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .post-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; } .post-card-tags { display: flex; flex-wrap: wrap; gap: 0.375rem; } .post-card-tags span { font-size: 0.75rem; background-color: var(--muted); color: var(--muted-foreground); padding: 0.2rem 0.5rem; border-radius: 0.375rem; } .post-card-readmore { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.875rem; font-weight: 600; color: var(--primary); white-space: nowrap; transition: gap 0.2s ease; } .post-card:hover .post-card-readmore { gap: 0.5rem; } /* Sidebar Card */ .sidebar-card { background-color: var(--card); padding: 1.5rem; border-radius: var(--radius); margin-bottom: 1.5rem; } .sidebar-card-title { font-size: 1rem; font-weight: 600; color: var(--foreground); margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem; } .sidebar-card-title .icon { color: var(--primary); } .sidebar-links { display: flex; flex-direction: column; gap: 0.75rem; } .sidebar-links a { font-size: 0.9375rem; color: var(--muted-foreground); text-decoration: none; transition: color 0.2s ease; } .sidebar-links a:hover { color: var(--primary); } /* Empty-state hint inside a .sidebar-links list (e.g. "no popular posts yet"). */ .sidebar-empty { color: var(--muted-foreground); font-size: 0.875rem; } /* "See all →" link at the bottom of a sidebar card. */ .sidebar-more { margin-top: 0.75rem; } .sidebar-more a { font-size: 0.875rem; color: var(--primary); text-decoration: none; font-weight: 500; } .sidebar-more a:hover { text-decoration: underline; } /* Period filter pills (Неделя / Месяц / Всё время) in the popular sidebar card. */ .sidebar-period-tabs { display: flex; gap: 0.35rem; margin-bottom: 0.75rem; flex-wrap: wrap; } .sidebar-period-tab { font-size: 0.75rem; padding: 0.25rem 0.625rem; border-radius: 999px; text-decoration: none; background: var(--muted); color: var(--muted-foreground); transition: background-color 0.2s ease, color 0.2s ease; } .sidebar-period-tab:hover { color: var(--foreground); } .sidebar-period-tab.active { /* Активная «таблетка» — залитая плашка с подписью внутри. */ background: var(--primary-surface); color: var(--primary-foreground); } .sidebar-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; } .sidebar-tags a { font-size: 0.875rem; background-color: var(--muted); color: var(--muted-foreground); padding: 0.3125rem 0.75rem; border-radius: 9999px; text-decoration: none; transition: all 0.2s ease; } .sidebar-tags a:hover { /* На ховере тег заливается целиком, название тега читается поверх заливки. */ background-color: var(--primary-surface); color: var(--primary-foreground); } .category-item-wrapper { display: flex; justify-content: space-between; align-items: center; } /* Scoped styles for show_categories template tag */ .sidebar-links ul { list-style: none; padding-left: 0; margin: 0; } /* Стили для дерева категорий - используем стандартный Bootstrap collapse */ .sidebar-links ul.nav { list-style: none; padding-left: 0; margin: 0; } .sidebar-links ul.children { padding-left: 1.5rem; /* Indent nested lists */ list-style: none; margin: 0; display: none; /* По умолчанию скрыты */ } /* Ветка текущей рубрики раскрыта: тег show_categories вешает на неё класс .in и рисует на триггере «минус», то есть разметка всегда утверждала, что поддерево открыто, — а правила под .in не было, и оно оставалось скрытым. Пока их не согласовать, aria-expanded не может быть правдивым: либо он врёт про раскрытость, либо противоречит иконке. Раскрываем — это и есть исходный замысел тега (open_slugs — путь до текущей рубрики). */ .sidebar-links ul.children.in { display: block; } .sidebar-links li { margin: 0; padding: 0; } .sidebar-links li a { display: inline-block; color: var(--muted-foreground); text-decoration: none; padding: 0.25rem 0; font-size: 0.9375rem; transition: color 0.2s ease; } .sidebar-links li a:hover { color: var(--primary); text-decoration: none; } .sidebar-links .category-item-wrapper { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.25rem; } /* Триггер раскрытия поддерева рубрик. С этапа 10.6 это