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;
|
||||
gap: 8px;
|
||||
padding: 8px 16px;
|
||||
color: var(--text-secondary);
|
||||
color: var(--text-primary);
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
border-radius: var(--radius-md);
|
||||
@@ -82,11 +82,11 @@
|
||||
|
||||
.nav a.active {
|
||||
color: var(--accent-primary);
|
||||
background: rgba(99, 102, 241, 0.1);
|
||||
background: rgba(16, 185, 129, 0.1);
|
||||
}
|
||||
|
||||
.nav a svg {
|
||||
opacity: 0.7;
|
||||
opacity: 0.8;
|
||||
}
|
||||
|
||||
.nav a:hover svg,
|
||||
@@ -95,7 +95,7 @@
|
||||
}
|
||||
|
||||
.nav-link-muted {
|
||||
opacity: 0.6;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* Main content */
|
||||
@@ -129,7 +129,7 @@
|
||||
}
|
||||
|
||||
.footer-tagline {
|
||||
color: var(--text-tertiary);
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
@@ -139,13 +139,13 @@
|
||||
}
|
||||
|
||||
.footer-links a {
|
||||
color: var(--text-tertiary);
|
||||
color: var(--text-secondary);
|
||||
font-size: 0.875rem;
|
||||
transition: color var(--transition-fast);
|
||||
}
|
||||
|
||||
.footer-links a:hover {
|
||||
color: var(--text-secondary);
|
||||
color: var(--text-primary);
|
||||
}
|
||||
|
||||
/* Responsive */
|
||||
|
||||
@@ -12,22 +12,22 @@
|
||||
--bg-elevated: #222225;
|
||||
--bg-hover: #2a2a2e;
|
||||
|
||||
/* Accent colors */
|
||||
--accent-primary: #6366f1;
|
||||
--accent-primary-hover: #818cf8;
|
||||
--accent-secondary: #8b5cf6;
|
||||
--accent-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
|
||||
/* Accent colors - Green/Emerald theme */
|
||||
--accent-primary: #10b981;
|
||||
--accent-primary-hover: #34d399;
|
||||
--accent-secondary: #059669;
|
||||
--accent-gradient: linear-gradient(135deg, #10b981 0%, #059669 100%);
|
||||
|
||||
/* Text colors */
|
||||
--text-primary: #fafafa;
|
||||
--text-secondary: #a1a1aa;
|
||||
--text-tertiary: #71717a;
|
||||
--text-muted: #52525b;
|
||||
/* Text colors - improved contrast */
|
||||
--text-primary: #f9fafb;
|
||||
--text-secondary: #d1d5db;
|
||||
--text-tertiary: #9ca3af;
|
||||
--text-muted: #6b7280;
|
||||
|
||||
/* Border colors */
|
||||
--border-primary: #27272a;
|
||||
--border-secondary: #3f3f46;
|
||||
--border-accent: #6366f1;
|
||||
--border-accent: #10b981;
|
||||
|
||||
/* Status colors */
|
||||
--success: #22c55e;
|
||||
@@ -41,7 +41,7 @@
|
||||
--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-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 */
|
||||
--transition-fast: 150ms ease;
|
||||
|
||||
@@ -34,12 +34,12 @@
|
||||
.btn-primary {
|
||||
background: var(--accent-gradient);
|
||||
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 {
|
||||
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 {
|
||||
@@ -120,7 +120,7 @@
|
||||
.form-group textarea:focus {
|
||||
outline: none;
|
||||
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);
|
||||
}
|
||||
|
||||
|
||||
@@ -1,8 +1,8 @@
|
||||
/* Upload Section */
|
||||
.upload-section {
|
||||
margin-bottom: 32px;
|
||||
background: linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, rgba(139, 92, 246, 0.05) 100%);
|
||||
border: 1px solid rgba(99, 102, 241, 0.2);
|
||||
background: linear-gradient(135deg, rgba(16, 185, 129, 0.05) 0%, rgba(5, 150, 105, 0.05) 100%);
|
||||
border: 1px solid rgba(16, 185, 129, 0.2);
|
||||
}
|
||||
|
||||
.upload-section h3 {
|
||||
|
||||
Reference in New Issue
Block a user