From 724aadb276f4f503099597c6d0902ac4ca7df147 Mon Sep 17 00:00:00 2001
From: Christian Wolf <git@christianwolf.email>
Date: Thu, 18 Aug 2022 11:46:37 +0200
Subject: [PATCH] Corrected some color stylings regarding the top menu

---
 slt/css/layout/_topmenu.scss | 31 ++++++++++++++++++++++++-------
 1 file changed, 24 insertions(+), 7 deletions(-)

diff --git a/slt/css/layout/_topmenu.scss b/slt/css/layout/_topmenu.scss
index 57ab572..7e72403 100644
--- a/slt/css/layout/_topmenu.scss
+++ b/slt/css/layout/_topmenu.scss
@@ -85,10 +85,19 @@
             }
 
             &:hover,
-            &:focus,
+            &:focus {
+                color: var(--color-fg-top-hover, #000);
+                background-color: var(--color-bg-top-hover, #aaa);
+            }
+
             &.active {
                 color: var(--color-fg-top-dark, #000);
                 background-color: var(--color-bg-top-dark, #aaa);
+
+                > .mod-menu__sub > li:hover {
+                    color: var(--color-fg-top-dark);
+                    background-color: var(--color-bg-top-dark);
+                }
             }
 
             > .mod-menu__sub {
@@ -101,8 +110,8 @@
                     padding: 0;
                 }
 
-                color: var(--color-fg-top-light, #000);
-                background-color: var(--color-bg-top-light, #ddd);
+                color: var(--color-fg-top-sub);
+                background-color: var(--color-bg-top-sub);
                 box-shadow: 3px 5px 5px 2px rgb(0 0 0 / 50%);
 
                 > li {
@@ -120,10 +129,9 @@
                     }
 
                     &:hover,
-                    &:focus,
-                    &.active {
-                        color: var(--color-fg-top-dark, #000);
-                        background-color: var(--color-bg-top-dark, #aaa);
+                    &:focus {
+                        color: var(--color-fg-top-sub-hover, #000);
+                        background-color: var(--color-bg-top-sub-hover, #aaa);
                     }
 
                     &:hover > a {
@@ -201,3 +209,12 @@ a.facebook {
         }
     }
 }
+
+:root {
+    --color-fg-top-hover: #000;
+    --color-bg-top-hover: #ccc;
+    --color-fg-top-sub: #000;
+    --color-bg-top-sub: #eee;
+    --color-fg-top-sub-hover: #000;
+    --color-bg-top-sub-hover: #ccc;
+}