From 810c2140c9f6d4a185e2f754099c43cc7658e90d Mon Sep 17 00:00:00 2001
From: Gazook89 <John.W.Jones89@gmail.com>
Date: Sun, 13 Oct 2024 20:45:05 -0500
Subject: [PATCH] move some toolbar specific styling to toolbar.less

---
 client/components/Anchored.less               | 47 +---------------
 .../brewRenderer/toolBar/toolBar.less         | 55 +++++++++++++++++--
 2 files changed, 52 insertions(+), 50 deletions(-)

diff --git a/client/components/Anchored.less b/client/components/Anchored.less
index 69fa2d9c1..4f0e2fa8f 100644
--- a/client/components/Anchored.less
+++ b/client/components/Anchored.less
@@ -1,12 +1,7 @@
-.anchored-trigger {
-	&.active {
-		background-color: #444444;
-	}
-}
+
 
 .anchored-box {
 	position:absolute;
-	top: 30px;
 	@supports (inset-block-start: anchor(bottom)){
 		inset-block-start: anchor(bottom);
 	}
@@ -15,44 +10,4 @@
 	&.active {
 		visibility: visible;
 	}
-	padding          : 15px;
-	color            : white;
-	background-color : #555555;
-	border-radius    : 5px;
-	font-size        : .8em;
-	margin-top       : 10px;
-
-	h1 {
-		border-bottom: 1px solid currentColor;
-		margin-bottom: 0.5em;
-		padding-bottom: 0.3em;
-	}
-
-	h2 {
-		color: lightgray;
-		border-bottom: 1px solid currentColor;
-		margin: 1em 0 0.5em 0;
-		padding-bottom: 0.3em;
-	}
-
-	label {
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		gap: 6px;
-
-	}
-
-	&:before {
-		content: "";
-		width: 0px;
-		height: 0px;
-		position: absolute;
-		border: 10px solid transparent;
-		border-bottom: 10px solid #555555;
-		left: 50%;
-		transform: translateX(-50%);
-		top: -20px;
-		pointer-events: none;
-	  }
 }
\ No newline at end of file
diff --git a/client/homebrew/brewRenderer/toolBar/toolBar.less b/client/homebrew/brewRenderer/toolBar/toolBar.less
index 010964d7c..aa0301320 100644
--- a/client/homebrew/brewRenderer/toolBar/toolBar.less
+++ b/client/homebrew/brewRenderer/toolBar/toolBar.less
@@ -38,17 +38,64 @@
 		background-color: #444;
 	}
 
+	.anchored-trigger {
+		&.active {
+			background-color: #444444;
+		}
+	}
+
 	.anchored-box {
-		color: #CCCCCC;
-		display: flex;
-		flex-direction: column;
-		gap: 5px;
+		--box-color      : #555555;
+		top              : 30px;
+		display          : flex;
+		flex-direction   : column;
+		gap              : 5px;
+		padding          : 15px;
+		margin-top       : 10px;
+		font-size        : .8em;
+		color            : #CCCCCC;
+		background-color : var(--box-color);
+		border-radius    : 5px;
+	
+		h1 {
+			border-bottom: 1px solid currentColor;
+			margin-bottom: 0.5em;
+			padding-bottom: 0.3em;
+		}
+	
+		h2 {
+			color: lightgray;
+			border-bottom: 1px solid currentColor;
+			margin: 1em 0 0.5em 0;
+			padding-bottom: 0.3em;
+		}
+	
+		label {
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			gap: 6px;
+	
+		}
 		input{
 			height: unset;
 			&[type='range'] {
 				padding: 0;
 			}
 		}
+		&:before {
+			content: "";
+			width: 0px;
+			height: 0px;
+			position: absolute;
+			border: 10px solid transparent;
+			border-bottom: 10px solid var(--box-color);
+			left: 50%;
+			transform: translateX(-50%);
+			top: -20px;
+			pointer-events: none;
+		  }
+
 	}
 
 	.radio-group:has(button[role='radio']){