video-shuoshan/web/src/components/Toolbar.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

83 lines
1.3 KiB
CSS

.toolbar {
display: flex;
align-items: center;
padding: 6px 12px 8px;
gap: 4px;
}
.btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 0 12px;
height: var(--toolbar-btn-height);
border-radius: var(--radius-btn);
font-size: 13px;
color: var(--color-text-secondary);
background: transparent;
border: none;
cursor: pointer;
transition: all 0.15s;
white-space: nowrap;
font-family: inherit;
}
.btn:hover {
background: var(--color-bg-hover);
color: #b0b0c0;
}
.btn.primary {
color: var(--color-primary);
}
.btn.primary:hover {
color: #33ccf0;
}
.spacer {
flex: 1;
}
.sendBtn {
width: var(--send-btn-size);
height: var(--send-btn-size);
border-radius: 50%;
border: none;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.2s;
flex-shrink: 0;
}
.sendDisabled {
background: var(--color-btn-send-disabled);
cursor: not-allowed;
}
.sendEnabled {
background: var(--color-btn-send-active);
box-shadow: 0 2px 12px rgba(0, 184, 230, 0.3);
}
.sendEnabled:hover {
background: #00ccff;
box-shadow: 0 4px 20px rgba(0, 184, 230, 0.5);
}
.label {
/* Toolbar label that hides on mobile */
}
@media (max-width: 767px) {
.label {
display: none;
}
.btn {
padding: 0 8px;
}
}