https://calc.euil.cn/index.php?action=history&feed=atom&title=%E6%A8%A1%E6%9D%BF%3AAudio%2Fstyles.css 2026-05-26T18:41:08Z 本wiki上该页面的版本历史 MediaWiki 1.45.3 https://calc.euil.cn/index.php?title=%E6%A8%A1%E6%9D%BF:Audio/styles.css&diff=234&oldid=prev 2026-02-11T11:45:12Z

<p>创建页面，内容为“<span class="autocomment">===== 音频模板样式 - 电脑端进度条 =====：​</span> <span class="autocomment">进度条容器：默认隐藏：​</span> .audio-progress-container { display: none; margin-top: 16px; padding-top: 12px; border-top: 1px solid #edf2f7; } <span class="autocomment">进度条内部布局：​</span> .audio-progress-inner { display: flex; align-items: center; gap: 12px; } <span class="autocomment">进度标签：​</span> .audio-progress-label { font-size: 13px; color: #4a5568; min-width: 45px; } <span class="autocomment">进度条轨道：​</span> .audio-progress…”</p> <p><b>新页面</b></p><div>/* ===== 音频模板样式 - 电脑端进度条 ===== */<br /> <br /> /* 进度条容器：默认隐藏 */<br /> .audio-progress-container {<br /> display: none;<br /> margin-top: 16px;<br /> padding-top: 12px;<br /> border-top: 1px solid #edf2f7;<br /> }<br /> <br /> /* 进度条内部布局 */<br /> .audio-progress-inner {<br /> display: flex;<br /> align-items: center;<br /> gap: 12px;<br /> }<br /> <br /> /* 进度标签 */<br /> .audio-progress-label {<br /> font-size: 13px;<br /> color: #4a5568;<br /> min-width: 45px;<br /> }<br /> <br /> /* 进度条轨道 */<br /> .audio-progress-track {<br /> flex: 1;<br /> height: 6px;<br /> background: #e2e8f0;<br /> border-radius: 10px;<br /> overflow: hidden;<br /> }<br /> <br /> /* 进度条填充 */<br /> .audio-progress-fill {<br /> height: 100%;<br /> background: #4299e1;<br /> border-radius: 10px;<br /> width: 45%; /* 默认值，由模板参数覆盖 */<br /> }<br /> <br /> /* 电脑端提示 */<br /> .audio-progress-hint {<br /> font-size: 12px;<br /> color: #718096;<br /> }<br /> <br /> /* ===== 响应式：仅电脑端显示 ===== */<br /> @media screen and (min-width: 769px) {<br /> .audio-progress-container {<br /> display: block !important;<br /> }<br /> }<br /> <br /> /* ===== 公民主题兼容 ===== */<br /> .citizen-themed .audio-progress-container {<br /> border-top-color: var(--border-color-base, #edf2f7);<br /> background: var(--color-surface-0, transparent);<br /> }<br /> <br /> .citizen-themed .audio-progress-label,<br /> .citizen-themed .audio-progress-hint {<br /> color: var(--color-base, #4a5568);<br /> }<br /> <br /> .citizen-themed .audio-progress-track {<br /> background: var(--color-surface-2, #e2e8f0);<br /> }<br /> <br /> .citizen-themed .audio-progress-fill {<br /> background: var(--color-progressive, #4299e1);<br /> }<br /> <br /> /* ===== 深色模式优化 ===== */<br /> @media (prefers-color-scheme: dark) {<br /> .audio-progress-container {<br /> border-top-color: #2d3748;<br /> }<br /> .audio-progress-track {<br /> background: #2d3748;<br /> }<br /> }</div>

小小白哦