From db5cadb520576a13faf3e400205b42340be4514f Mon Sep 17 00:00:00 2001 From: Kenneth Reitz Date: Mon, 26 May 2025 20:56:32 -0400 Subject: [PATCH] Update color scheme to dark purple theme Switch from light theme to dark background with purple accents. Update sidebar with gradient background and improved hover effects. Enhance button and navigation styling for better contrast. --- kjvstudy_org/static/style.css | 96 +++++++++++++++++++---------------- 1 file changed, 51 insertions(+), 45 deletions(-) diff --git a/kjvstudy_org/static/style.css b/kjvstudy_org/static/style.css index 22e5484..9f2f9d3 100644 --- a/kjvstudy_org/static/style.css +++ b/kjvstudy_org/static/style.css @@ -1,18 +1,18 @@ :root { - --primary-color: #1f1f1f; - --primary-light: #333333; - --primary-dark: #000000; - --accent-color: #666666; - --background-color: #fefefe; - --surface-color: #ffffff; - --text-primary: #1a1a1a; - --text-secondary: #666666; - --text-muted: #999999; - --border-color: #e0e0e0; - --border-light: #f0f0f0; - --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05); - --shadow-md: 0 2px 4px 0 rgb(0 0 0 / 0.1); - --shadow-lg: 0 4px 8px 0 rgb(0 0 0 / 0.1); + --primary-color: #4b2e83; + --primary-light: #6d4bb3; + --primary-dark: #2f1a4f; + --accent-color: #8b5cf6; + --background-color: #0f0f0f; + --surface-color: #1a1a1a; + --text-primary: #f5f5f5; + --text-secondary: #a3a3a3; + --text-muted: #737373; + --border-color: #2a2a2a; + --border-light: #262626; + --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.3); + --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.3); + --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.3), 0 4px 6px -4px rgb(0 0 0 / 0.3); --radius-sm: 0.25rem; --radius-md: 0.375rem; --radius-lg: 0.5rem; @@ -91,12 +91,11 @@ div { .sidebar { width: 220px; - background: var(--surface-color); - color: var(--text-primary); + background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary-color) 100%); + color: white; overflow-y: auto; padding: 1.5rem 0; - box-shadow: var(--shadow-md); - border-right: 1px solid var(--border-color); + box-shadow: var(--shadow-lg); position: fixed; height: 100vh; z-index: 30; @@ -112,7 +111,7 @@ div { .sidebar-header { padding: 0 1rem 1.5rem; - border-bottom: 1px solid var(--border-light); + border-bottom: 1px solid rgba(255, 255, 255, 0.1); margin-bottom: 1rem; } @@ -121,7 +120,7 @@ div { font-size: 1.2rem; font-weight: normal; margin: 0; - color: var(--text-primary); + color: white; display: flex; align-items: center; gap: 0.5rem; @@ -129,7 +128,7 @@ div { .sidebar-subtitle { font-size: 0.875rem; - color: var(--text-secondary); + color: rgba(255, 255, 255, 0.7); margin: 0.25rem 0 0; font-weight: normal; } @@ -144,28 +143,32 @@ div { font-weight: normal; text-transform: uppercase; letter-spacing: 0.1em; - color: var(--text-muted); + color: rgba(255, 255, 255, 0.6); margin: 1.25rem 0.5rem 0.5rem; } .sidebar-nav a { display: block; - color: var(--text-secondary); + color: rgba(255, 255, 255, 0.8); padding: 0.4rem 0.75rem; text-decoration: none; margin-bottom: 0.1rem; - transition: color 0.2s ease; + transition: all 0.2s ease; font-size: 0.9rem; font-family: 'Crimson Text', 'Times New Roman', serif; + border-radius: var(--radius-sm); } .sidebar-nav a:hover { - color: var(--text-primary); + background-color: rgba(255, 255, 255, 0.1); + color: white; + transform: translateX(4px); } .sidebar-nav a.active { - color: var(--text-primary); - font-weight: normal; + background-color: rgba(255, 255, 255, 0.15); + color: white; + font-weight: 500; } .sidebar-nav a.coming-soon { @@ -177,7 +180,7 @@ div { .sidebar-nav a.coming-soon small { display: block; font-size: 0.75rem; - color: var(--text-muted); + color: rgba(255, 255, 255, 0.5); margin-top: 0.25rem; font-family: 'Crimson Text', 'Times New Roman', serif; } @@ -188,7 +191,7 @@ div { left: 0; width: 100%; height: 100%; - background: rgba(0, 0, 0, 0.3); + background: rgba(0, 0, 0, 0.5); z-index: 35; opacity: 0; visibility: hidden; @@ -386,18 +389,19 @@ div { justify-content: center; padding: 0.75rem 0.5rem; background: var(--surface-color); - color: var(--text-primary); + color: var(--primary-light); text-decoration: none; font-weight: normal; font-size: 1rem; - border: 1px solid var(--border-light); + border: 2px solid var(--border-color); transition: all 0.15s ease; min-height: 44px; } .chapter-link:hover { - background: var(--border-light); - color: var(--text-primary); + background: var(--primary-color); + color: white; + border-color: var(--primary-light); } /* Verses */ @@ -504,14 +508,14 @@ div { } .breadcrumb a { - color: var(--text-secondary); + color: var(--primary-light); text-decoration: none; font-size: 0.85rem; font-family: 'Crimson Text', 'Times New Roman', serif; } .breadcrumb a:hover { - color: var(--text-primary); + text-decoration: underline; } .breadcrumb-separator { @@ -543,18 +547,20 @@ div { } .nav-button:hover { - background: var(--border-light); - color: var(--text-primary); + background: var(--primary-light); + color: white; + border-color: var(--primary-light); } .nav-button-primary { - background: var(--text-primary); - color: var(--surface-color); - border-color: var(--text-primary); + background: var(--primary-light); + color: white; + border-color: var(--primary-light); } .nav-button-primary:hover { - background: var(--text-secondary); + background: var(--primary-dark); + border-text-secondary); border-color: var(--text-secondary); } @@ -602,13 +608,13 @@ div { top: 1rem; left: 1rem; z-index: 40; - background: var(--surface-color); - color: var(--text-primary); - border: 1px solid var(--border-color); + background: var(--primary-color); + color: white; + border: none; border-radius: var(--radius-md); padding: 0.75rem; cursor: pointer; - box-shadow: var(--shadow-sm); + box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2); touch-action: manipulation; min-height: 48px; min-width: 48px;