/** * modern.css — «Современный» дизайн ЛК (Задача 1). * * Подключается ДОПОЛНИТЕЛЬНО к styles.css, когда в админке выбран дизайн * "modern" (на / ставится класс .design-modern). * * Базовый styles.css построен на CSS-переменных и общих классах, поэтому * основную часть перекраски делаем через переопределение переменных, а сверху * добавляем точечную отделку компонентов (шапка, сайдбар, карточки, кнопки, * формы, таблицы, welcome, модалки). * * Переключатель тёмная/светлая тема работает как и раньше: * - светлая тема: body/html.light-theme (основная, приятная, светлая) * - тёмная тема: без .light-theme (мягкая тёмная, НЕ чёрная) */ /* ═══════════════════════════════════════════════════════════════════════ 1. Палитра ═══════════════════════════════════════════════════════════════════════ */ /* Тёмная тема (мягкая, сине-графитовая — не пере-тёмная) */ html.design-modern, body.design-modern { --primary: #7c6cff; --primary-dark: #6a58f0; --primary-light: #a99dff; --secondary: #22d3ee; --success: #22c55e; --warning: #f5b301; --danger: #f6564b; --info: #38bdf8; --gradient-primary: linear-gradient(135deg, #7c6cff 0%, #22d3ee 100%); --gradient-secondary: linear-gradient(135deg, #a855f7 0%, #ec4899 100%); --gradient-success: linear-gradient(135deg, #34d399 0%, #22d3ee 100%); --bg-primary: #171d2e; --bg-secondary: #1e2639; --bg-tertiary: #2a3350; --bg-card: rgba(30, 38, 58, 0.72); --bg-card-hover: rgba(42, 51, 80, 0.85); --text-primary: #eef2fb; --text-secondary: #b9c3da; --text-muted: #8593b0; --shadow-sm: 0 2px 6px rgba(8, 12, 24, 0.25); --shadow-md: 0 6px 18px rgba(8, 12, 24, 0.30); --shadow-lg: 0 14px 34px rgba(8, 12, 24, 0.40); --shadow-xl: 0 24px 60px rgba(8, 12, 24, 0.48); --shadow-glow: 0 0 26px rgba(124, 108, 255, 0.40); --radius-sm: 10px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 28px; } /* Светлая тема (основная — чистая, воздушная) */ html.design-modern.light-theme, body.design-modern.light-theme { --bg-primary: #eef1f8; --bg-secondary: #ffffff; --bg-tertiary: #e5eaf5; --bg-card: rgba(255, 255, 255, 0.92); --bg-card-hover: #ffffff; --text-primary: #1b2440; --text-secondary: #4a5578; --text-muted: #7482a3; --shadow-sm: 0 2px 8px rgba(35, 48, 90, 0.06); --shadow-md: 0 8px 20px rgba(35, 48, 90, 0.08); --shadow-lg: 0 16px 40px rgba(35, 48, 90, 0.12); --shadow-xl: 0 28px 64px rgba(35, 48, 90, 0.16); --shadow-glow: 0 0 26px rgba(124, 108, 255, 0.22); } /* ═══════════════════════════════════════════════════════════════════════ 2. Фон и базовые слои ═══════════════════════════════════════════════════════════════════════ */ body.design-modern { background: var(--bg-primary); color: var(--text-primary); } body.design-modern::before { background: radial-gradient(820px 520px at 12% -8%, rgba(124, 108, 255, 0.20), transparent 60%), radial-gradient(760px 520px at 92% 4%, rgba(34, 211, 238, 0.16), transparent 58%), radial-gradient(680px 520px at 50% 108%, rgba(168, 85, 247, 0.10), transparent 60%); } body.design-modern.light-theme::before { background: radial-gradient(820px 520px at 12% -8%, rgba(124, 108, 255, 0.12), transparent 60%), radial-gradient(760px 520px at 92% 4%, rgba(34, 211, 238, 0.10), transparent 58%), radial-gradient(680px 520px at 50% 108%, rgba(168, 85, 247, 0.06), transparent 60%); } /* Плавающие частицы в тёмной теме приглушаем, в светлой — почти убираем */ body.design-modern .particle { opacity: 0.35; } body.design-modern.light-theme .particle { opacity: 0.12; } /* ═══════════════════════════════════════════════════════════════════════ 3. Шапка ═══════════════════════════════════════════════════════════════════════ */ body.design-modern .header { background: var(--bg-card); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom: 1px solid rgba(124, 108, 255, 0.14); box-shadow: var(--shadow-sm); } body.design-modern.light-theme .header { border-bottom: 1px solid rgba(35, 48, 90, 0.08); } body.design-modern .logo { letter-spacing: 0.3px; font-weight: 800; } body.design-modern .header-balance, body.design-modern .header-warehouse { background: rgba(124, 108, 255, 0.10) !important; border: 1px solid rgba(124, 108, 255, 0.22) !important; border-radius: var(--radius-sm) !important; padding: 6px 12px !important; color: var(--text-primary) !important; transition: all .2s ease; } body.design-modern .header-balance:hover, body.design-modern .header-warehouse:hover { background: rgba(124, 108, 255, 0.18) !important; transform: translateY(-1px); } body.design-modern .header-balance-val { color: var(--primary-light); font-weight: 800; } /* ═══════════════════════════════════════════════════════════════════════ 4. Сайдбар (sb-*) ═══════════════════════════════════════════════════════════════════════ */ body.design-modern .lk-sidebar { background: var(--bg-card); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid rgba(124, 108, 255, 0.14); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); } body.design-modern.light-theme .lk-sidebar { border: 1px solid rgba(35, 48, 90, 0.07); } body.design-modern .sb-brand-logo { background: var(--gradient-primary); box-shadow: var(--shadow-glow); border-radius: var(--radius-md); } body.design-modern .sb-item { border-radius: var(--radius-md); transition: all .2s ease; color: var(--text-secondary); } body.design-modern .sb-item:hover { background: rgba(124, 108, 255, 0.10); color: var(--text-primary); transform: translateX(2px); } body.design-modern .sb-item.active { background: var(--gradient-primary); color: #fff; box-shadow: var(--shadow-glow); } body.design-modern .sb-item.active .sb-item-icon svg, body.design-modern .sb-item.active .sb-item-label { color: #fff; } body.design-modern .sb-item.active .sb-item-dot { background: #fff; } body.design-modern .sb-subitem { border-radius: var(--radius-sm); color: var(--text-muted); transition: all .2s ease; } body.design-modern .sb-subitem:hover { color: var(--primary-light); } body.design-modern .sb-external { border-radius: var(--radius-md); border: 1px solid rgba(124, 108, 255, 0.20); background: rgba(124, 108, 255, 0.06); transition: all .2s ease; } body.design-modern .sb-external:hover { background: rgba(124, 108, 255, 0.14); transform: translateY(-1px); } /* ═══════════════════════════════════════════════════════════════════════ 5. Карточки ═══════════════════════════════════════════════════════════════════════ */ body.design-modern .card { background: var(--bg-card); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(124, 108, 255, 0.12); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } body.design-modern.light-theme .card { border: 1px solid rgba(35, 48, 90, 0.07); } body.design-modern .card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: rgba(124, 108, 255, 0.30); } body.design-modern .card-header h2 { font-weight: 800; letter-spacing: 0.2px; } /* ═══════════════════════════════════════════════════════════════════════ 6. Кнопки ═══════════════════════════════════════════════════════════════════════ */ body.design-modern .btn { border-radius: var(--radius-md); font-weight: 700; letter-spacing: 0.2px; } body.design-modern .btn-primary, body.design-modern .btn-save-server { background: var(--gradient-primary); border: none; color: #fff; box-shadow: 0 8px 22px rgba(124, 108, 255, 0.32); } body.design-modern .btn-primary:hover, body.design-modern .btn-save-server:hover { box-shadow: 0 12px 28px rgba(124, 108, 255, 0.44); transform: translateY(-2px); } body.design-modern .btn-success { background: var(--gradient-success); border: none; color: #06231b; } /* ═══════════════════════════════════════════════════════════════════════ 7. Формы ═══════════════════════════════════════════════════════════════════════ */ body.design-modern .form-input, body.design-modern .form-select, body.design-modern textarea.form-input { background: var(--bg-secondary); border: 1px solid rgba(124, 108, 255, 0.18); border-radius: var(--radius-md); color: var(--text-primary); transition: border-color .2s ease, box-shadow .2s ease; } body.design-modern.light-theme .form-input, body.design-modern.light-theme .form-select, body.design-modern.light-theme textarea.form-input { background: #fff; border: 1px solid rgba(35, 48, 90, 0.14); } body.design-modern .form-input:focus, body.design-modern .form-select:focus, body.design-modern textarea.form-input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(124, 108, 255, 0.18); outline: none; } /* ═══════════════════════════════════════════════════════════════════════ 8. Таблицы (топы, платежи и т.п.) ═══════════════════════════════════════════════════════════════════════ */ body.design-modern table { border-radius: var(--radius-md); overflow: hidden; } body.design-modern th { color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.5px; } body.design-modern tbody tr:hover { background: rgba(124, 108, 255, 0.06); } /* ═══════════════════════════════════════════════════════════════════════ 9. Меню пользователя / модалки ═══════════════════════════════════════════════════════════════════════ */ body.design-modern .user-menu-popup { background: var(--bg-secondary); border: 1px solid rgba(124, 108, 255, 0.18); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); } body.design-modern.light-theme .user-menu-popup { background: #fff; border: 1px solid rgba(35, 48, 90, 0.10); } body.design-modern .user-avatar { border-radius: 50%; box-shadow: 0 0 0 2px rgba(124, 108, 255, 0.35); } /* ═══════════════════════════════════════════════════════════════════════ 10. Welcome (веб приветствие) ═══════════════════════════════════════════════════════════════════════ */ body.design-modern .welcome-main { border-radius: var(--radius-xl); border: 1px solid rgba(124, 108, 255, 0.16); background: var(--bg-card); box-shadow: var(--shadow-lg); } body.design-modern .welcome-badge { background: rgba(34, 211, 238, 0.12); border: 1px solid rgba(34, 211, 238, 0.30); color: var(--secondary); } body.design-modern .welcome-title-gradient { background: var(--gradient-primary); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } body.design-modern .welcome-feature-card { border-radius: var(--radius-lg); border: 1px solid rgba(124, 108, 255, 0.12); transition: transform .25s ease, box-shadow .25s ease; } body.design-modern .welcome-feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } body.design-modern .welcome-btn-primary { background: var(--gradient-primary); border-radius: var(--radius-md); box-shadow: 0 10px 26px rgba(124, 108, 255, 0.35); } /* ═══════════════════════════════════════════════════════════════════════ 11. Современные экраны входа / регистрации (login.php и register.php: свои inline-стили, поэтому переопределяем конкретными сильными селекторами; тёмная тема там = body.dark) ═══════════════════════════════════════════════════════════════════════ */ body.design-modern.auth-page { background: radial-gradient(900px 600px at 15% 0%, #efe9ff 0%, transparent 55%), radial-gradient(900px 600px at 100% 100%, #e2fbff 0%, transparent 55%), #eef1f8; padding: 24px; } body.design-modern.auth-page.dark { background: radial-gradient(900px 600px at 15% 0%, #241f45 0%, transparent 55%), radial-gradient(900px 600px at 100% 100%, #10283a 0%, transparent 55%), #171d2e; } body.design-modern.auth-page .login-container, body.design-modern.auth-page .register-container { border-radius: 22px; border: 1px solid rgba(35, 48, 90, 0.08); box-shadow: 0 30px 70px rgba(35, 48, 90, 0.18); background: rgba(255, 255, 255, 0.96); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); max-width: 460px; padding: 42px 40px; } body.design-modern.auth-page.dark .login-container, body.design-modern.auth-page.dark .register-container { background: rgba(30, 38, 58, 0.92); border: 1px solid rgba(124, 108, 255, 0.22); box-shadow: 0 30px 70px rgba(8, 12, 24, 0.55); } body.design-modern.auth-page h1 { font-size: 30px; font-weight: 900; background: linear-gradient(135deg, #7c6cff, #22d3ee); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } body.design-modern.auth-page .subtitle { color: #7482a3; } body.design-modern.auth-page.dark .subtitle { color: var(--text-muted); } body.design-modern.auth-page label { color: #1b2440; font-weight: 600; font-size: 13px; text-transform: uppercase; letter-spacing: 0.4px; } body.design-modern.auth-page.dark label { color: var(--text-secondary); } body.design-modern.auth-page input { border-radius: 12px; border: 1px solid rgba(35, 48, 90, 0.14); padding: 13px 14px; background: #fff; color: #1b2440; transition: border-color .2s ease, box-shadow .2s ease; } body.design-modern.auth-page.dark input { background: #171d2e; border: 1px solid rgba(124, 108, 255, 0.22); color: var(--text-primary); } body.design-modern.auth-page input:focus { border-color: #7c6cff; box-shadow: 0 0 0 3px rgba(124, 108, 255, 0.18); outline: none; } body.design-modern.auth-page .btn { border-radius: 12px; padding: 14px 24px; font-weight: 800; letter-spacing: 0.3px; background: linear-gradient(135deg, #7c6cff 0%, #22d3ee 100%); box-shadow: 0 12px 28px rgba(124, 108, 255, 0.35); transition: transform .2s ease, box-shadow .2s ease; } body.design-modern.auth-page .btn:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(124, 108, 255, 0.48); } body.design-modern.auth-page .link a { color: #6a58f0; font-weight: 600; } body.design-modern.auth-page.dark .link a { color: var(--primary-light); } body.design-modern.auth-page .error { border-radius: 12px; background: rgba(246, 86, 75, 0.10); color: #d5372c; border: 1px solid rgba(246, 86, 75, 0.28); } body.design-modern.auth-page.dark .error { background: rgba(246, 86, 75, 0.15); color: #ffb4ad; } /* ═══════════════════════════════════════════════════════════════════════ 12. Адаптив / Telegram Web App ═══════════════════════════════════════════════════════════════════════ */ @media (max-width: 768px) { body.design-modern .lk-sidebar { border-radius: var(--radius-md); } body.design-modern .card { border-radius: var(--radius-md); } body.design-modern.auth-page .login-container, body.design-modern.auth-page .register-container { padding: 30px 22px; } }