/* ======================================================================
   APlayer 夜间 / 暗黑模式适配（Argon 主题专用覆盖样式）
   版本：1.0.1
   v1.0.1：暗黑 / OLED 夜间模式下，播放器主体增加白色外描边（box-shadow
   外圈 1px），便于用户在暗色页面中第一眼识别出播放组件；
   浅色模式仍保持 APlayer 原样，原 CSS 未做任何改动。

   作用：
     - 不修改 APlayer 原 CSS（APlayer.min.css），本文件仅做增量覆盖；
     - 仅在 Argon 的暗黑模式（html.darkmode）与 OLED 夜间模式
       （html.darkmode.amoled-dark）下生效，浅色模式保持 APlayer 原样；
     - 颜色引用 Argon 主题变量（--color-foreground / --color-text-deeper /
       --color-border 等），自动跟随暗黑 / OLED / 沉浸模式，无需写死暗色值；
     - 播放器主题色跟随主题 --themecolor（覆盖 APlayer 默认 --theme: #b7daff）。

   部署：把本文件放入子主题目录（argon-suiyi/）后，通过 functions.php
   的 wp_enqueue_style 或手动 <link> 在 APlayer 原 CSS 之后引入，详见
   ../README-aplayer.md。
   ====================================================================== */

/* ---------- 播放器主题色跟随 Argon 主题色 ---------- */
html.darkmode .aplayer {
	--theme: var(--themecolor);
}

/* ---------- 主容器 / 信息区（歌名、控制条） ---------- */
html.darkmode .aplayer {
	background: var(--color-foreground, #424242);
	color: var(--color-text-deeper, #eee);
	border-color: var(--color-border, #777);
	/* 白色外描边（0 0 0 1px #fff）让播放器在暗色背景中清晰可辨；
	   其余阴影保持原暗黑效果 */
	box-shadow: 0 0 0 1px #fff, 0 2px 8px rgba(0, 0, 0, 0.45), 0 1px 5px rgba(0, 0, 0, 0.35);
}

html.darkmode .aplayer .aplayer-info {
	background: var(--color-foreground, #424242);
	border-color: var(--color-border-on-foreground-deeper, #777);
}

/* ---------- 歌名 / 作者 / 时间 ---------- */
html.darkmode .aplayer .aplayer-info .aplayer-music {
	color: var(--color-text-deeper, #eee);
}

html.darkmode .aplayer .aplayer-info .aplayer-author {
	color: rgba(238, 238, 238, 0.75);
}

html.darkmode .aplayer .aplayer-info .aplayer-controller .aplayer-time {
	color: rgba(238, 238, 238, 0.75);
}

/* ---------- 控制图标 ---------- */
html.darkmode .aplayer .aplayer-info .aplayer-controller .aplayer-icon path {
	fill: rgba(238, 238, 238, 0.8);
}

html.darkmode .aplayer .aplayer-info .aplayer-controller .aplayer-icon:hover path {
	fill: #fff;
}

/* 播放按钮使用主题色（旧版 APlayer 硬编码 #b7daff，此处显式覆盖） */
html.darkmode .aplayer .aplayer-info .aplayer-controller .aplayer-icon.aplayer-icon-play path {
	fill: var(--themecolor);
}

/* ---------- 进度条 / 音量条 ---------- */
html.darkmode .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar {
	background: rgba(255, 255, 255, 0.25);
}

html.darkmode .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-loaded {
	background: rgba(255, 255, 255, 0.45);
}

html.darkmode .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played {
	background: var(--themecolor);
}

html.darkmode .aplayer .aplayer-info .aplayer-controller .aplayer-bar-wrap .aplayer-bar .aplayer-played .aplayer-thumb {
	background: var(--themecolor);
}

html.darkmode .aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap .aplayer-volume-bar-wrap .aplayer-volume-bar {
	background: rgba(255, 255, 255, 0.4);
}

html.darkmode .aplayer .aplayer-info .aplayer-controller .aplayer-volume-wrap .aplayer-volume-bar-wrap .aplayer-volume-bar .aplayer-volume {
	background: var(--themecolor);
}

/* ---------- 播放列表 ---------- */
html.darkmode .aplayer .aplayer-list ol li {
	color: var(--color-text-deeper, #eee);
}

html.darkmode .aplayer .aplayer-list ol li:hover {
	background: rgba(255, 255, 255, 0.08);
}

html.darkmode .aplayer .aplayer-list ol li.aplayer-list-light {
	background: rgba(255, 255, 255, 0.12);
}

html.darkmode .aplayer .aplayer-list ol li .aplayer-list-index,
html.darkmode .aplayer .aplayer-list ol li .aplayer-list-author {
	color: rgba(238, 238, 238, 0.75);
}

html.darkmode .aplayer .aplayer-list ol li .aplayer-list-title {
	color: rgba(238, 238, 238, 0.85);
}

/* 当前播放项文字使用主题亮色 */
html.darkmode .aplayer .aplayer-list ol li.aplayer-list-light .aplayer-list-index,
html.darkmode .aplayer .aplayer-list ol li.aplayer-list-light .aplayer-list-author,
html.darkmode .aplayer .aplayer-list ol li.aplayer-list-light .aplayer-list-title {
	color: var(--themecolor-light);
}

html.darkmode .aplayer .aplayer-list ol li .aplayer-list-cur {
	background: var(--themecolor);
}

html.darkmode .aplayer .aplayer-list::-webkit-scrollbar {
	width: 5px;
}

html.darkmode .aplayer .aplayer-list::-webkit-scrollbar-track {
	background: rgba(255, 255, 255, 0.08);
}

html.darkmode .aplayer .aplayer-list::-webkit-scrollbar-thumb {
	background: var(--themecolor);
	border-radius: 5px;
}

/* ---------- 歌词区（含上下渐变遮罩） ---------- */
html.darkmode .aplayer .aplayer-lrc {
	color: var(--color-text-deeper, #eee);
}

html.darkmode .aplayer .aplayer-lrc::before {
	background: linear-gradient(to bottom, var(--color-foreground, #424242) 0%, rgba(0, 0, 0, 0) 100%);
}

html.darkmode .aplayer .aplayer-lrc::after {
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, var(--color-foreground, #424242) 100%);
}





/* ======================================================================
   OLED 夜间模式微调
   说明：主体颜色已通过主题变量自动跟随纯黑（--color-foreground: #000），
   此处仅微调列表悬浮/高亮与阴影，避免纯黑下过亮；
   白色外描边在此处一并保留，纯黑背景下同样清晰可辨。
   ====================================================================== */
html.darkmode.amoled-dark .aplayer {
	box-shadow: 0 0 0 1px #fff, 0 2px 8px rgba(0, 0, 0, 0.8);
}

html.darkmode.amoled-dark .aplayer .aplayer-list ol li:hover {
	background: rgba(255, 255, 255, 0.06);
}

html.darkmode.amoled-dark .aplayer .aplayer-list ol li.aplayer-list-light {
	background: rgba(255, 255, 255, 0.1);
}