158 lines
3.3 KiB
CSS
158 lines
3.3 KiB
CSS
@tailwind base;
|
|
@tailwind components;
|
|
@tailwind utilities;
|
|
|
|
:root {
|
|
--bg: #f5f5f7;
|
|
--bg-elevated: rgba(255, 255, 255, 0.72);
|
|
--text: #1d1d1f;
|
|
--text-secondary: #6e6e73;
|
|
--separator: rgba(0, 0, 0, 0.08);
|
|
--sidebar: rgba(245, 245, 247, 0.7);
|
|
--accent: #0a84ff;
|
|
--accent-rgb: 10 132 255;
|
|
}
|
|
|
|
.dark {
|
|
--bg: #1c1c1e;
|
|
--bg-elevated: rgba(44, 44, 46, 0.72);
|
|
--text: #f5f5f7;
|
|
--text-secondary: #98989d;
|
|
--separator: rgba(255, 255, 255, 0.1);
|
|
--sidebar: rgba(28, 28, 30, 0.6);
|
|
--accent: #0a84ff;
|
|
--accent-rgb: 10 132 255;
|
|
}
|
|
|
|
* {
|
|
box-sizing: border-box;
|
|
-webkit-user-drag: none;
|
|
}
|
|
|
|
img,
|
|
a {
|
|
-webkit-user-drag: none;
|
|
}
|
|
|
|
html,
|
|
body,
|
|
#root {
|
|
height: 100%;
|
|
margin: 0;
|
|
}
|
|
|
|
body {
|
|
font-family:
|
|
-apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'PingFang SC',
|
|
'Helvetica Neue', Inter, system-ui, sans-serif;
|
|
color: var(--text);
|
|
background: var(--bg);
|
|
-webkit-font-smoothing: antialiased;
|
|
overflow: hidden;
|
|
user-select: none;
|
|
}
|
|
|
|
/* 桌面歌词独立窗口：整页透明 */
|
|
html.desktop-lyric,
|
|
html.desktop-lyric body,
|
|
html.desktop-lyric #root {
|
|
background: transparent !important;
|
|
}
|
|
|
|
/* 可拖拽标题栏区域 */
|
|
.drag {
|
|
-webkit-app-region: drag;
|
|
}
|
|
.no-drag {
|
|
-webkit-app-region: no-drag;
|
|
}
|
|
|
|
/* 毛玻璃 */
|
|
.glass {
|
|
background: var(--bg-elevated);
|
|
backdrop-filter: saturate(180%) blur(30px);
|
|
-webkit-backdrop-filter: saturate(180%) blur(30px);
|
|
}
|
|
|
|
/* 全局隐藏原生滚动条（含滚动中的箭头）；传歌页用 SoftScrollArea 自定义滑块 */
|
|
* {
|
|
scrollbar-width: none;
|
|
}
|
|
*::-webkit-scrollbar {
|
|
width: 0 !important;
|
|
height: 0 !important;
|
|
display: none !important;
|
|
background: transparent !important;
|
|
}
|
|
*::-webkit-scrollbar-button {
|
|
display: none !important;
|
|
width: 0 !important;
|
|
height: 0 !important;
|
|
}
|
|
.soft-scroll-native {
|
|
scrollbar-width: none;
|
|
-ms-overflow-style: none;
|
|
}
|
|
.soft-scroll-native::-webkit-scrollbar {
|
|
width: 0 !important;
|
|
height: 0 !important;
|
|
display: none !important;
|
|
}
|
|
|
|
@layer components {
|
|
.apple-card {
|
|
@apply rounded-2xl bg-white/60 dark:bg-white/5 shadow-apple transition-all duration-300;
|
|
}
|
|
.apple-btn {
|
|
@apply no-drag inline-flex items-center justify-center gap-2 rounded-xl px-4 py-2
|
|
text-sm font-medium transition-all duration-200 ease-apple active:scale-95;
|
|
}
|
|
.apple-btn-primary {
|
|
@apply apple-btn bg-apple-blue text-white hover:brightness-110 shadow-apple;
|
|
}
|
|
.apple-btn-ghost {
|
|
@apply apple-btn bg-black/5 dark:bg-white/10 text-[var(--text)] hover:bg-black/10 dark:hover:bg-white/[0.15];
|
|
}
|
|
.sidebar-item {
|
|
@apply no-drag flex items-center gap-3 rounded-xl px-3 py-2 text-sm font-medium
|
|
text-[var(--text-secondary)] transition-all duration-200 cursor-default;
|
|
}
|
|
.sidebar-item-active {
|
|
@apply bg-black/[0.06] dark:bg-white/10 text-[var(--text)];
|
|
}
|
|
}
|
|
|
|
/* 网易云风格唱片转盘 */
|
|
@keyframes vinyl-spin {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
.vinyl-spin {
|
|
animation: vinyl-spin 20s linear infinite;
|
|
}
|
|
/* 歌词页上下羽化 */
|
|
.lyric-mask {
|
|
mask-image: linear-gradient(
|
|
to bottom,
|
|
transparent 0%,
|
|
#000 10%,
|
|
#000 82%,
|
|
transparent 100%
|
|
);
|
|
-webkit-mask-image: linear-gradient(
|
|
to bottom,
|
|
transparent 0%,
|
|
#000 10%,
|
|
#000 82%,
|
|
transparent 100%
|
|
);
|
|
}
|
|
|
|
.vinyl-spin-paused {
|
|
animation-play-state: paused;
|
|
}
|