/* ═══════════════════════════════════════════════════════════════════ BASE.CSS — фундамент всего дизайна Порядок загрузки CSS важен: base.css → переменные, сброс, типографика, утилиты components.css → переиспользуемые компоненты (кнопки, карточки...) pages.css → стили конкретных страниц (расписание, FAQ...) Каждый последующий файл может переопределять предыдущий. ═══════════════════════════════════════════════════════════════════ */ /* ── СБРОС СТИЛЕЙ (Reset) ──────────────────────────────────────── Браузеры по умолчанию добавляют margin и padding к элементам. Разные браузеры делают это по-разному — сайт выглядел бы по-разному в Chrome и Firefox. *,*::before,*::after — выбирает ВСЕ элементы и их псевдоэлементы. box-sizing: border-box — padding и border входят в ширину элемента, а не добавляются сверху. Без этого вёрстка ломается. ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* ── CSS ПЕРЕМЕННЫЕ (:root) ────────────────────────────────────── :root — корневой элемент страницы (фактически ). Переменные здесь доступны везде через var(--имя). Зачем переменные а не просто цвета в каждом правиле? Чтобы сменить цвет акцента — меняешь одну строку здесь, а не ищешь #0FA37F по всему коду. Система фонов (4 уровня глубины): --bg → самый тёмный (фон страницы) --bg2 → карточки, сайдбар --bg3 → поля ввода, ховер-состояния --bg4 → самый светлый (неактивные элементы) Цвета с суффиксом -bg (--accent-bg, --warn-bg) — полупрозрачные версии основного цвета для фонов бейджей. 15 в конце hex = ~8% непрозрачности, 25 = ~15%. ── */ :root { /* Фоны (тёмные, 4 уровня) */ --bg: #0c0e11; /* самый тёмный — фон всей страницы */ --bg2: #13161b; /* карточки, сайдбар, топ-бар */ --bg3: #1a1e25; /* поля ввода, ховеры */ --bg4: #21262f; /* неактивные бейджи, разделители */ /* Границы */ --border: #2a2f3a; /* основные границы */ --border2: #333844; /* чуть светлее — для ховер-состояний */ /* Текст (3 уровня яркости) */ --text: #e8eaf0; /* основной текст */ --text2: #9ba3b4; /* вторичный (мета, описания) */ --text3: #5c6476; /* третичный (подсказки, метки) */ /* Акцентный цвет (зелёный) */ --accent: #0FA37F; /* основной зелёный */ --accent2: #0d8c6c; /* тёмнее — для ховер-состояний кнопок */ --accent-bg: #0FA37F15; /* фон активных элементов */ --accent-bg2:#0FA37F25; /* фон чуть ярче (бейджи, выделенные блоки) */ /* Семантические цвета (смысловые, не просто декоративные) */ --warn: #e8a020; /* предупреждение — жёлтый */ --warn-bg: #e8a02015; --danger: #e05252; /* опасность, ошибка — красный */ --danger-bg: #e0525215; --info: #4a9eff; /* информация — синий */ --info-bg: #4a9eff15; --purple: #a855f7; /* фиолетовый (консультации в логах) */ --purple-bg: #a855f715; --pink: #ec4899; /* розовый (ортодонтия) */ --pink-bg: #ec489915; --orange: #f97316; /* оранжевый (эстетика) */ --orange-bg: #f9731615; --teal: #14b8a6; /* бирюзовый (профилактика) */ --teal-bg: #14b8a615; /* Размеры макета */ --sidebar-w: 236px; /* ширина бокового меню */ --topbar-h: 56px; /* высота верхней панели */ --radius: 8px; /* скругление углов — маленькое */ --radius-lg: 12px; /* скругление — среднее (карточки) */ --radius-xl: 16px; /* скругление — большое (модалы) */ /* Шрифты */ --font: 'Geist', system-ui, -apple-system, sans-serif; /* system-ui — системный шрифт как запасной (быстрее грузится) */ --mono: 'Geist Mono', 'Fira Code', monospace; /* mono используется для JSON в логах бота */ } /* ── БАЗОВЫЕ СТИЛИ СТРАНИЦЫ ────────────────────────────────────── height: 100% на html и body — чтобы flexbox-макет занимал всю высоту окна браузера. -webkit-font-smoothing: antialiased — сглаживание шрифта в macOS/iOS (текст выглядит тоньше и чище). ── */ html, body { height: 100%; font-family: var(--font); background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; } /* ── ПОЛОСА ПРОКРУТКИ ──────────────────────────────────────────── ::-webkit-scrollbar — нестандартный псевдоэлемент, работает в Chrome, Safari, Edge (не работает в Firefox, там свой синтаксис). Делаем полосу тонкой (4px) и полупрозрачной — не отвлекает. ── */ ::-webkit-scrollbar { width: 4px; height: 4px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--text3); } /* ── УТИЛИТАРНЫЕ КЛАССЫ ТИПОГРАФИКИ ───────────────────────────── Маленькие классы для быстрого применения стилей прямо в HTML: подсказка Идея взята из Tailwind CSS, но реализована вручную. ── */ .text-accent { color: var(--accent); } .text-warn { color: var(--warn); } .text-danger { color: var(--danger); } .text-muted { color: var(--text3); } .text-sm { font-size: 12px; } .text-xs { font-size: 11px; } .font-mono { font-family: var(--mono); } .font-medium { font-weight: 500; } .font-semibold { font-weight: 600; } .font-bold { font-weight: 700; } /* ── УТИЛИТЫ ОТСТУПОВ ──────────────────────────────────────────── Используются в HTML когда нужен разовый отступ:
...
Имена: mb = margin-bottom, mt = margin-top, число = px. ── */ .mb4 { margin-bottom: 4px; } .mb8 { margin-bottom: 8px; } .mb12 { margin-bottom: 12px; } .mb16 { margin-bottom: 16px; } .mb24 { margin-bottom: 24px; } .mt8 { margin-top: 8px; } .mt12 { margin-top: 12px; } .mt16 { margin-top: 16px; } /* ── УТИЛИТЫ FLEXBOX ───────────────────────────────────────────── Flexbox — современный способ выстраивать элементы в ряд или колонку. .flex делает элемент flex-контейнером. Дочерние элементы становятся flex-items. .items-center → выравнивает по вертикали (align-items) .justify-between → растягивает с пробелами между (justify-content) .flex-1 → элемент занимает всё доступное пространство .gap* → промежутки между flex-элементами ── */ .flex { display: flex; } .flex-col { flex-direction: column; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } .gap4 { gap: 4px; } .gap6 { gap: 6px; } .gap8 { gap: 8px; } .gap12 { gap: 12px; } .gap16 { gap: 16px; } .flex-1 { flex: 1; } /* занять всё оставшееся место */ /* ── УТИЛИТЫ СЕТКИ (CSS Grid) ──────────────────────────────────── CSS Grid — для двумерных макетов (строки и колонки). 1fr = одна доля доступного пространства. .grid-2 делит контейнер на две равные колонки. Используется в: настройках, карточках услуг, разделе расписания. ── */ .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } /* ── РАЗДЕЛИТЕЛЬ ───────────────────────────────────────────────── Горизонтальная линия для визуального разделения блоков. Используется внутри карточек. ── */ .divider { height: 1px; background: var(--border); margin: 14px 0; } /* ── ЗАГОЛОВОК РАЗДЕЛА ─────────────────────────────────────────── Маленький жирный заголовок над группой элементов. Пример: «Ближайшие записи» над таблицей на дашборде. ── */ .section-head { font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 12px; } /* ── ИНФОРМАЦИОННЫЕ БАННЕРЫ ────────────────────────────────────── Цветная полоска с иконкой и текстом вверху страницы. Используется чтобы объяснить пользователю зачем нужен раздел. Пример: «AI-бот использует эти вопросы при консультации...» Три варианта цвета: .banner-accent → зелёный (подсказка) .banner-info → синий (информация) .banner-warn → жёлтый (предупреждение) ── */ .banner { border-radius: var(--radius); padding: 11px 14px; margin-bottom: 16px; font-size: 12px; display: flex; align-items: flex-start; /* иконка прижата к верху текста */ gap: 8px; } .banner i { font-size: 16px; flex-shrink: 0; margin-top: 1px; } /* flex-shrink: 0 — иконка не сжимается когда текст длинный */ .banner-accent { background: var(--accent-bg); border: 1px solid var(--accent); color: var(--accent); } .banner-info { background: var(--info-bg); border: 1px solid var(--info); color: var(--info); } .banner-warn { background: var(--warn-bg); border: 1px solid var(--warn); color: var(--warn); }