Switch accent color to green and improve text contrast
- Change accent colors from purple to emerald green (#10b981) - Improve navbar text contrast (use text-primary instead of text-secondary) - Improve footer link contrast - Update all glow/shadow effects to match green theme - Bump muted/tertiary text colors for better readability
This commit is contained in:
@@ -68,7 +68,7 @@
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
gap: 8px;
|
gap: 8px;
|
||||||
padding: 8px 16px;
|
padding: 8px 16px;
|
||||||
color: var(--text-secondary);
|
color: var(--text-primary);
|
||||||
font-size: 0.875rem;
|
font-size: 0.875rem;
|
||||||
font-weight: 500;
|
font-weight: 500;
|
||||||
border-radius: var(--radius-md);
|
border-radius: var(--radius-md);
|
||||||
@@ -82,11 +82,11 @@
|
|||||||
|
|
||||||
.nav a.active {
|
.nav a.active {
|
||||||
color: var(--accent-primary);
|
color: var(--accent-primary);
|
||||||
background: rgba(99, 102, 241, 0.1);
|
background: rgba(16, 185, 129, 0.1);
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav a svg {
|
.nav a svg {
|
||||||
opacity: 0.7;
|
opacity: 0.8;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nav a:hover svg,
|
.nav a:hover svg,
|
||||||
@@ -95,7 +95,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.nav-link-muted {
|
.nav-link-muted {
|
||||||
opacity: 0.6;
|
opacity: 0.7;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Main content */
|
/* Main content */
|
||||||
@@ -129,7 +129,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.footer-tagline {
|
.footer-tagline {
|
||||||
color: var(--text-tertiary);
|
color: var(--text-secondary);
|
||||||
font-size: 0.875rem;
|
font-size: 0.875rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -139,13 +139,13 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.footer-links a {
|
.footer-links a {
|
||||||
color: var(--text-tertiary);
|
color: var(--text-secondary);
|
||||||
font-size: 0.875rem;
|
font-size: 0.875rem;
|
||||||
transition: color var(--transition-fast);
|
transition: color var(--transition-fast);
|
||||||
}
|
}
|
||||||
|
|
||||||
.footer-links a:hover {
|
.footer-links a:hover {
|
||||||
color: var(--text-secondary);
|
color: var(--text-primary);
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Responsive */
|
/* Responsive */
|
||||||
|
|||||||
@@ -12,22 +12,22 @@
|
|||||||
--bg-elevated: #222225;
|
--bg-elevated: #222225;
|
||||||
--bg-hover: #2a2a2e;
|
--bg-hover: #2a2a2e;
|
||||||
|
|
||||||
/* Accent colors */
|
/* Accent colors - Green/Emerald theme */
|
||||||
--accent-primary: #6366f1;
|
--accent-primary: #10b981;
|
||||||
--accent-primary-hover: #818cf8;
|
--accent-primary-hover: #34d399;
|
||||||
--accent-secondary: #8b5cf6;
|
--accent-secondary: #059669;
|
||||||
--accent-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
|
--accent-gradient: linear-gradient(135deg, #10b981 0%, #059669 100%);
|
||||||
|
|
||||||
/* Text colors */
|
/* Text colors - improved contrast */
|
||||||
--text-primary: #fafafa;
|
--text-primary: #f9fafb;
|
||||||
--text-secondary: #a1a1aa;
|
--text-secondary: #d1d5db;
|
||||||
--text-tertiary: #71717a;
|
--text-tertiary: #9ca3af;
|
||||||
--text-muted: #52525b;
|
--text-muted: #6b7280;
|
||||||
|
|
||||||
/* Border colors */
|
/* Border colors */
|
||||||
--border-primary: #27272a;
|
--border-primary: #27272a;
|
||||||
--border-secondary: #3f3f46;
|
--border-secondary: #3f3f46;
|
||||||
--border-accent: #6366f1;
|
--border-accent: #10b981;
|
||||||
|
|
||||||
/* Status colors */
|
/* Status colors */
|
||||||
--success: #22c55e;
|
--success: #22c55e;
|
||||||
@@ -41,7 +41,7 @@
|
|||||||
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
|
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
|
||||||
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
|
--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.3);
|
||||||
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
|
--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -4px rgba(0, 0, 0, 0.4);
|
||||||
--shadow-glow: 0 0 20px rgba(99, 102, 241, 0.3);
|
--shadow-glow: 0 0 20px rgba(16, 185, 129, 0.3);
|
||||||
|
|
||||||
/* Transitions */
|
/* Transitions */
|
||||||
--transition-fast: 150ms ease;
|
--transition-fast: 150ms ease;
|
||||||
|
|||||||
@@ -34,12 +34,12 @@
|
|||||||
.btn-primary {
|
.btn-primary {
|
||||||
background: var(--accent-gradient);
|
background: var(--accent-gradient);
|
||||||
color: white;
|
color: white;
|
||||||
box-shadow: var(--shadow-sm), 0 0 20px rgba(99, 102, 241, 0.2);
|
box-shadow: var(--shadow-sm), 0 0 20px rgba(16, 185, 129, 0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-primary:hover {
|
.btn-primary:hover {
|
||||||
transform: translateY(-1px);
|
transform: translateY(-1px);
|
||||||
box-shadow: var(--shadow-md), 0 0 30px rgba(99, 102, 241, 0.3);
|
box-shadow: var(--shadow-md), 0 0 30px rgba(16, 185, 129, 0.3);
|
||||||
}
|
}
|
||||||
|
|
||||||
.btn-primary:active {
|
.btn-primary:active {
|
||||||
@@ -120,7 +120,7 @@
|
|||||||
.form-group textarea:focus {
|
.form-group textarea:focus {
|
||||||
outline: none;
|
outline: none;
|
||||||
border-color: var(--accent-primary);
|
border-color: var(--accent-primary);
|
||||||
box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
|
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15);
|
||||||
background: var(--bg-elevated);
|
background: var(--bg-elevated);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -1,8 +1,8 @@
|
|||||||
/* Upload Section */
|
/* Upload Section */
|
||||||
.upload-section {
|
.upload-section {
|
||||||
margin-bottom: 32px;
|
margin-bottom: 32px;
|
||||||
background: linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, rgba(139, 92, 246, 0.05) 100%);
|
background: linear-gradient(135deg, rgba(16, 185, 129, 0.05) 0%, rgba(5, 150, 105, 0.05) 100%);
|
||||||
border: 1px solid rgba(99, 102, 241, 0.2);
|
border: 1px solid rgba(16, 185, 129, 0.2);
|
||||||
}
|
}
|
||||||
|
|
||||||
.upload-section h3 {
|
.upload-section h3 {
|
||||||
|
|||||||
Reference in New Issue
Block a user