From 206b98f5f84407bc5726cc29e4b26717ab1b9307 Mon Sep 17 00:00:00 2001
From: alistair3149 <alistair31494322@gmail.com>
Date: Thu, 11 Mar 2021 21:27:56 -0500
Subject: [PATCH] feat: update ULS styles

---
 .../ext.uls.common.less                       | 84 ++++++++++++++-----
 1 file changed, 63 insertions(+), 21 deletions(-)

diff --git a/skinStyles/extensions/UniversalLanguageSelector/ext.uls.common.less b/skinStyles/extensions/UniversalLanguageSelector/ext.uls.common.less
index a788a509..cf2150f6 100644
--- a/skinStyles/extensions/UniversalLanguageSelector/ext.uls.common.less
+++ b/skinStyles/extensions/UniversalLanguageSelector/ext.uls.common.less
@@ -6,31 +6,73 @@
 @import '../../../resources/variables.less';
 @import '../../../resources/mixins.less';
 
-// Need important to override
-.uls-menu {
-	border: 0 !important;
-	border-radius: 0;
-	.boxshadow(5)!important;
-}
+.skin-citizen {
+	.uls {
+		&-menu {
+			border-color: var( --border-color-base );
+			background-color: var( --background-color-dp-04 );
+			.boxshadow(5);
+		}
 
-.uls-search {
-	position: relative;
-	z-index: 1;
-	border: 0;
-	transition: @transition-box-shadow;
-	.boxshadow(2);
+		&-search {
+			position: relative;
+			border-color: var( --border-color-base );
+			background-color: var( --background-color-dp-08 );
+			transition: @transition-background-quick, @transition-box-shadow-quick;
+			.boxshadow(2);
 
-	&:focus-within {
-		.boxshadow(3);
+			&:focus-within {
+				background-color: var( --background-color-dp-12 );
+				.boxshadow(3);
+			}
+		}
+
+		&-filtersuggestion {
+			background: transparent;
+			color: var( --color-base--subtle );
+		}
+
+		&-languagefilter {
+			color: var( --color-base );
+		}
+
+		// Gotta fix this for mobile
+		&-narrow {
+			left: 0 !important;
+			width: 100% !important;
+		}
+
+		&-lcd {
+			background-color: var( --background-color-dp-04 );
+
+			&-region-title {
+				color: var( --color-base );
+			}
+		}
+
+		&-language-block {
+			> ul > li:hover {
+				background-color: var( --background-color-primary--hover );
+			}
+		}
+	}
+
+	#uls-settings-block {
+		border-color: var( --border-color-base );
+		background-color: var( --background-color-dp-04 );
 	}
 }
 
-// Gotta fix this for mobile
-.uls-narrow {
-	left: 0 !important;
-	width: 100% !important;
-}
+.skin-citizen-dark {
+	.uls {
+		&-search {
+			&-label {
+				filter: invert( 1 );
+			}
+		}
+	}
 
-#uls-settings-block {
-	border-color: @base-80 !important;
+	#uls-settings-block {
+		filter: invert( 1 );
+	}
 }