/* ========================================================= Modern Skin v2 — Radio Casseta Drop-in дизайн-оверрайд для существующего Vue/Vuetify сайта. Цели: - по умолчанию тёмная тема (через localStorage currentTheme) - единый стиль без "половина светлая / половина тёмная" - динамичный фон (CSS-анимация, без тяжёлого JS) - не ломать цветные кнопки соцсетей (не трогаем их background) ========================================================= */ :root{ --modern-radius: 18px; --modern-radius-sm: 12px; --modern-border-dark: rgba(255,255,255,.10); --modern-border-light: rgba(0,0,0,.10); --modern-shadow-dark: 0 10px 30px rgba(0,0,0,.35); --modern-shadow-dark-soft: 0 8px 24px rgba(0,0,0,.22); --modern-shadow-light: 0 10px 26px rgba(0,0,0,.10); --modern-glass-dark: rgba(16,18,26,.72); --modern-glass-dark-2: rgba(10,12,18,.68); --modern-glass-light: rgba(255,255,255,.78); --modern-glass-light-2: rgba(255,255,255,.66); } /* === Базовый фон (переключается через html[data-theme]) === */ html, body{ height: 100%; } body{ background: #06070a; color-scheme: dark; } /* Dynamic background layer */ body::before{ content:""; position: fixed; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(1200px 700px at 18% 12%, rgba(22,151,246,.25), transparent 60%), radial-gradient(900px 620px at 82% 20%, rgba(167,110,255,.20), transparent 56%), radial-gradient(900px 650px at 55% 92%, rgba(60,220,190,.14), transparent 62%), linear-gradient(180deg, rgba(10,12,18,1), rgba(6,7,10,1)); background-size: 120% 120%; animation: modernDrift 34s ease-in-out infinite alternate; will-change: background-position; } /* Subtle texture */ body::after{ content:""; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.035), transparent 55%); opacity: .85; } @keyframes modernDrift{ 0%{ background-position: 0% 0%; } 100%{ background-position: 100% 100%; } } @media (prefers-reduced-motion: reduce){ body::before{ animation: none; } } /* === Привязка к теме (JS выставляет data-theme на ) === */ html[data-theme="dark"] body{ background: #06070a; color-scheme: dark; } html[data-theme="light"] body{ background: #eef1f6; color-scheme: light; } html[data-theme="light"] body::before{ background: radial-gradient(1200px 700px at 18% 12%, rgba(22,151,246,.18), transparent 62%), radial-gradient(900px 620px at 82% 20%, rgba(167,110,255,.14), transparent 58%), radial-gradient(900px 650px at 55% 92%, rgba(60,220,190,.10), transparent 64%), linear-gradient(180deg, rgba(245,248,252,1), rgba(234,238,245,1)); } /* === Прозрачный "канвас" для приложения === */ .v-application, .v-overlay-container, .v-main{ background: transparent !important; } /* === App bar / Drawer === */ .v-app-bar{ border-bottom: 1px solid var(--modern-border-dark); background: var(--modern-glass-dark-2) !important; backdrop-filter: blur(10px); } .v-navigation-drawer{ border-right: 1px solid var(--modern-border-dark); background: rgba(10,12,18,.74) !important; backdrop-filter: blur(10px); } /* В светлой теме делаем бар/дровер светлыми — чтобы не было "половина/половина" */ html[data-theme="light"] .v-app-bar{ border-bottom: 1px solid var(--modern-border-light); background: var(--modern-glass-light-2) !important; } html[data-theme="light"] .v-navigation-drawer{ border-right: 1px solid var(--modern-border-light); background: rgba(255,255,255,.74) !important; } /* === Cards / sheets / tables === */ .v-card, .v-sheet, .v-list, .v-table{ border-radius: var(--modern-radius) !important; border: 1px solid var(--modern-border-dark); background: var(--modern-glass-dark) !important; backdrop-filter: blur(12px); box-shadow: var(--modern-shadow-dark-soft); } /* Светлая тема */ html[data-theme="light"] .v-card, html[data-theme="light"] .v-sheet, html[data-theme="light"] .v-list, html[data-theme="light"] .v-table{ border: 1px solid var(--modern-border-light); background: var(--modern-glass-light) !important; box-shadow: var(--modern-shadow-light); } /* Аккуратные ховеры, но без "transition: all" (чтобы не тормозило) */ .v-card:hover{ transform: translateY(-1px); box-shadow: var(--modern-shadow-dark); } html[data-theme="light"] .v-card:hover{ box-shadow: 0 14px 34px rgba(0,0,0,.12); } /* === Кнопки === */ /* Не переопределяем цвета соцкнопок: фон/цвет задаётся Vuetify. */ .v-btn{ border-radius: 999px !important; } /* Добавляем мягкую тень только "обычным" кнопкам, не текстовым */ .v-btn:not(.v-btn--variant-text):not(.v-btn--variant-plain){ box-shadow: 0 10px 24px rgba(0,0,0,.22); } html[data-theme="light"] .v-btn:not(.v-btn--variant-text):not(.v-btn--variant-plain){ box-shadow: 0 10px 22px rgba(0,0,0,.12); } /* === Переключатель темы (видимость и контраст) === */ .theme-switch{ padding: 10px 12px; border-radius: var(--modern-radius-sm); border: 1px solid var(--modern-border-dark); background: rgba(255,255,255,.045); } html[data-theme="light"] .theme-switch{ border: 1px solid var(--modern-border-light); background: rgba(0,0,0,.03); } .theme-switch .v-switch__track{ opacity: 1 !important; background: rgba(255,255,255,.18) !important; } html[data-theme="light"] .theme-switch .v-switch__track{ background: rgba(0,0,0,.12) !important; } .theme-switch .v-switch__thumb{ background: rgba(255,255,255,.92) !important; } html[data-theme="light"] .theme-switch .v-switch__thumb{ background: rgba(0,0,0,.84) !important; } /* Иконки слева/справа на переключателе */ .theme-switch .v-icon{ opacity: .95; } /* === Footer === */ .custom-footer{ background: transparent !important; } .custom-footer small{ opacity: .85; } /* === Изображения: ничего не "портим" === */ img{ image-rendering: auto; }