From f58217280a3d0fff76ad9a3c73c499dbdb746406 Mon Sep 17 00:00:00 2001
From: TheDevRyan <175502913+The-Dev-Ryan@users.noreply.github.com>
Date: Sat, 25 Oct 2025 16:25:32 +0100
Subject: [PATCH] Update dropdown styling (Light/DarkMode) (#7382)

---
 public/styles/style-bootstrap.css | 61 +++++++++++++++++++++++--------
 1 file changed, 46 insertions(+), 15 deletions(-)

diff --git a/public/styles/style-bootstrap.css b/public/styles/style-bootstrap.css
index d1ccf94b..d28d5f2c 100644
--- a/public/styles/style-bootstrap.css
+++ b/public/styles/style-bootstrap.css
@@ -3432,7 +3432,6 @@ nav .lbbuttonsel2 {
     }
     
     .userDropdownSubmenu .userDropdownMenuItem {
-        background-color: #f5f5f5;
         border-left: 3px solid #444444 !important;
     }
     .userDropdownMenuItem:hover {
@@ -3470,7 +3469,6 @@ nav .lbbuttonsel2 {
         flex-direction: column !important;
     } */
 }
-
 /* css fixes for select2 */
 /* .select2-container--bootstrap-5 .select2-selection--multiple .select2-selection__rendered {
     display: inline;
@@ -3528,14 +3526,15 @@ nav .lbbuttonsel2 {
 	position: absolute;
 	top: 100%;
 	right: 0;
-	background-color: #ffffff;
-	box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.3);
-	border-radius: 4px;
+	background-color: #f3f3f3;
+	box-shadow: 0 0 12px #0000004d;
+	border-radius: 10px;
 	z-index: 10000;
 	min-width: 200px;
 	margin-top: 4px;
 	transform: translateX(0);
 	font-family: sans-serif;
+	font-size: small;
 }
 
 #userDropdownMenuContainer {
@@ -3548,13 +3547,14 @@ nav .lbbuttonsel2 {
 	gap: 10px;
 	padding: 10px 12px;
 	cursor: pointer;
-	color: #333;
+	color: var(--bs-body-color);
 	white-space: nowrap;
 	transition: background-color 0.15s ease;
+	font-size: small;
 }
 
 .userDropdownMenuItem:hover {
-	background-color: #f5f5f5;
+	background-color: #8181814a;
 	border-radius: 4px;
 }
 
@@ -3568,27 +3568,32 @@ nav .lbbuttonsel2 {
 .userDropdownMenuItem span {
 	flex-grow: 1;
 	text-align: left;
-	color: #333;
-	font-size: 14px;
+	font-size: small;
 	line-height: 1.2;
 }
 
 #userDropdownMenuDivider {
-	border-top: 1px solid #eee;
+	border-top: var(--bs-border-width) solid #000000;
+    opacity: .25;
 	margin: 4px 0;
 }
 
+.night #userDropdownMenuDivider {
+    border-top: var(--bs-border-width) solid;
+}
+
 .userDropdownSubmenu {
 	position: absolute;
 	right: 96%;
 	top: 0;
-	background-color: #ffffff;
-	box-shadow: 0px 4px 12px rgb(0 0 0 / 95%);
-	border-radius: 4px;
+	background-color: #f3f3f3;
+	box-shadow: 0 0 12px #0000004d;
+	border-radius: 10px;
 	margin-right: 4px;
 	min-width: 200px;
 	z-index: 10001;
 	padding: 6px 0;
+	font-size: small;
 }
 
 .userDropdownSubmenu .userDropdownMenuItem {
@@ -3596,11 +3601,10 @@ nav .lbbuttonsel2 {
 	align-items: center;
 	gap: 10px;
 	padding: 10px 12px;
-	color: #333;
 }
 
 .userDropdownSubmenu .userDropdownMenuItem:hover {
-	background-color: #f5f5f5;
+	background-color: #8181814a;
 	border-radius: 4px;
 }
 
@@ -3621,7 +3625,34 @@ nav .lbbuttonsel2 {
 	height: 14px;
 	opacity: 0.7;
 }
+.night #userDropdownMenu, .night .userDropdownSubmenu {
+	background-color: #292c2c;
+}
 
 body:not(.fullscreen) #userDropdown {
     right: calc(50vw - 470px);
+}
+@media (min-width: 1025px) {
+    .userDropdownSubmenu {
+        display: block !important;
+        position: absolute;
+        opacity: 0;
+        transform: translateX(12px);
+        transition: opacity 0.2s ease, transform 0.3s ease;
+        pointer-events: none;
+    }
+    
+    .userDropdownUISettings:hover + .userDropdownSubmenu,
+    .userDropdownSubmenu:hover,
+    .userDropdownMenuItem:hover .userDropdownSubmenu {
+        display: block !important;
+        opacity: 1;
+        transform: translateX(0);
+        pointer-events: auto;
+    }
+    .userDropdownUISettings:hover .fa-chevron-right,
+    .userDropdownUISettings:has(+ .userDropdownSubmenu:hover) .fa-chevron-right {
+        transform: rotate(90deg) !important;
+        transition: transform 0.3s ease;
+    }
 }
\ No newline at end of file