/* ================================================================ THEME.CSS — Lilchan CSS-переменные темы Две темы: • :root / [data-theme="dark"] — по умолчанию (Lilchan, малиновый акцент) • [data-theme="light"] — светлый вариант Все цвета, скругления и метрики только здесь. Все остальные CSS-файлы обращаются исключительно к переменным. ================================================================ */ /* ================================================================ ■ DARK (по умолчанию) Глубокий полуночный фон, малиновый акцент, аквамариновые ссылки. ================================================================ */ :root, [data-theme="dark"] { /* ── ДИЗАЙН-ТОКЕНЫ: бренд (ЕДИНЫЙ источник акцента — меняй ЗДЕСЬ) ── Поменяй --brand → подтянутся кнопки/чипы/бордеры/crimson-* и т.д. */ --brand: #d93654; --brand-700: #b82b48; --brand-300: #f27a98; --radius-sm: 5px; --radius-pill: 999px; --yt-red: #cc0000; /* маркер YouTube (бейдж/кнопка) — не зависит от темы */ /* ── Фоны ────────────────────────────────────────────────── */ --bg-page: #0f1117; --bg-header: #0b0d12; --bg-form: #1a1d26; --bg-post-op: #1e212c; --bg-post-reply: #181b23; --bg-input: #101218; --bg-btn: var(--brand); --bg-btn-hover: var(--brand-700); --bg-admin-side: #0b0d12; --bg-admin-head: #1a1d26; --bg-tag: #262a36; --bg-code: #080a0f; --bg-sidebar: #0b0d12; --bg-notify: color-mix(in srgb, var(--brand) 12%, transparent); --bg-notify-border: color-mix(in srgb, var(--brand) 28%, transparent); /* ── Границы ────────────────────────────────────────────── */ --border-post: #262b36; --border-op: var(--brand); --border-form: #2f3542; --border-input: #2f3542; --border-sep: #1e232e; /* ── Текст ──────────────────────────────────────────────── */ --text-main: #eef2ff; --text-dim: #8b92b0; --text-muted: #555c77; --text-header: #ffffff; --text-link: #5dc8cd; --text-link-hover: #8be0e4; --text-subject: var(--brand-300); --text-name: #f0a87a; --text-btn: #ffffff; --text-green: #a3d16b; --text-num: #555c77; --text-relnum: #3e4357; /* ── Акцентные цвета ────────────────────────────────────── */ --crimson: var(--brand); --crimson-dark: var(--brand-700); --crimson-light: var(--brand-300); --accent: #a3d16b; --accent-dark: #7ba64a; /* ── Метрики макета ─────────────────────────────────────── */ --site-width: 1200px; --radius: 8px; --radius-lg: 12px; --content-pad: clamp(16px, 2.5vw, 32px); --max-width: 720px; --form-width: 720px; --font-size: 14px; --font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; --mono: ui-monospace, 'Consolas', 'SF Mono', Menlo, monospace; --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.6); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.8); --knob: #ffffff; /* «бегунок» переключателей/слайдеров */ /* ── Спейсинг ──────────────────────────────────────────── */ --gap-thread: 20px; --pad-post-y: 22px; --pad-post-x: 26px; --pad-form-y: 24px; --pad-form-x: 26px; --line-height: 1.65; /* ── Sage ──────────────────────────────────────────────── */ --sage-color: #e2502a; /* «злой» кроваво-оранжевый (общий для тем) */ --sage-bg: color-mix(in srgb, var(--sage-color) 9%, transparent); /* ── Галерея / лайтбокс (плашки ДЕРИВ от темы → совпадают с любой темой) ── */ --gallery-bg: transparent; --gallery-bar-bg: color-mix(in srgb, var(--bg-header) 92%, transparent); --gallery-nav-bg: color-mix(in srgb, var(--bg-post-op) 78%, transparent); --gallery-nav-hover: color-mix(in srgb, var(--brand) 85%, transparent); --gallery-btn-bg: color-mix(in srgb, var(--text-main) 8%, transparent); --gallery-btn-hover: color-mix(in srgb, var(--text-main) 18%, transparent); --gallery-border: color-mix(in srgb, gray 18%, transparent); /* грани панелей (нейтральные) */ --gallery-border-hover: color-mix(in srgb, gray 32%, transparent); --gallery-line: color-mix(in srgb, var(--on-media) 18%, transparent); /* филлер-пунктир */ --gallery-fill: color-mix(in srgb, var(--on-media) 5%, transparent); /* фон филлера */ --gallery-dot: color-mix(in srgb, var(--on-media) 75%, transparent); /* точки загрузки */ --gallery-404: color-mix(in srgb, var(--on-media) 60%, transparent); /* текст заглушки */ --gallery-media-bg: #000000; /* леттербокс видео/iframe */ /* PiP — плавающее окно видео (тёмный хром, как у плееров; общий для тем) */ --pip-bg: #0a0a0c; --pip-bar-bg: rgba(20, 20, 22, 0.92); --pip-border: color-mix(in srgb, var(--on-media) 18%, transparent); --pip-title: color-mix(in srgb, var(--on-media) 80%, transparent); --pip-btn: color-mix(in srgb, var(--on-media) 85%, transparent); --pip-btn-hover-bg: color-mix(in srgb, var(--on-media) 14%, transparent); --pip-grip: color-mix(in srgb, var(--on-media) 45%, transparent); /* ── Модальные окна ───────────────────────────────────── */ --modal-overlay: rgba(0, 0, 0, 0.75); /* ── Алерты ───────────────────────────────────────────── */ --alert-error-bg: color-mix(in srgb, var(--brand) 12%, transparent); --alert-error-border: color-mix(in srgb, var(--brand) 28%, transparent); --alert-error-color: var(--brand-300); --alert-success-bg: rgba(163, 209, 107, 0.10); --alert-success-border: rgba(163, 209, 107, 0.24); --alert-success-color: #b9e089; --alert-info-bg: rgba(93, 200, 205, 0.10); --alert-info-border: rgba(93, 200, 205, 0.24); --alert-info-color: #8be0e4; --alert-warning-bg: rgba(240, 168, 122, 0.10); --alert-warning-border: rgba(240, 168, 122, 0.24); --alert-warning-color: #f5c2a4; /* ── Форма постинга ───────────────────────────────────── */ --form-drop-hover: color-mix(in srgb, var(--brand) 8%, transparent); /* ── Кнопки модерации ─────────────────────────────────── */ --mod-del-color: var(--brand-300); --mod-del-border: color-mix(in srgb, var(--brand) 40%, transparent); --mod-del-hover-bg: color-mix(in srgb, var(--brand) 15%, transparent); --mod-ban-color: #b59ad6; --mod-ban-border: rgba(150, 111, 179, 0.38); --mod-ban-hover-bg: rgba(150, 111, 179, 0.12); --mod-bansoft-color: #b1a6d4; --mod-bansoft-border: rgba(140, 120, 170, 0.34); --mod-bansoft-hover-bg: rgba(140, 120, 170, 0.12); --mod-ip-color: #8be0e4; --mod-ip-border: rgba(93, 200, 205, 0.36); --mod-ip-hover-bg: rgba(93, 200, 205, 0.12); --mod-pin-color: #b9e089; --mod-pin-border: rgba(163, 209, 107, 0.34); --mod-pin-hover-bg: rgba(163, 209, 107, 0.12); --mod-lock-color: #f5c2a4; --mod-lock-border: rgba(240, 168, 122, 0.34); --mod-lock-hover-bg: rgba(240, 168, 122, 0.12); --mod-cycle-color: #8be0e4; --mod-cycle-border: rgba(93, 200, 205, 0.30); --mod-cycle-hover-bg: rgba(93, 200, 205, 0.12); --mod-more-color: var(--text-muted); --mod-more-border: var(--border-sep); --mod-more-hover-bg: var(--bg-tag); /* ── Мета-строка ──────────────────────────────────────── */ --meta-chip-border: var(--border-sep); --meta-chip-color: var(--text-muted); --meta-chip-hover-color:var(--text-dim); --meta-chip-hover-border:var(--border-post); --meta-report-color: rgba(240, 168, 122, 0.7); --meta-report-border: rgba(240, 168, 122, 0.24); --meta-report-hover-color: #f0a87a; --meta-report-hover-bg: rgba(240, 168, 122, 0.10); /* ── Теги состояния поста/треда ───────────────────────── */ --tag-pinned-bg: rgba(163, 209, 107, 0.10); --tag-pinned-color: #b9e089; --tag-pinned-border:rgba(163, 209, 107, 0.26); --tag-locked-bg: rgba(240, 168, 122, 0.10); --tag-locked-color: #f5c2a4; --tag-locked-border:rgba(240, 168, 122, 0.26); --tag-cyclic-bg: rgba(93, 200, 205, 0.10); --tag-cyclic-color: #8be0e4; --tag-cyclic-border:rgba(93, 200, 205, 0.24); --tag-nsfw-bg: color-mix(in srgb, var(--brand) 12%, transparent); --tag-nsfw-color: var(--brand-300); --tag-nsfw-border: color-mix(in srgb, var(--brand) 28%, transparent); --tag-default-bg: var(--bg-tag); --tag-default-color: var(--crimson-light); --tag-default-border: color-mix(in srgb, var(--brand) 26%, transparent); /* ── OP-клейм бейдж ──────────────────────────────────── */ --op-badge-bg: rgba(163, 209, 107, 0.12); --op-badge-color: #a3d16b; --op-badge-border: rgba(163, 209, 107, 0.26); /* ── Значок роли в шапке ─────────────────────────────── */ --hdr-badge-radius: 10px; --hdr-badge-font: 11px; --bg-meta: rgba(0, 0, 0, 0.3); /* ── Шапка: ссылки/кнопки (на тёмном фоне — светлые) ──── */ --hdr-link: rgba(255,255,255,0.80); --hdr-link-hover: #ffffff; --hdr-btn-color: rgba(255,255,255,0.75); --hdr-btn-hover: #ffffff; --hdr-btn-hover-bg: rgba(255,255,255,0.12); --hdr-border: transparent; /* ── Донат: акцент = бренд (дельта-темы наследуют свой --brand) ── */ --donate-accent: var(--brand-300); --donate-accent-strong: var(--brand); --donate-accent-bg: color-mix(in srgb, var(--brand) 14%, transparent); --donate-accent-border: color-mix(in srgb, var(--brand) 30%, transparent); /* Акцент модалки «Контакты» (рамки/бейдж/иконка/ховер). Деф. = бренд (следует теме); переопредели для отдельного цвета контактов. */ --contacts-accent: var(--brand); /* ── Бейджи/акценты компонентов (ранее хардкод в board.css) ──── */ --crimson-soft: #c2185b; /* № поста (мягкий малиновый) */ --fav-star: #ffd700; /* звезда «избранное» */ --fav-star-dim: #cca000; --opmod-color: #2bb1a0; /* бейдж ОП-модерации (бирюзовый) */ --opmod-bg: rgba(38, 166, 154, 0.14); --opmod-border: rgba(38, 166, 154, 0.34); --pc-badge-color: #7fa8ff; /* бейдж пасскода (синий) */ --pc-badge-bg: rgba(79, 140, 255, 0.12); --pc-badge-bg-hover:rgba(79, 140, 255, 0.22); --pc-badge-border: rgba(79, 140, 255, 0.28); --link: var(--text-link); /* ссылки в теле поста */ --via-color: #9b7fd0; /* бейдж сети постинга (Tor/I2P/Ygg) */ --via-bg: rgba(140, 110, 200, 0.14); --via-border: rgba(140, 110, 200, 0.30); --mod-edit-color: #c5e1a5; /* мод-кнопка «править» (зелёная) */ --mod-edit-border: rgba(124, 179, 66, 0.4); --mod-edit-hover-bg:rgba(124, 179, 66, 0.18); --fb-accent: #e0a73a; /* кнопка обратной связи (янтарная) */ --fb-accent-strong: #f0b94a; --fb-accent-bg: rgba(224, 167, 58, 0.14); /* Семантические кнопки-варианты (.btn--*) — подмешан --brand → подхватывают акцент ЛЮБОЙ темы, оставаясь различимыми по семантике (danger/ban/…). В тёмной (бренд≈малиновый) почти как раньше; в Cohee/Nyashka — в тон темы. */ --btn-danger: color-mix(in srgb, var(--brand) 32%, #c0302e); --btn-danger-hover: color-mix(in srgb, var(--brand) 32%, #9a2422); --btn-purple: color-mix(in srgb, var(--brand) 26%, #7b1fa2); --btn-purple-hover: color-mix(in srgb, var(--brand) 26%, #6a1b9a); --btn-blue: color-mix(in srgb, var(--brand) 18%, #1565c0); --btn-blue-hover: color-mix(in srgb, var(--brand) 18%, #0d47a1); --btn-green: color-mix(in srgb, var(--brand) 18%, #2e7d32); --btn-green-hover: color-mix(in srgb, var(--brand) 18%, #1b5e20); --btn-orange: color-mix(in srgb, var(--brand) 30%, #e65100); --btn-orange-hover: color-mix(in srgb, var(--brand) 30%, #bf360c); /* Разметка тела поста */ --mk-big: 1.45em; /* [big] — крупный текст */ --mk-small: 0.8em; /* [small] — мелкий текст */ --hl-bg: #fff3a0; /* [h] — маркер-выделение */ --hl-color: #2d1f24; --qr-paper: #ffffff; /* «бумага» QR — всегда светлая (для сканирования) */ --qr-ink: #333333; /* подпись под QR на светлой бумаге */ --splash-bg: var(--bg-page); /* фон splash-экрана загрузки (трекает тему) */ --splash-dot: var(--brand); /* цвет точек splash-экрана */ --online-dot: #5a9e63; /* точка онлайн-индикатора в шапке (статус-зелёный) */ --ai-badge: #ff7eb6; /* неон-бейдж AI-бота «Лил» (розовая сакура) */ --ai-petal: #ffc1dd; /* лепесток 🌸 в бейдже Лил */ /* ── Нейтральные слои (тени/скримы/текст на медиа) ──────────── */ --scrim: rgba(0, 0, 0, 0.55); /* подложка под подписи медиа */ --scrim-strong: rgba(0, 0, 0, 0.62); --shadow-lg: 0 10px 36px rgba(0, 0, 0, 0.5); --shadow-xl: 0 12px 44px rgba(0, 0, 0, 0.6); --shadow-color: rgba(0, 0, 0, 0.42); /* база для нестандартных box-shadow */ --ring-hairline: rgba(0, 0, 0, 0.18); /* тонкая обводка-разделитель (на медиа/иконках) */ --on-media: #ffffff; /* текст/иконки поверх тёмного медиа */ } html { color-scheme: dark; }