matteoscrugli/app-service
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use modern glow effect for dark theme + auto accent elements

Browse Source 
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 <noreply@anthropic.com>
This commit is contained in:
matteoscrugli
2025-12-08 23:22:06 +01:00
parent 496644fae1
commit 0608217702
4 changed files with 7 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/styles/AdminPanel.css
View File

@@ -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 */

10
frontend/src/styles/Layout.css
View File

@@ -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);
}

5
frontend/src/styles/Sidebar.css
View File

@@ -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,

10
frontend/src/styles/ThemeSettings.css
View File

@@ -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 */