From db09202c7b13afedcc1360f0dd20ca784bb7f520 Mon Sep 17 00:00:00 2001 From: Adam Gaiswinkler Date: Mon, 8 Dec 2025 21:24:00 +0000 Subject: [PATCH] =?UTF-8?q?neue=20version=20bug=20fixes=20soweit=20fertig?= =?UTF-8?q?=20controls=20auserhalb=20des=20men=C3=BCs?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- Client/Themes/Theme1.razor | 12 ++-- .../Theme.css | 68 ++++++++++++------- 2 files changed, 49 insertions(+), 31 deletions(-) diff --git a/Client/Themes/Theme1.razor b/Client/Themes/Theme1.razor index 400df6a..c16fd95 100644 --- a/Client/Themes/Theme1.razor +++ b/Client/Themes/Theme1.razor @@ -71,16 +71,14 @@ - - - - - +
+
+ +
+
diff --git a/Client/wwwroot/Themes/SZUAbsolventenverein.Theme.Website/Theme.css b/Client/wwwroot/Themes/SZUAbsolventenverein.Theme.Website/Theme.css index 2940cd6..b0bb65d 100644 --- a/Client/wwwroot/Themes/SZUAbsolventenverein.Theme.Website/Theme.css +++ b/Client/wwwroot/Themes/SZUAbsolventenverein.Theme.Website/Theme.css @@ -5,6 +5,29 @@ body { } + +/* Login-Button (Mobile + Desktop) */ +.app-menu-footer .btn-login, +.app-menu-footer .login-btn, +.app-menu-footer button, +.app-menu-footer a { + background-color: #ffffff !important; + border: 1px solid #ccc !important; + color: #555 !important; + padding: 6px 14px !important; + border-radius: 6px !important; + font-weight: 500 !important; +} + + /* Hover-Effekt */ + .app-menu-footer .btn-login:hover, + .app-menu-footer .login-btn:hover, + .app-menu-footer button:hover, + .app-menu-footer a:hover { + background-color: #f2f2f2 !important; + border-color: #bbb !important; + color: #333 !important; + } .content { margin-top: 60px; /* ungefähr Höhe der Navbar */ } @@ -34,7 +57,7 @@ body { } .bg-primary { - background-color: gray !important; + background-color: #b1b0b0 !important; } .table .btn-primary { @@ -117,7 +140,7 @@ body { /* Menü-Container */ .app-menu { display: flex; - + background-color: #b1b0b0; } /* Bereich für die Seitenlinks – Basis: horizontales Flex */ @@ -166,51 +189,47 @@ body { DESKTOP (ab 768px) =========================== */ @media (min-width: 1000px) { - /* setting rehct neben loggin*/ - .right-side{ - margin-right: 150px; - } - /* Navbar: eine Zeile, Positionierungs-Referenz für Absolut-Elemente */ + + /* Navbar ist Referenz für die absolute Zentrierung */ .app-navbar { display: flex !important; flex-wrap: nowrap !important; align-items: center !important; justify-content: flex-start !important; position: relative !important; + min-height: 60px; /* optional: fixe Höhe */ } - /* Menübereich in der Mitte */ + /* Menü nur als Container für den Footer */ .app-menu { display: flex !important; flex-direction: row !important; align-items: center !important; - justify-content: center !important; /* Menüpunkte in der Mitte */ - flex: 1 1 auto !important; /* füllt Platz zwischen Logo und rechts */ + flex: 1 1 auto !important; gap: 0.75rem !important; position: static !important; width: auto !important; - margin-right: 210px !important; } - /* Menüpunkte horizontal zentriert */ + /* NAV-LINKS: exakt in der Mitte der ganzen Navbar / Seite */ .app-menu-items { + position: absolute !important; + left: 50% !important; + top: 50% !important; + transform: translate(-50%, -50%) !important; display: flex !important; flex-direction: row !important; - flex-wrap: wrap !important; - justify-content: center !important; - align-items: center !important; + flex-wrap: nowrap !important; gap: 0.75rem !important; width: auto !important; + z-index: 1; } - /* Login/Register GANZ RECHTS in der Navbar */ + /* Login/User bleiben im Menü, aber rechts */ .app-menu-footer { display: flex !important; - position: absolute !important; - right: 1rem !important; /* Abstand vom rechten Rand */ - top: 50% !important; - transform: translateY(-50%); /* vertikal mittig ausrichten */ gap: 0.75rem !important; + margin-left: auto !important; /* schiebt Footer nach rechts */ padding: 0 !important; border: none !important; background: none !important; @@ -222,7 +241,6 @@ body { } } - /* =========================== MOBILE (unter 768px) =========================== */ @@ -257,7 +275,7 @@ body { width: 70%; max-width: 280px; height: calc(100vh - 80px); /* Höhe an das neue top anpassen */ - background-color: grey; + background-color: #b1b0b0; flex-direction: column; align-items: stretch; padding: 1rem; @@ -285,10 +303,12 @@ body { padding-top: 0.5rem; border-top: 1px solid rgba(255, 255, 255, 0.25); display: flex; - justify-content: space-between; - align-items: center; + flex-direction: column; /* untereinander statt nebeneinander */ + gap: 0.5rem; /* Abstand zwischen Host und Logout */ + justify-content: right; } + /* Sidebar öffnen/schließen über Checkbox */ .nav-toggle:checked ~ .app-menu { transform: translateX(0);