nate/weather
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Apply button polish to all dashboard interactive elements

Browse Source 
Range buttons, refresh, and settings action buttons now get:
- backdrop-filter: blur(10px) frosted glass base
- cubic-bezier(.2,0,0,1) iOS-style easing
- box-shadow glow ring on hover
- scale(0.95) press effect on :active

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Nate EmmertandClaude Sonnet 4.6 committed 2026-08-24 15:54:34 -04:00
1 parent 344f0dd48e
commit 70eda46b85
1 file changed
+67 -6
Download Patch File Download Diff File Expand all files Collapse all files
app/public/dashboard.html
+67 -6
View File
@@ -67,10 +67,54 @@ a { color: var(--cool); text-decoration: none; }
/* ── Range selector ── */
.range-bar { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.range-bar span { font-size: 0.82rem; color: var(--ink-light); margin-right: 0.25rem; }
.range-btn { padding: 0.3rem 0.75rem; border: 1px solid var(--border); border-radius: 20px; background: transparent; color: var(--ink); font-family: var(--mono); font-size: 0.82rem; cursor: pointer; transition: background 0.15s; }
.range-btn.active, .range-btn:hover { background: var(--accent); border-color: var(--accent); color: #fff; }
.refresh-btn { margin-left: auto; padding: 0.3rem 0.75rem; border: 1px solid var(--border); border-radius: 20px; background: transparent; color: var(--ink-light); font-family: var(--mono); font-size: 0.82rem; cursor: pointer; }
.refresh-btn:hover { border-color: var(--cool); color: var(--cool); }
.range-btn {
padding: 0.3rem 0.75rem;
border: 1px solid var(--border);
border-radius: 20px;
background: color-mix(in srgb, white 5%, transparent);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
color: var(--ink);
font-family: var(--mono);
font-size: 0.82rem;
cursor: pointer;
transition: background .18s cubic-bezier(.2,0,0,1),
border-color .18s cubic-bezier(.2,0,0,1),
color .18s cubic-bezier(.2,0,0,1),
box-shadow .18s cubic-bezier(.2,0,0,1),
transform .1s cubic-bezier(.2,0,0,1);
}
.range-btn.active { background: var(--accent); border-color: var(--accent); color: #fff; }
.range-btn:hover {
background: var(--accent);
border-color: var(--accent);
color: #fff;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 20%, transparent);
}
.range-btn:active { transform: scale(0.95); box-shadow: none; }
.refresh-btn {
margin-left: auto;
padding: 0.3rem 0.75rem;
border: 1px solid var(--border);
border-radius: 20px;
background: color-mix(in srgb, white 5%, transparent);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
color: var(--ink-light);
font-family: var(--mono);
font-size: 0.82rem;
cursor: pointer;
transition: border-color .18s cubic-bezier(.2,0,0,1),
color .18s cubic-bezier(.2,0,0,1),
box-shadow .18s cubic-bezier(.2,0,0,1),
transform .1s cubic-bezier(.2,0,0,1);
}
.refresh-btn:hover {
border-color: var(--cool);
color: var(--cool);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--cool) 20%, transparent);
}
.refresh-btn:active { transform: scale(0.95); box-shadow: none; }
/* ── Chart grid ── */
.charts { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@@ -105,8 +149,25 @@ a { color: var(--cool); text-decoration: none; }
.settings-body input { width: 100%; padding: 0.5rem 0.75rem; background: var(--paper); border: 1px solid var(--border); border-radius: 8px; color: var(--ink); font-size: 0.9rem; font-family: var(--mono); }
.settings-body input:focus { outline: 2px solid var(--accent); }
.settings-actions { display: flex; align-items: center; gap: 1rem; margin-top: 0.75rem; }
.settings-body button { padding: 0.45rem 1.2rem; background: var(--accent); color: #fff; border: none; border-radius: 8px; font-family: var(--mono); font-size: 0.9rem; cursor: pointer; font-weight: 600; }
.settings-body button:hover { opacity: 0.88; }
.settings-body button {
padding: 0.45rem 1.2rem;
background: var(--accent);
color: #fff;
border: none;
border-radius: 8px;
font-family: var(--mono);
font-size: 0.9rem;
cursor: pointer;
font-weight: 600;
transition: opacity .18s cubic-bezier(.2,0,0,1),
box-shadow .18s cubic-bezier(.2,0,0,1),
transform .1s cubic-bezier(.2,0,0,1);
}
.settings-body button:hover {
opacity: 0.88;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent);
}
.settings-body button:active { transform: scale(0.95); box-shadow: none; }
.save-msg { font-size: 0.85rem; color: var(--cool); }
.save-msg.err { color: var(--accent); }
.keys-status { font-size: 0.85rem; margin-bottom: 0.25rem; }