/* * Две темы — светлая и тёмная, обе в серых тонах (см. ТЗ, часть 1). * Переключаются атрибутом data-theme на , который проставляет * сервер (src/web/deps.py:resolve_theme) на основе cookie "theme" или * User.theme для залогиненных — переключение работает без JS. * * Третье значение — data-theme="auto": явного выбора ещё не было (см. * User.theme в src/models/user.py), поэтому светлая/тёмная решается САМИМ * браузером через prefers-color-scheme, без обращения к серверу или JS — * ниже сначала идут светлые переменные как безопасный дефолт для "auto", * а медиа-запрос ниже их переопределяет, если ОС/браузер предпочитают * тёмную (порядок правил в файле имеет значение: медиа-запрос должен идти * ПОСЛЕ, иначе более поздние light-правила его перекроют). */ :root { --radius: 8px; --space-1: 4px; --space-2: 8px; --space-3: 16px; --space-4: 24px; } html[data-theme="light"], html[data-theme="auto"] { --bg: #F5F5F5; --surface: #FFFFFF; --text: #333333; --text-muted: #666666; --accent: #888888; --accent-strong: #5f5f5f; --border: #dddddd; --danger: #b3413a; --success: #3f7d4f; } html[data-theme="dark"] { --bg: #1E1E1E; --surface: #2A2A2A; --text: #CCCCCC; --text-muted: #999999; --accent: #555555; --accent-strong: #8a8a8a; --border: #3a3a3a; --danger: #d9756c; --success: #7fbf8f; } @media (prefers-color-scheme: dark) { html[data-theme="auto"] { --bg: #1E1E1E; --surface: #2A2A2A; --text: #CCCCCC; --text-muted: #999999; --accent: #555555; --accent-strong: #8a8a8a; --border: #3a3a3a; --danger: #d9756c; --success: #7fbf8f; } } * { box-sizing: border-box; } body { margin: 0; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; line-height: 1.5; } a { color: var(--accent-strong); } .container { max-width: 1080px; margin: 0 auto; padding: 0 var(--space-3); } .site-header { background: var(--surface); border-bottom: 1px solid var(--border); } .header-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3); flex-wrap: wrap; } .brand { font-weight: 700; text-decoration: none; color: var(--text); font-size: 1.1rem; } .nav-list { list-style: none; display: flex; gap: var(--space-3); margin: 0; padding: 0; } .nav-list a { color: var(--text); text-decoration: none; } .nav-list a:hover { color: var(--accent-strong); } .nav-toggle { display: none; } .header-controls { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; } .inline-form { display: inline-flex; margin: 0; } select, input, textarea, button { font: inherit; } select, input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="url"] { background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-1) var(--space-2); } label { display: flex; flex-direction: column; gap: 4px; font-size: 0.95rem; color: var(--text-muted); } .theme-toggle, .link-button { background: none; border: 1px solid var(--border); border-radius: var(--radius); color: var(--text); cursor: pointer; padding: var(--space-1) var(--space-2); } .link-button { text-decoration: underline; border: none; padding: 0; } .user-chip { padding: var(--space-1) var(--space-2); border-radius: var(--radius); background: var(--bg); border: 1px solid var(--border); } .btn { display: inline-block; padding: var(--space-1) var(--space-3); border-radius: var(--radius); text-decoration: none; border: 1px solid var(--border); color: var(--text); cursor: pointer; } .btn--primary { background: var(--accent); color: #fff; border-color: var(--accent); } .btn--ghost { color: var(--text); } .page { padding: var(--space-4) 0; min-height: 60vh; } .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--space-3); margin-bottom: var(--space-3); } .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); } .table-scroll { overflow-x: auto; } table { width: 100%; border-collapse: collapse; } th, td { text-align: left; padding: var(--space-2); border-bottom: 1px solid var(--border); white-space: nowrap; } .badge { display: inline-block; padding: 2px 10px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 0.85em; } .notice { background: var(--surface); border: 1px solid var(--accent); border-radius: var(--radius); padding: var(--space-2) var(--space-3); margin-bottom: var(--space-3); } .notice--error { border-color: var(--danger); color: var(--danger); } .text-muted { color: var(--text-muted); } /* Прячет элементы с x-data/x-show до инициализации Alpine.js (иначе на долю секунды видно развёрнутое состояние — "мигание" при загрузке страницы). См. src/templates/profile.html — панель перехода на уровень. */ [x-cloak] { display: none !important; } /* Раздел "Обмен" — декоративный бесконечный прогресс-бар (см. exchange_list.html) */ .progress-bar { width: 100%; max-width: 480px; height: 20px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; } .progress-bar__fill { height: 100%; width: 0%; background: var(--accent); transition: width 1.2s ease; } .progress-bar__label { margin-top: var(--space-2); color: var(--text-muted); font-size: 0.9rem; } form.stack { display: flex; flex-direction: column; gap: var(--space-2); max-width: 360px; } .news-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-3); } .site-footer { border-top: 1px solid var(--border); padding: var(--space-3) 0; color: var(--text-muted); margin-top: var(--space-4); text-align: center; } /* Явно на .container внутри футера — на случай если где-то ещё .container получит свой text-align и перебьёт наследование от .site-footer выше. */ .site-footer .container { text-align: center; } /* --- Адаптивность (требование ТЗ: мобильные и десктоп) --- */ @media (max-width: 720px) { .nav-toggle { display: inline-block; background: none; border: 1px solid var(--border); color: var(--text); border-radius: var(--radius); padding: var(--space-1) var(--space-2); cursor: pointer; } .nav-list { display: none; flex-direction: column; width: 100%; margin-top: var(--space-2); } .nav-list--open { display: flex; } .header-inner { flex-direction: column; align-items: stretch; } .header-controls { justify-content: space-between; } .two-col { grid-template-columns: 1fr; } }