/** * ============================================================================ * V2 LIGHT THEME — Светлая тема * ============================================================================ * * @file web/css/v2/light-theme.css * @description Переопределения CSS-переменных и стилей для светлой темы * @version 1.0 (Декабрь 2025) * * ============================================================================ * СОДЕРЖИМОЕ: * ──────────────────────────────────────── * * 1. CSS Variables Override — переопределение переменных * 2. Layout — фон и основа * 3. Components — карточки, кнопки, бейджи * 4. Dashboard — hero, CTA * 5. Exchanges — карточки обменов * 6. Profile — страница профиля * 7. News — страница новостей * 8. Site pages — about, rules-magic * 9. Theme Switcher — иконки переключателя * * ============================================================================ * АКТИВАЦИЯ: * * Добавить класс .v2-theme-light на body: * * * Переключение через JS или ThemeSwitcherWidget * * ============================================================================ */ /* ========================================================================== 1. CSS VARIABLES OVERRIDE ========================================================================== */ .v2-theme-light { /* Фоны — светлые тона */ --v2-bg-deep: #f8fafc; --v2-bg-dark: #f1f5f9; --v2-bg-card: #ffffff; --v2-bg-card-on-card: #ececec80; --v2-bg-card-hover: #f8fafc; --v2-bg-elevated: #f8fafc; /* Акценты — приглушённые для светлого фона */ --v2-gold: #b45309; --v2-gold-light: #d97706; --v2-gold-glow: rgba(180, 83, 9, 0.15); --v2-red: #dc2626; --v2-red-bright: #b91c1c; --v2-red-glow: rgba(220, 38, 38, 0.15); --v2-green: #047857; --v2-green-bright: #059669; --v2-green-glow: rgba(4, 120, 87, 0.15); --v2-ice-blue: #0284c7; --v2-ice-glow: rgba(2, 132, 199, 0.1); --v2-purple: #7c3aed; --v2-purple-glow: rgba(124, 58, 237, 0.1); /* Тексты — тёмные для светлого фона */ --v2-text: #0f172a; --v2-text-muted: #475569; --v2-text-dim: #94a3b8; --v2-text-dark: white; /* Градиенты — светлые */ --v2-gradient-aurora: linear-gradient(135deg, #e0e7ff 0%, #f1f5f9 50%, #fef3c7 100%); /* Тени — мягкие */ --v2-shadow-glow: 0 0 30px rgba(180, 83, 9, 0.08); --v2-shadow-card: 0 4px 20px rgba(0, 0, 0, 0.08); --v2-shadow-hover: 0 8px 40px rgba(0, 0, 0, 0.12), 0 0 20px rgba(180, 83, 9, 0.05); } /* ========================================================================== 2. LAYOUT ========================================================================== */ .v2-theme-light .v2-layout { background: var(--v2-gradient-aurora); } /* ========================================================================== 3. COMPONENTS — Карточки, кнопки, бейджи ========================================================================== */ /* Cards */ .v2-theme-light .v2-card, .v2-theme-light .v2-stat-card { background: #ffffff; border-color: rgba(0, 0, 0, 0.08); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); } .v2-theme-light .v2-card:hover, .v2-theme-light .v2-stat-card:hover { border-color: rgba(0, 0, 0, 0.12); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); } .v2-theme-light .v2-stat-icon { background: rgba(0, 0, 0, 0.03); border-color: rgba(0, 0, 0, 0.08); } /* Buttons */ .v2-theme-light .v2-btn-outline { border-color: rgba(0, 0, 0, 0.15); color: var(--v2-text); } .v2-theme-light .v2-btn-outline:hover { background: rgba(180, 83, 9, 0.08); border-color: var(--v2-gold); color: var(--v2-gold); } .v2-theme-light .v2-btn-ghost { background: rgba(0, 0, 0, 0.03); border-color: rgba(0, 0, 0, 0.08); color: var(--v2-text-muted); } .v2-theme-light .v2-btn-ghost:hover { background: rgba(0, 0, 0, 0.06); color: var(--v2-text); } /* Badges */ .v2-theme-light .v2-badge { background: rgba(0, 0, 0, 0.05); border-color: rgba(0, 0, 0, 0.1); } /* Progress */ .v2-theme-light .v2-progress { background: rgba(0, 0, 0, 0.06); } /* Tips */ .v2-theme-light .v2-tip { background: rgba(180, 83, 9, 0.08); border-color: rgba(180, 83, 9, 0.15); } .v2-theme-light .v2-tip-text { color: #92400e; } .v2-theme-light .v2-tip-success { background: rgba(4, 120, 87, 0.08); border-color: rgba(4, 120, 87, 0.15); } .v2-theme-light .v2-tip-success .v2-tip-text { color: #047857; } /* Quick Actions */ .v2-theme-light .v2-quick-action { background: rgba(0, 0, 0, 0.02); border-color: rgba(0, 0, 0, 0.06); } .v2-theme-light .v2-quick-action:hover { background: rgba(180, 83, 9, 0.05); border-color: var(--v2-gold); } .v2-theme-light .v2-quick-action-icon { background: rgba(0, 0, 0, 0.04); } /* Character Message */ .v2-theme-light .v2-character-message { background: rgba(0, 0, 0, 0.02); border-color: rgba(0, 0, 0, 0.06); } .v2-theme-light .v2-character-avatar { background: #ffffff; } .v2-theme-light .v2-character-grinch { background: rgba(231, 81, 90, 0.06); border-color: rgba(231, 81, 90, 0.15); } .v2-theme-light .v2-character-grinch .v2-character-avatar { background: rgba(231, 81, 90, 0.1); } /* Empty State */ .v2-theme-light .v2-empty-state { background: transparent; } /* Info Banner */ .v2-theme-light .v2-info-banner { background: #ffffff; border-color: rgba(124, 58, 237, 0.15); } /* ========================================================================== 4. DASHBOARD — Hero, CTA ========================================================================== */ .v2-theme-light .v2-hero { background: #ffffff; border-color: rgba(0, 0, 0, 0.08); } .v2-theme-light .v2-hero-bg { background: radial-gradient(ellipse at 20% 80%, rgba(220, 38, 38, 0.08) 0%, transparent 50%), radial-gradient(ellipse at 80% 20%, rgba(4, 120, 87, 0.08) 0%, transparent 50%), radial-gradient(ellipse at 50% 50%, rgba(180, 83, 9, 0.1) 0%, transparent 60%); opacity: 0.8; } .v2-theme-light .v2-hero-text h1 { background: linear-gradient(135deg, #b45309 0%, #d97706 100%); -webkit-background-clip: text; background-clip: text; } .v2-theme-light .v2-hero-avatar img { border-color: var(--v2-gold); box-shadow: 0 0 30px rgba(180, 83, 9, 0.2); } .v2-theme-light .v2-hero-character { background: #ffffff; border-color: var(--v2-gold); } .v2-theme-light .v2-snowflake { color: rgba(0, 0, 0, 0.1); } /* CTA */ .v2-theme-light .v2-cta { background: #ffffff; } .v2-theme-light .v2-cta-glow { opacity: 0.4; } .v2-theme-light .v2-cta-center { border-color: rgba(0, 0, 0, 0.08); } /* ========================================================================== 5. EXCHANGES — Карточки обменов ========================================================================== */ .v2-theme-light .v2-exchange-card, .v2-theme-light .v2-available-card, .v2-theme-light .v2-exchange-item { background: #ffffff; border-color: rgba(0, 0, 0, 0.08); } .v2-theme-light .v2-exchange-card:hover, .v2-theme-light .v2-exchange-item:hover { border-color: rgba(0, 0, 0, 0.15); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1); } .v2-theme-light .v2-exchange-header { background: linear-gradient(135deg, rgba(220, 38, 38, 0.05) 0%, rgba(4, 120, 87, 0.05) 100%); } .v2-theme-light .v2-exchange-recipient { background: rgba(0, 0, 0, 0.02); border-color: rgba(0, 0, 0, 0.06); } .v2-theme-light .v2-exchange-item.participating { background: linear-gradient(135deg, #ffffff 0%, rgba(4, 120, 87, 0.05) 100%); } .v2-theme-light .v2-exchange-item.upcoming { background: linear-gradient(135deg, #ffffff 0%, rgba(124, 58, 237, 0.05) 100%); } .v2-theme-light .v2-exchange-upcoming-info { background: rgba(124, 58, 237, 0.05); border-color: rgba(124, 58, 237, 0.15); } .v2-theme-light .v2-exchange-progress-bar { background: #e2e8f0; } .v2-theme-light .v2-past-exchange-card { background: #ffffff; border-color: rgba(0, 0, 0, 0.08); } /* ========================================================================== 6. PROFILE ========================================================================== */ .v2-theme-light .v2-profile-hero { background: #ffffff; border-color: rgba(0, 0, 0, 0.08); } .v2-theme-light .v2-profile-hero-pattern { opacity: 0.3; } .v2-theme-light .v2-profile-hero-glow { opacity: 0.15; } .v2-theme-light .v2-profile-avatar { box-shadow: 0 0 30px rgba(180, 83, 9, 0.2); } .v2-theme-light .v2-profile-avatar-ring { border-color: rgba(180, 83, 9, 0.2); } .v2-theme-light .v2-profile-about { background: #f8fafc; } .v2-theme-light .v2-profile-wishes { background: rgba(180, 83, 9, 0.06); } .v2-theme-light .v2-achievement { background: #f8fafc; border-color: rgba(0, 0, 0, 0.06); } .v2-theme-light .v2-timeline-item { background: #f8fafc; border-color: rgba(0, 0, 0, 0.06); } .v2-theme-light .v2-karma-item { background: #f8fafc; } .v2-theme-light .v2-circle-bg { stroke: #e2e8f0; } /* ========================================================================== 7. NEWS ========================================================================== */ .v2-theme-light .v2-page-header { background: #ffffff; border-color: rgba(0, 0, 0, 0.08); } .v2-theme-light .v2-news-card { background: #ffffff; border-color: rgba(0, 0, 0, 0.08); } .v2-theme-light .v2-news-card:hover { border-color: var(--v2-gold); } .v2-theme-light .v2-news-card-footer { border-color: rgba(0, 0, 0, 0.06); } /*.v2-theme-light .v2-news-item {*/ /* background: rgba(0, 0, 0, 0.02);*/ /* border-color: rgba(0, 0, 0, 0.06);*/ /*}*/ .v2-theme-light .v2-news-item:hover { background: rgba(180, 83, 9, 0.05); border-color: var(--v2-gold); } .v2-theme-light .v2-pagination-btn, .v2-theme-light .v2-pagination-page { background: #ffffff; border-color: rgba(0, 0, 0, 0.1); } .v2-theme-light .v2-pagination-page.active { background: var(--v2-gold); border-color: var(--v2-gold); color: #ffffff; } .v2-theme-light .v2-article { background: #ffffff; border-color: rgba(0, 0, 0, 0.08); } .v2-theme-light .v2-article-header { border-color: rgba(0, 0, 0, 0.06); } .v2-theme-light .v2-article-footer { border-color: rgba(0, 0, 0, 0.06); } .v2-theme-light .v2-related-item { background: rgba(0, 0, 0, 0.02); } .v2-theme-light .v2-related-item:hover { background: rgba(0, 0, 0, 0.04); } .v2-theme-light .v2-card-cta { background: linear-gradient(135deg, rgba(220, 38, 38, 0.05) 0%, rgba(4, 120, 87, 0.05) 100%); } /* ========================================================================== 8. SITE PAGES — About, Rules, FAQ ========================================================================== */ .v2-theme-light .v2-timeline-content, .v2-theme-light .v2-magic-narrator-speech, .v2-theme-light .v2-faq-snow-item, .v2-theme-light .v2-concept-card { background: #ffffff; border-color: rgba(0, 0, 0, 0.1); } .v2-theme-light .v2-past-exchange-item { background: rgba(0, 0, 0, 0.02); border-color: rgba(0, 0, 0, 0.06); } .v2-theme-light .v2-past-exchange-item:hover { background: rgba(0, 0, 0, 0.04); } .v2-theme-light .v2-past-exchange-icon { background: rgba(0, 0, 0, 0.04); } /* FAQ */ .v2-theme-light .v2-faq-item { background: #ffffff; border-color: rgba(0, 0, 0, 0.08); } .v2-theme-light .v2-faq-item:hover { border-color: rgba(0, 0, 0, 0.15); } .v2-theme-light .v2-faq-question:hover, .v2-theme-light .v2-faq-question[aria-expanded="true"], .v2-theme-light .v2-faq-question-magic:hover { background: #f8fafc; } .v2-theme-light .v2-faq-answer { border-color: rgba(0, 0, 0, 0.06); } /* ========================================================================== 9. THEME SWITCHER ICONS ========================================================================== */ body:not(.v2-theme-light) .v2-theme-icon-dark { opacity: 1; transform: rotate(0deg) scale(1); } body:not(.v2-theme-light) .v2-theme-icon-light { opacity: 0; transform: rotate(90deg) scale(0.5); } .v2-theme-light .v2-theme-icon-dark { opacity: 0; transform: rotate(-90deg) scale(0.5); } .v2-theme-light .v2-theme-icon-light { opacity: 1; transform: rotate(0deg) scale(1); } /* ========================================================================== 10. FORMS ========================================================================== */ .v2-theme-light .v2-form-input, .v2-theme-light .v2-form-select, .v2-theme-light .v2-form-textarea { background: #f8fafc; border-color: rgba(0, 0, 0, 0.1); color: var(--v2-text); } .v2-theme-light .v2-form-input:focus, .v2-theme-light .v2-form-select:focus, .v2-theme-light .v2-form-textarea:focus { border-color: var(--v2-gold); } /* ========================================================================== 11. ROLE CARDS ========================================================================== */ .v2-theme-light .v2-role-card { background: #ffffff; border-color: rgba(0, 0, 0, 0.08); } /* ========================================================================== 12. REVIEWS (дополнительно) ========================================================================== */ .v2-theme-light .v2-review-card { background: #ffffff; border-color: rgba(0, 0, 0, 0.08); } .v2-theme-light .v2-review-card:hover { border-color: rgba(0, 0, 0, 0.12); }