SongBird Theme + Playlist Background For Every Theme

public/index.html

@@ -64,8 +64,11 @@
         <div id="downloadProgress"></div>   
     </div>
 
+    <div style="display: flex; gap: 20px;">
         <div id="downloadProgressText"></div> 
         <div id="downloadSpeedText"></div>
+    </div>
+
 
     <div id="downloadStatus"></div>
 

public/script/customthemes.js

@@ -4,6 +4,7 @@ const themes = {
   light:      { label: "Clair", subtitle: "Qui aime ce thème ?" },
   neon:       { label: "Néon", subtitle: "How was your day ?"},
   nf:         { label: "NF", subtitle: "You call it music, i call it my Therapist" },
+  songbird:     { label: "Songbird", subtitle: "From Her to Eternity" },
   drift:      { label: "Drift", subtitle: "Si la route t'appelle, contre appel" },
   fanatic:    { label: "Fanatic", subtitle: "Always Fnatic !" },
   chirac:     { label: "Chirac", subtitle: "J'aime les pommes" },

public/styles/components/progressBar.css

@@ -20,7 +20,7 @@
   transition: width 0.2s ease;
 }
 
-#downloadProgressText {
+#downloadProgressText, #downloadSpeedText {
   text-align: center;
   font-size: 0.8rem;
   color: #fff;
@@ -35,7 +35,7 @@
     height: 10px;
   }
 
-  #downloadProgressText {
+  #downloadProgressText, #downloadSpeedText {
     font-size: 0.7rem;
   }
 }

public/styles/layout/videoinfo.css

@@ -89,7 +89,7 @@
 
 /* Un item de playlist */
 #playlistVideos > div {
-  background: #3f3f3f;
+  background: var(--playlist-background-color);
   border-radius: 10px;
   padding: 10px;
   box-shadow: 0 4px 12px rgba(0,0,0,0.15);

public/styles/theme/chirac-theme.css

@@ -33,12 +33,15 @@ body.chirac {
   
   /* Video Info Box */
   --infos-box-color: rgba(255, 255, 255, 0.9);
-  --video-info-text-color: #002395;
+  --video-info-text-color: #000000;
   --video-info-heading-color: #EF4135;
   --video-info-list-color: #444444;
   --video-info-list-strong-color: #000000;
   --video-info-link-color: #002395;
   --video-info-link-hover-color: #EF4135;
+
+  /* Playlist Color */
+  --playlist-background-color: #d1d1d1ca;
 }
 
 

public/styles/theme/dark-theme.css

@@ -33,4 +33,7 @@ body.dark {
   --video-info-list-strong-color: #ffffff;
   --video-info-link-color: #2196f3;
   --video-info-link-hover-color: #1976d2;
+
+  /* Playlist Color */
+  --playlist-background-color: #303030;
 }

public/styles/theme/default-theme.css

@@ -26,13 +26,16 @@
   --download-status-color: #007bff;
 
   /* Video Info Box */
-  --infos-box-color: #f0f0f0;
+  --infos-box-color: #0c0140;
-  --video-info-text-color: #222222;
+  --video-info-text-color: #ffffff;
   --video-info-heading-color: #007bff;
   --video-info-list-color: #444444;
   --video-info-list-strong-color: #000000;
   --video-info-link-color: #007bff;
   --video-info-link-hover-color: #0056b3;
+
+  /* Playlist Color */
+  --playlist-background-color: #070823a3;
 }
 
 body.default .download-path #savePath {

public/styles/theme/drift-theme.css

@@ -32,16 +32,20 @@ body.drift {
     --download-status-color: #ff8e8e;
 
     /* Video Info Box */
-    --infos-box-color: #1e222a;
+    --infos-box-color: #1e222ad0;
     --video-info-text-color: #e8e8f0;
     --video-info-heading-color: #9ab6ff;
     --video-info-list-color: #c0d4ff;
     --video-info-list-strong-color: #ffffff;
     --video-info-link-color: #4c6cff;
     --video-info-link-hover-color: #6c8dff;
+
+    /* Playlist Color */
+    --playlist-background-color: #424b5cc2;
     }
 
 
+
 body.drift .download-path{
     color: #ededed;
 }

public/styles/theme/fanatic-theme.css

@@ -33,4 +33,7 @@ body.fanatic{
   --video-info-list-strong-color: #fff;
   --video-info-link-color: #FF5900;
   --video-info-link-hover-color: #e65500;
+
+  /* Playlist Color */
+  --playlist-background-color: #2b2b2b;
 }

public/styles/theme/light-theme.css

@@ -33,4 +33,7 @@ body.light {
   --video-info-list-strong-color: #000000;
   --video-info-link-color: #007bff;
   --video-info-link-hover-color: #0056b3;
+
+  /* Playlist Color */
+  --playlist-background-color: #c5c5c5b2;
 }

public/styles/theme/neon-theme.css

@@ -40,6 +40,9 @@ body.neon {
     --video-info-list-strong-color: #ffffff;
     --video-info-link-color: #5858f0;
     --video-info-link-hover-color: #7a7aff;
+
+    /* Playlist Color */
+    --playlist-background-color: #3e3e64;
 }
 
 body.neon .download-path {

public/styles/theme/nf-theme.css

@@ -39,6 +39,9 @@ body.nf {
   --video-info-list-strong-color: #ffffff;
   --video-info-link-color: #cbb89d;
   --video-info-link-hover-color: #b7a588;
+
+  /* Playlist Color */
+  --playlist-background-color: #4f4f4f;
 }
 
 body.nf .download-path {

public/styles/theme/songbird-theme.css

@@ -0,0 +1,49 @@
+body.songbird {
+
+  background-image: url('../../assets/images/Songbird.webp');
+  background-size: cover;
+  background-position: center center;
+  background-attachment: fixed;
+
+  /* Couleurs générales */
+  --background-color: #0a0a0a; /* noir profond */
+  --default-text-color: #ff2a2a; /* rouge néon */
+  --subtitle-color: #f2f2f2; /* rouge sombre */
+  --mp3-text-color: #ff4d4d; /* rouge un peu plus clair */
+
+  /* Formulaire */
+  --form-bg-color: rgba(20,0,0,0.85); /* noir semi-transparent avec rouge */
+  --form-input-bg-color: #1a0a0a;
+  --form-input-border-color: #ff2a2a;
+  --form-input-border-focus-color: #b30000;
+  --form-input-text-color: #ffffff;
+  --form-input-placeholder-color: #950404;
+  --form-button-bg-color: #b30000;
+  --form-button-text-color: #ffffff;
+  --form-button-bg-hover-color: #ff2a2a;
+
+  /* Checkbox */
+  --checkbox-bg-default: #630000;
+  --checkbox-bg-checked: #ff2a2a;
+  --checkbox-checkmark-border-color: #ffffff;
+  --checkbox-pulse-color: rgba(255,42,42,0.3);
+
+  /* Download status */
+  --download-status-color: #ff2a2a;
+
+  /* Video Info Box */
+  --infos-box-color: rgba(30,0,0,0.9);
+  --video-info-text-color: #ff4d4d;
+  --video-info-heading-color: #ff2a2a;
+  --video-info-list-color: #b30000;
+  --video-info-list-strong-color: #ffffff;
+  --video-info-link-color: #ff2a2a;
+  --video-info-link-hover-color: #b30000;
+
+  /* Playlist Color */
+  --playlist-background-color: #3f0000;
+}
+
+body.cyberpunk .download-path {
+  color: var(--default-text-color);
+}

public/styles/theme/themeimport.css

@@ -6,3 +6,4 @@
 @import url("nf-theme.css");
 @import url("drift-theme.css");
 @import url("neon-theme.css");
+@import url("songbird-theme.css");