lee/puter
1
0
Fork 0
mirror of https://github.com/HeyPuter/puter.git synced 2026-08-24 23:17:23 +00:00
Code Issues Actions 10 Packages Projects Releases Wiki Activity

Polish dashboard settings button styling
Maintain Release Merge PR / update-release-pr (push) Canceled after 0s
Details
Notify HeyPuter / notify (push) Canceled after 0s
Details
release-please / release-please (push) Canceled after 0s
Details

Browse Source 
Update `.dashboard-settings-card .button` to use dashboard theme tokens for text, background, and borders, and add clearer hover/focus/active states with subtle elevation and transitions. Also override disabled styles in this context so dark mode no longer shows hard-coded light greys from the base `.button:disabled` rule.
This commit is contained in:
jelveh
2026-08-01 00:27:27 -07:00
parent 3a11d0d1f1
commit 6159bc9ae1
1 changed files with 31 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/gui/src/css/dashboard.css
+31 -1
View File
@@ -4164,10 +4164,40 @@ body.myapps-reordering .myapps-tile {
.dashboard-settings-card .button {
flex-shrink: 0;
color: var(--dashboard-text);
color: var(--dashboard-text-primary);
background: var(--dashboard-card-background);
border-color: var(--dashboard-border);
border-radius: 10px;
font-weight: 600;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
transition: background-color 0.15s ease, border-color 0.15s ease;
}
.dashboard-settings-card .button:hover {
background: var(--dashboard-sidebar-background);
}
.dashboard-settings-card .button:focus-visible {
border-color: var(--select-color);
box-shadow: 0 0 0 3px var(--select-ring);
}
.dashboard-settings-card .button:active {
background: var(--dashboard-hover);
border-color: var(--dashboard-border);
color: var(--dashboard-text-primary);
box-shadow: none;
}
/* Base .button:disabled hard-codes light greys with !important, which
clashes with this outline style and glares in dark mode. */
.dashboard-settings-card .button:disabled {
background: var(--dashboard-card-background) !important;
border-color: var(--dashboard-border) !important;
color: var(--dashboard-text-muted) !important;
text-shadow: none !important;
}
.dashboard-settings-card-success {
border-color: var(--dashboard-success-border);
background: var(--dashboard-success-background);