release: 4.6.48 update-banner progress bar CSS extraction

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
cleanup: update-banner progress bar — extract inline styles
2026-05-11 03:08:00 +02:00 · 2026-05-11 03:07:59 +02:00
4 changed files with 27 additions and 6 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -1,12 +1,12 @@
 {
  "name": "twitch-vod-manager",
-  "version": "4.6.47",
+  "version": "4.6.48",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "twitch-vod-manager",
-      "version": "4.6.47",
+      "version": "4.6.48",
      "license": "MIT",
      "dependencies": {
        "axios": "^1.6.0",
--- a/package.json
+++ b/package.json
@ -1,6 +1,6 @@
 {
  "name": "twitch-vod-manager",
-  "version": "4.6.47",
+  "version": "4.6.48",
  "description": "Twitch VOD Manager - Download Twitch VODs easily",
  "main": "dist/main.js",
  "author": "xRangerDE",
--- a/src/index.html
+++ b/src/index.html
@ -10,9 +10,9 @@
 <body class="theme-twitch">
    <div class="update-banner" id="updateBanner">
        <span id="updateText">Neue Version verfügbar!</span>
-        <div id="updateProgress" style="display: none; flex: 1; margin: 0 15px;">
-            <div style="background: rgba(0,0,0,0.3); border-radius: 4px; height: 8px; overflow: hidden;">
-                <div id="updateProgressBar" style="background: white; height: 100%; width: 0%; transition: width 0.3s;"></div>
+        <div id="updateProgress" class="update-banner-progress-wrap" style="display: none;">
+            <div class="update-banner-progress-track">
+                <div id="updateProgressBar" class="update-banner-progress-bar"></div>
            </div>
        </div>
        <button id="updateButton" onclick="downloadUpdate()">Jetzt herunterladen</button>
--- a/src/styles.css
+++ b/src/styles.css
@ -2037,6 +2037,27 @@ select option {
    cursor: not-allowed;
 }

+/* Update-banner download progress — sits between the message and
+   the button, fills as the update download runs. */
+.update-banner-progress-wrap {
+    flex: 1;
+    margin: 0 15px;
+}
+
+.update-banner-progress-track {
+    background: rgba(0, 0, 0, 0.3);
+    border-radius: 4px;
+    height: 8px;
+    overflow: hidden;
+}
+
+.update-banner-progress-bar {
+    background: #fff;
+    height: 100%;
+    width: 0%;
+    transition: width 0.3s ease-out;
+}
+
 .update-modal {
    max-width: 680px;
    border: 1px solid rgba(255, 255, 255, 0.08);