From ba685e3aa5c59fcd0ae562ed83096b09a71bf87a Mon Sep 17 00:00:00 2001
From: ebolam <ebolam@gmail.com>
Date: Sun, 27 Nov 2022 11:33:54 -0500
Subject: [PATCH] Option Pin Visual Cleanup

---
 static/koboldai.css | 17 +++++++++++++++++
 static/koboldai.js  |  3 +++
 2 files changed, 20 insertions(+)

diff --git a/static/koboldai.css b/static/koboldai.css
index 74dea16c..07f96011 100644
--- a/static/koboldai.css
+++ b/static/koboldai.css
@@ -3120,4 +3120,21 @@ select {
 
 #tts[system_experimental_features="false"] {
 	display: none;
+}
+
+.rotate_45 {
+	transform: rotate(45deg);
+	transform-origin: left;
+}
+
+.material-icons-outlined.cursor.rotate_45.pin:hover{
+	transform: rotate(0deg);
+	transform-origin: left;
+	filter: brightness(100%);
+}
+
+.material-icons-outlined.cursor.pin:hover{
+	transform: rotate(45deg);
+	transform-origin: left;
+	filter: brightness(100%);
 }
\ No newline at end of file
diff --git a/static/koboldai.js b/static/koboldai.js
index fcf75bef..0353ff01 100644
--- a/static/koboldai.js
+++ b/static/koboldai.js
@@ -360,9 +360,12 @@ function create_options(action) {
 			icon.classList.add("material-icons-outlined");
 			icon.classList.add("option_icon");
 			icon.classList.add("cursor");
+			icon.classList.add("pin");
 			icon.textContent = "push_pin";
 			if (!(item.Pinned)) {
 				icon.setAttribute('style', "filter: brightness(50%);");
+			} else {
+				icon.classList.add('rotate_45');
 			}
 			iconcell.append(icon);
 			iconcell.onclick = function () {