mirror of
https://github.com/Psychotoxical/psysonic.git
synced 2026-07-22 15:25:46 +00:00
Frank Stellmacher
45a6a18849
theme.css (16138 LOC) → 122 per-section files in src/styles/themes/ +
an index.css that imports them in original cascade order.
Concatenating all files via index.css reproduces the original byte stream
(+1 trailing newline, cosmetic).
Each top-level section header in theme.css (matching /^\/\* ─{3,}/)
becomes its own file, slugged from the header text (or the [data-theme]
selector found in the body when the header was a banner). Pure-separator
headers fold into the previous section so they don't create empty files.
Generated via /tmp/split-theme-css.mjs.
483 lines
13 KiB
CSS
483 lines
13 KiB
CSS
/* ─── Windows XP Luna Teal ─── */
|
|
[data-theme='luna-teal'] {
|
|
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%23444444%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");
|
|
|
|
/* ── Palette ── */
|
|
--ctp-crust: #0041b8;
|
|
--ctp-mantle: #0055e5;
|
|
--ctp-base: #ece9d8;
|
|
--ctp-surface0: #ffffff;
|
|
--ctp-surface1: #f5f3ec;
|
|
--ctp-surface2: #ece9d8;
|
|
--ctp-overlay0: #c0bba8;
|
|
--ctp-overlay1: #8a8675;
|
|
--ctp-overlay2: #5e5a4c;
|
|
--ctp-text: #000000;
|
|
--ctp-subtext1: #1a1a1a;
|
|
--ctp-subtext0: #444444;
|
|
--ctp-mauve: #3c9d29;
|
|
--ctp-lavender: #52b83c;
|
|
--ctp-green: #3c9d29;
|
|
--ctp-teal: #007c8a;
|
|
--ctp-sky: #316ac5;
|
|
--ctp-blue: #0055e5;
|
|
--ctp-sapphire: #0041b8;
|
|
--ctp-pink: #cc2288;
|
|
--ctp-flamingo: #cc2020;
|
|
--ctp-rosewater: #dd4400;
|
|
--ctp-yellow: #b87800;
|
|
--ctp-peach: #cc6600;
|
|
--ctp-maroon: #aa1111;
|
|
--ctp-red: #cc1111;
|
|
|
|
/* ── Semantic tokens ── */
|
|
--bg-app: #ece9d8;
|
|
--bg-sidebar: #c8daf5;
|
|
--bg-card: #ffffff;
|
|
--bg-hover: #316ac5;
|
|
--bg-player: #1248b8;
|
|
--bg-glass: rgba(255, 255, 255, 0.97);
|
|
--accent: #3c9d29;
|
|
--accent-dim: rgba(60, 157, 41, 0.14);
|
|
--accent-glow: rgba(60, 157, 41, 0.35);
|
|
--volume-accent: #3c9d29;
|
|
--text-primary: #000000;
|
|
--text-secondary: #333333;
|
|
--text-muted: #555555;
|
|
--border: #003399;
|
|
--border-subtle: #aca899;
|
|
--positive: #3c9d29;
|
|
--warning: #b87800;
|
|
--danger: #cc1111;
|
|
--radius-sm: 3px;
|
|
--radius-md: 4px;
|
|
--radius-lg: 6px;
|
|
}
|
|
|
|
/* ── App shell: XP sandy desktop ── */
|
|
[data-theme='luna-teal'] .app-shell {
|
|
background: #ece9d8;
|
|
}
|
|
|
|
/* ── Sidebar: XP Explorer task pane / Folders panel ── */
|
|
[data-theme='luna-teal'] .sidebar {
|
|
background: linear-gradient(180deg, #d8e8fa 0%, #c0d4f5 40%, #b0c8f0 100%);
|
|
border-right: 1px solid #7090c0;
|
|
box-shadow: inset -1px 0 0 rgba(255, 255, 255, 0.60), 2px 0 4px rgba(0, 0, 0, 0.14);
|
|
}
|
|
|
|
/* Sidebar text: dark navy on ice blue — with white text-shadow for legibility */
|
|
[data-theme='luna-teal'] .sidebar-link,
|
|
[data-theme='luna-teal'] .sidebar-section-title,
|
|
[data-theme='luna-teal'] .sidebar-logo-text,
|
|
[data-theme='luna-teal'] .nav-section-label,
|
|
[data-theme='luna-teal'] .brand-name {
|
|
color: #002060;
|
|
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
|
|
font-weight: 700;
|
|
}
|
|
|
|
/* Nav links */
|
|
[data-theme='luna-teal'] .nav-link {
|
|
color: #001850;
|
|
}
|
|
|
|
[data-theme='luna-teal'] .nav-link:hover {
|
|
background: rgba(255, 255, 255, 0.45);
|
|
color: #000000;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
[data-theme='luna-teal'] .nav-link.active {
|
|
background: #316ac5;
|
|
color: #ffffff;
|
|
border-radius: 3px;
|
|
text-shadow: none;
|
|
}
|
|
|
|
[data-theme='luna-teal'] .nav-link.active::before {
|
|
background: #ffffff;
|
|
}
|
|
|
|
[data-theme='luna-teal'] .nav-link.active svg,
|
|
[data-theme='luna-teal'] .nav-link:hover svg {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* Now Playing nav link */
|
|
[data-theme='luna-teal'] .nav-link-nowplaying {
|
|
background: rgba(0, 0, 80, 0.10);
|
|
color: #001850;
|
|
}
|
|
|
|
[data-theme='luna-teal'] .nav-link-nowplaying:hover {
|
|
background: rgba(255, 255, 255, 0.45);
|
|
color: #000000;
|
|
}
|
|
|
|
[data-theme='luna-teal'] .nav-link-nowplaying.active {
|
|
background: #316ac5;
|
|
color: #ffffff;
|
|
}
|
|
|
|
/* ── Player bar: authentic XP Luna taskbar blue ── */
|
|
[data-theme='luna-teal'] .player-bar {
|
|
background: linear-gradient(180deg,
|
|
#4b8ee8 0%,
|
|
#2568d4 8%,
|
|
#1a56c4 30%,
|
|
#1248b8 70%,
|
|
#0e3da8 85%,
|
|
#1248b8 100%);
|
|
border-top: 1px solid #7aaaff;
|
|
box-shadow:
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.55),
|
|
inset 0 2px 0 rgba(255, 255, 255, 0.18),
|
|
0 -2px 8px rgba(0, 0, 0, 0.30);
|
|
}
|
|
|
|
/* Track name: white with XP glow */
|
|
[data-theme='luna-teal'] .player-track-name {
|
|
color: #ffffff;
|
|
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.60), 0 0 10px rgba(120, 180, 255, 0.40);
|
|
font-weight: 700;
|
|
}
|
|
|
|
[data-theme='luna-teal'] .player-track-artist {
|
|
color: #b8d4ff;
|
|
opacity: 1;
|
|
}
|
|
|
|
[data-theme='luna-teal'] .player-time {
|
|
color: #b8d4ff;
|
|
}
|
|
|
|
/* ── Transport buttons: XP Luna gel circles ── */
|
|
[data-theme='luna-teal'] .player-btn,
|
|
[data-theme='luna-teal'] .player-btn-primary {
|
|
background: linear-gradient(180deg,
|
|
#80aaff 0%,
|
|
#4477ee 45%,
|
|
#1a50dd 50%,
|
|
#0c3bb8 100%);
|
|
color: #ffffff;
|
|
border: 1px solid #002288;
|
|
border-radius: 50%;
|
|
box-shadow:
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.65),
|
|
0 2px 5px rgba(0, 0, 0, 0.45);
|
|
}
|
|
|
|
[data-theme='luna-teal'] .player-btn:hover,
|
|
[data-theme='luna-teal'] .player-btn-primary:hover {
|
|
background: linear-gradient(180deg,
|
|
#99bbff 0%,
|
|
#5588ff 45%,
|
|
#2264ee 50%,
|
|
#1a52d0 100%);
|
|
box-shadow:
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.75),
|
|
0 3px 8px rgba(0, 0, 0, 0.40),
|
|
0 0 10px rgba(80, 140, 255, 0.40);
|
|
}
|
|
|
|
/* ── Regular buttons: XP bevel style ── */
|
|
[data-theme='luna-teal'] .btn,
|
|
[data-theme='luna-teal'] .btn-surface,
|
|
[data-theme='luna-teal'] .btn-ghost {
|
|
background: linear-gradient(180deg, #f5f3ec 0%, #ece9d8 48%, #ddd9c8 50%, #d0cdb8 100%);
|
|
color: #000000;
|
|
border: 1px solid #888480;
|
|
box-shadow:
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.95),
|
|
inset 1px 0 0 rgba(255, 255, 255, 0.70),
|
|
0 1px 2px rgba(0, 0, 0, 0.20);
|
|
border-radius: 3px;
|
|
}
|
|
|
|
[data-theme='luna-teal'] .btn:hover,
|
|
[data-theme='luna-teal'] .btn-surface:hover,
|
|
[data-theme='luna-teal'] .btn-ghost:hover {
|
|
background: linear-gradient(180deg, #ffffff 0%, #f0ede0 48%, #e4e0d0 50%, #d8d4c4 100%);
|
|
border-color: #0055e5;
|
|
box-shadow:
|
|
inset 0 1px 0 rgba(255, 255, 255, 1),
|
|
0 1px 3px rgba(0, 0, 0, 0.18);
|
|
}
|
|
|
|
/* ── Primary button: XP green gel ── */
|
|
[data-theme='luna-teal'] .btn-primary {
|
|
background: linear-gradient(180deg,
|
|
#66dd50 0%,
|
|
#3c9d29 45%,
|
|
#2e8020 50%,
|
|
#1e6015 100%);
|
|
color: #ffffff;
|
|
border: 1px solid #1a5010;
|
|
box-shadow:
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.55),
|
|
0 1px 3px rgba(0, 0, 0, 0.30);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
[data-theme='luna-teal'] .btn-primary:hover {
|
|
background: linear-gradient(180deg,
|
|
#80ee68 0%,
|
|
#4db035 45%,
|
|
#3a9028 50%,
|
|
#2e8020 100%);
|
|
box-shadow:
|
|
inset 0 1px 0 rgba(255, 255, 255, 0.60),
|
|
0 1px 4px rgba(0, 0, 0, 0.30),
|
|
0 0 8px rgba(60, 157, 41, 0.40);
|
|
}
|
|
|
|
/* ── Hero / album-card play buttons ── */
|
|
[data-theme='luna-teal'] .hero-play-btn,
|
|
[data-theme='luna-teal'] .album-card-details-btn {
|
|
background: linear-gradient(180deg, #f5f3ec 0%, #d0cdb8 100%);
|
|
color: #000000;
|
|
border: 1px solid #888480;
|
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), 0 1px 2px rgba(0, 0, 0, 0.20);
|
|
}
|
|
|
|
[data-theme='luna-teal'] .hero-play-btn:hover,
|
|
[data-theme='luna-teal'] .album-card-details-btn:hover {
|
|
background: linear-gradient(180deg, #ffffff 0%, #ddd9c8 100%);
|
|
border-color: #0055e5;
|
|
}
|
|
|
|
/* ── Queue toolbar round buttons ── */
|
|
[data-theme='luna-teal'] .queue-round-btn {
|
|
background: linear-gradient(180deg, #f5f3ec 0%, #d0cdb8 100%);
|
|
color: #333333;
|
|
border: 1px solid #888480;
|
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.90), 0 1px 2px rgba(0, 0, 0, 0.18);
|
|
}
|
|
|
|
[data-theme='luna-teal'] .queue-round-btn:hover:not(:disabled):not(.active) {
|
|
background: linear-gradient(180deg, #ffffff 0%, #e0ddd0 100%);
|
|
border-color: #0055e5;
|
|
color: #000000;
|
|
}
|
|
|
|
[data-theme='luna-teal'] .queue-round-btn.active {
|
|
background: #316ac5;
|
|
color: #ffffff;
|
|
border-color: #0033aa;
|
|
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.30), 0 1px 0 rgba(255, 255, 255, 0.15);
|
|
}
|
|
|
|
/* ── Cards: XP white window interior ── */
|
|
[data-theme='luna-teal'] .card {
|
|
background: #ffffff;
|
|
border: 1px solid #aca899;
|
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 1), 0 1px 3px rgba(0, 0, 0, 0.15);
|
|
border-radius: 4px;
|
|
}
|
|
|
|
/* ── Content header: XP title bar gradient ── */
|
|
[data-theme='luna-teal'] .content-header {
|
|
background: linear-gradient(180deg,
|
|
#5a9aee 0%,
|
|
#2a6ad4 25%,
|
|
#1a56c4 50%,
|
|
#0e48b8 75%,
|
|
#0a3aaa 100%);
|
|
border-bottom: 1px solid #0033aa;
|
|
color: #ffffff;
|
|
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.40), 0 2px 4px rgba(0, 0, 0, 0.18);
|
|
}
|
|
|
|
/* Connection indicators: white on blue header */
|
|
[data-theme='luna-teal'] .connection-type,
|
|
[data-theme='luna-teal'] .connection-server {
|
|
color: #ffffff;
|
|
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.50);
|
|
}
|
|
|
|
/* ── Theme accordion: XP selection blue ── */
|
|
[data-theme='luna-teal'] .theme-accordion-header:hover {
|
|
background: #316ac5;
|
|
color: #ffffff;
|
|
}
|
|
|
|
[data-theme='luna-teal'] .theme-accordion-open .theme-accordion-header {
|
|
background: #316ac5;
|
|
color: #ffffff;
|
|
}
|
|
|
|
[data-theme='luna-teal'] .theme-accordion-open .theme-accordion-chevron {
|
|
color: #ffffff;
|
|
}
|
|
|
|
/* ── Progress bar: XP green ── */
|
|
[data-theme='luna-teal'] .progress-bar-track {
|
|
background: #aca899;
|
|
border-radius: 2px;
|
|
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
|
|
}
|
|
|
|
[data-theme='luna-teal'] .progress-bar-fill {
|
|
background: linear-gradient(180deg, #52cc3c 0%, #3c9d29 50%, #2e8020 100%);
|
|
border-radius: 2px;
|
|
}
|
|
|
|
/* ── Scrollbar: XP 16px system style ── */
|
|
[data-theme='luna-teal'] ::-webkit-scrollbar {
|
|
width: 16px;
|
|
height: 16px;
|
|
}
|
|
|
|
[data-theme='luna-teal'] ::-webkit-scrollbar-track {
|
|
background: #ece9d8;
|
|
border-left: 1px solid #aca899;
|
|
}
|
|
|
|
[data-theme='luna-teal'] ::-webkit-scrollbar-thumb {
|
|
background: linear-gradient(to right, #c8c4b8 0%, #e0ddd0 40%, #c0bbb4 100%);
|
|
border: 1px solid #888480;
|
|
box-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #888480;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
[data-theme='luna-teal'] ::-webkit-scrollbar-button {
|
|
background: linear-gradient(180deg, #f0ede0 0%, #d8d4c4 100%);
|
|
border: 1px solid #888480;
|
|
box-shadow: inset 1px 1px 0 #ffffff, inset -1px -1px 0 #888480;
|
|
}
|
|
|
|
/* ── Glass / dropdowns: solid XP dialog style ── */
|
|
[data-theme='luna-teal'] .glass {
|
|
background: #ffffff !important;
|
|
backdrop-filter: none !important;
|
|
border: 1px solid #aca899 !important;
|
|
box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.28) !important;
|
|
border-radius: 4px !important;
|
|
}
|
|
|
|
[data-theme='luna-teal'] .glass [style*="var(--bg-hover)"] {
|
|
background: #316ac5 !important;
|
|
border-radius: 0 !important;
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
[data-theme='luna-teal'] .glass [style*="var(--text-primary)"] {
|
|
color: #000000 !important;
|
|
}
|
|
|
|
[data-theme='luna-teal'] .glass [style*="var(--text-secondary)"] {
|
|
color: #333333 !important;
|
|
}
|
|
|
|
[data-theme='luna-teal'] .glass [style*="var(--text-muted)"] {
|
|
color: #555555 !important;
|
|
}
|
|
|
|
/* ── Hover / selection: XP classic blue ── */
|
|
[data-theme='luna-teal'] .queue-tab-btn:hover {
|
|
background: #316ac5;
|
|
color: #ffffff;
|
|
}
|
|
|
|
[data-theme='luna-teal'] .settings-tab:hover {
|
|
background: #316ac5;
|
|
color: #ffffff;
|
|
}
|
|
|
|
[data-theme='luna-teal'] .settings-tab.active {
|
|
background: #316ac5;
|
|
color: #ffffff;
|
|
}
|
|
|
|
[data-theme='luna-teal'] .custom-select-trigger:hover {
|
|
background: #316ac5;
|
|
color: #ffffff;
|
|
}
|
|
|
|
[data-theme='luna-teal'] .custom-select-option:hover {
|
|
background: #316ac5 !important;
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
[data-theme='luna-teal'] .artist-ext-link:hover {
|
|
background: #316ac5;
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
[data-theme='luna-teal'] .np-action-btn:hover {
|
|
background: #316ac5;
|
|
color: #ffffff;
|
|
}
|
|
|
|
[data-theme='luna-teal'] .np-queue-item:hover,
|
|
[data-theme='luna-teal'] .np-queue-item.context-active {
|
|
background: #316ac5;
|
|
color: #ffffff;
|
|
}
|
|
|
|
[data-theme='luna-teal'] .track-row:hover,
|
|
[data-theme='luna-teal'] .track-row.context-active {
|
|
background: #316ac5 !important;
|
|
}
|
|
|
|
[data-theme='luna-teal'] .track-row:hover *,
|
|
[data-theme='luna-teal'] .track-row.context-active * {
|
|
color: #ffffff !important;
|
|
}
|
|
|
|
[data-theme='luna-teal'] .artist-row:hover {
|
|
background: #316ac5;
|
|
color: #ffffff;
|
|
}
|
|
|
|
[data-theme='luna-teal'] .playlist-row:hover {
|
|
background: #316ac5;
|
|
}
|
|
|
|
[data-theme='luna-teal'] .playlist-row:hover,
|
|
[data-theme='luna-teal'] .playlist-row:hover * {
|
|
color: #ffffff;
|
|
}
|
|
|
|
[data-theme='luna-teal'] .queue-item:hover,
|
|
[data-theme='luna-teal'] .queue-item.context-active {
|
|
background: #316ac5 !important;
|
|
}
|
|
|
|
[data-theme='luna-teal'] .queue-item:hover .queue-item-title,
|
|
[data-theme='luna-teal'] .queue-item:hover .queue-item-artist,
|
|
[data-theme='luna-teal'] .queue-item:hover .queue-item-duration,
|
|
[data-theme='luna-teal'] .queue-item.context-active .queue-item-title,
|
|
[data-theme='luna-teal'] .queue-item.context-active .queue-item-artist,
|
|
[data-theme='luna-teal'] .queue-item.context-active .queue-item-duration {
|
|
color: #ffffff;
|
|
}
|
|
|
|
/* ── Active queue / now-playing items ── */
|
|
[data-theme='luna-teal'] .queue-item.active {
|
|
background: rgba(49, 106, 197, 0.12);
|
|
color: #0041b8;
|
|
}
|
|
|
|
[data-theme='luna-teal'] .queue-item.active .queue-item-artist,
|
|
[data-theme='luna-teal'] .queue-item.active .queue-item-duration {
|
|
color: #0055e5;
|
|
opacity: 0.85;
|
|
}
|
|
|
|
[data-theme='luna-teal'] .np-queue-item-active {
|
|
color: #0041b8;
|
|
}
|
|
|
|
[data-theme='luna-teal'] .np-queue-item.active {
|
|
background: rgba(49, 106, 197, 0.10);
|
|
}
|
|
|
|
[data-theme='luna-teal'] .np-album-track.active .np-album-track-title,
|
|
[data-theme='luna-teal'] .np-album-track.active .np-album-track-num {
|
|
color: #0041b8;
|
|
}
|
|
|