From 3fbd43bb941eb740b8f82a20035362bee870f176 Mon Sep 17 00:00:00 2001 From: matteoscrugli Date: Mon, 8 Dec 2025 23:16:03 +0100 Subject: [PATCH] Enhance shadows for dark theme + auto accent elements MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Use thicker, layered shadows with downward fade effect: - Double shadow layers for depth - Higher offset for bottom diffusion - Increased opacity for better visibility 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 --- frontend/src/styles/AdminPanel.css | 2 ++ frontend/src/styles/Layout.css | 4 ++-- frontend/src/styles/Sidebar.css | 2 +- frontend/src/styles/ThemeSettings.css | 3 ++- 4 files changed, 7 insertions(+), 4 deletions(-) diff --git a/frontend/src/styles/AdminPanel.css b/frontend/src/styles/AdminPanel.css index 71de4e6..93fed27 100644 --- a/frontend/src/styles/AdminPanel.css +++ b/frontend/src/styles/AdminPanel.css @@ -2266,12 +2266,14 @@ [data-theme='dark'][data-accent='auto'] .btn-primary-modern { background: #e5e7eb; color: #111827; + box-shadow: 0 4px 12px rgba(229, 231, 235, 0.3), 0 8px 20px rgba(229, 231, 235, 0.12); } [data-theme='dark'][data-accent='auto'] .btn-primary:hover, [data-theme='dark'][data-accent='auto'] .btn-primary-modern:hover { background: #f3f4f6; color: #111827; + box-shadow: 0 6px 16px rgba(229, 231, 235, 0.4), 0 12px 28px rgba(229, 231, 235, 0.18); } /* Icon action buttons (edit) hover state with auto accent in dark mode */ diff --git a/frontend/src/styles/Layout.css b/frontend/src/styles/Layout.css index 288c5a9..dfad164 100644 --- a/frontend/src/styles/Layout.css +++ b/frontend/src/styles/Layout.css @@ -437,12 +437,12 @@ [data-theme='dark'][data-accent='auto'] .admin-tab-btn.active { background: #e5e7eb; color: #111827; - box-shadow: 0 2px 8px rgba(229, 231, 235, 0.2); + box-shadow: 0 4px 12px rgba(229, 231, 235, 0.35), 0 8px 24px rgba(229, 231, 235, 0.15); } [data-theme='dark'][data-accent='auto'] .page-tab-btn.active:focus, [data-theme='dark'][data-accent='auto'] .admin-tab-btn.active:focus, [data-theme='dark'][data-accent='auto'] .page-tab-btn.active:focus-visible, [data-theme='dark'][data-accent='auto'] .admin-tab-btn.active:focus-visible { - box-shadow: 0 2px 8px rgba(229, 231, 235, 0.3); + box-shadow: 0 4px 12px rgba(229, 231, 235, 0.4), 0 8px 24px rgba(229, 231, 235, 0.2); } \ No newline at end of file diff --git a/frontend/src/styles/Sidebar.css b/frontend/src/styles/Sidebar.css index 724aa33..3575fdf 100644 --- a/frontend/src/styles/Sidebar.css +++ b/frontend/src/styles/Sidebar.css @@ -1026,7 +1026,7 @@ [data-theme='dark'][data-accent='auto'] .nav-item.active { background: #e5e7eb; color: #111827 !important; - box-shadow: var(--shadow-md); + box-shadow: 0 4px 12px rgba(229, 231, 235, 0.35), 0 8px 24px rgba(229, 231, 235, 0.15); } [data-theme='dark'][data-accent='auto'] .nav-item.active .nav-icon, diff --git a/frontend/src/styles/ThemeSettings.css b/frontend/src/styles/ThemeSettings.css index e372e93..639bc8c 100644 --- a/frontend/src/styles/ThemeSettings.css +++ b/frontend/src/styles/ThemeSettings.css @@ -1437,12 +1437,13 @@ [data-theme='dark'][data-accent='auto'] .btn-primary { background: #e5e7eb; color: #111827; + box-shadow: 0 4px 12px rgba(229, 231, 235, 0.3), 0 8px 20px rgba(229, 231, 235, 0.12); } [data-theme='dark'][data-accent='auto'] .btn-primary:hover { background: #f3f4f6; color: #111827; - box-shadow: 0 4px 12px rgba(229, 231, 235, 0.2); + box-shadow: 0 6px 16px rgba(229, 231, 235, 0.4), 0 12px 28px rgba(229, 231, 235, 0.18); } /* Ghost button hover */