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:
25
style.css
25
style.css
@@ -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 {
|
||||||
|
|||||||
Reference in New Issue
Block a user