kai/web-terminal
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

polish(v0.7): restyle timeline + push toggle to match the .toolbtn line-icon look

Browse Source 
The icons were swapped to lucide line icons, but the buttons kept a boxed/light
background that clashed with the minimal toolbar icons. CSS-only fix: render
.tab-timeline + .push-toggle-btn as transparent, monochrome 18px line-icon
buttons (text-dim, accent on hover/active) — identical to .toolbtn — overriding
the earlier boxed default. Markup unchanged (tests stay green: 158 push+tabs).
This commit is contained in:
Yaojia Wang
2026-06-30 19:18:38 +02:00
parent e554c053ee
commit b273b61795
1 changed files with 60 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
public/style.css
View File

@@ -1502,3 +1502,63 @@ body.home-open #term {
padding-right: 240px; /* clear the absolutely-positioned .home-seg */ padding-right: 240px; /* clear the absolutely-positioned .home-seg */
} }
} }
/* v0.7: timeline + push toggle reuse the minimal .toolbtn look. */
.toolbtn.active {
color: var(--accent);
}
.toolbtn.push-bell-disabled {
opacity: 0.45;
cursor: default;
}
.toolbtn.push-bell-disabled:hover {
background: none;
color: var(--text-dim);
}
/* v0.7 fix: timeline + push toggle render as minimal line-icon buttons that
match the .toolbtn toolbar style (transparent, monochrome, accent on
hover/active). !important defeats the earlier boxed default for these classes. */
.tab-timeline,
.push-toggle-btn,
.push-toggle-disabled {
background: none !important;
border: none !important;
box-shadow: none !important;
color: var(--text-dim);
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 4px;
padding: 7px 9px;
border-radius: 8px;
font: inherit;
font-size: 12px;
line-height: 1;
transition: background 0.12s ease, color 0.12s ease;
}
.tab-timeline svg,
.push-toggle-btn svg,
.push-bell svg {
width: 18px;
height: 18px;
display: block;
}
.tab-timeline:hover,
.push-toggle-btn:hover {
color: var(--accent);
background: var(--surface-2) !important;
}
.tab-timeline.active,
.push-toggle-btn.push-toggle-on {
color: var(--accent);
}
.push-toggle-disabled {
color: var(--text-faint);
opacity: 0.6;
cursor: default;
}
.push-hint {
font-size: 11px;
color: var(--text-faint);
}