mirror of
https://github.com/remvze/moodist.git
synced 2025-12-18 09:24:14 +00:00
b973c7bf61
## 主要功能更新 ### 🎨 优化昼夜模式主题系统 - 参考现代设计标准（GitHub、VSCode）重新设计颜色方案 - 明亮主题：纯白背景 + 深灰文字，提供高对比度阅读体验 - 暗色主题：深蓝灰背景 + 高亮白色，护眼且现代 - 全面适配：所有组件背景色、边框色、前景色都跟随主题切换 ### 🎲 改进随机音频功能 - 智能单参数随机：每次只随机调整一个参数（速度/音调/音量） - 合理变化频率：调整为60-90秒，避免频繁变化影响体验 - 精确范围控制： - 速度和音调：默认值 ±0.25 范围内随机 - 音量：30%-70% 范围内随机 ### 📚 完善文档系统 - 创建英文版 README (README.en.md) - 完善中文版 README，包含： - 详细的使用说明和操作指南 - 完整的 Docker 部署教程 - 生产环境配置指南 - 在线体验地址：https://calm.zlext.com ### 🔧 技术改进 - 新增完整的主题切换组件 (ThemeToggle) - 优化随机音频控制组件 (RandomSpeed) - 改进声音控制组件的样式和交互 - 更新所有组件样式以支持主题变量 ## 版本信息 - 版本升级：v2.1.0 → v2.2.0 - 新增功能：昼夜主题、智能随机、完整文档 - 向后兼容：完全兼容现有配置和数据
112 lines
2.2 KiB
CSS
112 lines
2.2 KiB
CSS
.controlsContainer {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 8px;
|
|
margin-top: 10px;
|
|
width: 100%;
|
|
max-width: 150px;
|
|
}
|
|
|
|
.volumeContainer,
|
|
.speedContainer,
|
|
.rateContainer {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
width: 100%;
|
|
}
|
|
|
|
.volumeIcon,
|
|
.speedIcon,
|
|
.rateIcon {
|
|
color: var(--color-foreground-subtle);
|
|
font-size: 14px;
|
|
flex-shrink: 0;
|
|
opacity: 0.8;
|
|
transition: opacity 0.2s ease;
|
|
}
|
|
|
|
.volumeContainer:hover .volumeIcon,
|
|
.speedContainer:hover .speedIcon,
|
|
.rateContainer:hover .rateIcon {
|
|
opacity: 1;
|
|
}
|
|
|
|
/* 当进度条禁用时，容器内的图标也要相应调整 */
|
|
.volumeContainer:has(.range:disabled) .volumeIcon,
|
|
.speedContainer:has(.range:disabled) .speedIcon,
|
|
.rateContainer:has(.range:disabled) .rateIcon {
|
|
opacity: 0.4;
|
|
}
|
|
|
|
.range {
|
|
width: 100%;
|
|
flex: 1;
|
|
|
|
/********** Range Input Styles **********/
|
|
|
|
/* Range Reset */
|
|
appearance: none;
|
|
cursor: pointer;
|
|
background: transparent;
|
|
|
|
/* Removes default focus */
|
|
&:focus {
|
|
outline: none;
|
|
}
|
|
|
|
&:disabled {
|
|
pointer-events: none;
|
|
cursor: default;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
/***** Chrome, Safari, Opera and Edge Chromium styles *****/
|
|
|
|
&::-webkit-slider-runnable-track {
|
|
height: 0.5rem;
|
|
background-color: var(--bg-secondary);
|
|
border-radius: 0.5rem;
|
|
}
|
|
|
|
&::-webkit-slider-thumb {
|
|
width: 14px;
|
|
height: 14px;
|
|
margin-top: -3px;
|
|
appearance: none;
|
|
background-color: var(--bg-tertiary);
|
|
border: 1px solid var(--color-border);
|
|
border-radius: 50%;
|
|
}
|
|
|
|
&:not(:disabled):focus::-webkit-slider-thumb {
|
|
border: 1px solid var(--color-foreground);
|
|
outline: 3px solid var(--color-foreground);
|
|
outline-offset: 0.125rem;
|
|
}
|
|
|
|
/******** Firefox styles ********/
|
|
|
|
&::-moz-range-track {
|
|
height: 0.5rem;
|
|
background-color: var(--bg-secondary);
|
|
border-radius: 0.5rem;
|
|
}
|
|
|
|
&::-moz-range-thumb {
|
|
width: 14px;
|
|
height: 14px;
|
|
margin-top: -3px;
|
|
background-color: var(--bg-tertiary);
|
|
border: none;
|
|
border: 1px solid var(--color-border);
|
|
border-radius: 0;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
&:not(:disabled):focus::-moz-range-thumb {
|
|
border: 1px solid var(--color-foreground);
|
|
outline: 3px solid var(--color-foreground);
|
|
outline-offset: 0.125rem;
|
|
}
|
|
}
|