mirror of
https://github.com/Psychotoxical/psysonic.git
synced 2026-07-21 23:05:46 +00:00
feat: v1.11.0 — Movies themes, Settings polish, Gapless stable
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Psychotoxical
+55
-79
@@ -1796,6 +1796,11 @@
|
||||
}
|
||||
|
||||
/* ── Cover breathing ── */
|
||||
@keyframes ambilight-pulse {
|
||||
0%, 100% { opacity: 0.7; }
|
||||
50% { opacity: 1.0; }
|
||||
}
|
||||
|
||||
@keyframes cover-breathe {
|
||||
|
||||
0%,
|
||||
@@ -2645,26 +2650,24 @@
|
||||
|
||||
/* ── Hero card: 3-column (cover+info | EQ | tag cloud) ── */
|
||||
.np-hero-card {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
gap: 20px;
|
||||
padding: 24px;
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto 1fr;
|
||||
align-items: center;
|
||||
gap: 28px;
|
||||
padding: 32px;
|
||||
background: rgba(0, 0, 0, 0.30);
|
||||
backdrop-filter: blur(12px);
|
||||
-webkit-backdrop-filter: blur(12px);
|
||||
border-radius: var(--radius-lg);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
flex-shrink: 0;
|
||||
min-height: 200px;
|
||||
}
|
||||
|
||||
/* Left column: cover + meta, left-aligned — takes equal share with right */
|
||||
/* Left column: meta info, big text */
|
||||
.np-hero-left {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 18px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.np-hero-cover-wrap {
|
||||
@@ -2680,58 +2683,44 @@
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 10px;
|
||||
padding-top: 4px;
|
||||
gap: 14px;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* Center column: fixed width so it stays truly centered between equal outer columns */
|
||||
.np-eq-wrap {
|
||||
flex: 0 0 clamp(100px, 20vw, 220px);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0 4px;
|
||||
mask-image: linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%);
|
||||
-webkit-mask-image: linear-gradient(to right, transparent 0%, black 20%, black 80%, transparent 100%);
|
||||
}
|
||||
|
||||
.np-eq-bars {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
gap: 3px;
|
||||
height: 80px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.np-eq-bar {
|
||||
flex: 1;
|
||||
min-width: 3px;
|
||||
max-width: 8px;
|
||||
background: var(--accent);
|
||||
border-radius: 2px 2px 0 0;
|
||||
opacity: 0.85;
|
||||
height: 8%;
|
||||
transition: background 0.3s;
|
||||
will-change: height;
|
||||
}
|
||||
|
||||
/* Right column: tag cloud — takes equal share with left so EQ stays centered */
|
||||
/* Right column: tag cloud */
|
||||
.np-tag-cloud {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-end;
|
||||
justify-content: center;
|
||||
gap: 0;
|
||||
}
|
||||
|
||||
.np-tag-cloud-tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 7px;
|
||||
align-content: flex-start;
|
||||
padding-top: 4px;
|
||||
gap: 8px 10px;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.np-tag-cloud-header {
|
||||
width: 100%;
|
||||
font-size: 11px;
|
||||
font-weight: 700;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.1em;
|
||||
color: rgba(255, 255, 255, 0.4);
|
||||
margin-bottom: 10px;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.np-tag {
|
||||
font-size: 11px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
padding: 4px 10px;
|
||||
padding: 6px 14px;
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.10);
|
||||
color: rgba(255, 255, 255, 0.75);
|
||||
@@ -3030,9 +3019,18 @@
|
||||
inset: -15%;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
filter: blur(40px) brightness(0.55) saturate(1.6);
|
||||
filter: blur(70px) brightness(0.55) saturate(1.6);
|
||||
transition: opacity 0.6s ease;
|
||||
will-change: opacity;
|
||||
animation: np-ken-burns 40s ease-in-out infinite alternate;
|
||||
will-change: transform;
|
||||
}
|
||||
|
||||
@keyframes np-ken-burns {
|
||||
0% { transform: scale(1.00) translate(0%, 0%); }
|
||||
25% { transform: scale(1.04) translate(-2%, -1.5%); }
|
||||
50% { transform: scale(1.06) translate(1.5%, 2%); }
|
||||
75% { transform: scale(1.03) translate(-1%, 1.5%); }
|
||||
100% { transform: scale(1.05) translate(2%, -1%); }
|
||||
}
|
||||
|
||||
.np-bg-overlay {
|
||||
@@ -3063,35 +3061,13 @@
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.np-cover-glow {
|
||||
position: absolute;
|
||||
width: 200px;
|
||||
height: 200px;
|
||||
border-radius: 50%;
|
||||
object-fit: cover;
|
||||
filter: blur(36px) saturate(1.5) brightness(0.85);
|
||||
opacity: 0.7;
|
||||
transform: translateY(12px) scale(1.05);
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
will-change: transform, opacity;
|
||||
animation: np-glow-pulse 4s ease-in-out infinite;
|
||||
}
|
||||
|
||||
@keyframes np-glow-pulse {
|
||||
0%, 100% { opacity: 0.6; transform: translateY(14px) scale(1.04); }
|
||||
50% { opacity: 0.85; transform: translateY(9px) scale(1.10); }
|
||||
}
|
||||
|
||||
.np-cover {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 196px;
|
||||
height: 196px;
|
||||
border-radius: 14px;
|
||||
width: 280px;
|
||||
height: 280px;
|
||||
border-radius: 16px;
|
||||
object-fit: cover;
|
||||
box-shadow: 0 24px 70px rgba(0, 0, 0, 0.6);
|
||||
animation: cover-breathe 6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
.np-cover-fallback {
|
||||
@@ -3114,14 +3090,14 @@
|
||||
|
||||
.np-title {
|
||||
font-family: var(--font-display);
|
||||
font-size: 26px;
|
||||
font-size: 36px;
|
||||
font-weight: 700;
|
||||
line-height: 1.2;
|
||||
line-height: 1.15;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.np-artist-album {
|
||||
font-size: 15px;
|
||||
font-size: 19px;
|
||||
color: rgba(255, 255, 255, 0.75);
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
@@ -3366,3 +3366,461 @@ input[type="range"]:hover::-webkit-slider-thumb {
|
||||
.eq-bar:nth-child(2) { animation: wave 0.8s ease-in-out 0.15s infinite; }
|
||||
.eq-bar:nth-child(3) { animation: wave 0.8s ease-in-out 0.3s infinite; }
|
||||
.eq-bar:nth-child(4) { animation: wave 0.8s ease-in-out 0.45s infinite; }
|
||||
|
||||
/* ─────────────────────────────────────────────────────────────
|
||||
Middle Earth — Epic Fantasy / Cinematic
|
||||
───────────────────────────────────────────────────────────── */
|
||||
|
||||
[data-theme='middle-earth'] {
|
||||
color-scheme: light;
|
||||
|
||||
--select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%234a3728%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
|
||||
|
||||
--ctp-crust: #2a1d15;
|
||||
--ctp-mantle: #3b2a1e;
|
||||
--ctp-base: #f4e4bc;
|
||||
--ctp-surface0: #ebd5a3;
|
||||
--ctp-surface1: #dec48d;
|
||||
--ctp-surface2: #cbb07c;
|
||||
--ctp-overlay0: #8c7356;
|
||||
--ctp-overlay1: #6e5a42;
|
||||
--ctp-overlay2: #4a3728;
|
||||
--ctp-text: #2a1d15;
|
||||
--ctp-subtext1: #4a3728;
|
||||
--ctp-subtext0: #6e5a42;
|
||||
--ctp-mauve: #d4af37;
|
||||
--ctp-lavender: #e5c158;
|
||||
--ctp-green: #4a7040;
|
||||
--ctp-teal: #3e5a5a;
|
||||
--ctp-sky: #78a2c0;
|
||||
--ctp-blue: #4a6b8a;
|
||||
--ctp-sapphire: #2a4b6a;
|
||||
--ctp-pink: #b05a7e;
|
||||
--ctp-flamingo: #c07a7a;
|
||||
--ctp-rosewater:#e5caca;
|
||||
--ctp-yellow: #d4af37;
|
||||
--ctp-peach: #c08a4a;
|
||||
--ctp-maroon: #6a2a2a;
|
||||
--ctp-red: #8a2a2a;
|
||||
|
||||
--bg-app: #f4e4bc;
|
||||
--bg-sidebar: #3b2a1e;
|
||||
--bg-card: #ebd5a3;
|
||||
--bg-hover: rgba(74, 55, 40, 0.1);
|
||||
--bg-player: #2a1d15;
|
||||
--bg-glass: rgba(244, 228, 188, 0.85);
|
||||
|
||||
--accent: #d4af37;
|
||||
--accent-dim: rgba(212, 175, 55, 0.2);
|
||||
--accent-glow: rgba(212, 175, 55, 0.4);
|
||||
|
||||
--text-primary: #2a1d15;
|
||||
--text-secondary:#4a3728;
|
||||
--text-muted: #8c7356;
|
||||
|
||||
--border: #cbb07c;
|
||||
--border-subtle: #dec48d;
|
||||
|
||||
--radius-sm: 4px;
|
||||
--radius-md: 8px;
|
||||
--radius-lg: 12px;
|
||||
}
|
||||
|
||||
[data-theme='middle-earth'] .player-track-name {
|
||||
color: #f4e4bc;
|
||||
font-family: Georgia, 'Times New Roman', serif;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
[data-theme='middle-earth'] .player-track-artist { color: #d4af37; }
|
||||
[data-theme='middle-earth'] .player-time { color: #dec48d; }
|
||||
|
||||
[data-theme='middle-earth'] .sidebar {
|
||||
border-right: 1px solid rgba(212, 175, 55, 0.3);
|
||||
}
|
||||
[data-theme='middle-earth'] .nav-link { color: #dec48d; }
|
||||
[data-theme='middle-earth'] .nav-link:hover { background: rgba(212, 175, 55, 0.1); color: #f4e4bc; }
|
||||
[data-theme='middle-earth'] .nav-link.active { color: #d4af37; background: rgba(212, 175, 55, 0.15); }
|
||||
[data-theme='middle-earth'] .nav-link.active::before { background-color: #d4af37; box-shadow: 0 0 10px rgba(212, 175, 55, 0.6); }
|
||||
|
||||
[data-theme='middle-earth'] .btn-primary {
|
||||
background: #d4af37;
|
||||
color: #2a1d15;
|
||||
font-weight: 700;
|
||||
box-shadow: 0 0 15px rgba(212, 175, 55, 0.3);
|
||||
}
|
||||
[data-theme='middle-earth'] .player-btn { color: #dec48d; }
|
||||
[data-theme='middle-earth'] .player-btn:hover { color: #d4af37; }
|
||||
|
||||
/* Queue läuft auf dunklem Player-Hintergrund — helle Textfarben nötig */
|
||||
[data-theme='middle-earth'] .queue-current-info h3 { color: #f4e4bc; }
|
||||
[data-theme='middle-earth'] .queue-current-sub { color: #d4af37; }
|
||||
[data-theme='middle-earth'] .queue-item-title { color: #f4e4bc; }
|
||||
[data-theme='middle-earth'] .queue-item-artist { color: #cbb07c; }
|
||||
|
||||
/* Dezentes Pergament-Noise über der App */
|
||||
[data-theme='middle-earth'] .app-shell::after {
|
||||
content: '';
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
pointer-events: none;
|
||||
z-index: 9999;
|
||||
opacity: 0.03;
|
||||
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
|
||||
background-size: 200px 200px;
|
||||
}
|
||||
|
||||
/* ─────────────────────────────────────────────────────────────
|
||||
Morpheus — Matrix Style
|
||||
───────────────────────────────────────────────────────────── */
|
||||
|
||||
[data-theme='morpheus'] {
|
||||
color-scheme: dark;
|
||||
|
||||
--select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2300ff41%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
|
||||
|
||||
--ctp-crust: #000000;
|
||||
--ctp-mantle: #050505;
|
||||
--ctp-base: #0a0a0a;
|
||||
--ctp-surface0: #0d1a0d;
|
||||
--ctp-surface1: #1a2e1a;
|
||||
--ctp-surface2: #243d24;
|
||||
--ctp-overlay0: #003b00;
|
||||
--ctp-overlay1: #008f11;
|
||||
--ctp-overlay2: #00ff41;
|
||||
--ctp-text: #00ff41;
|
||||
--ctp-subtext1: #00cc33;
|
||||
--ctp-subtext0: #008f11;
|
||||
--ctp-mauve: #00ff41;
|
||||
--ctp-lavender: #adff2f;
|
||||
--ctp-green: #00ff41;
|
||||
--ctp-teal: #20c20e;
|
||||
--ctp-sky: #00ff41;
|
||||
--ctp-blue: #00ff41;
|
||||
--ctp-sapphire: #008f11;
|
||||
--ctp-pink: #003b00;
|
||||
--ctp-flamingo: #003b00;
|
||||
--ctp-rosewater:#d2ff00;
|
||||
--ctp-yellow: #adff2f;
|
||||
--ctp-peach: #00ff41;
|
||||
--ctp-maroon: #003b00;
|
||||
--ctp-red: #ff0000;
|
||||
|
||||
--bg-app: #0a0a0a;
|
||||
--bg-sidebar: #000000;
|
||||
--bg-card: #0d1a0d;
|
||||
--bg-hover: rgba(0, 255, 65, 0.1);
|
||||
--bg-player: #000000;
|
||||
--bg-glass: rgba(0, 0, 0, 0.85);
|
||||
|
||||
--accent: #00ff41;
|
||||
--accent-dim: rgba(0, 255, 65, 0.15);
|
||||
--accent-glow: rgba(0, 255, 65, 0.4);
|
||||
|
||||
--text-primary: #00ff41;
|
||||
--text-secondary:#00cc33;
|
||||
--text-muted: #1a7a2a;
|
||||
|
||||
--border: #003b00;
|
||||
--border-subtle: #001a00;
|
||||
|
||||
--positive: #00ff41;
|
||||
--warning: #adff2f;
|
||||
--danger: #ff0033;
|
||||
|
||||
--radius-sm: 0px;
|
||||
--radius-md: 2px;
|
||||
--radius-lg: 4px;
|
||||
}
|
||||
|
||||
[data-theme='morpheus'] .player-track-name {
|
||||
font-family: 'JetBrains Mono', 'Fira Code', monospace;
|
||||
text-shadow: 0 0 8px rgba(0, 255, 65, 0.6);
|
||||
letter-spacing: 0.05em;
|
||||
}
|
||||
[data-theme='morpheus'] .player-track-artist,
|
||||
[data-theme='morpheus'] .player-time {
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
opacity: 0.8;
|
||||
}
|
||||
[data-theme='morpheus'] .nav-link.active {
|
||||
background: linear-gradient(90deg, rgba(0, 255, 65, 0.1) 0%, transparent 100%);
|
||||
text-shadow: 0 0 5px rgba(0, 255, 65, 0.4);
|
||||
}
|
||||
[data-theme='morpheus'] .nav-link.active::before {
|
||||
box-shadow: 0 0 8px rgba(0, 255, 65, 0.6);
|
||||
}
|
||||
[data-theme='morpheus'] .player-bar {
|
||||
box-shadow: 0 -5px 15px rgba(0, 255, 65, 0.05);
|
||||
}
|
||||
[data-theme='morpheus'] .sidebar {
|
||||
border-right: 1px solid #003b00;
|
||||
}
|
||||
|
||||
/* ─────────────────────────────────────────────────────────────
|
||||
Pandora — Bioluminescent Sci-Fi
|
||||
───────────────────────────────────────────────────────────── */
|
||||
|
||||
[data-theme='pandora'] {
|
||||
color-scheme: dark;
|
||||
|
||||
--select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2300f2ff%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
|
||||
|
||||
--ctp-crust: #040a0e;
|
||||
--ctp-mantle: #08141a;
|
||||
--ctp-base: #0c1b22;
|
||||
--ctp-surface0: #142b35;
|
||||
--ctp-surface1: #1a3844;
|
||||
--ctp-surface2: #244b5a;
|
||||
--ctp-overlay0: #4a6d7c;
|
||||
--ctp-overlay1: #6a8fa0;
|
||||
--ctp-overlay2: #8ab1c4;
|
||||
--ctp-text: #e0f7fa;
|
||||
--ctp-subtext1: #b2ebf2;
|
||||
--ctp-subtext0: #80deea;
|
||||
--ctp-mauve: #00f2ff;
|
||||
--ctp-lavender: #80f9ff;
|
||||
--ctp-green: #4ade80;
|
||||
--ctp-teal: #2dd4bf;
|
||||
--ctp-sky: #38bdf8;
|
||||
--ctp-blue: #60a5fa;
|
||||
--ctp-sapphire: #2563eb;
|
||||
--ctp-pink: #f472b6;
|
||||
--ctp-flamingo: #fb7185;
|
||||
--ctp-rosewater:#ffe4e6;
|
||||
--ctp-yellow: #fbbf24;
|
||||
--ctp-peach: #fb923c;
|
||||
--ctp-maroon: #e11d48;
|
||||
--ctp-red: #f87171;
|
||||
|
||||
--bg-app: #0c1b22;
|
||||
--bg-sidebar: #08141a;
|
||||
--bg-card: rgba(20, 43, 53, 0.6);
|
||||
--bg-hover: rgba(26, 56, 68, 0.4);
|
||||
--bg-player: #040a0e;
|
||||
--bg-glass: rgba(12, 27, 34, 0.7);
|
||||
|
||||
--accent: #00f2ff;
|
||||
--accent-dim: rgba(0, 242, 255, 0.15);
|
||||
--accent-glow: rgba(0, 242, 255, 0.4);
|
||||
|
||||
--text-primary: #e0f7fa;
|
||||
--text-secondary:#b2ebf2;
|
||||
--text-muted: #6a8fa0;
|
||||
|
||||
--border: #1a3844;
|
||||
--border-subtle: #0f242d;
|
||||
|
||||
--radius-sm: 8px;
|
||||
--radius-md: 12px;
|
||||
--radius-lg: 20px;
|
||||
}
|
||||
|
||||
[data-theme='pandora'] .sidebar {
|
||||
backdrop-filter: blur(12px);
|
||||
border-right: 1px solid rgba(0, 242, 255, 0.1);
|
||||
}
|
||||
[data-theme='pandora'] .player-bar {
|
||||
border-top: 1px solid rgba(0, 242, 255, 0.2);
|
||||
box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
[data-theme='pandora'] .player-track-name {
|
||||
color: #00f2ff;
|
||||
text-shadow: 0 0 8px rgba(0, 242, 255, 0.6);
|
||||
font-weight: 600;
|
||||
}
|
||||
[data-theme='pandora'] .btn-primary {
|
||||
background: linear-gradient(135deg, #00f2ff, #0088cc);
|
||||
box-shadow: 0 0 15px rgba(0, 242, 255, 0.3);
|
||||
color: #040a0e;
|
||||
}
|
||||
[data-theme='pandora'] .nav-link.active {
|
||||
background: linear-gradient(90deg, rgba(0, 242, 255, 0.15), transparent);
|
||||
color: #00f2ff;
|
||||
text-shadow: 0 0 5px rgba(0, 242, 255, 0.4);
|
||||
}
|
||||
[data-theme='pandora'] .card:hover {
|
||||
border: 1px solid rgba(0, 242, 255, 0.3);
|
||||
box-shadow: 0 0 20px rgba(0, 242, 255, 0.1);
|
||||
}
|
||||
|
||||
/* ─────────────────────────────────────────────────────────────
|
||||
Stark HUD — Iron Man / Arc Reactor
|
||||
───────────────────────────────────────────────────────────── */
|
||||
|
||||
[data-theme='stark-hud'] {
|
||||
color-scheme: dark;
|
||||
|
||||
--select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%2300f2ff%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
|
||||
|
||||
--ctp-crust: #05070a;
|
||||
--ctp-mantle: #080c12;
|
||||
--ctp-base: #0b0f15;
|
||||
--ctp-surface0: #141b24;
|
||||
--ctp-surface1: #1c2531;
|
||||
--ctp-surface2: #253141;
|
||||
--ctp-overlay0: #4a5d75;
|
||||
--ctp-overlay1: #6a8099;
|
||||
--ctp-overlay2: #8ba2bd;
|
||||
--ctp-text: #e0f7fa;
|
||||
--ctp-subtext1: #a3ced4;
|
||||
--ctp-subtext0: #7da5aa;
|
||||
--ctp-mauve: #00f2ff;
|
||||
--ctp-lavender: #7df9ff;
|
||||
--ctp-green: #00ff9d;
|
||||
--ctp-teal: #00d4cc;
|
||||
--ctp-sky: #00f2ff;
|
||||
--ctp-blue: #00f2ff;
|
||||
--ctp-sapphire: #0088cc;
|
||||
--ctp-pink: #ff3399;
|
||||
--ctp-flamingo: #ff6680;
|
||||
--ctp-rosewater:#ffe0e6;
|
||||
--ctp-yellow: #ffcc00;
|
||||
--ctp-peach: #ff8800;
|
||||
--ctp-maroon: #cc0022;
|
||||
--ctp-red: #ff3333;
|
||||
|
||||
--bg-app: #0b0f15;
|
||||
--bg-sidebar: #080c12;
|
||||
--bg-card: #141b24;
|
||||
--bg-hover: rgba(0, 242, 255, 0.08);
|
||||
--bg-player: #05070a;
|
||||
--bg-glass: rgba(11, 15, 21, 0.85);
|
||||
|
||||
--accent: #00f2ff;
|
||||
--accent-dim: rgba(0, 242, 255, 0.12);
|
||||
--accent-glow: rgba(0, 242, 255, 0.4);
|
||||
|
||||
--text-primary: #e0f7fa;
|
||||
--text-secondary:#a3ced4;
|
||||
--text-muted: #5a718a;
|
||||
|
||||
--border: #1e2a3a;
|
||||
--border-subtle: #141b24;
|
||||
|
||||
--radius-sm: 2px;
|
||||
--radius-md: 4px;
|
||||
--radius-lg: 6px;
|
||||
}
|
||||
|
||||
[data-theme='stark-hud'] .app-shell {
|
||||
background: radial-gradient(circle at 50% 50%, #0e1621 0%, #05070a 100%);
|
||||
}
|
||||
[data-theme='stark-hud'] .sidebar {
|
||||
border-right: 1px solid rgba(0, 242, 255, 0.15);
|
||||
}
|
||||
[data-theme='stark-hud'] .player-bar {
|
||||
border-top: 1px solid rgba(0, 242, 255, 0.2);
|
||||
box-shadow: 0 -10px 30px rgba(0, 242, 255, 0.05);
|
||||
}
|
||||
[data-theme='stark-hud'] .player-track-name {
|
||||
color: #00f2ff;
|
||||
text-shadow: 0 0 10px rgba(0, 242, 255, 0.6);
|
||||
font-family: 'JetBrains Mono', monospace;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
[data-theme='stark-hud'] .nav-link.active {
|
||||
background: linear-gradient(90deg, rgba(0, 242, 255, 0.1) 0%, transparent 100%);
|
||||
box-shadow: -5px 0 15px rgba(0, 242, 255, 0.2);
|
||||
}
|
||||
[data-theme='stark-hud'] .nav-link.active::before {
|
||||
box-shadow: 0 0 10px rgba(0, 242, 255, 0.5);
|
||||
}
|
||||
[data-theme='stark-hud'] .btn-primary {
|
||||
background: #00f2ff;
|
||||
color: #05070a;
|
||||
font-weight: 700;
|
||||
box-shadow: 0 0 15px rgba(0, 242, 255, 0.3);
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
}
|
||||
|
||||
/* ─────────────────────────────────────────────────────────────
|
||||
Blade — Cinematic Industrial
|
||||
───────────────────────────────────────────────────────────── */
|
||||
|
||||
[data-theme='blade'] {
|
||||
color-scheme: dark;
|
||||
|
||||
--select-arrow: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22%23a0a0a0%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cpolyline%20points%3D%226%209%2012%2015%2018%209%22%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E");
|
||||
|
||||
--ctp-crust: #050505;
|
||||
--ctp-mantle: #0a0a0a;
|
||||
--ctp-base: #121212;
|
||||
--ctp-surface0: #1a1a1a;
|
||||
--ctp-surface1: #252525;
|
||||
--ctp-surface2: #333333;
|
||||
--ctp-overlay0: #4a4a4a;
|
||||
--ctp-overlay1: #707070;
|
||||
--ctp-overlay2: #909090;
|
||||
--ctp-text: #e0e0e0;
|
||||
--ctp-subtext1: #b0b0b0;
|
||||
--ctp-subtext0: #888888;
|
||||
--ctp-mauve: #b30000;
|
||||
--ctp-lavender: #ff1a1a;
|
||||
--ctp-green: #00ff66;
|
||||
--ctp-teal: #1abc9c;
|
||||
--ctp-sky: #3498db;
|
||||
--ctp-blue: #2980b9;
|
||||
--ctp-sapphire: #1f618d;
|
||||
--ctp-pink: #e91e63;
|
||||
--ctp-flamingo: #f06292;
|
||||
--ctp-rosewater:#f8bbd0;
|
||||
--ctp-yellow: #f1c40f;
|
||||
--ctp-peach: #e67e22;
|
||||
--ctp-maroon: #800000;
|
||||
--ctp-red: #ff0000;
|
||||
|
||||
--bg-app: #121212;
|
||||
--bg-sidebar: #0a0a0a;
|
||||
--bg-card: #1a1a1a;
|
||||
--bg-hover: rgba(179, 0, 0, 0.1);
|
||||
--bg-player: #050505;
|
||||
--bg-glass: rgba(10, 10, 10, 0.85);
|
||||
|
||||
--accent: #b30000;
|
||||
--accent-dim: rgba(179, 0, 0, 0.15);
|
||||
--accent-glow: rgba(179, 0, 0, 0.4);
|
||||
|
||||
--text-primary: #e0e0e0;
|
||||
--text-secondary:#b0b0b0;
|
||||
--text-muted: #666666;
|
||||
|
||||
--border: #2a2a2a;
|
||||
--border-subtle: #1a1a1a;
|
||||
|
||||
--positive: #00ff66;
|
||||
--warning: #f1c40f;
|
||||
--danger: #ff0000;
|
||||
|
||||
--radius-sm: 2px;
|
||||
--radius-md: 4px;
|
||||
--radius-lg: 6px;
|
||||
}
|
||||
|
||||
[data-theme='blade'] .player-bar {
|
||||
border-top: 1px solid #222;
|
||||
background: linear-gradient(to bottom, #0a0a0a 0%, #050505 100%);
|
||||
box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
[data-theme='blade'] .sidebar {
|
||||
border-right: 1px solid #1a1a1a;
|
||||
}
|
||||
[data-theme='blade'] .nav-link.active {
|
||||
background: linear-gradient(90deg, rgba(179, 0, 0, 0.2) 0%, transparent 100%);
|
||||
color: #fff;
|
||||
}
|
||||
[data-theme='blade'] .nav-link.active::before {
|
||||
box-shadow: 0 0 8px rgba(179, 0, 0, 0.5);
|
||||
}
|
||||
[data-theme='blade'] .player-track-name {
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1px;
|
||||
font-weight: 700;
|
||||
color: #fff;
|
||||
text-shadow: 0 0 10px rgba(179, 0, 0, 0.3);
|
||||
}
|
||||
[data-theme='blade'] .btn-primary {
|
||||
background: linear-gradient(135deg, #b30000 0%, #800000 100%);
|
||||
border: 1px solid rgba(255, 26, 26, 0.2);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user