/* ============================================================================ themes.css — кастомные цветовые схемы профиля Применяется через class на : html.theme-red, html.theme-blue и т.д. ПОДКЛЮЧАТЬ ПЕРВЫМ на странице (до всех остальных css файлов). Селектор html.theme-X имеет более высокую специфичность чем :root в других файлах, поэтому ПЕРЕОПРЕДЕЛЯЕТ их сезонные переменные. ============================================================================ */ /* ============================================================= ДЕФОЛТНАЯ (СЕЗОННАЯ) ТЕМА — применяется когда .theme-* не задан Совпадает с переменными в profile.css/notifications.css ============================================================= */ :root { /* ВЕСНА (по умолчанию) */ --primary-color: #3ec049; --secondary-color: #30edae; --primary-rgb: 62, 192, 73; --secondary-rgb: 48, 237, 174; --bg-dark: #0e180d; --bg-darker: #050f06; --bg-extra: #042701; --season-orb1: #2dba3c; --season-orb2: #00e5aa; --season-orb3: #b8ff6e; } /* ============================================================= КАСТОМНЫЕ ТЕМЫ (выбираются пользователем) ============================================================= */ /* --- 🔴 КРАСНАЯ --- */ html.theme-red { --primary-color: #e53e3e; --secondary-color: #ff8a8a; --primary-rgb: 229, 62, 62; --secondary-rgb: 255, 138, 138; --bg-dark: #1a0808; --bg-darker: #0d0303; --bg-extra: #2c0a0a; --season-orb1: #cc1f1f; --season-orb2: #ff5e5e; --season-orb3: #ffb1b1; } /* --- 🟠 ОРАНЖЕВАЯ --- */ html.theme-orange { --primary-color: #ed8936; --secondary-color: #ffd089; --primary-rgb: 237, 137, 54; --secondary-rgb: 255, 208, 137; --bg-dark: #1a0e00; --bg-darker: #0d0700; --bg-extra: #2c1a00; --season-orb1: #d96a1a; --season-orb2: #ffaa55; --season-orb3: #ffe2a7; } /* --- 🟡 ЖЁЛТАЯ --- */ html.theme-yellow { --primary-color: #ecc94b; --secondary-color: #fff3a3; --primary-rgb: 236, 201, 75; --secondary-rgb: 255, 243, 163; --bg-dark: #1a1500; --bg-darker: #0d0a00; --bg-extra: #2c2400; --season-orb1: #d4ad1f; --season-orb2: #ffe66e; --season-orb3: #fff7c2; } /* --- ⚪ БЕЛАЯ (свет — высокий контраст) --- */ html.theme-white { --primary-color: #ffffff; --secondary-color: #c8c8c8; --primary-rgb: 255, 255, 255; --secondary-rgb: 200, 200, 200; --bg-dark: #1f1f1f; --bg-darker: #141414; --bg-extra: #2a2a2a; --season-orb1: #d6d6d6; --season-orb2: #ffffff; --season-orb3: #a8a8a8; } /* --- ⚫ ТЁМНАЯ (минималистичный серый) --- */ html.theme-dark { --primary-color: #94a3b8; --secondary-color: #cbd5e1; --primary-rgb: 148, 163, 184; --secondary-rgb: 203, 213, 225; --bg-dark: #0a0a0a; --bg-darker: #050505; --bg-extra: #141414; --season-orb1: #475569; --season-orb2: #64748b; --season-orb3: #94a3b8; } /* --- 🟢 ЗЕЛЁНАЯ --- */ html.theme-green { --primary-color: #3ec049; --secondary-color: #30edae; --primary-rgb: 62, 192, 73; --secondary-rgb: 48, 237, 174; --bg-dark: #0e180d; --bg-darker: #050f06; --bg-extra: #042701; --season-orb1: #2dba3c; --season-orb2: #00e5aa; --season-orb3: #b8ff6e; } /* --- 🟣 ФИОЛЕТОВАЯ --- */ html.theme-purple { --primary-color: #9f5ce0; --secondary-color: #d48cff; --primary-rgb: 159, 92, 224; --secondary-rgb: 212, 140, 255; --bg-dark: #160a26; --bg-darker: #0a0414; --bg-extra: #20103a; --season-orb1: #7c3fc2; --season-orb2: #b86eff; --season-orb3: #e8b8ff; } /* --- 🔵 СИНЯЯ --- */ html.theme-blue { --primary-color: #3081ed; --secondary-color: #45f3ff; --primary-rgb: 48, 129, 237; --secondary-rgb: 69, 243, 255; --bg-dark: #050d18; --bg-darker: #020810; --bg-extra: #001a2c; --season-orb1: #0066cc; --season-orb2: #00ccff; --season-orb3: #99eeff; } /* --- 🩷 РОЗОВАЯ --- */ html.theme-pink { --primary-color: #ed64a6; --secondary-color: #ffa3d1; --primary-rgb: 237, 100, 166; --secondary-rgb: 255, 163, 209; --bg-dark: #1a0712; --bg-darker: #0d040a; --bg-extra: #2c0a1d; --season-orb1: #d63d8a; --season-orb2: #ff7eb8; --season-orb3: #ffd4e8; } /* ============================================================= ПРОИЗВОДНЫЕ ПЕРЕМЕННЫЕ (общие для всех тем) Не нужно дублировать в каждой теме — они вычисляются из primary/secondary ============================================================= */ :root { --gradient: linear-gradient(45deg, var(--primary-color), var(--secondary-color)); --gradient-reverse: linear-gradient(45deg, var(--secondary-color), var(--primary-color)); --bg-gradient: linear-gradient(135deg, var(--bg-dark), var(--bg-darker), var(--bg-extra)); --shadow-primary: 0 10px 20px rgba(var(--primary-rgb), 0.3); --shadow-card: 0 10px 25px rgba(var(--primary-rgb), 0.2); --shadow-card-gold: 0 10px 25px rgba(var(--secondary-rgb), 0.2); --border-gradient: linear-gradient(to right, var(--primary-color), var(--secondary-color)); } /* ============================================================= БЕЛАЯ ТЕМА — переопределение для читаемости На primary-кнопках и gradient-фоне текст должен быть чёрным (потому что фон становится белым/светлым) ============================================================= */ /* Введём переменную для текста на primary-фоне */ :root { --text-on-primary: white; /* по умолчанию текст белый на цветной кнопке */ } html.theme-white, html.theme-white :root { --text-on-primary: #000; /* на белом — чёрный */ } /* Кнопки с градиентным/primary фоном */ html.theme-white .btn-primary, html.theme-white .profile-action-btn:not(.secondary), html.theme-white .auth-tab.active, html.theme-white .pin-toggle-btn.active, html.theme-white #generate-btn, html.theme-white .article-actions .btn-primary, html.theme-white .action-button.save-btn { color: #000 !important; } /* Gradient-текст (заголовки, имя пользователя) — на белой теме теряет контраст с фоном. Заменяем gradient-text на простой чёрный с лёгкой подсветкой, чтобы текст оставался виден */ html.theme-white .profile-username, html.theme-white .section-title, html.theme-white .generation-title, html.theme-white .article-title, html.theme-white .featured-title, html.theme-white .model-header h3, html.theme-white .theme-picker-title, html.theme-white .logo-accent { -webkit-text-fill-color: #d8d8d8 !important; color: #d8d8d8 !important; text-shadow: 0 0 12px rgba(255, 255, 255, 0.4); } /* Активные вкладки и tab-btn (Публикации / Генерации) */ html.theme-white .tab-btn.active, html.theme-white .auth-tab.active { color: #000 !important; } /* Текст внутри featured-star / иконок поверх primary-фона */ html.theme-white .featured-star, html.theme-white .achievement-tooltip-name { color: #000; } /* Кнопки в модалках с primary фоном */ html.theme-white .save-btn, html.theme-white .submit-btn, html.theme-white .modal-footer .btn-primary { color: #000 !important; } /* Лейблы "// ПРОМПТ" и аналогичные моноширинные подсказки — они часто на тёмном фоне, оставляем как есть. Но если они на светлом фоне — это уже не белая тема */ /* Hover/active эффекты на primary-цветных элементах */ html.theme-white .style-tag:hover, html.theme-white .preset-btn.active { color: #000; }