481 lines
13 KiB
CSS
481 lines
13 KiB
CSS
.aplayer.aplayer-fixed {
|
|
left: unset !important;
|
|
right: 2rem !important;
|
|
bottom: 2rem !important;
|
|
color: #000;
|
|
width: 100%;
|
|
background: transparent !important;
|
|
box-shadow: none !important;
|
|
transition: background 0.3s ease, box-shadow 0.3s ease;
|
|
}
|
|
|
|
/* 展开状态时始终显示背景（包括 local 模式和 meting 模式） */
|
|
.aplayer.aplayer-fixed:not(.aplayer-narrow) {
|
|
background: var(--card-bg, white) !important;
|
|
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.07), 0 1px 5px 0 rgba(0, 0, 0, 0.1) !important;
|
|
}
|
|
|
|
.aplayer.aplayer-fixed:not(.aplayer-narrow) .aplayer-body {
|
|
background: var(--card-bg, white) !important;
|
|
}
|
|
|
|
/* 暗色主题：展开状态时显示背景 */
|
|
:root.dark .aplayer.aplayer-fixed:not(.aplayer-narrow) {
|
|
background: var(--card-bg, oklch(0.23 0.015 var(--hue))) !important;
|
|
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.3), 0 1px 5px 0 rgba(0, 0, 0, 0.4) !important;
|
|
}
|
|
|
|
:root.dark .aplayer.aplayer-fixed:not(.aplayer-narrow) .aplayer-body {
|
|
background: var(--card-bg, oklch(0.23 0.015 var(--hue))) !important;
|
|
}
|
|
|
|
/* 收缩状态下鼠标悬浮时显示背景 */
|
|
.aplayer.aplayer-fixed.aplayer-narrow:hover {
|
|
background: var(--card-bg, white) !important;
|
|
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.07), 0 1px 5px 0 rgba(0, 0, 0, 0.1) !important;
|
|
}
|
|
|
|
/* 暗色主题悬浮效果 */
|
|
:root.dark .aplayer.aplayer-fixed.aplayer-narrow:hover {
|
|
background: var(--card-bg, oklch(0.23 0.015 var(--hue))) !important;
|
|
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.3), 0 1px 5px 0 rgba(0, 0, 0, 0.4) !important;
|
|
}
|
|
|
|
:root.dark .aplayer.aplayer-fixed {
|
|
color: var(--btn-content, oklch(0.75 0.1 var(--hue)));
|
|
}
|
|
|
|
.aplayer.aplayer-fixed .aplayer-body {
|
|
left: unset !important;
|
|
right: 2rem !important;
|
|
width: 400px !important;
|
|
bottom: 2rem !important;
|
|
max-width: calc(100% - 18px);
|
|
padding-right: 0 !important;
|
|
background: transparent !important;
|
|
transition: background 0.3s ease;
|
|
}
|
|
|
|
.aplayer.aplayer-fixed .aplayer-miniswitcher {
|
|
right: unset;
|
|
left: -18px;
|
|
transform: rotate(180deg);
|
|
opacity: 0;
|
|
transition: opacity 0.2s ease;
|
|
}
|
|
|
|
/* 触摸设备：始终显示 miniswitcher 和背景 */
|
|
@media (hover: none) and (pointer: coarse) {
|
|
.aplayer.aplayer-fixed .aplayer-miniswitcher {
|
|
display: block;
|
|
opacity: 1;
|
|
/* 触摸设备上半透明背景 */
|
|
background: rgba(200, 200, 200, 0.5) !important;
|
|
backdrop-filter: blur(10px);
|
|
-webkit-backdrop-filter: blur(10px);
|
|
}
|
|
|
|
/* 触摸设备暗色主题：半透明背景 */
|
|
:root.dark .aplayer.aplayer-fixed .aplayer-miniswitcher {
|
|
background: rgba(100, 100, 100, 0.5) !important;
|
|
backdrop-filter: blur(10px);
|
|
-webkit-backdrop-filter: blur(10px);
|
|
}
|
|
|
|
/* 触摸设备上始终显示背景 */
|
|
.aplayer.aplayer-fixed {
|
|
background: var(--card-bg, white) !important;
|
|
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.07), 0 1px 5px 0 rgba(0, 0, 0, 0.1) !important;
|
|
}
|
|
|
|
:root.dark .aplayer.aplayer-fixed {
|
|
background: var(--card-bg, oklch(0.23 0.015 var(--hue))) !important;
|
|
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.3), 0 1px 5px 0 rgba(0, 0, 0, 0.4) !important;
|
|
}
|
|
}
|
|
|
|
/* 非触摸设备：默认隐藏，悬停时显示 */
|
|
@media (hover: hover) {
|
|
.aplayer.aplayer-fixed .aplayer-miniswitcher {
|
|
display: none;
|
|
}
|
|
|
|
/* 鼠标悬停在播放器上时显示 miniswitcher */
|
|
.aplayer.aplayer-fixed:hover .aplayer-miniswitcher {
|
|
display: block;
|
|
opacity: 1;
|
|
}
|
|
|
|
/* 收起状态下也支持悬停显示 */
|
|
.aplayer.aplayer-fixed.aplayer-narrow:hover .aplayer-miniswitcher {
|
|
display: block;
|
|
opacity: 1;
|
|
}
|
|
|
|
/* 列表展开状态时始终显示收缩按钮 */
|
|
.aplayer.aplayer-fixed.aplayer-withlist:not(.aplayer-narrow) .aplayer-miniswitcher {
|
|
display: block !important;
|
|
opacity: 1 !important;
|
|
}
|
|
}
|
|
|
|
/* 禁用初始化时的过渡动画，只在加载完成后恢复 */
|
|
.aplayer.aplayer-fixed:not([data-initialized="true"]) .aplayer-body {
|
|
transition: none !important;
|
|
}
|
|
|
|
.aplayer.aplayer-fixed:not([data-initialized="true"]) .aplayer-info {
|
|
transition: none !important;
|
|
}
|
|
|
|
/* 缩小状态下禁用所有过渡动画 */
|
|
.aplayer.aplayer-narrow .aplayer-body {
|
|
transition: none !important;
|
|
}
|
|
|
|
.aplayer.aplayer-narrow .aplayer-info {
|
|
transition: none !important;
|
|
}
|
|
|
|
/* ===== 移动端适配 ===== */
|
|
@media (max-width: 768px) {
|
|
.aplayer.aplayer-fixed {
|
|
right: 0 !important;
|
|
bottom: 0rem !important;
|
|
}
|
|
.aplayer.aplayer-fixed .aplayer-body {
|
|
right: 0 !important;
|
|
bottom: 0rem !important;
|
|
}
|
|
}
|
|
|
|
/* ===== 平板适配 ===== */
|
|
@media (min-width: 641px) and (max-width: 1280px) {
|
|
.aplayer.aplayer-fixed {
|
|
right: 0.5rem !important;
|
|
bottom: 2rem !important;
|
|
}
|
|
.aplayer.aplayer-fixed .aplayer-body {
|
|
right: 0.5rem !important;
|
|
bottom: 2rem !important;
|
|
}
|
|
}
|
|
|
|
/* 横屏模式适配 */
|
|
@media (orientation: landscape) and (max-height: 640px) {
|
|
.aplayer.aplayer-fixed {
|
|
right: 0.5rem !important;
|
|
bottom: 2rem !important;
|
|
}
|
|
.aplayer.aplayer-fixed .aplayer-body {
|
|
right: 0.5rem !important;
|
|
bottom: 2rem !important;
|
|
}
|
|
}
|
|
|
|
/* ===== 封面播放特效 ===== */
|
|
/* 封面基础样式 - 默认正方形（触摸设备） */
|
|
.aplayer .aplayer-pic {
|
|
transition: transform 0.3s ease, box-shadow 0.3s ease, border-radius 0.3s ease;
|
|
overflow: hidden;
|
|
position: relative;
|
|
aspect-ratio: 1;
|
|
}
|
|
|
|
/* 确保封面图片适配 */
|
|
.aplayer .aplayer-pic img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
|
|
/* 桌面端：圆形封面 */
|
|
@media (hover: hover) {
|
|
.aplayer .aplayer-pic {
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.aplayer .aplayer-pic img {
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
|
|
/* 缩小状态下禁用过渡动画 */
|
|
.aplayer.aplayer-narrow .aplayer-pic {
|
|
transition: none !important;
|
|
}
|
|
|
|
/* 旋转动画关键帧 */
|
|
@keyframes aplayer-cover-rotate {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
/* 亮色主题脉动动画 */
|
|
@keyframes aplayer-cover-pulse {
|
|
0%, 100% {
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
|
|
}
|
|
50% {
|
|
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
|
|
}
|
|
}
|
|
|
|
/* 暗色主题脉动动画 */
|
|
@keyframes aplayer-cover-pulse-dark {
|
|
0%, 100% {
|
|
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
|
|
}
|
|
50% {
|
|
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6);
|
|
}
|
|
}
|
|
|
|
/* 桌面端：播放状态旋转动画 */
|
|
@media (hover: hover) {
|
|
/* 始终应用旋转动画，但通过 animation-play-state 控制播放/暂停 */
|
|
.aplayer .aplayer-pic {
|
|
animation: aplayer-cover-rotate 20s linear infinite,
|
|
aplayer-cover-pulse 2s ease-in-out infinite;
|
|
animation-play-state: paused;
|
|
}
|
|
|
|
/* 播放状态：恢复动画 */
|
|
.aplayer[data-playing="true"] .aplayer-pic,
|
|
.aplayer.aplayer-playing .aplayer-pic {
|
|
animation-play-state: running;
|
|
}
|
|
|
|
/* 暂停状态：暂停动画（保持当前位置） */
|
|
.aplayer[data-playing="false"] .aplayer-pic,
|
|
.aplayer.aplayer-pause .aplayer-pic {
|
|
animation-play-state: paused;
|
|
}
|
|
|
|
/* 暗色主题下的播放特效 */
|
|
:root.dark .aplayer[data-playing="true"] .aplayer-pic,
|
|
:root.dark .aplayer.aplayer-playing .aplayer-pic {
|
|
animation: aplayer-cover-rotate 20s linear infinite,
|
|
aplayer-cover-pulse-dark 2s ease-in-out infinite;
|
|
animation-play-state: running;
|
|
}
|
|
|
|
/* 暗色主题暂停状态 */
|
|
:root.dark .aplayer[data-playing="false"] .aplayer-pic,
|
|
:root.dark .aplayer.aplayer-pause .aplayer-pic {
|
|
animation: aplayer-cover-rotate 20s linear infinite,
|
|
aplayer-cover-pulse-dark 2s ease-in-out infinite;
|
|
animation-play-state: paused;
|
|
}
|
|
}
|
|
|
|
/* 触摸设备：无旋转动画，保持静态 */
|
|
@media (hover: none) and (pointer: coarse) {
|
|
.aplayer .aplayer-pic {
|
|
animation: none !important;
|
|
}
|
|
|
|
.aplayer[data-playing="true"] .aplayer-pic,
|
|
.aplayer.aplayer-playing .aplayer-pic,
|
|
.aplayer[data-playing="false"] .aplayer-pic,
|
|
.aplayer.aplayer-pause .aplayer-pic {
|
|
animation: none !important;
|
|
animation-play-state: paused !important;
|
|
}
|
|
}
|
|
|
|
/* 桌面端：播放时隐藏暂停按钮，暂停时显示播放按钮 */
|
|
@media (hover: hover) {
|
|
/* 播放状态时隐藏暂停按钮（封面在转，不需要暂停按钮） */
|
|
.aplayer[data-playing="true"] .aplayer-pic .aplayer-pause,
|
|
.aplayer.aplayer-playing .aplayer-pic .aplayer-pause {
|
|
display: none !important;
|
|
}
|
|
|
|
/* 播放状态时隐藏播放按钮（因为已经播放了） */
|
|
.aplayer[data-playing="true"] .aplayer-pic .aplayer-play,
|
|
.aplayer.aplayer-playing .aplayer-pic .aplayer-play {
|
|
display: none !important;
|
|
}
|
|
|
|
/* 暂停状态时隐藏暂停按钮，只显示播放按钮 */
|
|
.aplayer[data-playing="false"] .aplayer-pic .aplayer-pause,
|
|
.aplayer.aplayer-pause .aplayer-pic .aplayer-pause,
|
|
.aplayer:not([data-playing="true"]):not(.aplayer-playing) .aplayer-pic .aplayer-pause {
|
|
display: none !important;
|
|
}
|
|
|
|
/* 暂停状态时显示播放按钮（通过悬停显示） */
|
|
.aplayer[data-playing="false"] .aplayer-pic:hover .aplayer-play,
|
|
.aplayer.aplayer-pause .aplayer-pic:hover .aplayer-play,
|
|
.aplayer:not([data-playing="true"]):not(.aplayer-playing) .aplayer-pic:hover .aplayer-play {
|
|
display: block !important;
|
|
}
|
|
}
|
|
|
|
/* ===== 亮色主题适配 ===== */
|
|
|
|
/* ===== 暗色主题适配 ===== */
|
|
:root.dark .aplayer {
|
|
background: var(--card-bg, oklch(0.23 0.015 var(--hue)));
|
|
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.3), 0 1px 5px 0 rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
:root.dark .aplayer.aplayer-withlist .aplayer-info {
|
|
border-bottom: 1px solid var(--line-divider, rgba(255, 255, 255, 0.08));
|
|
}
|
|
|
|
:root.dark .aplayer.aplayer-fixed .aplayer-list {
|
|
border: 1px solid var(--line-divider, rgba(255, 255, 255, 0.08));
|
|
border-bottom: none;
|
|
}
|
|
|
|
:root.dark .aplayer.aplayer-fixed .aplayer-body {
|
|
background: var(--card-bg, oklch(0.23 0.015 var(--hue)));
|
|
}
|
|
|
|
:root.dark .aplayer.aplayer-fixed .aplayer-lrc {
|
|
text-shadow: -1px -1px 0 var(--card-bg, oklch(0.23 0.015 var(--hue)));
|
|
}
|
|
|
|
:root.dark .aplayer.aplayer-fixed .aplayer-info {
|
|
border-top: 1px solid var(--line-divider, rgba(255, 255, 255, 0.08));
|
|
}
|
|
|
|
:root.dark .aplayer .aplayer-info .aplayer-music .aplayer-author {
|
|
color: var(--content-meta, rgba(255, 255, 255, 0.6));
|
|
}
|
|
|
|
:root.dark
|
|
.aplayer
|
|
.aplayer-info
|
|
.aplayer-controller
|
|
.aplayer-bar-wrap
|
|
.aplayer-bar {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
:root.dark
|
|
.aplayer
|
|
.aplayer-info
|
|
.aplayer-controller
|
|
.aplayer-bar-wrap
|
|
.aplayer-bar
|
|
.aplayer-loaded {
|
|
background: rgba(255, 255, 255, 0.3);
|
|
}
|
|
|
|
:root.dark .aplayer .aplayer-info .aplayer-controller .aplayer-time {
|
|
color: var(--content-meta, rgba(255, 255, 255, 0.6));
|
|
}
|
|
|
|
:root.dark
|
|
.aplayer
|
|
.aplayer-info
|
|
.aplayer-controller
|
|
.aplayer-time
|
|
.aplayer-icon
|
|
path {
|
|
fill: var(--content-meta, rgba(255, 255, 255, 0.6));
|
|
}
|
|
|
|
:root.dark
|
|
.aplayer
|
|
.aplayer-info
|
|
.aplayer-controller
|
|
.aplayer-time
|
|
.aplayer-icon:hover
|
|
path {
|
|
fill: var(--btn-content, oklch(0.75 0.1 var(--hue)));
|
|
}
|
|
|
|
:root.dark
|
|
.aplayer
|
|
.aplayer-info
|
|
.aplayer-controller
|
|
.aplayer-volume-wrap
|
|
.aplayer-volume-bar-wrap
|
|
.aplayer-volume-bar {
|
|
background: rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
:root.dark .aplayer .aplayer-lrc:before {
|
|
background: linear-gradient(
|
|
180deg,
|
|
var(--card-bg, oklch(0.23 0.015 var(--hue))) 0,
|
|
hsla(0, 0%, 100%, 0)
|
|
);
|
|
}
|
|
|
|
:root.dark .aplayer .aplayer-lrc:after {
|
|
background: linear-gradient(
|
|
180deg,
|
|
hsla(0, 0%, 100%, 0) 0,
|
|
rgba(255, 255, 255, 0.1)
|
|
);
|
|
}
|
|
|
|
:root.dark .aplayer .aplayer-lrc p {
|
|
color: var(--content-meta, rgba(255, 255, 255, 0.6));
|
|
}
|
|
|
|
:root.dark .aplayer .aplayer-list ol::-webkit-scrollbar-thumb {
|
|
background-color: rgba(255, 255, 255, 0.2);
|
|
}
|
|
|
|
:root.dark .aplayer .aplayer-list ol::-webkit-scrollbar-thumb:hover {
|
|
background-color: rgba(255, 255, 255, 0.3);
|
|
}
|
|
|
|
:root.dark .aplayer .aplayer-list ol li {
|
|
border-top: 1px solid var(--line-divider, rgba(255, 255, 255, 0.08));
|
|
}
|
|
|
|
:root.dark .aplayer .aplayer-list ol li:hover {
|
|
background: var(--btn-plain-bg-hover, oklch(0.3 0.035 var(--hue)));
|
|
}
|
|
|
|
:root.dark .aplayer .aplayer-list ol li.aplayer-list-light {
|
|
background: var(--btn-plain-bg-hover, oklch(0.3 0.035 var(--hue)));
|
|
}
|
|
|
|
:root.dark .aplayer .aplayer-list ol li .aplayer-list-index {
|
|
color: var(--content-meta, rgba(255, 255, 255, 0.6));
|
|
}
|
|
|
|
:root.dark .aplayer .aplayer-list ol li .aplayer-list-author {
|
|
color: var(--content-meta, rgba(255, 255, 255, 0.6));
|
|
}
|
|
|
|
:root.dark .aplayer .aplayer-notice {
|
|
background-color: var(--card-bg, oklch(0.23 0.015 var(--hue)));
|
|
color: var(--content-meta, rgba(255, 255, 255, 0.6));
|
|
}
|
|
|
|
:root.dark .aplayer .aplayer-miniswitcher {
|
|
background: var(--btn-regular-bg, oklch(0.33 0.035 var(--hue)));
|
|
border-top: 1px solid var(--line-divider, #e5e7eb);
|
|
border-bottom: 1px solid var(--line-divider, #e5e7eb);
|
|
border-left: 1px solid var(--line-divider, #e5e7eb);
|
|
}
|
|
|
|
:root.dark .aplayer .aplayer-miniswitcher .aplayer-icon path {
|
|
fill: var(--content-meta, rgba(255, 255, 255, 0.6));
|
|
}
|
|
|
|
:root.dark .aplayer .aplayer-miniswitcher .aplayer-icon:hover path {
|
|
fill: var(--btn-content, oklch(0.75 0.1 var(--hue)));
|
|
}
|
|
|
|
:root.dark .aplayer .aplayer-info .aplayer-music .aplayer-title {
|
|
color: var(--btn-content, oklch(0.75 0.1 var(--hue)));
|
|
}
|
|
|
|
:root.dark .aplayer .aplayer-list ol li .aplayer-list-title {
|
|
color: var(--btn-content, oklch(0.75 0.1 var(--hue)));
|
|
}
|