/* * themes.css - 4套幼教风格主题 * theme-pink | 粉嫩甜心风（默认） * theme-blue | 天空童话风 * theme-green | 森林自然风 * theme-yellow | 阳光暖意风 * * 使用方式：给或添加对应 class */ /* ============================================================ 主题1：粉嫩甜心风 theme-pink（默认，与原 style.css 一致） ============================================================ */ body.theme-pink, html.theme-pink body { --c-primary: #FF8FAB; --c-primary-deep: #F06292; --c-secondary: #90CAF9; --c-accent: #FFD54F; --c-bg-from: #FFF0F5; --c-bg-to: #E8F4FF; --c-card: rgba(255,255,255,0.88); --c-nav-bg: rgba(255,255,255,0.92); --c-nav-border: #FFE0EC; --c-pill-active: #FF8FAB; --c-tag1-bg: #FFE8EE; --c-tag1-text: #D81B60; --c-tag2-bg: #E3F2FF; --c-tag2-text: #1565C0; --c-sidebar: #fff; --c-sidebar-border: #f0e0e8; --c-sidebar-active: #FFE8EE; --c-sidebar-active-text: #F06292; --c-btn-grad: linear-gradient(135deg, #FF8FAB, #F06292); --c-hero-from: #FFD6E7; --c-hero-to: #C8E6FF; --c-grade-1: linear-gradient(135deg,#FFE0EC,#FFB3CC); --c-grade-2: linear-gradient(135deg,#BBD9FF,#90CAF9); --c-grade-3: linear-gradient(135deg,#FFF0B3,#FFD54F); --c-grade-4: linear-gradient(135deg,#C8EEC8,#A5D6A7); --c-grade-5: linear-gradient(135deg,#E8CCFF,#CE93D8); --c-grade-6: linear-gradient(135deg,#FFCBA3,#FFAB76); --c-feature-bg: #fff; --c-section-line: #FF8FAB; --shadow-card: 0 4px 20px rgba(255,143,171,0.15); --shadow-hover: 0 8px 30px rgba(255,143,171,0.28); background: linear-gradient(135deg, var(--c-bg-from) 0%, var(--c-bg-to) 100%); } /* ============================================================ 主题2：天空童话风 theme-blue 浅蓝+白云+淡紫，干净清透 ============================================================ */ body.theme-blue, html.theme-blue body { --c-primary: #64B5F6; --c-primary-deep: #1E88E5; --c-secondary: #CE93D8; --c-accent: #80DEEA; --c-bg-from: #E3F2FF; --c-bg-to: #F3E5F5; --c-card: rgba(255,255,255,0.90); --c-nav-bg: rgba(255,255,255,0.93); --c-nav-border: #BBDEFB; --c-pill-active: #64B5F6; --c-tag1-bg: #E3F2FF; --c-tag1-text: #1565C0; --c-tag2-bg: #F3E5F5; --c-tag2-text: #6A1B9A; --c-sidebar: #F8FCFF; --c-sidebar-border: #BBDEFB; --c-sidebar-active: #E3F2FF; --c-sidebar-active-text: #1E88E5; --c-btn-grad: linear-gradient(135deg, #64B5F6, #1E88E5); --c-hero-from: #C8E6FF; --c-hero-to: #E1D5F0; --c-grade-1: linear-gradient(135deg,#C8E6FF,#90CAF9); --c-grade-2: linear-gradient(135deg,#E1BEE7,#CE93D8); --c-grade-3: linear-gradient(135deg,#B2EBF2,#80DEEA); --c-grade-4: linear-gradient(135deg,#C8EEC8,#A5D6A7); --c-grade-5: linear-gradient(135deg,#FFE0B2,#FFCC80); --c-grade-6: linear-gradient(135deg,#FCE4EC,#F48FB1); --c-feature-bg: #F8FCFF; --c-section-line: #64B5F6; --shadow-card: 0 4px 20px rgba(100,181,246,0.15); --shadow-hover: 0 8px 30px rgba(100,181,246,0.28); background: linear-gradient(135deg, var(--c-bg-from) 0%, var(--c-bg-to) 100%); } /* ============================================================ 主题3：森林自然风 theme-green 嫩绿+米白+木棕，温暖自然 ============================================================ */ body.theme-green, html.theme-green body { --c-primary: #66BB6A; --c-primary-deep: #388E3C; --c-secondary: #FFB74D; --c-accent: #AED581; --c-bg-from: #F1F8E9; --c-bg-to: #FFF8E1; --c-card: rgba(255,255,255,0.90); --c-nav-bg: rgba(255,255,255,0.94); --c-nav-border: #DCEDC8; --c-pill-active: #66BB6A; --c-tag1-bg: #E8F5E9; --c-tag1-text: #2E7D32; --c-tag2-bg: #FFF8E1; --c-tag2-text: #E65100; --c-sidebar: #F9FCF5; --c-sidebar-border: #DCEDC8; --c-sidebar-active: #E8F5E9; --c-sidebar-active-text: #388E3C; --c-btn-grad: linear-gradient(135deg, #81C784, #388E3C); --c-hero-from: #DCEDC8; --c-hero-to: #FFF9C4; --c-grade-1: linear-gradient(135deg,#C8EEC8,#A5D6A7); --c-grade-2: linear-gradient(135deg,#FFF9C4,#FFF176); --c-grade-3: linear-gradient(135deg,#FFE0B2,#FFCC80); --c-grade-4: linear-gradient(135deg,#B2EBF2,#80DEEA); --c-grade-5: linear-gradient(135deg,#F8BBD9,#F48FB1); --c-grade-6: linear-gradient(135deg,#D1C4E9,#B39DDB); --c-feature-bg: #F9FCF5; --c-section-line: #66BB6A; --shadow-card: 0 4px 20px rgba(102,187,106,0.15); --shadow-hover: 0 8px 30px rgba(102,187,106,0.28); background: linear-gradient(135deg, var(--c-bg-from) 0%, var(--c-bg-to) 100%); } /* ============================================================ 主题4：阳光暖意风 theme-yellow 橙黄+奶白+珊瑚，活泼明亮 ============================================================ */ body.theme-yellow, html.theme-yellow body { --c-primary: #FFB300; --c-primary-deep: #F57F17; --c-secondary: #FF7043; --c-accent: #FFCA28; --c-bg-from: #FFFDE7; --c-bg-to: #FFF3E0; --c-card: rgba(255,255,255,0.90); --c-nav-bg: rgba(255,255,255,0.94); --c-nav-border: #FFE082; --c-pill-active: #FFB300; --c-tag1-bg: #FFF8E1; --c-tag1-text: #E65100; --c-tag2-bg: #FBE9E7; --c-tag2-text: #BF360C; --c-sidebar: #FFFDF5; --c-sidebar-border: #FFE082; --c-sidebar-active: #FFF8E1; --c-sidebar-active-text: #F57F17; --c-btn-grad: linear-gradient(135deg, #FFD54F, #FF8F00); --c-hero-from: #FFF9C4; --c-hero-to: #FFE0B2; --c-grade-1: linear-gradient(135deg,#FFF9C4,#FFF176); --c-grade-2: linear-gradient(135deg,#FFE0B2,#FFCC80); --c-grade-3: linear-gradient(135deg,#FFCCBC,#FFAB91); --c-grade-4: linear-gradient(135deg,#C8EEC8,#A5D6A7); --c-grade-5: linear-gradient(135deg,#C8E6FF,#90CAF9); --c-grade-6: linear-gradient(135deg,#E8CCFF,#CE93D8); --c-feature-bg: #FFFDF5; --c-section-line: #FFB300; --shadow-card: 0 4px 20px rgba(255,179,0,0.15); --shadow-hover: 0 8px 30px rgba(255,179,0,0.28); background: linear-gradient(135deg, var(--c-bg-from) 0%, var(--c-bg-to) 100%); } /* ============================================================ 所有主题共享：用 CSS 变量覆盖 style.css 中的固定值 ============================================================ */ body.theme-pink, body.theme-blue, body.theme-green, body.theme-yellow { /* Navbar */ } body.theme-pink .navbar, body.theme-blue .navbar, body.theme-green .navbar, body.theme-yellow .navbar { background: var(--c-nav-bg) !important; border-bottom-color: var(--c-nav-border) !important; } body.theme-pink .logo, body.theme-blue .logo, body.theme-green .logo, body.theme-yellow .logo { color: var(--c-primary-deep) !important; } body.theme-pink .nav-links a:hover, body.theme-blue .nav-links a:hover, body.theme-green .nav-links a:hover, body.theme-yellow .nav-links a:hover, body.theme-pink .nav-links a.active, body.theme-blue .nav-links a.active, body.theme-green .nav-links a.active, body.theme-yellow .nav-links a.active { background: var(--c-tag1-bg) !important; color: var(--c-primary-deep) !important; } /* Buttons */ body.theme-pink .btn-primary, body.theme-blue .btn-primary, body.theme-green .btn-primary, body.theme-yellow .btn-primary { background: var(--c-btn-grad) !important; box-shadow: 0 4px 12px rgba(0,0,0,0.18) !important; } body.theme-pink .btn-outline, body.theme-blue .btn-outline, body.theme-green .btn-outline, body.theme-yellow .btn-outline { color: var(--c-primary-deep) !important; border-color: var(--c-primary) !important; } body.theme-pink .btn-outline:hover, body.theme-blue .btn-outline:hover, body.theme-green .btn-outline:hover, body.theme-yellow .btn-outline:hover { background: var(--c-tag1-bg) !important; } /* Cards & shadows */ body.theme-pink .card, body.theme-blue .card, body.theme-green .card, body.theme-yellow .card { box-shadow: var(--shadow-card) !important; } body.theme-pink .video-card, body.theme-blue .video-card, body.theme-green .video-card, body.theme-yellow .video-card { box-shadow: var(--shadow-card) !important; } body.theme-pink .video-card:hover, body.theme-blue .video-card:hover, body.theme-green .video-card:hover, body.theme-yellow .video-card:hover { box-shadow: var(--shadow-hover) !important; } /* Category pills */ body.theme-pink .category-pill:hover, body.theme-blue .category-pill:hover, body.theme-green .category-pill:hover, body.theme-yellow .category-pill:hover, body.theme-pink .category-pill.active, body.theme-blue .category-pill.active, body.theme-green .category-pill.active, body.theme-yellow .category-pill.active { background: var(--c-primary) !important; border-color: var(--c-primary) !important; color: white !important; } /* Section title bar */ body.theme-pink .section-title::before, body.theme-blue .section-title::before, body.theme-green .section-title::before, body.theme-yellow .section-title::before { background: linear-gradient(var(--c-primary), var(--c-primary-deep)) !important; } /* Form input focus */ body.theme-pink .form-input:focus, body.theme-blue .form-input:focus, body.theme-green .form-input:focus, body.theme-yellow .form-input:focus { border-color: var(--c-primary) !important; box-shadow: 0 0 0 3px rgba(0,0,0,0.06) !important; } /* Avatar btn */ body.theme-pink .avatar-btn, body.theme-blue .avatar-btn, body.theme-green .avatar-btn, body.theme-yellow .avatar-btn { background: linear-gradient(135deg, var(--c-primary), var(--c-secondary)) !important; } /* Sidebar (admin) */ body.theme-pink .sidebar, body.theme-blue .sidebar, body.theme-green .sidebar, body.theme-yellow .sidebar { background: var(--c-sidebar) !important; border-right-color: var(--c-sidebar-border) !important; } body.theme-pink .sidebar-logo, body.theme-blue .sidebar-logo, body.theme-green .sidebar-logo, body.theme-yellow .sidebar-logo { color: var(--c-primary-deep) !important; border-bottom-color: var(--c-nav-border) !important; } body.theme-pink .s-link.active, body.theme-blue .s-link.active, body.theme-green .s-link.active, body.theme-yellow .s-link.active { background: var(--c-sidebar-active) !important; color: var(--c-sidebar-active-text) !important; } body.theme-pink .s-link:hover, body.theme-blue .s-link:hover, body.theme-green .s-link:hover, body.theme-yellow .s-link:hover { background: var(--c-sidebar-active) !important; color: var(--c-sidebar-active-text) !important; } /* Tags override */ body.theme-pink .tag-pink, body.theme-blue .tag-pink, body.theme-green .tag-pink, body.theme-yellow .tag-pink { background: var(--c-tag1-bg) !important; color: var(--c-tag1-text) !important; } body.theme-pink .tag-blue, body.theme-blue .tag-blue, body.theme-green .tag-blue, body.theme-yellow .tag-blue { background: var(--c-tag2-bg) !important; color: var(--c-tag2-text) !important; } /* Badge override */ body.theme-pink .badge-pink, body.theme-blue .badge-pink, body.theme-green .badge-pink, body.theme-yellow .badge-pink { background: var(--c-tag1-bg) !important; color: var(--c-tag1-text) !important; } /* Scrollbar */ body.theme-pink ::-webkit-scrollbar-thumb { background: var(--c-primary) !important; } body.theme-blue ::-webkit-scrollbar-thumb { background: var(--c-primary) !important; } body.theme-green ::-webkit-scrollbar-thumb { background: var(--c-primary) !important; } body.theme-yellow ::-webkit-scrollbar-thumb { background: var(--c-primary) !important; } /* Grade cards on homepage */ body.theme-pink .gc:nth-child(1), body.theme-blue .gc:nth-child(1), body.theme-green .gc:nth-child(1), body.theme-yellow .gc:nth-child(1) { background: var(--c-grade-1) !important; } body.theme-pink .gc:nth-child(2), body.theme-blue .gc:nth-child(2), body.theme-green .gc:nth-child(2), body.theme-yellow .gc:nth-child(2) { background: var(--c-grade-2) !important; } body.theme-pink .gc:nth-child(3), body.theme-blue .gc:nth-child(3), body.theme-green .gc:nth-child(3), body.theme-yellow .gc:nth-child(3) { background: var(--c-grade-3) !important; } body.theme-pink .gc:nth-child(4), body.theme-blue .gc:nth-child(4), body.theme-green .gc:nth-child(4), body.theme-yellow .gc:nth-child(4) { background: var(--c-grade-4) !important; } body.theme-pink .gc:nth-child(5), body.theme-blue .gc:nth-child(5), body.theme-green .gc:nth-child(5), body.theme-yellow .gc:nth-child(5) { background: var(--c-grade-5) !important; } body.theme-pink .gc:nth-child(6), body.theme-blue .gc:nth-child(6), body.theme-green .gc:nth-child(6), body.theme-yellow .gc:nth-child(6) { background: var(--c-grade-6) !important; } /* Login page per theme */ body.theme-blue { background: linear-gradient(160deg, #C8E6FF 0%, #E1D5F0 50%, #C8EEC8 100%) !important; } body.theme-green { background: linear-gradient(160deg, #DCEDC8 0%, #FFF9C4 50%, #B2EBF2 100%) !important; } body.theme-yellow { background: linear-gradient(160deg, #FFF9C4 0%, #FFE0B2 50%, #FFCCBC 100%) !important; }