chihlasm/resolutionflow
1
0
Fork 0
Code Issues 23 Pull Requests 1 Actions Packages Projects Releases Wiki Activity

fix: dark-mode-aware shadows — elevated surfaces + faint accent glow

Browse Source 
Black shadows are invisible on dark backgrounds. Replaced with:
- Primary button hover: faint cyan glow (rgba 0.2)
- Ghost button hover: brighter border only (no shadow)
- tab-active-shadow: bg-elevated + faint cyan glow (rgba 0.08)
- card-lift: brighter border + subtle cyan glow on hover

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
Michael Chihlas
2026-03-22 05:18:37 -04:00
parent 6eae234991
commit 20b3627fe0
2 changed files with 31 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
frontend/src/index.css
View File

@@ -181,11 +181,11 @@
transition: filter 150ms ease, box-shadow 150ms ease, transform 150ms ease;
&:hover {
filter: brightness(1.1);
box-shadow: 0 2px 8px rgba(34, 211, 238, 0.25);
box-shadow: 0 2px 10px rgba(34, 211, 238, 0.2);
transform: translateY(-1px);
}
&:active {
box-shadow: 0 1px 2px rgba(34, 211, 238, 0.15);
box-shadow: 0 0 4px rgba(34, 211, 238, 0.1);
transform: translateY(0);
}
}
@@ -202,32 +202,33 @@
background: var(--color-bg-elevated);
color: var(--color-text-primary);
border-color: var(--color-border-hover);
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
transform: translateY(-1px);
}
&:active {
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
transform: translateY(0);
}
}
/* ── Interactive shadow patterns ────────────────── */
/* ── Interactive shadow patterns (dark-mode aware) ── */
/* On dark backgrounds, use brighter surfaces + faint accent glow
instead of black shadows (which are invisible on #0c0d10) */
/* Tab/toggle group: active item gets elevation shadow */
/* Tab/toggle group: active item gets elevated surface + faint accent glow */
@utility tab-active-shadow {
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
background: var(--color-bg-elevated);
box-shadow: 0 1px 4px rgba(34, 211, 238, 0.08);
}
/* Card hover lift — optional, add to cards that should feel interactive */
/* Card hover lift — brighter border + subtle accent glow */
@utility card-lift {
transition: box-shadow 200ms ease, transform 200ms ease, border-color 200ms ease;
&:hover {
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
transform: translateY(-2px);
border-color: var(--color-border-hover);
box-shadow: 0 2px 8px rgba(34, 211, 238, 0.06);
transform: translateY(-2px);
}
&:active {
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
box-shadow: none;
transform: translateY(0);
}
}