H1K0-dev/tanabata
1
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(frontend): theme-aware footer navbar colors

Browse Source 
- Add --color-nav-bg and --color-nav-active CSS variables
- Dark: semi-transparent purple-dark tone (rgba 52,50,73 / 0.45 bg)
- Light: light semi-transparent background, accent-tinted active highlight
- Footer background and active nav item now use variables instead of
  hardcoded dark values

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Masahiko AMANO 2026-04-07 01:10:12 +03:00
parent d38e54e307
commit 135c71ae4d
2 changed files with 6 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
frontend/src/app.css
View File

@ -12,6 +12,8 @@
--color-info: #4DC7ED; --color-info: #4DC7ED;
--color-warning: #F5E872; --color-warning: #F5E872;
--color-tag-default: #444455; --color-tag-default: #444455;
--color-nav-bg: rgba(0, 0, 0, 0.45);
--color-nav-active: rgba(52, 50, 73, 0.72);
--font-sans: 'Epilogue', sans-serif; --font-sans: 'Epilogue', sans-serif;
} }
@ -25,6 +27,8 @@
--color-text-primary: #111118; --color-text-primary: #111118;
--color-text-muted: #555566; --color-text-muted: #555566;
--color-tag-default: #ccccdd; --color-tag-default: #ccccdd;
--color-nav-bg: rgba(240, 240, 245, 0.85);
--color-nav-active: rgba(90, 87, 143, 0.22);
} }
@font-face { @font-face {

4
frontend/src/routes/+layout.svelte
View File

@ -95,7 +95,7 @@
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 10px; padding: 10px;
background-color: rgba(0, 0, 0, 0.45); background-color: var(--color-nav-bg);
backdrop-filter: blur(8px); backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
z-index: 100; z-index: 100;
@ -115,7 +115,7 @@
.nav:hover, .nav:hover,
.nav.curr { .nav.curr {
background-color: #343249; background-color: var(--color-nav-active);
color: var(--color-text-primary); color: var(--color-text-primary);
} }