/* ============================================================ Совиное Гнездо — переключаемые темы оформления. Реестр тем (названия, свотчи) — web/themes.py. Тема включается атрибутом data-theme на ; без атрибута действует дефолт «Ночной Лес» из style.css. ============================================================ */ /* Плавный переход при смене темы */ body, .modal-sheet, .topbar, .bottomnav, .col, .theme-card { transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; } /* ---------- Тёмные темы ---------- */ [data-theme="blood-moon"] { --bg-deep: #120a0e; --bg-panel: rgba(38, 16, 22, 0.86); --bg-panel-2: rgba(48, 20, 28, 0.9); --border: rgba(224, 92, 92, 0.15); --border-strong: rgba(224, 92, 92, 0.32); --text: #f0e2e0; --text-dim: #b09090; --accent: #e05252; --accent-2: #f29a8a; --accent-glow: rgba(224, 82, 82, 0.35); --bg-sheet: #261016; --bg-toast: #30141c; } [data-theme="blood-moon"] .night-sky { background: radial-gradient(1200px 600px at 85% -10%, rgba(224, 82, 82, 0.12), transparent 60%), radial-gradient(900px 500px at 10% 110%, rgba(224, 82, 82, 0.06), transparent 60%), linear-gradient(180deg, #120a0e 0%, #1a0d12 55%, #120a0e 100%); } /* Пасхалка: луна на странице входа наливается кровью */ [data-theme="blood-moon"] .moon { background: radial-gradient(circle at 38% 35%, #f2c4b8, #c25a4a 62%, #8a3328); box-shadow: 0 0 40px 12px rgba(224, 82, 82, 0.25), 0 0 120px 50px rgba(224, 82, 82, 0.12); } [data-theme="emerald"] { --bg-deep: #08120d; --bg-panel: rgba(14, 32, 24, 0.86); --bg-panel-2: rgba(18, 42, 30, 0.9); --border: rgba(102, 209, 154, 0.14); --border-strong: rgba(102, 209, 154, 0.3); --text: #e4f0e6; --text-dim: #93ab9b; --accent: #66d19a; --accent-2: #a9e8c4; --accent-glow: rgba(102, 209, 154, 0.32); --bg-sheet: #0e2018; --bg-toast: #122a1e; } [data-theme="emerald"] .night-sky { background: radial-gradient(1200px 600px at 85% -10%, rgba(102, 209, 154, 0.1), transparent 60%), radial-gradient(900px 500px at 10% 110%, rgba(102, 209, 154, 0.05), transparent 60%), linear-gradient(180deg, #08120d 0%, #0b1a12 55%, #08120d 100%); } [data-theme="lavender"] { --bg-deep: #100c1a; --bg-panel: rgba(28, 20, 44, 0.86); --bg-panel-2: rgba(36, 26, 56, 0.9); --border: rgba(177, 140, 255, 0.14); --border-strong: rgba(177, 140, 255, 0.3); --text: #ece6f6; --text-dim: #a79fc0; --accent: #b18cff; --accent-2: #d5bfff; --accent-glow: rgba(177, 140, 255, 0.32); --bg-sheet: #1c142c; --bg-toast: #241a38; } [data-theme="lavender"] .night-sky { background: radial-gradient(1200px 600px at 85% -10%, rgba(177, 140, 255, 0.12), transparent 60%), radial-gradient(900px 500px at 10% 110%, rgba(177, 140, 255, 0.05), transparent 60%), linear-gradient(180deg, #100c1a 0%, #161028 55%, #100c1a 100%); } [data-theme="abyss"] { --bg-deep: #060f16; --bg-panel: rgba(10, 28, 38, 0.86); --bg-panel-2: rgba(14, 36, 48, 0.9); --border: rgba(56, 182, 207, 0.14); --border-strong: rgba(56, 182, 207, 0.3); --text: #e0eef2; --text-dim: #8ba6b3; --accent: #38b6cf; --accent-2: #8fe0ee; --accent-glow: rgba(56, 182, 207, 0.32); --bg-sheet: #0a1c26; --bg-toast: #0e2430; } [data-theme="abyss"] .night-sky { background: radial-gradient(1200px 600px at 85% -10%, rgba(56, 182, 207, 0.1), transparent 60%), radial-gradient(900px 500px at 10% 110%, rgba(56, 182, 207, 0.05), transparent 60%), linear-gradient(180deg, #060f16 0%, #081824 55%, #060f16 100%); } [data-theme="ember"] { --bg-deep: #14100c; --bg-panel: rgba(36, 28, 22, 0.88); --bg-panel-2: rgba(46, 36, 28, 0.92); --border: rgba(224, 118, 58, 0.15); --border-strong: rgba(224, 118, 58, 0.32); --text: #efe6da; --text-dim: #b3a391; --accent: #e0763a; --accent-2: #f2ac72; --accent-glow: rgba(224, 118, 58, 0.32); --bg-sheet: #241c16; --bg-toast: #2e241c; } [data-theme="ember"] .night-sky { background: radial-gradient(1200px 600px at 85% -10%, rgba(224, 118, 58, 0.1), transparent 60%), radial-gradient(900px 500px at 10% 110%, rgba(224, 118, 58, 0.06), transparent 60%), linear-gradient(180deg, #14100c 0%, #1c1610 55%, #14100c 100%); } [data-theme="raven"] { --bg-deep: #07080a; --bg-panel: rgba(16, 18, 22, 0.88); --bg-panel-2: rgba(22, 25, 31, 0.92); --border: rgba(169, 184, 204, 0.1); --border-strong: rgba(169, 184, 204, 0.24); --text: #dde3ea; --text-dim: #8b93a1; --accent: #a9b8cc; --accent-2: #d3dee9; --accent-glow: rgba(169, 184, 204, 0.25); --bg-sheet: #101216; --bg-toast: #16191f; } [data-theme="raven"] .night-sky { background: radial-gradient(1200px 600px at 85% -10%, rgba(169, 184, 204, 0.06), transparent 60%), radial-gradient(900px 500px at 10% 110%, rgba(169, 184, 204, 0.04), transparent 60%), linear-gradient(180deg, #07080a 0%, #0b0d11 55%, #07080a 100%); } /* ---------- Светлые темы ---------- */ [data-theme="dew"] { --bg-deep: #eef4ee; --bg-panel: rgba(255, 255, 255, 0.86); --bg-panel-2: rgba(244, 250, 245, 0.92); --border: rgba(60, 110, 80, 0.18); --border-strong: rgba(60, 110, 80, 0.34); --text: #2b3a30; --text-dim: #64786b; --accent: #3f9d63; --accent-2: #2c7a4a; --accent-glow: rgba(63, 157, 99, 0.25); --bg-sheet: #ffffff; --bg-toast: #ffffff; --shadow: 0 10px 32px rgba(60, 90, 70, 0.18); } [data-theme="dew"] .night-sky { background: radial-gradient(1200px 600px at 85% -10%, rgba(63, 157, 99, 0.1), transparent 60%), radial-gradient(900px 500px at 10% 110%, rgba(120, 190, 140, 0.1), transparent 60%), linear-gradient(180deg, #eef4ee 0%, #e2efe6 55%, #eef4ee 100%); } [data-theme="parchment"] { --bg-deep: #efe6d3; --bg-panel: rgba(250, 244, 230, 0.9); --bg-panel-2: rgba(244, 236, 218, 0.94); --border: rgba(120, 85, 40, 0.2); --border-strong: rgba(120, 85, 40, 0.36); --text: #3d3225; --text-dim: #7d6f58; --accent: #a06a2c; --accent-2: #7d5020; --accent-glow: rgba(160, 106, 44, 0.25); --bg-sheet: #faf4e6; --bg-toast: #faf4e6; --shadow: 0 10px 32px rgba(90, 65, 30, 0.18); } [data-theme="parchment"] .night-sky { background: radial-gradient(1200px 600px at 85% -10%, rgba(160, 106, 44, 0.1), transparent 60%), radial-gradient(900px 500px at 10% 110%, rgba(160, 106, 44, 0.08), transparent 60%), linear-gradient(180deg, #efe6d3 0%, #e7dac0 55%, #efe6d3 100%); } /* ---------- Шуточные темы (с предупреждением) ---------- */ [data-theme="neon-rave"] { --bg-deep: #0d0010; --bg-panel: rgba(45, 0, 50, 0.9); --bg-panel-2: rgba(60, 0, 68, 0.92); --border: rgba(255, 0, 255, 0.35); --border-strong: rgba(255, 0, 255, 0.6); --text: #39ff14; --text-dim: #ff71ce; --accent: #ff00ff; --accent-2: #01cdfe; --accent-glow: rgba(255, 0, 255, 0.5); --bg-sheet: #2d0032; --bg-toast: #3c0044; } [data-theme="neon-rave"] .night-sky { background: radial-gradient(1200px 600px at 85% -10%, rgba(255, 0, 255, 0.22), transparent 60%), radial-gradient(900px 500px at 10% 110%, rgba(1, 205, 254, 0.18), transparent 60%), linear-gradient(180deg, #0d0010 0%, #1a0022 55%, #0d0010 100%); } [data-theme="eyebleed"] { --bg-deep: #ffff00; --bg-panel: rgba(255, 120, 0, 0.92); --bg-panel-2: rgba(255, 80, 120, 0.94); --border: rgba(255, 0, 255, 0.5); --border-strong: #ff00ff; --text: #ff1493; --text-dim: #7f00ff; --accent: #0000ff; --accent-2: #ff0000; --accent-glow: rgba(0, 0, 255, 0.5); --bg-sheet: #ff7800; --bg-toast: #ff5094; --shadow: 0 10px 32px rgba(255, 0, 255, 0.4); } [data-theme="eyebleed"] .night-sky { background: radial-gradient(1200px 600px at 85% -10%, rgba(0, 255, 255, 0.5), transparent 60%), radial-gradient(900px 500px at 10% 110%, rgba(255, 0, 255, 0.4), transparent 60%), linear-gradient(180deg, #ffff00 0%, #ffd000 55%, #ffff00 100%); } /* ---------- Модалка настроек: карточки тем ---------- */ .theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px; } .theme-card { position: relative; background: var(--bg-panel-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s; } .theme-card:hover { border-color: var(--border-strong); transform: translateY(-1px); } .theme-card.active { border-color: var(--accent); box-shadow: 0 0 14px var(--accent-glow); } .theme-swatches { display: flex; gap: 6px; margin-bottom: 8px; } .theme-swatches span { width: 24px; height: 24px; border-radius: 7px; border: 1px solid rgba(0, 0, 0, 0.25); } .theme-name { font-weight: 600; font-size: 14px; color: var(--accent-2); } .theme-card.active .theme-name::after { content: " ✓"; } .theme-desc { font-size: 12px; color: var(--text-dim); margin-top: 2px; line-height: 1.35; } /* Подтверждение шуточной темы: раскрывается внутри карточки */ .theme-warning { display: none; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border-strong); } .theme-card.warn-open .theme-warning { display: block; } .theme-warning p { margin: 0 0 8px; font-size: 12px; line-height: 1.35; color: var(--red); } .theme-warning-btns { display: flex; flex-direction: column; gap: 6px; } .theme-warning-btns button { font-family: var(--font-body); font-size: 12.5px; font-weight: 600; padding: 6px 8px; border-radius: 8px; cursor: pointer; } .theme-confirm-yes { color: #241a05; border: none; background: linear-gradient(180deg, var(--accent-2), var(--accent)); } .theme-confirm-no { color: var(--text-dim); border: 1px solid var(--border); background: transparent; } .theme-confirm-no:hover { color: var(--text); border-color: var(--border-strong); }