/** * modern.css — «Современный» премиальный дизайн ЛК (Задача 1). * * Подключается ДОПОЛНИТЕЛЬНО к styles.css, когда в админке выбран дизайн * "modern" (на / ставится класс .design-modern). * * Это НЕ лёгкая перекраска, а полноценная премиальная тема в духе топовых * L2-CMS: тёплый почти-чёрный фон, золотые акценты для главных действий, * красные акценты для активной навигации/выбора, бежевая типографика, * аккуратные карточки, таблицы, модалки. * * Тема (тёмная/светлая) переключается как и раньше: * - тёмная (по умолчанию): body.design-modern * - светлая: body.design-modern.light-theme * * Базовый styles.css построен на CSS-переменных, поэтому большую часть * перекраски делаем через переопределение переменных, а сверху — точечная * отделка компонентов сильными селекторами (специфичность body.design-modern * .x бьёт .x без !important; !important используем только против inline-стилей). */ /* ═══════════════════════════════════════════════════════════════════════ 1. Палитра ═══════════════════════════════════════════════════════════════════════ */ /* Тёмная тема — тёплый графитово-чёрный с золотом */ html.design-modern, body.design-modern { --primary: #d3a75a; /* золото — главные действия */ --primary-dark: #b1863b; --primary-light: #ecd29a; --secondary: #d3a75a; --success: #57b06e; --warning: #e0a83e; --danger: #d6584e; --info: #5aa0d3; /* Красный акцент — активная навигация, выбранное */ --accent: #b23b3b; --accent-light: #dd6a6a; --gradient-primary: linear-gradient(135deg, #f0d79f 0%, #d3a75a 48%, #b1863b 100%); --gradient-secondary: linear-gradient(135deg, #d3a75a 0%, #b1863b 100%); --gradient-success: linear-gradient(135deg, #62c07c 0%, #3f9a5b 100%); --gradient-accent: linear-gradient(135deg, #b83a3a 0%, #822626 100%); --bg-primary: #100d0a; --bg-secondary: #191410; --bg-tertiary: #241d16; --bg-card: rgba(25, 20, 15, 0.86); --bg-card-hover: rgba(38, 30, 22, 0.92); --text-primary: #f3ecde; --text-secondary: #c8bca6; --text-muted: #8f836f; /* Тонкие «золотые» разделители */ --line: rgba(211, 167, 90, 0.14); --line-strong: rgba(211, 167, 90, 0.24); --shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.35); --shadow-md: 0 8px 22px rgba(0, 0, 0, 0.42); --shadow-lg: 0 18px 42px rgba(0, 0, 0, 0.52); --shadow-xl: 0 30px 70px rgba(0, 0, 0, 0.60); --shadow-glow: 0 0 28px rgba(211, 167, 90, 0.30); --radius-sm: 10px; --radius-md: 14px; --radius-lg: 18px; --radius-xl: 26px; } /* Светлая тема — тёплый «пергамент» с золотом */ html.design-modern.light-theme, body.design-modern.light-theme { --primary: #b1863b; --primary-dark: #916a2a; --primary-light: #cf9f4e; --accent: #b23b3b; --accent-light: #c94f4f; --gradient-primary: linear-gradient(135deg, #e7c777 0%, #c99b45 55%, #a97e2f 100%); --bg-primary: #efe8da; --bg-secondary: #fffdf7; --bg-tertiary: #e8dfce; --bg-card: rgba(255, 253, 247, 0.94); --bg-card-hover: #fffefa; --text-primary: #2a2117; --text-secondary: #5b4d3a; --text-muted: #8b7d66; --line: rgba(90, 66, 30, 0.12); --line-strong: rgba(90, 66, 30, 0.20); --shadow-sm: 0 2px 8px rgba(80, 60, 25, 0.07); --shadow-md: 0 10px 24px rgba(80, 60, 25, 0.10); --shadow-lg: 0 18px 44px rgba(80, 60, 25, 0.14); --shadow-xl: 0 30px 66px rgba(80, 60, 25, 0.18); --shadow-glow: 0 0 26px rgba(177, 134, 59, 0.22); } /* ═══════════════════════════════════════════════════════════════════════ 2. Фон и базовые слои ═══════════════════════════════════════════════════════════════════════ */ body.design-modern { background: var(--bg-primary); color: var(--text-primary); font-family: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue', Arial, sans-serif; } /* Тёплое «сияние» + виньетка вместо холодных пятен */ body.design-modern::before { background: radial-gradient(900px 560px at 12% -10%, rgba(211, 167, 90, 0.16), transparent 60%), radial-gradient(760px 520px at 92% 2%, rgba(178, 59, 59, 0.10), transparent 58%), radial-gradient(900px 700px at 50% 120%, rgba(0, 0, 0, 0.55), transparent 60%); } body.design-modern.light-theme::before { background: radial-gradient(900px 560px at 12% -10%, rgba(201, 155, 69, 0.16), transparent 60%), radial-gradient(760px 520px at 92% 2%, rgba(178, 59, 59, 0.06), transparent 58%); } body.design-modern .particle { opacity: 0.22; } body.design-modern.light-theme .particle { opacity: 0.08; } /* Аккуратные скроллбары */ body.design-modern *::-webkit-scrollbar { width: 10px; height: 10px; } body.design-modern *::-webkit-scrollbar-track { background: transparent; } body.design-modern *::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; } body.design-modern *::-webkit-scrollbar-thumb:hover { background: rgba(211, 167, 90, 0.45); background-clip: padding-box; } /* ═══════════════════════════════════════════════════════════════════════ 3. Шапка ═══════════════════════════════════════════════════════════════════════ */ body.design-modern .header { background: linear-gradient(180deg, rgba(25, 20, 15, 0.92), rgba(16, 13, 10, 0.72)); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-sm); } body.design-modern.light-theme .header { background: linear-gradient(180deg, rgba(255, 253, 247, 0.94), rgba(255, 253, 247, 0.72)); border-bottom: 1px solid var(--line); } body.design-modern .logo { font-weight: 800; letter-spacing: 0.4px; background: var(--gradient-primary); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } /* Пилюли баланса и склада в шапке */ body.design-modern .header-balance, body.design-modern .header-warehouse { background: rgba(211, 167, 90, 0.10) !important; border: 1px solid var(--line-strong) !important; border-radius: 999px !important; padding: 7px 13px !important; color: var(--text-primary) !important; transition: all .2s ease; } body.design-modern .header-balance:hover, body.design-modern .header-warehouse:hover { background: rgba(211, 167, 90, 0.18) !important; border-color: var(--primary) !important; transform: translateY(-1px); } body.design-modern .header-balance-val { color: var(--primary-light); font-weight: 800; } body.design-modern .header-home-btn:hover { color: var(--primary-light); } /* ═══════════════════════════════════════════════════════════════════════ 4. Сайдбар (sb-*) ═══════════════════════════════════════════════════════════════════════ */ body.design-modern .lk-sidebar { background: var(--bg-card); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); } /* приглушаем «холодные» орбы сайдбара под тёплую тему */ body.design-modern .sb-glow--1 { background: radial-gradient(circle, rgba(211,167,90,0.30), transparent 70%); } body.design-modern .sb-glow--2 { background: radial-gradient(circle, rgba(178,59,59,0.22), transparent 70%); } body.design-modern .sb-brand { border-bottom: 1px solid var(--line); } body.design-modern .sb-brand-logo { background: var(--gradient-primary); color: #241d16; box-shadow: var(--shadow-glow); border-radius: var(--radius-md); } body.design-modern .sb-brand-name { font-weight: 800; letter-spacing: 0.2px; } body.design-modern .sb-brand-tag { color: var(--text-muted); } body.design-modern .sb-item { border-radius: var(--radius-md); transition: all .18s ease; color: var(--text-secondary); position: relative; font-weight: 600; } body.design-modern .sb-item:hover { background: rgba(211, 167, 90, 0.09); color: var(--text-primary); } body.design-modern .sb-item:hover .sb-item-icon svg { color: var(--primary-light); } /* Иконка-квадрат пункта: золотисто-нейтральная (вместо синей из базы) */ body.design-modern .sb-item-icon { background: rgba(211, 167, 90, 0.10); border: 1px solid var(--line); color: var(--primary-light); } body.design-modern .sb-item-icon svg { color: var(--primary-light); } /* Активный пункт — спокойная золотая подсветка с полосой слева */ body.design-modern .sb-item.active { background: rgba(211, 167, 90, 0.13); color: var(--primary-light); border: 1px solid var(--line-strong); box-shadow: none; } body.design-modern .sb-item.active::before { content: ''; position: absolute; left: 5px; top: 50%; transform: translateY(-50%); width: 3px; height: 22px; border-radius: 3px; background: var(--gradient-primary); } body.design-modern .sb-item.active .sb-item-icon { background: var(--gradient-primary); border-color: transparent; } body.design-modern .sb-item.active .sb-item-icon svg { color: #241d16; } body.design-modern .sb-item.active .sb-item-label { color: var(--primary-light); } body.design-modern .sb-item.active .sb-item-dot { background: var(--primary); } body.design-modern .sb-subitem { border-radius: var(--radius-sm); color: var(--text-muted); transition: all .18s ease; } body.design-modern .sb-subitem:hover { color: var(--primary-light); background: rgba(211,167,90,0.08); } body.design-modern .sb-external { border-radius: var(--radius-md); border: 1px solid var(--line-strong); background: rgba(211, 167, 90, 0.06); color: var(--text-secondary); transition: all .2s ease; } body.design-modern .sb-external:hover { background: rgba(211, 167, 90, 0.14); color: var(--primary-light); transform: translateY(-1px); } /* ═══════════════════════════════════════════════════════════════════════ 5. Верхняя навигация внутри контента (main-nav / nav-btn) ═══════════════════════════════════════════════════════════════════════ */ body.design-modern .main-nav { background: var(--bg-card); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: 8px; } body.design-modern .nav-btn { border-radius: var(--radius-md); color: var(--text-secondary); font-weight: 600; transition: all .18s ease; } body.design-modern .nav-btn:hover { background: rgba(211, 167, 90, 0.10); color: var(--text-primary); } body.design-modern .nav-btn.active { background: rgba(211, 167, 90, 0.14); color: var(--primary-light); border: 1px solid var(--line-strong); box-shadow: none; } body.design-modern .nav-btn.active svg { color: var(--primary-light); } /* мини-игры: перекрасить индиго-подсветку в золотую */ body.design-modern .nav-btn.mg-game { color: var(--primary-light) !important; border-color: var(--line-strong) !important; } /* ═══════════════════════════════════════════════════════════════════════ 6. Карточки ═══════════════════════════════════════════════════════════════════════ */ body.design-modern .card { background: var(--bg-card); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; position: relative; } /* тонкая золотая линия-подсветка по верхней кромке (с отступом, чтобы не торчала за скруглениями) */ body.design-modern .card::after { content: ''; position: absolute; top: 0; left: 18px; right: 18px; height: 1px; background: linear-gradient(90deg, transparent, rgba(211,167,90,0.5), transparent); opacity: 0.6; pointer-events: none; } body.design-modern .card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--line-strong); } body.design-modern .card-header { border-bottom: 1px solid var(--line); } body.design-modern .card-header h2 { font-weight: 800; letter-spacing: 0.3px; color: var(--text-primary); } /* иконка в заголовке карточки — золотой акцент */ body.design-modern .card-header > svg { color: var(--primary); flex: 0 0 auto; } /* ═══════════════════════════════════════════════════════════════════════ 7. Кнопки (в т.ч. перекрытие inline-цветов из разметки страниц) ═══════════════════════════════════════════════════════════════════════ */ body.design-modern .btn { border-radius: var(--radius-md); font-weight: 700; letter-spacing: 0.2px; transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; } /* Базовые классовые варианты */ body.design-modern .btn-primary, body.design-modern .btn-save-server { background: var(--gradient-primary); border: none; color: #241d16; box-shadow: 0 8px 22px rgba(211, 167, 90, 0.30); } body.design-modern .btn-primary:hover, body.design-modern .btn-save-server:hover { box-shadow: 0 12px 28px rgba(211, 167, 90, 0.42); transform: translateY(-2px); } body.design-modern .btn-success { background: var(--gradient-success); border: none; color: #06231b; } /* Инлайновые «зелёные» кнопки создания/сохранения → золото */ body.design-modern .btn[style*="#2eb85a"], body.design-modern .btn[style*="2eb85a"] { background: var(--gradient-primary) !important; color: #241d16 !important; box-shadow: 0 8px 22px rgba(211, 167, 90, 0.30); } /* Инлайновые «оранжевые» (редактировать) → тёплый янтарь */ body.design-modern .btn[style*="#ff9500"], body.design-modern .icon-btn-small[style*="#ff9500"] { background: linear-gradient(135deg, #e6b455, #cf922f) !important; color: #241d16 !important; } body.design-modern .btn:hover { filter: brightness(1.04); } /* Иконочные мини-кнопки в списке аккаунтов */ body.design-modern .icon-btn-small { border-radius: 10px; transition: transform .15s ease, filter .15s ease; } body.design-modern .icon-btn-small:hover { transform: translateY(-1px); filter: brightness(1.08); } /* ═══════════════════════════════════════════════════════════════════════ 8. Формы ═══════════════════════════════════════════════════════════════════════ */ body.design-modern .form-input, body.design-modern .form-select, body.design-modern textarea.form-input, body.design-modern input[type="text"], body.design-modern input[type="password"], body.design-modern input[type="email"], body.design-modern input[type="number"] { background: var(--bg-tertiary); border: 1px solid var(--line-strong); border-radius: var(--radius-md); color: var(--text-primary); transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; } body.design-modern.light-theme .form-input, body.design-modern.light-theme .form-select, body.design-modern.light-theme textarea.form-input, body.design-modern.light-theme input[type="text"], body.design-modern.light-theme input[type="password"], body.design-modern.light-theme input[type="email"], body.design-modern.light-theme input[type="number"] { background: #fffdf7; } body.design-modern .form-input:focus, body.design-modern .form-select:focus, body.design-modern textarea.form-input:focus, body.design-modern input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(211, 167, 90, 0.18); outline: none; } body.design-modern .form-input::placeholder { color: var(--text-muted); } body.design-modern label { color: var(--text-secondary); } /* ═══════════════════════════════════════════════════════════════════════ 9. Таблицы (персонажи, топы, платежи) ═══════════════════════════════════════════════════════════════════════ */ body.design-modern table { border-radius: var(--radius-md); overflow: hidden; border-collapse: collapse; width: 100%; } body.design-modern thead th, body.design-modern th { color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.6px; font-size: 11px; font-weight: 700; border-bottom: 1px solid var(--line); background: rgba(211, 167, 90, 0.04); } body.design-modern td { border-bottom: 1px solid var(--line); color: var(--text-secondary); } body.design-modern tbody tr { transition: background .15s ease; } body.design-modern tbody tr:hover { background: rgba(211, 167, 90, 0.06); } body.design-modern tbody tr:last-child td { border-bottom: none; } /* ═══════════════════════════════════════════════════════════════════════ 10. Списки (аккаунты) и пустые состояния ═══════════════════════════════════════════════════════════════════════ */ body.design-modern .list-item { border-bottom: 1px solid var(--line); transition: background .15s ease; } body.design-modern .list-item:hover { background: rgba(211, 167, 90, 0.05); } body.design-modern .list-item:last-child { border-bottom: none; } body.design-modern .list-item-title { color: var(--text-primary); font-weight: 700; } body.design-modern .account-login { color: var(--primary-light); } body.design-modern .empty-state { color: var(--text-muted); } /* Бейджи-пилюли (например «Аккаунты 2/10») — если используются */ body.design-modern .badge, body.design-modern .chip, body.design-modern .count-badge { background: rgba(211, 167, 90, 0.12); border: 1px solid var(--line-strong); color: var(--primary-light); border-radius: 999px; } /* ═══════════════════════════════════════════════════════════════════════ 11. Модалки (в т.ч. склад) ═══════════════════════════════════════════════════════════════════════ */ body.design-modern .modal { background: rgba(8, 6, 4, 0.62); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } body.design-modern .modal-content { background: var(--bg-secondary); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); } body.design-modern .modal-header { border-bottom: 1px solid var(--line); } body.design-modern .modal-header h2 { color: var(--text-primary); font-weight: 800; } body.design-modern .modal-close { color: var(--text-muted); border-radius: 8px; transition: all .15s ease; } body.design-modern .modal-close:hover { color: var(--danger); background: rgba(214, 88, 78, 0.12); } /* Слоты инвентаря/склада (типовые классы) */ body.design-modern .wh-slot, body.design-modern .inventory-slot, body.design-modern .warehouse-slot { background: var(--bg-tertiary); border: 1px solid var(--line); border-radius: 10px; transition: all .15s ease; } body.design-modern .wh-slot:hover, body.design-modern .inventory-slot:hover, body.design-modern .warehouse-slot:hover { border-color: var(--primary); box-shadow: 0 0 0 2px rgba(211, 167, 90, 0.18); } /* ═══════════════════════════════════════════════════════════════════════ 12. Меню пользователя / аватар ═══════════════════════════════════════════════════════════════════════ */ body.design-modern .user-menu-popup { background: var(--bg-secondary); border: 1px solid var(--line-strong); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); } body.design-modern .user-menu-username { color: var(--text-primary); font-weight: 800; border-bottom: 1px solid var(--line); } body.design-modern .user-menu-item { color: var(--text-secondary); border-radius: 8px; transition: all .15s ease; } body.design-modern .user-menu-item:hover { background: rgba(211, 167, 90, 0.10); color: var(--text-primary); } body.design-modern .user-menu-item-logout:hover { background: rgba(214, 88, 78, 0.12); color: var(--danger); } body.design-modern .user-avatar { border-radius: 50%; box-shadow: 0 0 0 2px var(--primary); } body.design-modern .user-avatar-placeholder { background: var(--gradient-primary); color: #241d16; font-weight: 800; } /* ═══════════════════════════════════════════════════════════════════════ 13. Welcome (веб-приветствие) ═══════════════════════════════════════════════════════════════════════ */ body.design-modern .welcome-main { border-radius: var(--radius-xl); border: 1px solid var(--line-strong); background: var(--bg-card); box-shadow: var(--shadow-lg); } body.design-modern .welcome-badge { background: rgba(211, 167, 90, 0.12); border: 1px solid var(--line-strong); color: var(--primary-light); } 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 var(--line); background: var(--bg-tertiary); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } body.design-modern .welcome-feature-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--line-strong); } body.design-modern .welcome-btn-primary { background: var(--gradient-primary); color: #241d16; border-radius: var(--radius-md); box-shadow: 0 10px 26px rgba(211, 167, 90, 0.32); } body.design-modern .welcome-btn-secondary { border: 1px solid var(--line-strong); color: var(--text-primary); border-radius: var(--radius-md); } /* ═══════════════════════════════════════════════════════════════════════ 14. Экраны входа / регистрации (login.php, register.php) ═══════════════════════════════════════════════════════════════════════ */ body.design-modern.auth-page { background: radial-gradient(900px 600px at 15% 0%, #efe6d3 0%, transparent 55%), radial-gradient(900px 600px at 100% 100%, #f2e2c9 0%, transparent 55%), #efe8da; padding: 24px; } body.design-modern.auth-page.dark { background: radial-gradient(900px 600px at 15% 0%, rgba(211,167,90,0.14) 0%, transparent 55%), radial-gradient(900px 600px at 100% 100%, rgba(178,59,59,0.12) 0%, transparent 55%), #100d0a; } body.design-modern.auth-page .login-container, body.design-modern.auth-page .register-container { border-radius: 22px; border: 1px solid rgba(90, 66, 30, 0.12); box-shadow: 0 30px 70px rgba(80, 60, 25, 0.18); background: rgba(255, 253, 247, 0.97); 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(25, 20, 15, 0.94); border: 1px solid var(--line-strong); box-shadow: 0 30px 70px rgba(0, 0, 0, 0.60); } body.design-modern.auth-page h1 { font-size: 30px; font-weight: 900; background: var(--gradient-primary); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } body.design-modern.auth-page .subtitle { color: #8b7d66; } body.design-modern.auth-page.dark .subtitle { color: var(--text-muted); } body.design-modern.auth-page label { color: #2a2117; 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(90, 66, 30, 0.16); padding: 13px 14px; background: #fffdf7; color: #2a2117; transition: border-color .2s ease, box-shadow .2s ease; } body.design-modern.auth-page.dark input { background: var(--bg-tertiary); border: 1px solid var(--line-strong); color: var(--text-primary); } body.design-modern.auth-page input:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(211, 167, 90, 0.18); outline: none; } body.design-modern.auth-page .btn { border-radius: 12px; padding: 14px 24px; font-weight: 800; letter-spacing: 0.3px; color: #241d16; background: var(--gradient-primary); box-shadow: 0 12px 28px rgba(211, 167, 90, 0.32); transition: transform .2s ease, box-shadow .2s ease; } body.design-modern.auth-page .btn:hover { transform: translateY(-2px); box-shadow: 0 16px 34px rgba(211, 167, 90, 0.46); } body.design-modern.auth-page .link a { color: var(--primary-dark); 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(214, 88, 78, 0.10); color: #b23b3b; border: 1px solid rgba(214, 88, 78, 0.28); } body.design-modern.auth-page.dark .error { background: rgba(214, 88, 78, 0.15); color: #f0a59d; } /* ═══════════════════════════════════════════════════════════════════════ 15. Адаптив / 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 .main-nav { border-radius: var(--radius-md); } body.design-modern.auth-page .login-container, body.design-modern.auth-page .register-container { padding: 30px 22px; } }