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-md: 10px;
--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 */
@ -75,6 +82,13 @@
--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-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 {
background: var(--text-primary);
color: #ffffff;
border-color: var(--text-primary);
background: var(--btn-active-bg);
color: var(--btn-active-text);
border-color: var(--btn-active-border);
box-shadow: var(--shadow-sm);
}
#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 {
color: #a7f3d0;
color: var(--btn-active-rate);
}
/* Right Header Actions: Department Nav & Buy Multiplier */
@ -330,9 +330,9 @@
}
.header-nav-btn.active {
background: var(--primary-blue);
color: #ffffff;
border-color: var(--primary-blue);
background: var(--btn-active-bg);
color: var(--btn-active-text);
border-color: var(--btn-active-border);
box-shadow: var(--shadow-sm);
}
@ -342,7 +342,7 @@
}
.header-nav-btn.active iconify-icon {
color: #ffffff;
color: var(--btn-active-icon);
}
.header-nav-btn .nav-pill-badge {
@ -397,9 +397,9 @@
}
.btn-multi-pill.active {
background: var(--text-primary);
color: #ffffff;
border-color: var(--text-primary);
background: var(--btn-active-bg);
color: var(--btn-active-text);
border-color: var(--btn-active-border);
box-shadow: var(--shadow-sm);
}

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

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