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

Enhance shadows for dark theme + auto accent elements

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

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

@@ -2266,12 +2266,14 @@
[data-theme='dark'][data-accent='auto'] .btn-primary-modern { [data-theme='dark'][data-accent='auto'] .btn-primary-modern {
background: #e5e7eb; background: #e5e7eb;
color: #111827; 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:hover,
[data-theme='dark'][data-accent='auto'] .btn-primary-modern:hover { [data-theme='dark'][data-accent='auto'] .btn-primary-modern:hover {
background: #f3f4f6; background: #f3f4f6;
color: #111827; 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 */ /* Icon action buttons (edit) hover state with auto accent in dark mode */

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

@@ -437,12 +437,12 @@
[data-theme='dark'][data-accent='auto'] .admin-tab-btn.active { [data-theme='dark'][data-accent='auto'] .admin-tab-btn.active {
background: #e5e7eb; background: #e5e7eb;
color: #111827; 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'] .page-tab-btn.active:focus,
[data-theme='dark'][data-accent='auto'] .admin-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'] .page-tab-btn.active:focus-visible,
[data-theme='dark'][data-accent='auto'] .admin-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);
} }

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

@@ -1026,7 +1026,7 @@
[data-theme='dark'][data-accent='auto'] .nav-item.active { [data-theme='dark'][data-accent='auto'] .nav-item.active {
background: #e5e7eb; background: #e5e7eb;
color: #111827 !important; 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, [data-theme='dark'][data-accent='auto'] .nav-item.active .nav-icon,

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

@@ -1437,12 +1437,13 @@
[data-theme='dark'][data-accent='auto'] .btn-primary { [data-theme='dark'][data-accent='auto'] .btn-primary {
background: #e5e7eb; background: #e5e7eb;
color: #111827; 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:hover {
background: #f3f4f6; background: #f3f4f6;
color: #111827; 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 */ /* Ghost button hover */