feat+cleanup: active streamer highlight polish + dead scrollbar rule removed
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>
This commit is contained in:
parent
c7d0bb7e30
commit
b9f2b68596
@ -126,9 +126,28 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.streamer-item.active {
|
.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);
|
color: var(--text);
|
||||||
border-left: 3px solid var(--accent);
|
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 {
|
.streamer-item .remove {
|
||||||
@ -1494,23 +1513,9 @@ select option {
|
|||||||
.status-dot.connected { background: var(--success); }
|
.status-dot.connected { background: var(--success); }
|
||||||
.status-dot.error { background: var(--error); }
|
.status-dot.error { background: var(--error); }
|
||||||
|
|
||||||
/* Scrollbar */
|
/* Old generic scrollbar rules were dead — superseded by the
|
||||||
::-webkit-scrollbar {
|
purple-themed *::-webkit-scrollbar block further down the file.
|
||||||
width: 8px;
|
Removed to avoid confusion when someone greps for scrollbar styles. */
|
||||||
}
|
|
||||||
|
|
||||||
::-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);
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Update Banner */
|
/* Update Banner */
|
||||||
.update-banner {
|
.update-banner {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user