From 0608217702794733b21f60943b4d742855838253 Mon Sep 17 00:00:00 2001 From: matteoscrugli Date: Mon, 8 Dec 2025 23:22:06 +0100 Subject: [PATCH] Use modern glow effect for dark theme + auto accent elements MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Replace layered shadows with soft diffused glow: - Centered blur (0 offset) for even light spread - 16-24px blur radius for soft edges - Light spread (1-4px) for subtle expansion 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 --- frontend/src/styles/AdminPanel.css | 10 ++-------- frontend/src/styles/Layout.css | 10 ++-------- frontend/src/styles/Sidebar.css | 5 +---- frontend/src/styles/ThemeSettings.css | 10 ++-------- 4 files changed, 7 insertions(+), 28 deletions(-) diff --git a/frontend/src/styles/AdminPanel.css b/frontend/src/styles/AdminPanel.css index c01765d..b9ce10e 100644 --- a/frontend/src/styles/AdminPanel.css +++ b/frontend/src/styles/AdminPanel.css @@ -2266,20 +2266,14 @@ [data-theme='dark'][data-accent='auto'] .btn-primary-modern { background: #e5e7eb; color: #111827; - box-shadow: - 0 6px 8px rgba(229, 231, 235, 0.45), - 0 12px 20px rgba(229, 231, 235, 0.2), - 0 20px 35px rgba(229, 231, 235, 0.06); + box-shadow: 0 0 16px 1px rgba(229, 231, 235, 0.35); } [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 8px 10px rgba(229, 231, 235, 0.55), - 0 16px 25px rgba(229, 231, 235, 0.28), - 0 24px 40px rgba(229, 231, 235, 0.1); + box-shadow: 0 0 24px 3px rgba(229, 231, 235, 0.5); } /* 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 ab316db..ca870f1 100644 --- a/frontend/src/styles/Layout.css +++ b/frontend/src/styles/Layout.css @@ -437,18 +437,12 @@ [data-theme='dark'][data-accent='auto'] .admin-tab-btn.active { background: #e5e7eb; color: #111827; - box-shadow: - 0 6px 8px rgba(229, 231, 235, 0.5), - 0 12px 20px rgba(229, 231, 235, 0.25), - 0 20px 35px rgba(229, 231, 235, 0.08); + box-shadow: 0 0 20px 2px rgba(229, 231, 235, 0.4); } [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 6px 8px rgba(229, 231, 235, 0.55), - 0 12px 20px rgba(229, 231, 235, 0.3), - 0 20px 35px rgba(229, 231, 235, 0.1); + box-shadow: 0 0 25px 4px rgba(229, 231, 235, 0.5); } \ No newline at end of file diff --git a/frontend/src/styles/Sidebar.css b/frontend/src/styles/Sidebar.css index e12b029..7ce0361 100644 --- a/frontend/src/styles/Sidebar.css +++ b/frontend/src/styles/Sidebar.css @@ -1026,10 +1026,7 @@ [data-theme='dark'][data-accent='auto'] .nav-item.active { background: #e5e7eb; color: #111827 !important; - box-shadow: - 0 6px 8px rgba(229, 231, 235, 0.5), - 0 12px 20px rgba(229, 231, 235, 0.25), - 0 20px 35px rgba(229, 231, 235, 0.08); + box-shadow: 0 0 20px 2px rgba(229, 231, 235, 0.4); } [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 e947800..6fccdd0 100644 --- a/frontend/src/styles/ThemeSettings.css +++ b/frontend/src/styles/ThemeSettings.css @@ -1437,19 +1437,13 @@ [data-theme='dark'][data-accent='auto'] .btn-primary { background: #e5e7eb; color: #111827; - box-shadow: - 0 6px 8px rgba(229, 231, 235, 0.45), - 0 12px 20px rgba(229, 231, 235, 0.2), - 0 20px 35px rgba(229, 231, 235, 0.06); + box-shadow: 0 0 16px 1px rgba(229, 231, 235, 0.35); } [data-theme='dark'][data-accent='auto'] .btn-primary:hover { background: #f3f4f6; color: #111827; - box-shadow: - 0 8px 10px rgba(229, 231, 235, 0.55), - 0 16px 25px rgba(229, 231, 235, 0.28), - 0 24px 40px rgba(229, 231, 235, 0.1); + box-shadow: 0 0 24px 3px rgba(229, 231, 235, 0.5); } /* Ghost button hover */