Compare commits

...

2 Commits

Author SHA1 Message Date
xRangerDE
fdeb1697de release: 4.6.28 active streamer highlight + dead scrollbar cleanup
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
2026-05-11 01:36:32 +02:00
xRangerDE
b9f2b68596 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>
2026-05-11 01:36:32 +02:00
3 changed files with 26 additions and 21 deletions

4
package-lock.json generated
View File

@ -1,12 +1,12 @@
{ {
"name": "twitch-vod-manager", "name": "twitch-vod-manager",
"version": "4.6.27", "version": "4.6.28",
"lockfileVersion": 3, "lockfileVersion": 3,
"requires": true, "requires": true,
"packages": { "packages": {
"": { "": {
"name": "twitch-vod-manager", "name": "twitch-vod-manager",
"version": "4.6.27", "version": "4.6.28",
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"axios": "^1.6.0", "axios": "^1.6.0",

View File

@ -1,6 +1,6 @@
{ {
"name": "twitch-vod-manager", "name": "twitch-vod-manager",
"version": "4.6.27", "version": "4.6.28",
"description": "Twitch VOD Manager - Download Twitch VODs easily", "description": "Twitch VOD Manager - Download Twitch VODs easily",
"main": "dist/main.js", "main": "dist/main.js",
"author": "xRangerDE", "author": "xRangerDE",

View File

@ -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 {