From b9f2b68596947340d28b6e1524099a76f039de34 Mon Sep 17 00:00:00 2001
From: xRangerDE <xRangerDE@24-music.de>
Date: Mon, 11 May 2026 01:36:32 +0200
Subject: [PATCH] feat+cleanup: active streamer highlight polish + dead
 scrollbar rule removed
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Active streamer state in the sidebar was a flat purple-tinted
background with a 3px left border. Felt slightly weak as the primary
"this is what you're looking at" affordance, especially with the
similarly-tinted hover state immediately next to it.

Bumped to:
- Gradient background fading purple-strong to purple-faint across
  the row, so the active item has a directional emphasis matching
  the rest of the Twitch-purple language.
- 1px inset purple ring on top so the active state reads as a
  clearly-bordered card, not just a tinted background.
- A small purple right-edge marker (3px wide, 60% tall, centered)
  drawn via ::after — mirrors the existing left border and makes
  the selected row feel "framed".
- Streamer name in the active row goes 600 weight so the identity
  pops over the meta toggles next to it.

Cleanup side: the old generic ::-webkit-scrollbar rule block from
the early days of the app was still in the file at line 1497, even
though the newer purple-themed *::-webkit-scrollbar block further
down has been overriding it for several releases (later wins on
identical specificity). Replaced the old block with a one-line
comment explaining where the live rule lives, so the next person
greping for "scrollbar" doesn't get a misleading hit.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/styles.css | 41 +++++++++++++++++++++++------------------
 1 file changed, 23 insertions(+), 18 deletions(-)

diff --git a/src/styles.css b/src/styles.css
index 39395c3..af30b48 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -126,9 +126,28 @@ body {
 }
 
 .streamer-item.active {
-    background: rgba(145, 71, 255, 0.2);
+    background: linear-gradient(90deg, rgba(145, 71, 255, 0.28) 0%, rgba(145, 71, 255, 0.08) 100%);
     color: var(--text);
     border-left: 3px solid var(--accent);
+    box-shadow: inset 0 0 0 1px rgba(145, 71, 255, 0.18);
+    position: relative;
+}
+
+.streamer-item.active::after {
+    content: '';
+    position: absolute;
+    right: 0;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 3px;
+    height: 60%;
+    background: var(--accent);
+    border-radius: 2px 0 0 2px;
+    opacity: 0.85;
+}
+
+.streamer-item.active .streamer-name {
+    font-weight: 600;
 }
 
 .streamer-item .remove {
@@ -1494,23 +1513,9 @@ select option {
 .status-dot.connected { background: var(--success); }
 .status-dot.error { background: var(--error); }
 
-/* Scrollbar */
-::-webkit-scrollbar {
-    width: 8px;
-}
-
-::-webkit-scrollbar-track {
-    background: transparent;
-}
-
-::-webkit-scrollbar-thumb {
-    background: rgba(255,255,255,0.15);
-    border-radius: 4px;
-}
-
-::-webkit-scrollbar-thumb:hover {
-    background: rgba(255,255,255,0.25);
-}
+/* Old generic scrollbar rules were dead — superseded by the
+   purple-themed *::-webkit-scrollbar block further down the file.
+   Removed to avoid confusion when someone greps for scrollbar styles. */
 
 /* Update Banner */
 .update-banner {