christian/ProductionGame
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(theme): unify active button styling and contrast across dark and light modes

Browse source
This commit is contained in:
Christian 2026-10-16 14:35:44 +02:00
parent 185e0cc611
commit 2960400f1e
3 changed files with 32 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
frontend/css/base/theme.css
View file

@ -39,6 +39,13 @@
--radius-sm: 6px; --radius-sm: 6px;
--radius-md: 10px; --radius-md: 10px;
--radius-lg: 14px; --radius-lg: 14px;
/* Active State Theme Tokens (Light Mode) */
--btn-active-bg: #0f172a;
--btn-active-text: #ffffff;
--btn-active-border: #0f172a;
--btn-active-icon: #ffffff;
--btn-active-rate: #6ee7b7;
} }
/* Dark Theme */ /* Dark Theme */
@ -75,6 +82,13 @@
--shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.35); --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.35);
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.45), 0 2px 4px -1px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.45), 0 2px 4px -1px rgba(0, 0, 0, 0.3);
--shadow-lg: 0 10px 20px -3px rgba(0, 0, 0, 0.6); --shadow-lg: 0 10px 20px -3px rgba(0, 0, 0, 0.6);
/* Active State Theme Tokens (Dark Mode) */
--btn-active-bg: #3b82f6;
--btn-active-text: #ffffff;
--btn-active-border: #60a5fa;
--btn-active-icon: #ffffff;
--btn-active-rate: #a7f3d0;
} }
* { * {

24
frontend/css/layout/header.css
View file

@ -264,18 +264,18 @@
} }
#header-sector-container .sector-pill.active { #header-sector-container .sector-pill.active {
background: var(--text-primary); background: var(--btn-active-bg);
color: #ffffff; color: var(--btn-active-text);
border-color: var(--text-primary); border-color: var(--btn-active-border);
box-shadow: var(--shadow-sm); box-shadow: var(--shadow-sm);
} }
#header-sector-container .sector-pill.active iconify-icon { #header-sector-container .sector-pill.active iconify-icon {
color: #ffffff !important; color: var(--btn-active-icon) !important;
} }
#header-sector-container .sector-pill.active .sector-pill-rate { #header-sector-container .sector-pill.active .sector-pill-rate {
color: #a7f3d0; color: var(--btn-active-rate);
} }
/* Right Header Actions: Department Nav & Buy Multiplier */ /* Right Header Actions: Department Nav & Buy Multiplier */
@ -330,9 +330,9 @@
} }
.header-nav-btn.active { .header-nav-btn.active {
background: var(--primary-blue); background: var(--btn-active-bg);
color: #ffffff; color: var(--btn-active-text);
border-color: var(--primary-blue); border-color: var(--btn-active-border);
box-shadow: var(--shadow-sm); box-shadow: var(--shadow-sm);
} }
@ -342,7 +342,7 @@
} }
.header-nav-btn.active iconify-icon { .header-nav-btn.active iconify-icon {
color: #ffffff; color: var(--btn-active-icon);
} }
.header-nav-btn .nav-pill-badge { .header-nav-btn .nav-pill-badge {
@ -397,9 +397,9 @@
} }
.btn-multi-pill.active { .btn-multi-pill.active {
background: var(--text-primary); background: var(--btn-active-bg);
color: #ffffff; color: var(--btn-active-text);
border-color: var(--text-primary); border-color: var(--btn-active-border);
box-shadow: var(--shadow-sm); box-shadow: var(--shadow-sm);
} }

11
frontend/css/views/production.css
View file

@ -42,17 +42,18 @@
} }
.sector-pill.active { .sector-pill.active {
background: var(--text-primary); background: var(--btn-active-bg);
color: #ffffff; color: var(--btn-active-text);
border-color: var(--text-primary); border-color: var(--btn-active-border);
box-shadow: var(--shadow-sm);
} }
.sector-pill.active iconify-icon { .sector-pill.active iconify-icon {
color: #ffffff !important; color: var(--btn-active-icon) !important;
} }
.sector-pill.active .sector-pill-rate { .sector-pill.active .sector-pill-rate {
color: #a7f3d0; color: var(--btn-active-rate);
} }
.production-grid { .production-grid {