fix typing border and add transition

refact0r · Jun 22, 2024 · ead00ca · ead00ca
1 parent 1b71fe1
commit ead00ca
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 30 deletions.
diff --git 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,36 +183,45 @@ 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,
 [class^=panels_] > [class^=wrapper_] > [class^=container] /* vc panel */,
 [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
@@ -44,18 +44,20 @@
 	--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);
 	--pink-2: oklch(53% 0.12 0);
 	--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);
 }