Select css update

Author: atomjoy

input/css/input-root.css

@@ -1,13 +1,14 @@
 :root {
 	color-scheme: light;
-	--wow-font-size: 20px;
+	--wow-font-family: var(--font-family);
+	--wow-font-size: 18px;
 	--wow-bg: #fff;
 	--wow-input-bg: #f6f6f6;
 	--wow-accent: #024ef9;
 	--wow-accent-light: #024ef922;
 	--wow-color: #272848;
 	--wow-label: #272848; /* #79848f; #1d1d27; */
-	--wow-placeholder: #dfe0ea; /* #7e7e90; */
+	--wow-placeholder: #7e7e90; /* #dfe0ea; #7e7e90; */
 	--wow-border: #e2e3ee;
 	--wow-padding: 1em 1.3em;
 	--wow-border-radius: 10px;
@@ -21,14 +22,14 @@
 @media (prefers-color-scheme: dark) {
 	:root {
 		color-scheme: dark;
-		--wow-bg: #262833;
-		--wow-input-bg: #242732;
+		--wow-bg: #1e2128;
+		--wow-input-bg: #22252c;
 		--wow-accent: #024ef9;
 		--wow-accent-light: #024ef922;
 		--wow-color: #ffffff;
-		--wow-label: #79848f;
+		--wow-label: #ebebec;
 		--wow-placeholder: #353842;
-		--wow-border: #353842;
+		--wow-border: #303038;
 		--wow-padding: 1em 1.3em;
 		--wow-border-radius: 10px;
 		--wow-border-hover: #2d2f36;
@@ -37,11 +38,6 @@
 		--wow-scroll-bg: #22242e;
 		--wow-icon: #353842;
 	}
-
-	html,
-	body {
-		background: var(--wow-bg);
-	}
 }
 
 [color-scheme='light'] {
@@ -65,14 +61,14 @@
 
 [color-scheme='dark'] {
 	color-scheme: dark;
-	--wow-bg: #262833;
-	--wow-input-bg: #242732;
+	--wow-bg: #1e2128;
+	--wow-input-bg: #22252c;
 	--wow-accent: #024ef9;
 	--wow-accent-light: #024ef922;
 	--wow-color: #ffffff;
-	--wow-label: #79848f;
+	--wow-label: #ebebec;
 	--wow-placeholder: #353842;
-	--wow-border: #353842;
+	--wow-border: #303038;
 	--wow-padding: 1em 1.3em;
 	--wow-border-radius: 10px;
 	--wow-border-hover: #2d2f36;
@@ -84,13 +80,13 @@
 
 @media (max-width: 1600px) {
 	:root {
-		--wow-font-size: 18px;
+		--wow-font-size: 16px;
 	}
 }
 
 @media (max-width: 1280px) {
 	:root {
-		--wow-font-size: 16px;
+		--wow-font-size: 14px;
 	}
 }
 
@@ -111,3 +107,7 @@
 label i {
 	float: right;
 }
+
+h1.full {
+	text-align: left;
+}

input/css/input.css

@@ -16,10 +16,9 @@ label {
 	float: left;
 	width: 100%;
 	background: transparent;
-	margin-bottom: 13px;
-	margin-bottom: 10px;
 	font-weight: 600;
-	font-size: 0.9em;
+	font-size: 1em;
+	line-height: 2.5;
 	color: var(--wow-label);
 }
 
@@ -37,6 +36,7 @@ textarea {
 	border-radius: var(--wow-border-radius);
 	border: 1px solid var(--wow-border);
 	background: var(--wow-input-bg);
+	font-family: var(--wow-font-family);
 }
 
 input:hover,
@@ -76,10 +76,10 @@ option {
 
 .password-helper {
 	position: absolute;
-	width: 250px;
+	width: 230px;
 	right: 0px;
-	top: -155px;
-	padding: 20px;
+	top: -100px;
+	padding: 10px;
 	background: var(--wow-bg);
 	border: 1px solid var(--wow-border);
 	box-shadow: 0px 1px 3px rgb(0, 0, 0, 0.1);
@@ -93,7 +93,7 @@ option {
 	display: flex;
 	align-items: center;
 	margin-bottom: 3px;
-	font-size: 12px !important;
+	font-size: 11px !important;
 }
 
 .password-helper-hidden {
@@ -106,15 +106,13 @@ option {
 	stroke: currentColor;
 	border-radius: 50%;
 	padding: 1px;
-	width: 24px;
-	height: 24px;
-	background: #d50012;
-	color: #fff;
+	width: 14px;
+	height: 14px;
+	color: #d50012;
 }
 
 .password-helper .green {
-	color: #fff;
-	background: #55cc55;
+	color: #55cc55;
 }
 
 .pass-box {
@@ -247,13 +245,14 @@ option {
 
 .custom-select .items {
 	color: var(--wow-color);
-	max-height: 350px;
+	max-height: 200px;
+	min-height: 200px;
 	width: 100%;
 	overflow-y: auto;
 	box-sizing: border-box;
 	scrollbar-width: thin;
 	scrollbar-color: var(--wow-scroll-thumb) var(--wow-scroll-bg);
-	z-index: 0;
+	z-index: 1;
 }
 
 .custom-select .items::-webkit-scrollbar {
@@ -270,7 +269,8 @@ option {
 	padding: var(--wow-padding);
 	cursor: pointer;
 	user-select: none;
-	font-size: 0.9em;
+	font-size: 1em;
+	font-weight: 400;
 }
 
 .custom-select .items div:hover {
@@ -282,10 +282,18 @@ option {
 	background: var(--wow-accent);
 }
 
-.selectHide {
+.selectHide-old {
 	display: none;
 }
 
+.custom-select .rounded {
+	display: none;
+}
+
+.custom-select-open .rounded {
+	display: inherit !important;
+}
+
 .highlight {
 	align-items: center;
 	background: var(--wow-accent-light);