ui: move theme color to nav tab bar, white header

Header is now white with neutral text colors.
Nav tab bar uses primary-color background with white text.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-03-10 17:24:47 +02:00
parent ac5d2db711
commit 351ed70c6d

View File

@@ -135,15 +135,14 @@ body {
/* Header */ /* Header */
header { header {
background: #fff; background: #fff;
color: var(--primary-color); color: #333;
padding: 1rem 2rem; padding: 1rem 2rem;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
flex-wrap: wrap; flex-wrap: wrap;
gap: 0.5rem; gap: 0.5rem;
box-shadow: 0 1px 6px rgba(0,0,0,0.1); box-shadow: 0 1px 4px rgba(0,0,0,0.06);
border-bottom: 2px solid var(--primary-color);
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 100; z-index: 100;
@@ -158,19 +157,19 @@ header {
.brand-icon { .brand-icon {
font-size: 1.8rem; font-size: 1.8rem;
line-height: 1; line-height: 1;
color: var(--primary-color); color: #333;
} }
.header-left h1 { .header-left h1 {
font-size: 1.3rem; font-size: 1.3rem;
letter-spacing: -0.3px; letter-spacing: -0.3px;
color: var(--primary-color); color: #222;
} }
.subtitle { .subtitle {
font-size: 0.8rem; font-size: 0.8rem;
opacity: 0.6; opacity: 0.6;
color: #555; color: #666;
} }
.header-right { .header-right {
@@ -985,8 +984,7 @@ span.empty {
.tab-bar { .tab-bar {
display: flex; display: flex;
gap: 0; gap: 0;
background: #fff; background: var(--primary-color);
border-bottom: 2px solid #e5e7eb;
padding: 0 2rem; padding: 0 2rem;
position: sticky; position: sticky;
top: 56px; top: 56px;
@@ -1000,19 +998,20 @@ span.empty {
border-bottom: 3px solid transparent; border-bottom: 3px solid transparent;
font-size: 0.88rem; font-size: 0.88rem;
font-weight: 600; font-weight: 600;
color: #888; color: rgba(255,255,255,0.7);
cursor: pointer; cursor: pointer;
transition: all 0.2s; transition: all 0.2s;
margin-bottom: -2px;
} }
.tab:hover { .tab:hover {
color: var(--primary-color); color: #fff;
background: rgba(255,255,255,0.1);
} }
.tab.active { .tab.active {
color: var(--primary-color); color: #fff;
border-bottom-color: var(--primary-color); border-bottom-color: #fff;
background: rgba(255,255,255,0.1);
} }
.tab-content { .tab-content {