atdunbg/Nekosonic-Music
1
0
Fork 0
mirror of https://github.com/atdunbg/Nekosonic-Music.git synced 2026-06-22 00:58:51 +08:00
Code Issues Packages Projects Releases Wiki Activity
Files
c275461015e8bd03c962a0d1f293b9c1ad51f5f0
Nekosonic-Music/src/style.css
Atdunbg c275461015 feat: v0.6.0 - 亮色主题、封面主色、发现页重做、漫游页重做、减少推荐、列表风格统一 
新功能:
- 亮色主题：新增浅色外观模式，7种主题色各有对应亮色变体
- 封面主色背景：漫游抽屉自动提取封面主色，PlayerBar跟随继承
- 发现页重做：多类型搜索(歌曲/歌手/专辑)+搜索建议+搜索历史
- 漫游页重做：进入即播放，布局改为封面+歌名+播放/下一首/减少推荐
- 减少推荐：FM模式下可标记不推荐歌曲或歌手
- 列表风格统一：播放指示器跳动动画+hover播放图标+图标统一使用Lucide

修复:
- 专辑页艺术家过多时窗口缩小竖排，改为自动换行
- FM播放时退出登录后首页仍可点击下一首
- 本地音乐播放时缓冲进度条未重置
- 亮色主题下多处文字不可见
- 退出FM模式时状态未正确清理
- 暗色模式下关闭抽屉时PlayerBar闪烁亮色(改用opacity过渡)
- player.ts tickInterval双变量状态不同步，统一为clearTick/setTick

变更:
- 移除播放列表按钮数字角标
- 主页卡片标题固定白色不随主题变化
- 全项目空catch块格式统一
- 清理冗余注释和代码
2026-05-28 23:14:25 +08:00

430 lines
12 KiB
CSS
Raw Blame History

@import "tailwindcss";
@theme {
--color-base: var(--c-bg);
--color-surface: var(--c-surface);
--color-subtle: var(--c-subtle);
--color-muted: var(--c-muted);
--color-emphasis: var(--c-emphasis);
--color-content: var(--c-content);
--color-content-2: var(--c-content-2);
--color-content-3: var(--c-content-3);
--color-content-4: var(--c-content-4);
--color-line: var(--c-line);
--color-line-2: var(--c-line-2);
--color-accent: var(--c-accent);
--color-accent-hover: var(--c-accent-hover);
--color-accent-text: var(--c-accent-text);
--color-accent-dim: var(--c-accent-dim);
--color-danger: var(--c-danger);
--color-danger-dim: var(--c-danger-dim);
--color-warning: var(--c-warning);
--color-info: var(--c-info);
}
@layer base {
:root,
[data-theme="green"] {
--c-bg: #020c06;
--c-surface: #0a1a10;
--c-subtle: rgba(34, 197, 94, 0.06);
--c-muted: rgba(34, 197, 94, 0.10);
--c-emphasis: rgba(34, 197, 94, 0.18);
--c-content: #ffffff;
--c-content-2: #9ca3af;
--c-content-3: #6b7280;
--c-content-4: #4b5563;
--c-line: rgba(255, 255, 255, 0.08);
--c-line-2: rgba(255, 255, 255, 0.04);
--c-accent: #22c55e;
--c-accent-hover: #16a34a;
--c-accent-text: #4ade80;
--c-accent-dim: rgba(34, 197, 94, 0.20);
--c-danger: #ef4444;
--c-danger-dim: rgba(239, 68, 68, 0.20);
--c-warning: #eab308;
--c-info: #3b82f6;
}
[data-theme="rose"] {
--c-bg: #0c0206;
--c-surface: #1a0a10;
--c-subtle: rgba(244, 63, 94, 0.06);
--c-muted: rgba(244, 63, 94, 0.10);
--c-emphasis: rgba(244, 63, 94, 0.18);
--c-content: #ffffff;
--c-content-2: #9ca3af;
--c-content-3: #6b7280;
--c-content-4: #4b5563;
--c-line: rgba(255, 255, 255, 0.08);
--c-line-2: rgba(255, 255, 255, 0.04);
--c-accent: #f43f5e;
--c-accent-hover: #e11d48;
--c-accent-text: #fb7185;
--c-accent-dim: rgba(244, 63, 94, 0.20);
--c-danger: #ef4444;
--c-danger-dim: rgba(239, 68, 68, 0.20);
--c-warning: #eab308;
--c-info: #3b82f6;
}
[data-theme="blue"] {
--c-bg: #02060c;
--c-surface: #0a101a;
--c-subtle: rgba(59, 130, 246, 0.06);
--c-muted: rgba(59, 130, 246, 0.10);
--c-emphasis: rgba(59, 130, 246, 0.18);
--c-content: #ffffff;
--c-content-2: #9ca3af;
--c-content-3: #6b7280;
--c-content-4: #4b5563;
--c-line: rgba(255, 255, 255, 0.08);
--c-line-2: rgba(255, 255, 255, 0.04);
--c-accent: #3b82f6;
--c-accent-hover: #2563eb;
--c-accent-text: #60a5fa;
--c-accent-dim: rgba(59, 130, 246, 0.20);
--c-danger: #ef4444;
--c-danger-dim: rgba(239, 68, 68, 0.20);
--c-warning: #eab308;
--c-info: #8b5cf6;
}
[data-theme="violet"] {
--c-bg: #06020c;
--c-surface: #120a1a;
--c-subtle: rgba(139, 92, 246, 0.06);
--c-muted: rgba(139, 92, 246, 0.10);
--c-emphasis: rgba(139, 92, 246, 0.18);
--c-content: #ffffff;
--c-content-2: #9ca3af;
--c-content-3: #6b7280;
--c-content-4: #4b5563;
--c-line: rgba(255, 255, 255, 0.08);
--c-line-2: rgba(255, 255, 255, 0.04);
--c-accent: #8b5cf6;
--c-accent-hover: #7c3aed;
--c-accent-text: #a78bfa;
--c-accent-dim: rgba(139, 92, 246, 0.20);
--c-danger: #ef4444;
--c-danger-dim: rgba(239, 68, 68, 0.20);
--c-warning: #eab308;
--c-info: #3b82f6;
}
[data-theme="orange"] {
--c-bg: #0c0602;
--c-surface: #1a120a;
--c-subtle: rgba(249, 115, 22, 0.06);
--c-muted: rgba(249, 115, 22, 0.10);
--c-emphasis: rgba(249, 115, 22, 0.18);
--c-content: #ffffff;
--c-content-2: #9ca3af;
--c-content-3: #6b7280;
--c-content-4: #4b5563;
--c-line: rgba(255, 255, 255, 0.08);
--c-line-2: rgba(255, 255, 255, 0.04);
--c-accent: #f97316;
--c-accent-hover: #ea580c;
--c-accent-text: #fb923c;
--c-accent-dim: rgba(249, 115, 22, 0.20);
--c-danger: #ef4444;
--c-danger-dim: rgba(239, 68, 68, 0.20);
--c-warning: #eab308;
--c-info: #3b82f6;
}
[data-theme="cyan"] {
--c-bg: #020c0c;
--c-surface: #0a1a1a;
--c-subtle: rgba(6, 182, 212, 0.06);
--c-muted: rgba(6, 182, 212, 0.10);
--c-emphasis: rgba(6, 182, 212, 0.18);
--c-content: #ffffff;
--c-content-2: #9ca3af;
--c-content-3: #6b7280;
--c-content-4: #4b5563;
--c-line: rgba(255, 255, 255, 0.08);
--c-line-2: rgba(255, 255, 255, 0.04);
--c-accent: #06b6d4;
--c-accent-hover: #0891b2;
--c-accent-text: #22d3ee;
--c-accent-dim: rgba(6, 182, 212, 0.20);
--c-danger: #ef4444;
--c-danger-dim: rgba(239, 68, 68, 0.20);
--c-warning: #eab308;
--c-info: #3b82f6;
}
[data-theme="pink"] {
--c-bg: #0c020a;
--c-surface: #1a0a16;
--c-subtle: rgba(236, 72, 153, 0.06);
--c-muted: rgba(236, 72, 153, 0.10);
--c-emphasis: rgba(236, 72, 153, 0.18);
--c-content: #ffffff;
--c-content-2: #9ca3af;
--c-content-3: #6b7280;
--c-content-4: #4b5563;
--c-line: rgba(255, 255, 255, 0.08);
--c-line-2: rgba(255, 255, 255, 0.04);
--c-accent: #ec4899;
--c-accent-hover: #db2777;
--c-accent-text: #f472b6;
--c-accent-dim: rgba(236, 72, 153, 0.20);
--c-danger: #ef4444;
--c-danger-dim: rgba(239, 68, 68, 0.20);
--c-warning: #eab308;
--c-info: #3b82f6;
}
[data-theme="light-green"] {
--c-bg: #f8faf9;
--c-surface: #ffffff;
--c-subtle: rgba(34, 197, 94, 0.06);
--c-muted: rgba(34, 197, 94, 0.10);
--c-emphasis: rgba(34, 197, 94, 0.16);
--c-content: #111827;
--c-content-2: #4b5563;
--c-content-3: #6b7280;
--c-content-4: #9ca3af;
--c-line: rgba(0, 0, 0, 0.08);
--c-line-2: rgba(0, 0, 0, 0.04);
--c-accent: #16a34a;
--c-accent-hover: #15803d;
--c-accent-text: #15803d;
--c-accent-dim: rgba(34, 197, 94, 0.15);
--c-danger: #dc2626;
--c-danger-dim: rgba(220, 38, 38, 0.12);
--c-warning: #ca8a04;
--c-info: #2563eb;
}
[data-theme="light-rose"] {
--c-bg: #faf8f9;
--c-surface: #ffffff;
--c-subtle: rgba(244, 63, 94, 0.06);
--c-muted: rgba(244, 63, 94, 0.10);
--c-emphasis: rgba(244, 63, 94, 0.16);
--c-content: #111827;
--c-content-2: #4b5563;
--c-content-3: #6b7280;
--c-content-4: #9ca3af;
--c-line: rgba(0, 0, 0, 0.08);
--c-line-2: rgba(0, 0, 0, 0.04);
--c-accent: #e11d48;
--c-accent-hover: #be123c;
--c-accent-text: #be123c;
--c-accent-dim: rgba(244, 63, 94, 0.15);
--c-danger: #dc2626;
--c-danger-dim: rgba(220, 38, 38, 0.12);
--c-warning: #ca8a04;
--c-info: #2563eb;
}
[data-theme="light-blue"] {
--c-bg: #f8f9fb;
--c-surface: #ffffff;
--c-subtle: rgba(59, 130, 246, 0.06);
--c-muted: rgba(59, 130, 246, 0.10);
--c-emphasis: rgba(59, 130, 246, 0.16);
--c-content: #111827;
--c-content-2: #4b5563;
--c-content-3: #6b7280;
--c-content-4: #9ca3af;
--c-line: rgba(0, 0, 0, 0.08);
--c-line-2: rgba(0, 0, 0, 0.04);
--c-accent: #2563eb;
--c-accent-hover: #1d4ed8;
--c-accent-text: #1d4ed8;
--c-accent-dim: rgba(59, 130, 246, 0.15);
--c-danger: #dc2626;
--c-danger-dim: rgba(220, 38, 38, 0.12);
--c-warning: #ca8a04;
--c-info: #7c3aed;
}
[data-theme="light-violet"] {
--c-bg: #f9f8fb;
--c-surface: #ffffff;
--c-subtle: rgba(139, 92, 246, 0.06);
--c-muted: rgba(139, 92, 246, 0.10);
--c-emphasis: rgba(139, 92, 246, 0.16);
--c-content: #111827;
--c-content-2: #4b5563;
--c-content-3: #6b7280;
--c-content-4: #9ca3af;
--c-line: rgba(0, 0, 0, 0.08);
--c-line-2: rgba(0, 0, 0, 0.04);
--c-accent: #7c3aed;
--c-accent-hover: #6d28d9;
--c-accent-text: #6d28d9;
--c-accent-dim: rgba(139, 92, 246, 0.15);
--c-danger: #dc2626;
--c-danger-dim: rgba(220, 38, 38, 0.12);
--c-warning: #ca8a04;
--c-info: #2563eb;
}
[data-theme="light-orange"] {
--c-bg: #faf9f8;
--c-surface: #ffffff;
--c-subtle: rgba(249, 115, 22, 0.06);
--c-muted: rgba(249, 115, 22, 0.10);
--c-emphasis: rgba(249, 115, 22, 0.16);
--c-content: #111827;
--c-content-2: #4b5563;
--c-content-3: #6b7280;
--c-content-4: #9ca3af;
--c-line: rgba(0, 0, 0, 0.08);
--c-line-2: rgba(0, 0, 0, 0.04);
--c-accent: #ea580c;
--c-accent-hover: #c2410c;
--c-accent-text: #c2410c;
--c-accent-dim: rgba(249, 115, 22, 0.15);
--c-danger: #dc2626;
--c-danger-dim: rgba(220, 38, 38, 0.12);
--c-warning: #ca8a04;
--c-info: #2563eb;
}
[data-theme="light-cyan"] {
--c-bg: #f8fbfb;
--c-surface: #ffffff;
--c-subtle: rgba(6, 182, 212, 0.06);
--c-muted: rgba(6, 182, 212, 0.10);
--c-emphasis: rgba(6, 182, 212, 0.16);
--c-content: #111827;
--c-content-2: #4b5563;
--c-content-3: #6b7280;
--c-content-4: #9ca3af;
--c-line: rgba(0, 0, 0, 0.08);
--c-line-2: rgba(0, 0, 0, 0.04);
--c-accent: #0891b2;
--c-accent-hover: #0e7490;
--c-accent-text: #0e7490;
--c-accent-dim: rgba(6, 182, 212, 0.15);
--c-danger: #dc2626;
--c-danger-dim: rgba(220, 38, 38, 0.12);
--c-warning: #ca8a04;
--c-info: #2563eb;
}
[data-theme="light-pink"] {
--c-bg: #faf8f9;
--c-surface: #ffffff;
--c-subtle: rgba(236, 72, 153, 0.06);
--c-muted: rgba(236, 72, 153, 0.10);
--c-emphasis: rgba(236, 72, 153, 0.16);
--c-content: #111827;
--c-content-2: #4b5563;
--c-content-3: #6b7280;
--c-content-4: #9ca3af;
--c-line: rgba(0, 0, 0, 0.08);
--c-line-2: rgba(0, 0, 0, 0.04);
--c-accent: #db2777;
--c-accent-hover: #be185d;
--c-accent-text: #be185d;
--c-accent-dim: rgba(236, 72, 153, 0.15);
--c-danger: #dc2626;
--c-danger-dim: rgba(220, 38, 38, 0.12);
--c-warning: #ca8a04;
--c-info: #2563eb;
}
html {
background: var(--c-bg);
overflow: hidden;
height: 100%;
overscroll-behavior: none;
}
body {
@apply antialiased;
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
background: var(--c-bg);
color: var(--c-content);
position: fixed;
inset: 0;
overflow: hidden;
overscroll-behavior: none;
touch-action: none;
user-select: none;
-webkit-user-select: none;
}
input, textarea, [contenteditable="true"] {
user-select: text;
-webkit-user-select: text;
}
::-webkit-scrollbar {
width: 5px;
height: 5px;
}
::-webkit-scrollbar-track {
background: transparent;
}
::-webkit-scrollbar-thumb {
background-color: var(--c-muted);
border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
background-color: var(--c-emphasis);
}
select {
appearance: none;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%239ca3af' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 10px center;
padding-right: 30px;
cursor: pointer;
}
select:focus {
border-color: var(--c-accent);
box-shadow: 0 0 0 2px var(--c-accent-dim);
}
select option {
background: var(--c-surface);
color: var(--c-content);
padding: 8px;
}
input[type="checkbox"] {
appearance: none;
width: 16px;
height: 16px;
border: 2px solid var(--c-emphasis);
border-radius: 4px;
background: transparent;
cursor: pointer;
position: relative;
transition: all 0.15s ease;
flex-shrink: 0;
}
input[type="checkbox"]:hover {
border-color: var(--c-accent);
}
input[type="checkbox"]:checked {
background: var(--c-accent);
border-color: var(--c-accent);
}
input[type="checkbox"]:checked::after {
content: '';
position: absolute;
left: 4px;
top: 1px;
width: 4px;
height: 8px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
}
Reference in New Issue View Git Blame Copy Permalink