diff --git a/assets/css/catbar.css b/assets/css/catbar.css index 6637b9c..3e817be 100644 --- a/assets/css/catbar.css +++ b/assets/css/catbar.css @@ -1,9 +1,9 @@ .home-nav { - min-height: 16px; width: 100%; display: flex; align-items: center; - background-color: #2d3b50; /* helleres Lapis-/Hellblau */ + background-color: #2d3b50; + padding: 3px 0; /* nur minimal größer als Buttons */ } /* Inner zentriert */ @@ -24,15 +24,48 @@ padding: 0; } -/* Kategorien */ +/* LI nur als Container – KEINE Höhe hier */ .home-nav__list li { flex: 1; - text-align: center; + position: relative; +} + +/* =============================== */ +/* HOME CATEGORY BUTTON */ +/* =============================== */ + +.home-nav__list li button[type="categorybutton"] { + width: 100%; + padding: 12px 0; /* <-- HIER steuerst du die Höhe */ + + background-color: #2d3b50; color: #ffffff; font-weight: bold; - padding: 1rem 0; - position: relative; + font-size: 1rem; + + border: none; cursor: pointer; + + display: flex; + align-items: center; + justify-content: center; + + transition: background-color 0.2s ease, box-shadow 0.2s ease; +} + +/* Hover */ +.home-nav__list li button[type="categorybutton"]:hover { + background-color: #3b4f6b; +} + +/* Active */ +.home-nav__list li button[type="categorybutton"]:active { + background-color: #1f2a3a; +} + +/* Fokus sichtbar aber clean */ +.home-nav__list li button[type="categorybutton"]:focus-visible { + box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.6); } /* Trennstriche */ @@ -40,8 +73,8 @@ content: ""; position: absolute; right: 0; - top: 20%; - height: 60%; + top: 15%; + height: 70%; width: 1px; - background-color: rgba(255, 255, 255, 0.6); + background-color: rgba(255, 255, 255, 0.4); } diff --git a/catbar.php b/catbar.php index 51d57f5..09252fb 100644 --- a/catbar.php +++ b/catbar.php @@ -12,23 +12,23 @@
Computer
+Smartphones
+Kopfhörer
+Laptop
+