Refactor: Update CSS variables

Fix Progress bar
2026-07-29 18:25:47 +02:00 · 2026-04-11 15:17:05 +02:00
parent 24460cf0b5
commit 00c542925c
20 changed files with 165 additions and 120 deletions
--- a/public/styles/components/checkbox.css
+++ b/public/styles/components/checkbox.css
@@ -15,13 +15,13 @@
 }

 .checkmark {
-  --clr: var(--checkbox-bg-checked);
+  --clr: var(--checkbox-checked-bg-color);
  position: relative;
  top: 0;
  left: 0;
  height: 1.3em;
  width: 1.3em;
-  background-color: var(--checkbox-bg-default);
+  background-color: var(--checkbox-unchecked-bg-color);
  border-radius: .5rem;
  transition: background-color 300ms, border-radius 300ms;
 }
--- a/public/styles/components/loader.css
+++ b/public/styles/components/loader.css
@@ -4,9 +4,9 @@
  gap: 10px;
  padding: 10px 20px;
  background: var(--form-bg-color);
-  border: 2px solid var(--mp3-text-color);
+  border: 2px solid var(--audio-only-label-color);
  border-radius: 8px;
-  color: var(--mp3-text-color);
+  color: var(--audio-only-label-color);
  font-weight: bold;
  animation: pulse 1.2s infinite;
 }
--- a/public/styles/components/progressBar.css
+++ b/public/styles/components/progressBar.css
@@ -1,22 +1,34 @@
+/* Container pour isoler la progress bar */
+.progress-container {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 8px;
+  padding: 10px 0;
+  margin-top: 20px;
+}
+
 /* Wrapper de la barre de téléchargement */
 #downloadProgressWrapper {
  width: 100%;
  max-width: 400px;
  height: 12px;
-  background-color: #444;
-  border-radius: 6px;
+  background-color: var(--progress-bar-bg-color, #cccccc);
+  border-radius: 10px;
  overflow: hidden;
-  margin: 10px auto;
+  margin: 0;
  display: none;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
+  box-sizing: border-box;
 }

 /* Barre de progression */
 #downloadProgress {
  height: 100%;
  width: 0%;
-  background-color: var(--video-info-link-color, #4caf50);
-  border-radius: 6px 0 0 6px;
+  background-color: var(--progress-bar-fill-color, #007bff);
+  border-radius: 10px;
  transition: width 0.2s ease;
 }

--- a/public/styles/layout/form.css
+++ b/public/styles/layout/form.css
@@ -50,7 +50,7 @@ form#downloadForm {
    align-items: center;
    align-self: center;
    gap: 0.5em;
-    color: var(--form-input-text-color);
+    color: var(--audio-only-label-color);
 }

 #UrlInput {
@@ -108,6 +108,7 @@ form#downloadForm {
 }

 .paste-btn svg {
+    color: var(--paste-button-icon-color);
    width: 30px;
    height: 30px;
 }
--- a/public/styles/layout/header.css
+++ b/public/styles/layout/header.css
@@ -1,11 +1,13 @@
 header {
+    position: fixed;
+    top: 0;
+    width: 100%;
+    height: 48px;
+    z-index: 1100;
    display: flex;
-    flex-direction: column;
-    align-items: center;  
-    margin-bottom: 2vw;
+    align-items: center;
 }

-
-header h1{
-    margin-bottom: 0.2vw;
+#title {
+    color: var(--default-text-color);
 }
--- a/public/styles/layout/settingsPanel.css
+++ b/public/styles/layout/settingsPanel.css
@@ -40,7 +40,7 @@
    width: 40vw;
    max-width: 320px;
    max-height: 80vh;
-    background-color: var(--settings-bg-primary-color);
+    background-color: var(--settings-modal-bg-color);
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
@@ -89,7 +89,7 @@
    flex-direction: column;
    margin-bottom: 20px;
    padding: 10px 15px;
-    background: var(--settings-bg-secondary-color);
+    background: var(--settings-section-bg-color);
    border-radius: 12px;
    gap: 6px;
 }
--- a/public/styles/layout/topbar.css
+++ b/public/styles/layout/topbar.css
@@ -2,20 +2,12 @@
  display: flex;
  align-items: center;
  justify-content: space-between;
-
-  position: fixed;
-  top: 0;
-  z-index: 1100;
-
-  height: 48px;
  width: 100%;
-
+  height: 100%;
  background: #1f1f1f98;
  color: #eaeaea;
-
  -webkit-app-region: drag;
  user-select: none;
-
 }

 /* LEFT - custom buttons */
--- a/public/styles/layout/videoinfo.css
+++ b/public/styles/layout/videoinfo.css
@@ -4,7 +4,7 @@
  margin-left: auto;
  margin-right: auto;
  padding: 1.5em 2em;
-  background-color: var(--infos-box-color);
+  background-color: var(--video-info-bg-color);
  border-radius: 12px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.1);
  color: var(--video-info-text-color);
--- a/public/styles/styles.css
+++ b/public/styles/styles.css
@@ -1,18 +1,20 @@
 /* Layout */
-@import url("layout/form.css");
-@import url("layout/settingsPanel.css");
-@import url("layout/container.css");
+@import url("layout/topbar.css");
@import url("layout/header.css");
+@import url("layout/form.css");
+@import url("layout/container.css");
+@import url("layout/settingsPanel.css");
@import url("layout/videoinfo.css");

 /* Components */
@import url("components/checkbox.css");
@import url("components/loader.css");
-
-@import url("theme/themeimport.css");
@import url("components/editpathbutton.css");
@import url("components/progressBar.css");

+/* Themes */
+@import url("theme/themeimport.css");
+
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

 #app {
@@ -45,21 +47,9 @@ html,body{
    font-style: normal;
 }

-html {
-    height: 100%;
-}
-
-body {
-    margin: 0;
-    padding: 0;
-    background-color: var(--background-color);
-    width: 100%;
-    height: 100%;
-    color: var(--default-text-color);
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    position: relative;
+body{
+  background-color: var(--background-color);
+  color: var(--default-text-color);
 }

 header {
@@ -81,6 +71,7 @@ main {
    justify-content: flex-start;
    align-items: center;
    padding: 0;
+    gap: 0;
 }

 /* Scrollbar pour main */
@@ -128,10 +119,6 @@ body.light main::-webkit-scrollbar-thumb:hover {
  color: var(--subtitle-color);
 }

-.checkbox-inline{
-  color: var(--mp3-text-color);
-}
-
 body, 
 .container, 
 input, 
--- a/public/styles/theme/chirac-theme.css
+++ b/public/styles/theme/chirac-theme.css
@@ -9,7 +9,7 @@ body.chirac {
  --background-color: rgba(255, 255, 255, 0.85); 
  --default-text-color: #002395;
  --subtitle-color: #EF4135;
-  --mp3-text-color: #002395;
+  --audio-only-label-color: #002395;
  
  /* Formulaire */
  --form-bg-color: rgba(255, 255, 255, 0.9);
@@ -21,18 +21,23 @@ body.chirac {
  --form-button-bg-color: #002395; 
  --form-button-text-color: #ffffff;
  --form-button-bg-hover-color: #EF4135;
+  --paste-button-icon-color: #ffffff;
  
  /* Checkbox */
-  --checkbox-bg-default: #cccccc;
-  --checkbox-bg-checked: #002395;
+  --checkbox-unchecked-bg-color: #cccccc;
+  --checkbox-checked-bg-color: #002395;
  --checkbox-checkmark-border-color: #ffffff;
  --checkbox-pulse-color: rgba(0, 35, 149, 0.5);
  
  /* Download status */
  --download-status-color: #002395;
  
+  /* Progress bar */
+  --progress-bar-bg-color: #d0d0d0;
+  --progress-bar-fill-color: #EF4135;
+  
  /* Video Info Box */
-  --infos-box-color: rgba(255, 255, 255, 0.9);
+  --video-info-bg-color: rgba(255, 255, 255, 0.9);
  --video-info-text-color: #000000;
  --video-info-heading-color: #EF4135;
  --video-info-list-color: #444444;
@@ -47,8 +52,8 @@ body.chirac {
  --settings-button-bg-color: #00196a;
  --settings-button-text-color: #dcdcdc;  

-  --settings-bg-primary-color: #0b0528;
-  --settings-bg-secondary-color: #1c1055;
+  --settings-modal-bg-color: #0b0528;
+  --settings-section-bg-color: #1c1055;

  --settings-text-color: #cecece; 
  --settings-subtitle-color: #adadad;
--- a/public/styles/theme/dark-theme.css
+++ b/public/styles/theme/dark-theme.css
@@ -3,7 +3,7 @@ body.dark {
  --background-color: #121212;               /* noir/gris très foncé */
  --default-text-color: #e0e0e0;             /* texte clair */
  --subtitle-color: #2196f3;                 /* bleu accent */
-  --mp3-text-color: #f5f5f5;                 /* texte checkbox */
+  --audio-only-label-color: #f5f5f5;                 /* texte checkbox */

  /* Formulaire */
  --form-bg-color: #1e1e1e;                  /* fond formulaire */
@@ -15,18 +15,23 @@ body.dark {
  --form-button-bg-color: #2196f3;           /* bouton bleu */
  --form-button-text-color: #ffffff;         /* texte bouton */
  --form-button-bg-hover-color: #1976d2;     /* hover bleu plus foncé */
+  --paste-button-icon-color: #ffffff;

  /* Checkbox */
-  --checkbox-bg-default: #555555;             /* gris moyen */
-  --checkbox-bg-checked: #2196f3;             /* bleu accent */
+  --checkbox-unchecked-bg-color: #555555;             /* gris moyen */
+  --checkbox-checked-bg-color: #2196f3;             /* bleu accent */
  --checkbox-checkmark-border-color: #ffffff; /* blanc */
  --checkbox-pulse-color: rgba(33, 150, 243, 0.5);

  /* Download status */
  --download-status-color: #2196f3;

+  /* Progress bar */
+  --progress-bar-bg-color: #444444;
+  --progress-bar-fill-color: #2196f3;
+
  /* Video Info Box */
-  --infos-box-color: #1a1a1a;
+  --video-info-bg-color: #1a1a1a;
  --video-info-text-color: #e0e0e0;
  --video-info-heading-color: #2196f3;
  --video-info-list-color: #cccccc;
@@ -41,8 +46,8 @@ body.dark {
  --settings-button-bg-color: #1e1e1e;
  --settings-button-text-color: var(--default-text-color);  

-  --settings-bg-primary-color: #1e1e1e;
-  --settings-bg-secondary-color: #2a2a2a;
+  --settings-modal-bg-color: #1e1e1e;
+  --settings-section-bg-color: #2a2a2a;
  --settings-text-color: var(--default-text-color); 
  --settings-subtitle-color: #aaa;

--- a/public/styles/theme/drift-theme.css
+++ b/public/styles/theme/drift-theme.css
@@ -9,7 +9,7 @@ body.drift {
    --background-color: #0f1218;
    --default-text-color: #3d4b61;
    --subtitle-color: #1a1a1a;
-    --mp3-text-color: #c0d4ff;
+    --audio-only-label-color: #c0d4ff;

    /* Formulaire */
    --form-bg-color: #1e222a;         
@@ -21,18 +21,23 @@ body.drift {
    --form-button-bg-color: #2a2979;
    --form-button-text-color: #ffffff;
    --form-button-bg-hover-color: #353393;
+    --paste-button-icon-color: #ffffff;

    /* Checkbox */
-    --checkbox-bg-default: #2a2e38;
-    --checkbox-bg-checked: #2a2979;
+    --checkbox-unchecked-bg-color: #2a2e38;
+    --checkbox-checked-bg-color: #2a2979;
    --checkbox-checkmark-border-color: #ffffff;
    --checkbox-pulse-color: rgba(76,108,255,0.3);

    /* Download status */
    --download-status-color: #ff8e8e;

+    /* Progress bar */
+    --progress-bar-bg-color: #3b4b6d;
+    --progress-bar-fill-color: #ff8e8e;
+
    /* Video Info Box */
-    --infos-box-color: #1e222ad0;
+    --video-info-bg-color: #1e222ad0;
    --video-info-text-color: #e8e8f0;
    --video-info-heading-color: #9ab6ff;
    --video-info-list-color: #c0d4ff;
@@ -47,8 +52,8 @@ body.drift {
    --settings-button-bg-color: #1e222ace;
    --settings-button-text-color: #b3b3b4;  

-    --settings-bg-primary-color: #1e222a;
-    --settings-bg-secondary-color: #272d38;
+    --settings-modal-bg-color: #1e222a;
+    --settings-section-bg-color: #272d38;

    --settings-text-color: #bababa; 
    --settings-subtitle-color: #cacaca;
--- a/public/styles/theme/fanatic-theme.css
+++ b/public/styles/theme/fanatic-theme.css
@@ -3,7 +3,7 @@ body.fanatic{
  --background-color: #121212;
  --default-text-color: #eee;
  --subtitle-color: #FF5900;
-  --mp3-text-color: #ffffff;
+  --audio-only-label-color: #ffffff;

  /* Formulaire */
  --form-bg-color: #1e1e1e;
@@ -15,18 +15,23 @@ body.fanatic{
  --form-button-bg-color: #FF5900;
  --form-button-text-color: #121212;
  --form-button-bg-hover-color: #e65500;
+  --paste-button-icon-color: #f1f1f1;

  /* Checkbox */
-  --checkbox-bg-default: #555555;
-  --checkbox-bg-checked: #ff6600;
+  --checkbox-unchecked-bg-color: #555555;
+  --checkbox-checked-bg-color: #ff6600;
  --checkbox-checkmark-border-color: #eee;
  --checkbox-pulse-color: rgba(255, 102, 0, 0.5);

  /* Download status */
  --download-status-color: #FF5900;

+  /* Progress bar */
+  --progress-bar-bg-color: #444444;
+  --progress-bar-fill-color: #FF5900;
+
  /* Video Info Box */
-  --infos-box-color: #222222;
+  --video-info-bg-color: #222222;
  --video-info-text-color: #eee;
  --video-info-heading-color: #FF5900;
  --video-info-list-color: #ccc;
@@ -41,8 +46,8 @@ body.fanatic{
  --settings-button-bg-color: #1e1e1e;
  --settings-button-text-color: #dcdcdc;  

-  --settings-bg-primary-color: #1e1e1e;
-  --settings-bg-secondary-color: #2d2d2d;
+  --settings-modal-bg-color: #1e1e1e;
+  --settings-section-bg-color: #2d2d2d;

  --settings-text-color: #cecece; 
  --settings-subtitle-color: #adadad;
--- a/public/styles/theme/light-theme.css
+++ b/public/styles/theme/light-theme.css
@@ -3,7 +3,7 @@ body.light {
  --background-color: #dadada;
  --default-text-color: #222222;
  --subtitle-color: #007bff;
-  --mp3-text-color: #000000;
+  --audio-only-label-color: #000000;

  /* Formulaire */
  --form-bg-color: #ffffff;
@@ -15,18 +15,23 @@ body.light {
  --form-button-bg-color: #007bff;
  --form-button-text-color: #ffffff;
  --form-button-bg-hover-color: #0056b3;
+  --paste-button-icon-color: #ffffff;

  /* Checkbox */
-  --checkbox-bg-default: #cccccc;
-  --checkbox-bg-checked: #007bff;
+  --checkbox-unchecked-bg-color: #cccccc;
+  --checkbox-checked-bg-color: #007bff;
  --checkbox-checkmark-border-color: #ffffff;
  --checkbox-pulse-color: rgba(0, 123, 255, 0.4);

  /* Download status */
  --download-status-color: #007bff;

+  /* Progress bar */
+  --progress-bar-bg-color: #e0e0e0;
+  --progress-bar-fill-color: #007bff;
+
  /* Video Info Box */
-  --infos-box-color: #ffffff;
+  --video-info-bg-color: #ffffff;
  --video-info-text-color: #222222;
  --video-info-heading-color: #007bff;
  --video-info-list-color: #444444;
@@ -41,8 +46,8 @@ body.light {
  --settings-button-bg-color: #e4e4e4;
  --settings-button-text-color: var(--default-text-color);  

-  --settings-bg-primary-color: #cbcbcb;
-  --settings-bg-secondary-color: #b8b8b8;
+  --settings-modal-bg-color: #cbcbcb;
+  --settings-section-bg-color: #b8b8b8;
  --settings-text-color: var(--default-text-color); 
  --settings-subtitle-color: #656565; 
 }
--- a/public/styles/theme/neon-theme.css
+++ b/public/styles/theme/neon-theme.css
@@ -10,7 +10,7 @@ body.neon {
    --background-color: #1b1b2f;
    --default-text-color: #e0e0ff;
    --subtitle-color: #a3a3ff;
-    --mp3-text-color: #c0c0ff;
+    --audio-only-label-color: #c0c0ff;

    /* Formulaire */
    --form-bg-color: #2c2c4a;
@@ -22,18 +22,23 @@ body.neon {
    --form-button-bg-color: #5858f0;
    --form-button-text-color: #ffffff;
    --form-button-bg-hover-color: #7a7aff;
+    --paste-button-icon-color: #ffffff;

    /* Checkbox */
-    --checkbox-bg-default: #302b63;
-    --checkbox-bg-checked: #5858f0;
+    --checkbox-unchecked-bg-color: #302b63;
+    --checkbox-checked-bg-color: #5858f0;
    --checkbox-checkmark-border-color: #ffffff;
    --checkbox-pulse-color: rgba(88,88,240,0.3);

    /* Download status */
    --download-status-color: #a3a3ff;

+    /* Progress bar */
+    --progress-bar-bg-color: #302b63;
+    --progress-bar-fill-color: #a3a3ff;
+
    /* Video Info Box */
-    --infos-box-color: #2c2c4a;
+    --video-info-bg-color: #2c2c4a;
    --video-info-text-color: #e0e0ff;
    --video-info-heading-color: #a3a3ff;
    --video-info-list-color: #c0c0ff;
@@ -48,8 +53,8 @@ body.neon {
    --settings-button-bg-color: #202038;
    --settings-button-text-color: var(--default-text-color);  

-    --settings-bg-primary-color: #242454;
-    --settings-bg-secondary-color: #2f2f6f;
+    --settings-modal-bg-color: #242454;
+    --settings-section-bg-color: #2f2f6f;
    --settings-text-color: var(--default-text-color); 
    --settings-subtitle-color: #d2d2d2; 
 }
--- a/public/styles/theme/nf-theme.css
+++ b/public/styles/theme/nf-theme.css
@@ -9,7 +9,7 @@ body.nf {
  --background-color: #1a1a1a;
  --default-text-color: #e6dfd5;
  --subtitle-color: #f5f0e6;
-  --mp3-text-color: #d8cfc2;
+  --audio-only-label-color: #d8cfc2;

  /* Formulaire */
  --form-bg-color: #2a2a2a;
@@ -21,18 +21,23 @@ body.nf {
  --form-button-bg-color: #cbb89d;
  --form-button-text-color: #1a1a1a;
  --form-button-bg-hover-color: #b7a588;
+  --paste-button-icon-color: #1a1a1a;

  /* Checkbox */
-  --checkbox-bg-default: #4a4036;
-  --checkbox-bg-checked: #cbb89d;
+  --checkbox-unchecked-bg-color: #4a4036;
+  --checkbox-checked-bg-color: #cbb89d;
  --checkbox-checkmark-border-color: #1a1a1a;
  --checkbox-pulse-color: rgba(203,184,157,0.3);

  /* Download status */
  --download-status-color: #cbb89d;

+  /* Progress bar */
+  --progress-bar-bg-color: #4a4036;
+  --progress-bar-fill-color: #cbb89d;
+
  /* Video Info Box */
-  --infos-box-color: #2a2a2a;
+  --video-info-bg-color: #2a2a2a;
  --video-info-text-color: #e6dfd5;
  --video-info-heading-color: #f5f0e6;
  --video-info-list-color: #d8cfc2;
@@ -47,8 +52,8 @@ body.nf {
  --settings-button-bg-color: #2a2a2a;
  --settings-button-text-color: var(--default-text-color);  

-  --settings-bg-primary-color: #2a2a2a;
-  --settings-bg-secondary-color: #313131;
+  --settings-modal-bg-color: #2a2a2a;
+  --settings-section-bg-color: #313131;
  --settings-text-color: var(--default-text-color); 
  --settings-subtitle-color: #7a7979; 
 }
--- a/public/styles/theme/songbird-theme.css
+++ b/public/styles/theme/songbird-theme.css
@@ -9,7 +9,7 @@ body.songbird {
  --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 */
+  --audio-only-label-color: #ff4d4d; /* rouge un peu plus clair */

  /* Formulaire */
  --form-bg-color: rgba(20,0,0,0.85); /* noir semi-transparent avec rouge */
@@ -21,18 +21,23 @@ body.songbird {
  --form-button-bg-color: #b30000;
  --form-button-text-color: #ffffff;
  --form-button-bg-hover-color: #ff2a2a;
+  --paste-button-icon-color: #ffffff;

  /* Checkbox */
-  --checkbox-bg-default: #630000;
-  --checkbox-bg-checked: #ff2a2a;
+  --checkbox-unchecked-bg-color: #630000;
+  --checkbox-checked-bg-color: #ff2a2a;
  --checkbox-checkmark-border-color: #ffffff;
  --checkbox-pulse-color: rgba(255,42,42,0.3);

  /* Download status */
  --download-status-color: #ff2a2a;

+  /* Progress bar */
+  --progress-bar-bg-color: #630000;
+  --progress-bar-fill-color: #ff2a2a;
+
  /* Video Info Box */
-  --infos-box-color: rgba(30,0,0,0.9);
+  --video-info-bg-color: rgba(30,0,0,0.9);
  --video-info-text-color: #ff4d4d;
  --video-info-heading-color: #ff2a2a;
  --video-info-list-color: #b30000;
@@ -47,8 +52,8 @@ body.songbird {
  --settings-button-bg-color: rgba(29, 0, 0, 0.784);
  --settings-button-text-color: var(--default-text-color);  

-  --settings-bg-primary-color: #121212;
-  --settings-bg-secondary-color: #1a1a1a;
+  --settings-modal-bg-color: #121212;
+  --settings-section-bg-color: #1a1a1a;
  --settings-text-color: var(--default-text-color); 
  --settings-subtitle-color: #7a7979; 
 }
--- a/public/styles/theme/spicy-theme.css
+++ b/public/styles/theme/spicy-theme.css
@@ -3,7 +3,7 @@ body.spicy {
    --background-color: #121212;             /* fond noir profond */
    --default-text-color: #ffffff;           /* texte clair */
    --subtitle-color: #f87918;               /* accent rouge piment */
-    --mp3-text-color: #ffffff;               /* texte checkbox inline */
+    --audio-only-label-color: #ffffff;               /* texte checkbox inline */

    /* Formulaire */
    --form-bg-color: #1a1a1a;                /* fond formulaire gris très foncé */
@@ -15,18 +15,23 @@ body.spicy {
    --form-button-bg-color: #ff1a1a;         /* bouton rouge vif */
    --form-button-text-color: #ffffff;       /* texte bouton blanc */
    --form-button-bg-hover-color: #cc0000;   /* hover rouge foncé */
+    --paste-button-icon-color: #ffffff;

    /* Checkbox */
-    --checkbox-bg-default: #555555;            /* gris moyen */
-    --checkbox-bg-checked: #ff1a1a;            /* rouge piment */
+    --checkbox-unchecked-bg-color: #555555;            /* gris moyen */
+    --checkbox-checked-bg-color: #ff1a1a;            /* rouge piment */
    --checkbox-checkmark-border-color: #f5f5f5; /* blanc cassé */
    --checkbox-pulse-color: rgba(255, 26, 26, 0.5); /* pulse rouge translucide */

    /* Download status */
    --download-status-color: #ffffff;          /* rouge vif */

+    /* Progress bar */
+    --progress-bar-bg-color: #444444;
+    --progress-bar-fill-color: #ff1a1a;
+
    /* Video Info Box */
-    --infos-box-color: #1a1a1a;                /* fond infos gris foncé */
+    --video-info-bg-color: #1a1a1a;                /* fond infos gris foncé */
    --video-info-text-color: #f5f5f5;          /* texte clair */
    --video-info-heading-color: #ff1a1a;       /* titres rouges */
    --video-info-list-color: #cccccc;          /* texte liste gris clair */
@@ -41,8 +46,8 @@ body.spicy {
    --settings-button-bg-color: #1a1a1a;
    --settings-button-text-color: #dcdcdc;  

-    --settings-bg-primary-color: #1a1a1a;
-    --settings-bg-secondary-color: #292929;
+    --settings-modal-bg-color: #1a1a1a;
+    --settings-section-bg-color: #292929;

    --settings-text-color: #cecece; 
    --settings-subtitle-color: #adadad;
--- a/public/styles/variables.css
+++ b/public/styles/variables.css
@@ -3,7 +3,7 @@
  --background-color: #001224;
  --default-text-color: #eee;
  --subtitle-color: #007bff;
-  --mp3-text-color: #000000;
+  --audio-only-label-color: #000000;

  /* Formulaire */
  --form-bg-color: #ffffff;
@@ -15,18 +15,23 @@
  --form-button-bg-color: #007bff;
  --form-button-text-color: #ffffff;
  --form-button-bg-hover-color: #0056b3;
+  --paste-button-icon-color: #ffffff;

  /* Checkbox */
-  --checkbox-bg-default: #cccccc;
-  --checkbox-bg-checked: #3B82F6;
+  --checkbox-unchecked-bg-color: #cccccc;
+  --checkbox-checked-bg-color: #3B82F6;
  --checkbox-checkmark-border-color: #E0E0E2;
  --checkbox-pulse-color: rgba(59, 130, 246, 0.5);

  /* Download status */
  --download-status-color: #007bff;

+  /* Progress bar */
+  --progress-bar-bg-color: #cccccc;
+  --progress-bar-fill-color: #007bff;
+
  /* Video Info Box */
-  --infos-box-color: #f0f0f0;
+  --video-info-bg-color: #f0f0f0;
  --video-info-text-color: #222222;
  --video-info-heading-color: #007bff;
  --video-info-list-color: #444444;
@@ -38,8 +43,8 @@
  --settings-button-bg-color: var(--form-bg-color);
  --settings-button-text-color: var(--default-text-color);  

-  --settings-bg-primary-color: var(--form-bg-color);
-  --settings-bg-secondary-color: var(--form-bg-color);
+  --settings-modal-bg-color: var(--form-bg-color);
+  --settings-section-bg-color: var(--form-bg-color);
  --settings-text-color: var(--default-text-color);  
  --settings-subtitle-color: #aaa;