mirror of
https://github.com/HeyPuter/puter.git
synced 2026-08-26 16:07:13 +00:00
Dashboard: restyle keyboard focus ring on sidebar controls
Sidebar items (and the user/collapse/close buttons) had no :focus-visible style, so keyboard focus painted the UA's default blue ring — hard-edged and bleeding outside the item. Use the dashboard's own selection ring instead, tucked inside the control so it hugs the rounded corners. :focus-visible only, so mouse clicks never paint it.
This commit is contained in:
@@ -479,6 +479,19 @@ body {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* Keyboard focus on the sidebar's controls: swap the UA's default blue
|
||||
ring for the dashboard's own selection ring, hugging the control's
|
||||
rounded corners from the inside. :focus-visible only, so a mouse click
|
||||
(which also focuses these) never paints it. */
|
||||
.dashboard-sidebar-item:focus-visible,
|
||||
.dashboard-user-btn:focus-visible,
|
||||
.dashboard-sidebar-toggle:focus-visible,
|
||||
.dashboard-sidebar-collapse-toggle:focus-visible,
|
||||
.dashboard-sidebar-close:focus-visible {
|
||||
outline: 2px solid var(--select-ring);
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
/* User options button at bottom of sidebar */
|
||||
.dashboard-user-options {
|
||||
border-top: 1px solid var(--dashboard-border);
|
||||
|
||||
Reference in New Issue
Block a user