mirror of
https://github.com/algerkong/AlgerMusicPlayer.git
synced 2026-04-20 12:28:51 +08:00
alger
eb801cfbfd
- message 提示适配项目设计：全圆角、backdrop-blur、半透明背景、深色/浅色模式 - 本地音乐页面：hero 缩小可滚出、action bar 吸顶、歌曲列表跟随全页滚动 - 顺序播放到最后一首：用户点下一首保持播放仅提示，自然播完才停止 - i18n 新增 playListEnded（5 种语言）
133 lines
3.0 KiB
CSS
133 lines
3.0 KiB
CSS
body {
|
|
/* background-color: #000; */
|
|
overflow: hidden;
|
|
}
|
|
|
|
.n-popover:has(.music-play) {
|
|
border-radius: 1.5rem !important;
|
|
}
|
|
.n-popover {
|
|
border-radius: 0.5rem !important;
|
|
overflow: hidden !important;
|
|
}
|
|
.n-popover:has(.transparent-popover) {
|
|
background-color: transparent !important;
|
|
padding: 0 !important;
|
|
}
|
|
|
|
.settings-slider .n-slider-mark {
|
|
font-size: 10px !important;
|
|
}
|
|
|
|
/* ==================== 桌面端 Message 样式 ==================== */
|
|
|
|
.n-message {
|
|
border-radius: 20px !important;
|
|
padding: 10px 18px !important;
|
|
font-size: 13px !important;
|
|
backdrop-filter: blur(16px) saturate(1.8) !important;
|
|
-webkit-backdrop-filter: blur(16px) saturate(1.8) !important;
|
|
box-shadow:
|
|
0 4px 24px rgba(0, 0, 0, 0.08),
|
|
0 0 0 1px rgba(255, 255, 255, 0.05) !important;
|
|
border: none !important;
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
|
|
}
|
|
|
|
/* 浅色模式 */
|
|
.n-message {
|
|
background: rgba(255, 255, 255, 0.72) !important;
|
|
color: #1a1a1a !important;
|
|
}
|
|
|
|
/* 深色模式 */
|
|
.dark .n-message {
|
|
background: rgba(40, 40, 40, 0.75) !important;
|
|
color: #e5e5e5 !important;
|
|
box-shadow:
|
|
0 4px 24px rgba(0, 0, 0, 0.25),
|
|
0 0 0 1px rgba(255, 255, 255, 0.06) !important;
|
|
}
|
|
|
|
/* 成功 */
|
|
.n-message--success-type {
|
|
background: rgba(34, 197, 94, 0.15) !important;
|
|
color: #16a34a !important;
|
|
}
|
|
.n-message--success-type .n-message__icon {
|
|
color: #22c55e !important;
|
|
}
|
|
.dark .n-message--success-type {
|
|
background: rgba(34, 197, 94, 0.18) !important;
|
|
color: #4ade80 !important;
|
|
}
|
|
.dark .n-message--success-type .n-message__icon {
|
|
color: #4ade80 !important;
|
|
}
|
|
|
|
/* 错误 */
|
|
.n-message--error-type {
|
|
background: rgba(239, 68, 68, 0.12) !important;
|
|
color: #dc2626 !important;
|
|
}
|
|
.n-message--error-type .n-message__icon {
|
|
color: #ef4444 !important;
|
|
}
|
|
.dark .n-message--error-type {
|
|
background: rgba(239, 68, 68, 0.18) !important;
|
|
color: #f87171 !important;
|
|
}
|
|
.dark .n-message--error-type .n-message__icon {
|
|
color: #f87171 !important;
|
|
}
|
|
|
|
/* 警告 */
|
|
.n-message--warning-type {
|
|
background: rgba(245, 158, 11, 0.12) !important;
|
|
color: #d97706 !important;
|
|
}
|
|
.n-message--warning-type .n-message__icon {
|
|
color: #f59e0b !important;
|
|
}
|
|
.dark .n-message--warning-type {
|
|
background: rgba(245, 158, 11, 0.18) !important;
|
|
color: #fbbf24 !important;
|
|
}
|
|
.dark .n-message--warning-type .n-message__icon {
|
|
color: #fbbf24 !important;
|
|
}
|
|
|
|
/* 信息 */
|
|
.n-message--info-type {
|
|
background: rgba(59, 130, 246, 0.12) !important;
|
|
color: #2563eb !important;
|
|
}
|
|
.n-message--info-type .n-message__icon {
|
|
color: #3b82f6 !important;
|
|
}
|
|
.dark .n-message--info-type {
|
|
background: rgba(59, 130, 246, 0.18) !important;
|
|
color: #60a5fa !important;
|
|
}
|
|
.dark .n-message--info-type .n-message__icon {
|
|
color: #60a5fa !important;
|
|
}
|
|
|
|
/* Loading */
|
|
.n-message--loading-type {
|
|
background: rgba(255, 255, 255, 0.72) !important;
|
|
}
|
|
.dark .n-message--loading-type {
|
|
background: rgba(40, 40, 40, 0.75) !important;
|
|
}
|
|
|
|
/* 图标统一大小 */
|
|
.n-message__icon {
|
|
font-size: 18px !important;
|
|
}
|
|
|
|
/* 间距优化 */
|
|
.n-message-wrapper {
|
|
margin-bottom: 6px !important;
|
|
}
|