video-shuoshan/web/src/components/Dropdown.module.css
seaislee1209 f8358a28c6 feat: 前端UI重构 — Air Spark设计系统对标
- 全局样式对标Air Spark设计系统(背景、glass card、配色、圆角)
- 视频详情弹窗(VideoDetailModal)全屏预览+信息面板
- GenerationCard重构:fixed定位tooltip、9:16视频适配、blob下载
- 个人中心:总额度/今日/本月三卡片布局
- Dashboard图表配色统一为#6c63ff主色调
- Sidebar、InputBar、Toolbar等组件样式优化
- 新增AmbientBackground、AssetsPage组件

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
2026-03-15 18:48:07 +08:00

64 lines
1.0 KiB
CSS

.wrapper {
position: relative;
}
.menu {
position: absolute;
bottom: calc(100% + 8px);
left: 0;
background: var(--color-bg-dropdown);
border: 1px solid var(--color-border-input-bar);
border-radius: var(--radius-dropdown);
padding: 6px;
z-index: 100;
backdrop-filter: blur(20px) saturate(180%);
opacity: 0;
transform: translateY(8px);
pointer-events: none;
transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}
.open {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.item {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border-radius: var(--radius-btn);
font-size: 13px;
color: #b0b0c0;
cursor: pointer;
transition: all 0.12s;
white-space: nowrap;
}
.item:hover {
background: var(--color-bg-hover);
color: #fff;
}
.item.selected {
color: var(--color-primary);
}
.itemIcon {
display: flex;
align-items: center;
}
.check {
margin-left: auto;
opacity: 0;
flex-shrink: 0;
}
.item.selected .check {
opacity: 1;
}