From 9a36814b0bb0791f93441ba205e3389849b4f2d9 Mon Sep 17 00:00:00 2001
From: xRangerDE <xRangerDE@24-music.de>
Date: Mon, 11 May 2026 09:22:11 +0200
Subject: [PATCH] =?UTF-8?q?cleanup:=20VOD-card=20skeleton=20line=20variant?=
 =?UTF-8?q?s=20=E2=80=94=203=20inline=20styles=20gone?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

The 6-placeholder VOD-card skeleton (shown while VODs load) had three lines per card with inline width/height/margin-top declarations:
- title line: 85% wide
- first meta line: 55% wide, 10px tall, 8px gap above
- second meta line: 40% wide, 10px tall, 6px gap above

Extracted into .vod-skel-line.title / .meta-1 / .meta-2 variants — the layout-defining values live next to the base .vod-skel-line rule. Matches the same approach as the .streamer-profile-skel-block variants from 4.6.123.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---
 src/renderer-streamers.ts | 6 +++---
 src/styles.css            | 7 +++++++
 2 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/src/renderer-streamers.ts b/src/renderer-streamers.ts
index dcb0e99..d352fd7 100644
--- a/src/renderer-streamers.ts
+++ b/src/renderer-streamers.ts
@@ -778,9 +778,9 @@ async function selectStreamer(name: string, forceRefresh = false): Promise<void>
         <div class="vod-card vod-card-skeleton">
             <div class="vod-skel-thumb"></div>
             <div class="vod-info">
-                <div class="vod-skel-line" style="width: 85%;"></div>
-                <div class="vod-skel-line" style="width: 55%; margin-top: 8px; height: 10px;"></div>
-                <div class="vod-skel-line" style="width: 40%; margin-top: 6px; height: 10px;"></div>
+                <div class="vod-skel-line title"></div>
+                <div class="vod-skel-line meta-1"></div>
+                <div class="vod-skel-line meta-2"></div>
             </div>
         </div>
     `).join('');
diff --git a/src/styles.css b/src/styles.css
index 786f816..c6ed1b0 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -562,6 +562,13 @@ body {
     animation: skel-shimmer 1.5s linear infinite;
 }
 
+/* Three skeleton-line variants for the VOD card placeholder — match
+   the visual rhythm of a real card (title line, then two shorter
+   meta lines). Replaces inline width/height/margin-top declarations. */
+.vod-card-skeleton .vod-skel-line.title  { width: 85%; }
+.vod-card-skeleton .vod-skel-line.meta-1 { width: 55%; height: 10px; margin-top: 8px; }
+.vod-card-skeleton .vod-skel-line.meta-2 { width: 40%; height: 10px; margin-top: 6px; }
+
 @keyframes skel-shimmer {
     0%   { background-position: 200% 0; }
     100% { background-position: -200% 0; }