From ead00ca79b8c65ee48340882ead7d7e391b69054 Mon Sep 17 00:00:00 2001
From: refact0r <yifanw06@gmail.com>
Date: Sat, 22 Jun 2024 12:33:50 -0700
Subject: [PATCH] fix typing border and add transition

---
 system24.css       | 61 ++++++++++++++++++++++++++++------------------
 system24.theme.css | 14 ++++++-----
 2 files changed, 45 insertions(+), 30 deletions(-)

diff --git a/system24.css b/system24.css
index cc4eb65..d3de4de 100644
--- a/system24.css
+++ b/system24.css
@@ -31,7 +31,13 @@
 	--mention-hover-overlay: color-mix(in srgb, var(--purple), transparent 95%);
 	--reply-overlay: var(--active);
 	--reply-hover-overlay: var(--hover);
-	--panel-hover: var(--purple);
+
+	--online-dot: var(--green);
+	--dnd-dot: var(--pink);
+	--idle-dot: var(--yellow);
+
+	--hover-border: var(--purple);
+	--hover-border-transition: 0.2s ease;
 
 	--pink: oklch(73% 0.12 0);
 	--pink-1: oklch(63% 0.12 0);
@@ -41,10 +47,6 @@
 	--purple-2: oklch(53% 0.12 300);
 	--yellow: oklch(78% 0.12 80);
 	--green: oklch(73% 0.12 160);
-
-	--online-dot: var(--green);
-	--dnd-dot: var(--pink);
-	--idle-dot: var(--yellow);
 }
 
 :root {
@@ -181,6 +183,7 @@ rect[fill='#f0b232'] {
 [class^=searchResultsWrap_] /* search results */,
 .scroller_fb4810 /* new thread */ {
 	border: 2px solid var(--bg-3);
+	transition: border-color var(--hover-border-transition);
 }
 /* adjust border thickness */
 #vc-spotify-player,
@@ -188,29 +191,37 @@ rect[fill='#f0b232'] {
 [class^=panels_] > [class^=panel_] /* streaming panel */ {
 	border-width: 2px;
 }
+/* remove borders */
+[class^='dot_'][class*='maskSecondary_'] {
+	border: none;
+}
+
 /* border hover effect */
-[class^=panels_],
-[class^=sidebar_] > [class^=container_],
-[class^=chatContent_] > [class^=messagesWrapper_],
-[class^=membersWrap_],
-[class*=guilds_],
-[class^=privateChannels_],
+[class^='panels_'],
+[class^='sidebar_'] > [class^='container_'],
+[class^='chatContent_'] > [class^='messagesWrapper_'],
+[class^='membersWrap_'],
+[class*='guilds_'],
+[class^='privateChannels_'],
 .container_e44302,
-[class^=peopleColumn_], [class^=nowPlayingColumn_],
-[class^=form_] [class^=channelTextArea_],
+[class^='peopleColumn_'],
+[class^='nowPlayingColumn_'],
+[class^='form_'] [class^='channelTextArea_'],
 .container_a6d69a,
-[class^=profilePanel_], [class^=searchResultsWrap_],
+[class^='profilePanel_'],
+[class^='searchResultsWrap_'],
 .scroller_fb4810 {
-  &:hover {
-    border: 2px solid var(--panel-hover);
-    &::after {
-      color: var(--panel-hover);
-    }
-  }
-}
-/* remove borders */
-[class^='dot_'][class*='maskSecondary_'] {
-	border: none;
+	&:hover {
+		border-color: var(--hover-border);
+		&::after {
+			color: var(--hover-border);
+		}
+	}
+}
+[class^='chatContent_']:has([class^='messagesWrapper_']:hover) {
+	[class^='typing_'] {
+		border-color: var(--hover-border);
+	}
 }
 
 /* move chat bar out */
@@ -242,6 +253,7 @@ rect[fill='#f0b232'] {
 	position: static;
 	border: 2px solid var(--bg-3);
 	border-top: none;
+	transition: border-color var(--hover-border-transition);
 }
 [class^='chatContent_']:has([class^='typing_']) > [class^='messagesWrapper_'] {
 	border-bottom: none;
@@ -288,6 +300,7 @@ rect[fill='#f0b232'] {
 	background-color: var(--bg-0);
 	padding: 0 4px;
 	z-index: 100;
+	transition: color var(--hover-border-transition);
 }
 [class^='sidebar_'] > [class^='container_']::after {
 	content: 'server';
diff --git a/system24.theme.css b/system24.theme.css
index 5e11aae..9b5ecce 100644
--- a/system24.theme.css
+++ b/system24.theme.css
@@ -44,7 +44,13 @@
 	--mention-hover-overlay: color-mix(in srgb, var(--purple), transparent 95%);
 	--reply-overlay: var(--active);
 	--reply-hover-overlay: var(--hover);
-	--panel-hover: var(--purple); /* set to --bg-3 to disable */
+
+	--online-dot: var(--green);
+	--dnd-dot: var(--pink);
+	--idle-dot: var(--yellow);
+
+	--hover-border: var(--purple);
+	--hover-border-transition: 0.2s ease;
 
 	--pink: oklch(73% 0.12 0);
 	--pink-1: oklch(63% 0.12 0);
@@ -52,10 +58,6 @@
 	--purple: oklch(73% 0.12 300);
 	--purple-1: oklch(63% 0.12 300);
 	--purple-2: oklch(53% 0.12 300);
-	--yellow: oklch(73% 0.12 80);
+	--yellow: oklch(78% 0.12 80);
 	--green: oklch(73% 0.12 160);
-
-	--online-dot: var(--green);
-	--dnd-dot: var(--pink);
-	--idle-dot: var(--yellow);
 }