moodist/src/components/toolbar/menu/menu.module.css
zl 2ad6cbe36c refactor: 简化界面并优化用户体验
- 移除顶部捐赠支持组件,简化页面布局
- 精简菜单功能,删除睡眠定时器、倒计时器、番茄钟等不常用功能
- 将登录按钮移至右上角,主题切换按钮左侧
- 保留核心功能:预设、分享、随机播放、快捷键和音量控制
- 优化界面布局,提升用户使用体验
2025-11-17 15:55:36 +08:00

60 lines
1.1 KiB
CSS

.wrapper {
& .menuButton {
display: flex;
align-items: center;
justify-content: center;
width: 45px;
height: 45px;
font-size: var(--font-md);
color: var(--color-foreground);
pointer-events: auto;
cursor: pointer;
background-color: var(--bg-secondary);
border: 1px solid var(--color-border);
border-radius: 50%;
transition: 0.2s;
&:focus-visible {
outline: 2px solid var(--color-muted);
outline-offset: 2px;
}
&:hover,
&:focus-visible {
background-color: var(--bg-tertiary);
}
}
}
.menu {
z-index: 15;
display: flex;
flex-direction: column;
row-gap: 4px;
width: 270px;
height: max-content;
max-height: var(--radix-dropdown-menu-content-available-height);
padding: 4px;
overflow: auto;
background-color: var(--component-bg);
border: 1px solid var(--color-border);
border-radius: 8px;
}
.globalVolume {
width: 100%;
padding: 12px;
& label {
display: block;
margin-bottom: 8px;
font-size: var(--font-sm);
font-weight: 500;
color: var(--color-foreground-subtle);
}
& input {
width: 100%;
min-width: 0;
}
}