polish(v0.6): replace toolbar emoji with themed line icons + hover tooltips
The glossy emoji (🔍⚙▦🕘⌨🔗📱) clashed with the Amber dark theme. Swap them for clean lucide line icons (MIT, stroke=currentColor) so they take the theme colour — muted by default, Amber on hover — and add a styled CSS hover tooltip (data-tip, right-anchored so it never clips the edge) showing what each does. - public/icons.ts: 7 line icons (search/settings/dashboard/history/keyboard/ share/device), script-generated from lucide - 7 toolbar modules: innerHTML = ICON_* + data-tip + aria-label - style.css .toolbtn: 18px svg, --text-dim → --accent on hover, [data-tip] tooltip Frontend-only. web typecheck + build clean; bundle has 0 toolbar emoji; verified in-browser: line icons in theme colour, amber + tooltip on hover.
This commit is contained in:
@@ -237,20 +237,50 @@ body {
|
||||
border-left: 1px solid var(--border);
|
||||
}
|
||||
.toolbtn {
|
||||
position: relative; /* for the hover tooltip */
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: none;
|
||||
border: none;
|
||||
color: var(--text-dim);
|
||||
cursor: pointer;
|
||||
font-size: 15px;
|
||||
padding: 7px 9px;
|
||||
border-radius: 8px;
|
||||
line-height: 1;
|
||||
transition: background 0.12s ease;
|
||||
transition: background 0.12s ease, color 0.12s ease;
|
||||
}
|
||||
.toolbtn svg {
|
||||
display: block;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
.toolbtn:hover {
|
||||
color: #fff;
|
||||
color: var(--accent);
|
||||
background: var(--surface-2);
|
||||
}
|
||||
/* Hover tooltip (right-anchored so it never clips the screen edge). */
|
||||
.toolbtn[data-tip]::after {
|
||||
content: attr(data-tip);
|
||||
position: absolute;
|
||||
top: calc(100% + 6px);
|
||||
right: 0;
|
||||
white-space: nowrap;
|
||||
background: var(--surface-3);
|
||||
color: var(--text);
|
||||
border: 1px solid var(--border-strong);
|
||||
padding: 4px 8px;
|
||||
border-radius: 6px;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.12s ease;
|
||||
z-index: 60;
|
||||
}
|
||||
.toolbtn[data-tip]:hover::after {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
/* ── Terminal area ───────────────────────────────────────────────── */
|
||||
#term {
|
||||
|
||||
Reference in New Issue
Block a user