simonkoson/military-tech-voice3.0
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(frontend): toolbar layout + engine-select styling

Browse Source 
- Restructure toolbar to use toolbar-row for horizontal layout
- Fix emotion emoji buttons wrapping to vertical
- Enlarge engine-select with better padding, font-size, min-width
- Add toolbar-divider between engine and emotion sections
- Add hover/focus box-shadow to engine-select
- Remove toolbar-hint text to save space
This commit is contained in:
lanhao
2026-07-01 01:04:28 +08:00
parent a0346d05ba
commit 48f5bf3623
2 changed files with 31 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/styles.css
+28 -11
View File
@@ -117,35 +117,52 @@ body {
margin-bottom: 16px;
}
.toolbar-group { display: flex; align-items: center; gap: 8px; }
.toolbar-row {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
flex-wrap: wrap;
}
.toolbar-label { font-size: 0.85rem; color: var(--text-secondary); }
.toolbar-hint { font-size: 0.7rem; color: var(--text-muted); margin-left: 8px; }
.toolbar-divider {
width: 1px;
height: 20px;
background: var(--border-color);
}
#engine-select {
padding: 6px 12px;
background: #1a1a25;
border: 1px solid #2a2a3a;
border-radius: var(--radius-sm);
padding: 10px 36px 10px 16px;
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: var(--radius-md);
color: #ffffff;
font-size: 0.85rem;
font-size: 0.95rem;
cursor: pointer;
transition: var(--transition-fast);
outline: none;
-webkit-appearance: none;
appearance: none;
min-width: 140px;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2371717a' d='M2 4l4 4 4-4'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 8px center;
padding-right: 28px;
background-position: right 12px center;
}
#engine-select:hover {
border-color: var(--border-hover);
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}
#engine-select:focus {
border-color: var(--accent-primary);
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}
#engine-select:hover { border-color: var(--border-hover); }
#engine-select:focus { border-color: var(--accent-primary); }
#engine-select option { background: #1a1a25; color: #ffffff; }
#emotion-global {
display: flex;
align-items: center;
gap: 4px;
flex-wrap: nowrap;
}
#emotion-per-sentence {