video-shuoshan/web/src/components/Toolbar.module.css
zyc ffe92f7b15 Initial commit: 即梦视频生成平台
- web/: React + Vite + TypeScript 前端
- backend/: Django + DRF + SimpleJWT 后端
- prototype/: HTML 设计原型
- docs/: PRD 和设计评审文档
- test: 单元测试 + E2E 极限测试
2026-03-13 09:59:33 +08:00

93 lines
1.4 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;
}
.credits {
display: flex;
align-items: center;
gap: 4px;
color: var(--color-text-secondary);
font-size: 12px;
margin-right: 8px;
opacity: 0.7;
}
.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;
}
}