From 8153390e3530e2dc666f873bd704e8e14363fd2c Mon Sep 17 00:00:00 2001 From: Till Tomczak Date: Fri, 2 May 2025 19:56:25 +0200 Subject: [PATCH] =?UTF-8?q?Verbessere=20das=20Design=20der=20Profilseite:?= =?UTF-8?q?=20Aktualisiere=20CSS-Stile=20f=C3=BCr=20eine=20verbesserte=20B?= =?UTF-8?q?enutzeroberfl=C3=A4che=20im=20Light=20Mode,=20einschlie=C3=9Fli?= =?UTF-8?q?ch=20optimierter=20Hintergr=C3=BCnde,=20Rahmen=20und=20Schattie?= =?UTF-8?q?rungen=20f=C3=BCr=20verschiedene=20Elemente=20wie=20Einstellung?= =?UTF-8?q?en,=20Statistiken=20und=20Interaktionselemente.?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- templates/profile.html | 139 ++++++++++++++++++++++++++++++++++------- 1 file changed, 115 insertions(+), 24 deletions(-) diff --git a/templates/profile.html b/templates/profile.html index 68e8b04..1176781 100644 --- a/templates/profile.html +++ b/templates/profile.html @@ -452,9 +452,17 @@ body:not(.dark) .profile-tabs, body:not(.dark) .activity-card, body:not(.dark) .settings-card { - background: rgba(255, 255, 255, 0.92); - border: 1px solid rgba(0, 0, 0, 0.08); - box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1); + background: rgba(255, 255, 255, 0.95); + border: 1px solid rgba(0, 0, 0, 0.06); + box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06), + 0 2px 8px rgba(0, 0, 0, 0.03); + } + + body:not(.dark) .profile-container { + background: linear-gradient(to bottom right, + rgba(255, 255, 255, 0.98), + rgba(249, 250, 251, 0.96) + ); } body:not(.dark) .glass-card { @@ -487,9 +495,13 @@ /* Light Mode Statistik-Karten */ body:not(.dark) .stat-item { - background: rgba(255, 255, 255, 0.95); - border: 1px solid rgba(0, 0, 0, 0.08); - box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); + background: linear-gradient(to bottom right, + rgba(255, 255, 255, 0.98), + rgba(249, 250, 251, 0.95) + ); + border: 1px solid rgba(0, 0, 0, 0.06); + box-shadow: 0 4px 12px rgba(0, 0, 0, 0.03), + 0 2px 4px rgba(124, 58, 237, 0.02); } body:not(.dark) .stat-item:hover { @@ -516,18 +528,50 @@ /* Light Mode Einstellungen */ body:not(.dark) .settings-input { - background: rgba(255, 255, 255, 0.95); - border: 1px solid rgba(0, 0, 0, 0.1); - color: #1e293b; + background: rgba(255, 255, 255, 0.98); + border: 1px solid rgba(0, 0, 0, 0.08); + color: #111827; + font-size: 0.95rem; + padding: 0.75rem 1rem; + transition: all 0.2s ease; + } + + body:not(.dark) .settings-input:hover { + border-color: rgba(124, 58, 237, 0.2); + background: white; } body:not(.dark) .settings-input:focus { - border-color: rgba(124, 58, 237, 0.4); - box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.1); + border-color: rgba(124, 58, 237, 0.3); + box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.08); + background: white; + outline: none; } body:not(.dark) .settings-input::placeholder { - color: #94a3b8; + color: #9ca3af; + font-size: 0.95rem; + } + + /* Verbesserte Formulargruppen */ + body:not(.dark) .settings-group { + background: rgba(255, 255, 255, 0.5); + padding: 1.5rem; + border-radius: 12px; + border: 1px solid rgba(0, 0, 0, 0.04); + transition: all 0.2s ease; + } + + body:not(.dark) .settings-group:hover { + background: rgba(255, 255, 255, 0.8); + border-color: rgba(124, 58, 237, 0.1); + } + + body:not(.dark) .settings-group .settings-label { + margin-bottom: 0.75rem; + color: #374151; + font-size: 0.95rem; + font-weight: 600; } body:not(.dark) .profile-tab { @@ -545,10 +589,38 @@ background: rgba(126, 63, 242, 0.08); } + /* Verbesserte Typografie im Light Mode */ body:not(.dark) .activity-title, - body:not(.dark) .settings-card-header, + body:not(.dark) .settings-card-header { + color: #111827; + font-weight: 700; + letter-spacing: -0.025em; + } + body:not(.dark) .settings-label { - color: #1a202c; + color: #374151; + font-weight: 600; + font-size: 0.95rem; + } + + body:not(.dark) .settings-card-header { + border-bottom: 1px solid rgba(0, 0, 0, 0.08); + background: linear-gradient(to bottom, + rgba(249, 250, 251, 0.8), + rgba(248, 250, 252, 0.8) + ); + } + + body:not(.dark) .settings-card-body { + padding: 1.75rem; + } + + body:not(.dark) .settings-group { + margin-bottom: 1.75rem; + } + + body:not(.dark) .settings-group:last-child { + margin-bottom: 1rem; } body:not(.dark) .activity-date { @@ -559,29 +631,48 @@ border-top: 1px solid rgba(0, 0, 0, 0.05); } + /* Verbesserte Interaktionselemente im Light Mode */ body:not(.dark) .reaction-button { - color: #4a5568; - background: rgba(0, 0, 0, 0.03); + color: #4b5563; + background: rgba(243, 244, 246, 0.8); + border: 1px solid rgba(0, 0, 0, 0.04); + font-weight: 500; } body:not(.dark) .reaction-button:hover { - background: rgba(126, 63, 242, 0.1); - color: #7e3ff2; + background: rgba(124, 58, 237, 0.08); + color: #6d28d9; + border-color: rgba(124, 58, 237, 0.2); + transform: translateY(-1px); } body:not(.dark) .reaction-button.active { - background: rgba(126, 63, 242, 0.15); - color: #7e3ff2; + background: rgba(124, 58, 237, 0.12); + color: #6d28d9; + border-color: rgba(124, 58, 237, 0.25); + font-weight: 600; } + /* Verbesserte Aktionsbuttons im Light Mode */ body:not(.dark) .action-button { - background: rgba(126, 63, 242, 0.1); - color: #7e3ff2; - border: 1px solid rgba(126, 63, 242, 0.2); + background: rgba(124, 58, 237, 0.08); + color: #6d28d9; + border: 1px solid rgba(124, 58, 237, 0.15); + font-weight: 500; + padding: 0.625rem 1rem; } body:not(.dark) .action-button:hover { - background: rgba(126, 63, 242, 0.2); + background: rgba(124, 58, 237, 0.12); + border-color: rgba(124, 58, 237, 0.25); + color: #5b21b6; + transform: translateY(-1px); + box-shadow: 0 4px 12px rgba(124, 58, 237, 0.1); + } + + body:not(.dark) .action-button:active { + transform: translateY(0); + box-shadow: 0 2px 6px rgba(124, 58, 237, 0.1); } /* Verbesserte Styles für Card-Items im Light Mode */