From 350d0e55bd8602b20fd767c5586bf996f3fd6761 Mon Sep 17 00:00:00 2001
From: "@CyberAndi" <astawinski@outlook.com>
Date: Tue, 5 Dec 2023 11:12:34 +0100
Subject: [PATCH] optimized nav-menu

---
 cascade.css | 50 ++++++++++++++------------------------------------
 1 file changed, 14 insertions(+), 36 deletions(-)

diff --git a/cascade.css b/cascade.css
index 8737b06..9b4632f 100644
--- a/cascade.css
+++ b/cascade.css
@@ -923,9 +923,8 @@ header p {
 }
 
 .nav li:is(:hover,:active,:focus,:target,:focus-visible,:focus-within),.nav .dropdown:is(:hover,:active,:focus,:target,:focus-visible,:focus-within),.nav .cbi-dropdown[open]:is(:hover,:active,:focus,:target,:focus-visible,:focus-within) {
-	--focus-color-rgb: 82,168,0;
 	background: rgba(48,48,48,0.8);
-	backdrop-filter: blur(3.5px);
+	backdrop-filter: blur(2.5px);
 	border: solid 1px rgba(var(--focus-color-rgb),0.6)!important;
 	outline: 0;
 	box-shadow: 0.25em 0em 0.5em rgba(0,0,0,0.8) ,inset 0 1px 3px hsla(var(--border-color-low-hsl),.01),0 -3px 8px rgba(var(--focus-color-rgb),0.6);
@@ -935,52 +934,31 @@ header p {
 	color: var(--primary-color-medium);
 }
 
-
-.nav a:is(:hover,:active,:focus.:focus-within,:focus-visible,:target), .nav .active:has(a:is(:hover,:active,:focus.:focus-within,:focus-visible,:target)){
-	--focus-color-rgb: 82,168,0;
+.nav > .dropdown:is(:hover,:active,:focus,:target,:focus-visible,:focus-within) > .dropdown-menu {
+	background: rgba(48,48,48,0.8);
+	backdrop-filter: blur(2.5px);
 	border: solid 1px rgba(var(--focus-color-rgb),0.6)!important;
 	outline: 0;
-	box-shadow: 0.25em 0em 0.5em rgba(0,0,0,0.8) ,inset 0 1px 3px hsla(var(--border-color-low-hsl),.01),0 -3px 8px rgba(var(--focus-color-rgb),0.6);
+	box-shadow: 0.25em 0em 0.5em rgba(0,0,0,0.8) ,inset 0 1px 3px hsla(var(--border-color-low-hsl),.01), 0 3px 8px rgba(var(--focus-color-rgb),0.6);
 	text-decoration: none;
-	border-radius: 0.35em;
-	background-color: rgba(48,48,48,0.8);
+	border-radius: 0 0 0.35em 0.35em;
+	border-top: none !important;
 	color: var(--primary-color-medium);
 }
 
-.nav .active > a {
-	background-color: rgba(0,0,0,0.5)
+.nav li:is(:hover,:active,:focus,:target,:focus-visible,:focus-within) a::after, .nav .dropdown:is(:hover,:active,:focus,:target,:focus-visible,:focus-within) a::after, .nav .cbi-dropdown[open]:is(:hover,:active,:focus,:target,:focus-visible,:focus-within) a::after, .nav li:is(:hover,:active,:focus,:target,:focus-visible,:focus-within), .nav .dropdown:is(:hover,:active,:focus,:target,:focus-visible,:focus-within) a, .nav .cbi-dropdown[open]:is(:hover,:active,:focus,:target,:focus-visible,:focus-within) a {
+	color: var(--color-focus);
 }
 
-.nav li:has(menu.a:is(:hover,:active,:focus,:target,:focus-visible,:focus-within)),.nav .dropdown:has( a:is(:hover,:active,:focus,:target,:focus-visible,:focus-within)),.nav .cbi-dropdown[open]:has(a:is(:hover,:active,:focus,:target,:focus-visible,:focus-within)) {
-	--focus-color-rgb: 82,168,0;
-	background: rgba(48,48,48,0.8);
-	backdrop-filter: blur(3.5px);
-	border: solid 1px rgba(var(--focus-color-rgb),0.6)!important;
-	outline: 0;
-	box-shadow: 0.25em 0em 0.5em rgba(0,0,0,0.8) ,inset 0 1px 3px hsla(var(--border-color-low-hsl),.01),0 -3px 8px rgba(var(--focus-color-rgb),0.6);
-	text-decoration: none;
-	border-radius: 0.35em 0.35em 0 0;
-	border-bottom: none !important;
-	color: var(--primary-color-medium);
-}
-
-.nav a.menu:is(:hover,:active,:focus.:focus-within,:focus-visible,:target), .nav a:has(.menu:is(:hover,:active,:focus.:focus-within,:focus-visible,:target)) {
-	--focus-color-rgb: 82,168,0;
-	background: rgba(48,48,48,0.8);
-	backdrop-filter: blur(3.5px);
-	border: solid 1px rgba(var(--focus-color-rgb),0.6)!important;
-	outline: 0;
-	box-shadow: 0.25em 0em 0.5em rgba(0,0,0,0.8) ,inset 0 1px 3px hsla(var(--border-color-low-hsl),.01),0 -3px 8px rgba(var(--focus-color-rgb),0.6);
-	text-decoration: none;
-	border-radius: 0.35em 0.35em 0 0;
-	border-bottom: none !important;
-	color: var(--primary-color-medium);
+.nav .active > a {
+	background-color: rgba(0,0,0,0.5)
 }
 
 .nav a.menu:is(:hover,:active,:focus.:focus-within,:focus-visible):after{
 	--focus-color-rgb: 82,168,0;
 	border-top: 4px solid rgba(var(--focus-color-rgb),0.6);
 	text-shadow: 0 1px 3px hsla(var(--border-color-low-hsl),.01),0 0 8px rgba(var(--focus-color-rgb),0.6);
+	
 }
 
 .nav .dropdown-menu {
@@ -1049,8 +1027,8 @@ a.menu:after {
 	float: none;
 	display: block;
 	background-color: transparent;
-	backdrop-filter: blur(2.5px);
 	position: relative;
+	backdrop-filter: blur(2.5px);
 }
 
 .dropdown-menu a {
@@ -1074,7 +1052,7 @@ a.menu:after {
 }
 
 .dropdown:is(:hover,:active,:focus.:focus-within,:focus-visible) ul.dropdown-menu {
-	left: 0
+	left: -1px;
 }
 
 .dropdown-menu .dropdown-menu {