Push avant Clean

public/styles/theme/chirac-theme.css

@@ -0,0 +1,90 @@
+body.chirac {
+  
+  background-image: url('../../assets/images/Chirac.png'); 
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-attachment: fixed;
+  
+
+  --background-color: rgba(255, 255, 255, 0.85); 
+  --default-text-color: #002395;
+  --subtitle-color: #EF4135;
+  --mp3-text-color: #002395;
+  
+  /* Formulaire */
+  --form-bg-color: rgba(255, 255, 255, 0.9);
+  --form-input-bg-color: #f5f5f5;
+  --form-input-border-color: #002395;
+  --form-input-border-focus-color: #EF4135;
+  --form-input-text-color: #002395;
+  --form-input-placeholder-color: #999999;
+  --form-button-bg-color: #002395; 
+  --form-button-text-color: #ffffff;
+  --form-button-bg-hover-color: #EF4135;
+  
+  /* Checkbox */
+  --checkbox-bg-default: #cccccc;
+  --checkbox-bg-checked: #002395;
+  --checkbox-checkmark-border-color: #ffffff;
+  --checkbox-pulse-color: rgba(0, 35, 149, 0.5);
+  
+  /* Download status */
+  --download-status-color: #002395;
+  
+  /* Video Info Box */
+  --infos-box-color: rgba(255, 255, 255, 0.9);
+  --video-info-text-color: #002395;
+  --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;
+}
+
+
+/* 
+
+Je serai le président de tous les Français
+Tous les Français
+Tous les Français
+Tous les Français
+Tous les Français
+Tous les Français
+Tous les Français
+Tous les Français
+Tous les Français
+Tous les Français
+Mes chers compatriotes
+Je serai le président de tous les Français, de tous les Français
+Je mesure la difficulté de la tâche qui nous attend
+Tous les Français
+Tous les Français
+Je veux un État, je veux les Français
+Je veux un État, je veux
+Je veux un État-tat-tat-tat vigoureux
+Un État-tat-tat-tat impartial
+Un État-tat-tat-tat vigoureux
+Un État-tat-tat-tat exigeant
+Un État-tat-tat-tat
+Je serai le président de tous les Français
+Tous les Français
+Tous les Français
+Tous les Français
+Un État qui n'isole pas, tous, pas, pas
+Tous, pas, tous, pas, pas
+Tous, pas, tous, pas, pas (les Français)
+Tous, tous, pas, tous, tous, pas, pas
+Tous, tous, pas, tous, tous, pas, pas
+Tous, tous, tous, pas, tous, pas, pas (les Français)
+Tous, pas, tous, tous, pas, pas
+Tous, tous, tous, pas, tous, tous, pas, pas
+Tous, tous, pas, tous, tous, pas, pas
+Tous, tous, tous-tous, tous-tous, pas, pas
+Tous, tous-tous, tous-tous, pas, pas
+Un État-tat-tat-tat vigoureux
+Un État-tat-tat-tat impartial
+Un État-tat-tat-tat exigeant
+Un État-tat-tat-tat
+Je serai le président de tous les Français
+
+*/

public/styles/theme/cyberpunk-theme.css

@@ -0,0 +1,43 @@
+body.cyberpunk {
+
+  background-image: url('../../assets/images/Cyberpunk.webp');
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-attachment: fixed;
+
+  /* Couleurs générales */
+  --background-color: #0d0d0d;
+  --default-text-color: #e0e0e0;
+  --subtitle-color: #ffea00;
+  --mp3-text-color: #ffea00;
+
+  /* Formulaire */
+  --form-bg-color: #141414;
+  --form-input-bg-color: #1a1a1a;
+  --form-input-border-color: #333333;
+  --form-input-border-focus-color: #ffea00;
+  --form-input-text-color: #e0e0e0;
+  --form-input-placeholder-color: #777777;
+  --form-button-bg-color: #ffea00;
+  --form-button-text-color: #0d0d0d;
+  --form-button-bg-hover-color: #d4c000;
+
+  /* Checkbox */
+  --checkbox-bg-default: #333333;
+  --checkbox-bg-checked: #ffea00;
+  --checkbox-checkmark-border-color: #0d0d0d;
+  --checkbox-pulse-color: rgba(255, 234, 0, 0.5);
+
+  /* Download status */
+  --download-status-color: #fffbd1;
+
+  /* Video Info Box */
+  --infos-box-color: #1a1a1a;
+  --video-info-text-color: #e0e0e0;
+  --video-info-heading-color: #ffea00;
+  --video-info-list-color: #cccccc;
+  --video-info-list-strong-color: #ffffff;
+  --video-info-link-color: #ffea00;
+  --video-info-link-hover-color: #d4c000;
+}

public/styles/theme/dark-theme.css

@@ -0,0 +1,36 @@
+body.dark {
+  /* Couleurs générales */
+  --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 */
+
+  /* Formulaire */
+  --form-bg-color: #1e1e1e;                  /* fond formulaire */
+  --form-input-bg-color: #2a2a2a;            /* fond inputs */
+  --form-input-border-color: #444444;        /* bordure */
+  --form-input-border-focus-color: #2196f3;  /* focus bleu */
+  --form-input-text-color: #f5f5f5;          /* texte clair */
+  --form-input-placeholder-color: #888888;   /* placeholder gris */
+  --form-button-bg-color: #2196f3;           /* bouton bleu */
+  --form-button-text-color: #ffffff;         /* texte bouton */
+  --form-button-bg-hover-color: #1976d2;     /* hover bleu plus foncé */
+
+  /* Checkbox */
+  --checkbox-bg-default: #555555;             /* gris moyen */
+  --checkbox-bg-checked: #2196f3;             /* bleu accent */
+  --checkbox-checkmark-border-color: #ffffff; /* blanc */
+  --checkbox-pulse-color: rgba(33, 150, 243, 0.5);
+
+  /* Download status */
+  --download-status-color: #2196f3;
+
+  /* Video Info Box */
+  --infos-box-color: #1a1a1a;
+  --video-info-text-color: #e0e0e0;
+  --video-info-heading-color: #2196f3;
+  --video-info-list-color: #cccccc;
+  --video-info-list-strong-color: #ffffff;
+  --video-info-link-color: #2196f3;
+  --video-info-link-hover-color: #1976d2;
+}

public/styles/theme/default-theme.css

@@ -0,0 +1,40 @@
+:root {
+  /* Couleurs générales */
+  --background-color: #001224;            /* body background bleu nuit */
+  --default-text-color: #eee;             /* texte clair principal */
+  --subtitle-color: #007bff;              /* sous-titres, header p */
+  --mp3-text-color: #000000;              /* couleur texte checkbox inline */
+
+  /* Formulaire */
+  --form-bg-color: #ffffff;               /* fond du formulaire */
+  --form-input-bg-color: #f9f9f9;         /* fond inputs */
+  --form-input-border-color: #cccccc;     /* bordure inputs */
+  --form-input-border-focus-color: #0056b3; /* bordure focus */
+  --form-input-text-color: #333333;       /* texte inputs */
+  --form-input-placeholder-color: #aaaaaa; /* placeholder */
+  --form-button-bg-color: #007bff;         /* bouton bg */
+  --form-button-text-color: #ffffff;       /* texte bouton */
+  --form-button-bg-hover-color: #0056b3;   /* bouton hover */
+
+  /* Checkbox */
+  --checkbox-bg-default: #cccccc;
+  --checkbox-bg-checked: #3B82F6;
+  --checkbox-checkmark-border-color: #E0E0E2;
+  --checkbox-pulse-color: rgba(59, 130, 246, 0.5);
+
+  /* Download status */
+  --download-status-color: #007bff;
+
+  /* Video Info Box */
+  --infos-box-color: #f0f0f0;
+  --video-info-text-color: #222222;
+  --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;
+}
+
+body.default .download-path #savePath {
+  color: #ffffff;
+}

public/styles/theme/drift-theme.css

@@ -0,0 +1,47 @@
+body.drift {
+
+    background-image: url('../../assets/images/Drift.jpg');
+    background-size: cover;
+    background-position: center;
+    background-attachment: fixed;
+
+    /* Palette principale */
+    --background-color: #0f1218;
+    --default-text-color: #3d4b61;
+    --subtitle-color: #1a1a1a;
+    --mp3-text-color: #c0d4ff;
+
+    /* Formulaire */
+    --form-bg-color: #1e222a;         
+    --form-input-bg-color: #13171d; 
+    --form-input-border-color: #3b4b6d;
+    --form-input-border-focus-color: #6ea8ff; 
+    --form-input-text-color: #f0f4ff;
+    --form-input-placeholder-color: #7a8fae;
+    --form-button-bg-color: #2a2979;
+    --form-button-text-color: #ffffff;
+    --form-button-bg-hover-color: #353393;
+
+    /* Checkbox */
+    --checkbox-bg-default: #2a2e38;
+    --checkbox-bg-checked: #2a2979;
+    --checkbox-checkmark-border-color: #ffffff;
+    --checkbox-pulse-color: rgba(76,108,255,0.3);
+
+    /* Download status */
+    --download-status-color: #ff8e8e;
+
+    /* Video Info Box */
+    --infos-box-color: #1e222a;
+    --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;
+    }
+
+
+body.drift .download-path{
+    color: #ededed;
+}

public/styles/theme/fanatic-theme.css

@@ -0,0 +1,36 @@
+body.fanatic{
+  /* Couleurs générales */
+  --background-color: #121212;
+  --default-text-color: #eee;
+  --subtitle-color: #FF5900;
+  --mp3-text-color: #ffffff;
+
+  /* Formulaire */
+  --form-bg-color: #1e1e1e;
+  --form-input-bg-color: #2b2b2b;
+  --form-input-border-color: #333333;
+  --form-input-border-focus-color: #FF5900;
+  --form-input-text-color: #eeeeee;
+  --form-input-placeholder-color: #666666;
+  --form-button-bg-color: #FF5900;
+  --form-button-text-color: #121212;
+  --form-button-bg-hover-color: #e65500;
+
+  /* Checkbox */
+  --checkbox-bg-default: #555555;
+  --checkbox-bg-checked: #ff6600;
+  --checkbox-checkmark-border-color: #eee;
+  --checkbox-pulse-color: rgba(255, 102, 0, 0.5);
+
+  /* Download status */
+  --download-status-color: #FF5900;
+
+  /* Video Info Box */
+  --infos-box-color: #222222;
+  --video-info-text-color: #eee;
+  --video-info-heading-color: #FF5900;
+  --video-info-list-color: #ccc;
+  --video-info-list-strong-color: #fff;
+  --video-info-link-color: #FF5900;
+  --video-info-link-hover-color: #e65500;
+}

public/styles/theme/light-theme.css

@@ -0,0 +1,36 @@
+body.light {
+  /* Couleurs générales */
+  --background-color: #dadada;
+  --default-text-color: #222222;
+  --subtitle-color: #007bff;
+  --mp3-text-color: #000000;
+
+  /* Formulaire */
+  --form-bg-color: #ffffff;
+  --form-input-bg-color: #fafafa;
+  --form-input-border-color: #cccccc;
+  --form-input-border-focus-color: #007bff;
+  --form-input-text-color: #333333;
+  --form-input-placeholder-color: #888888;
+  --form-button-bg-color: #007bff;
+  --form-button-text-color: #ffffff;
+  --form-button-bg-hover-color: #0056b3;
+
+  /* Checkbox */
+  --checkbox-bg-default: #cccccc;
+  --checkbox-bg-checked: #007bff;
+  --checkbox-checkmark-border-color: #ffffff;
+  --checkbox-pulse-color: rgba(0, 123, 255, 0.4);
+
+  /* Download status */
+  --download-status-color: #007bff;
+
+  /* Video Info Box */
+  --infos-box-color: #ffffff;
+  --video-info-text-color: #222222;
+  --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;
+}

public/styles/theme/neon-theme.css

@@ -0,0 +1,47 @@
+body.neon {
+
+    background: (url("../../assets/images/drift.jpg"));
+    background-image: linear-gradient(135deg, #0f0c29, #302b63, #24243e); /* dégradé sombre violet/bleu */
+    background-size: cover;
+    background-position: center;
+    background-attachment: fixed;
+
+    /* Couleurs générales */
+    --background-color: #1b1b2f;
+    --default-text-color: #e0e0ff;
+    --subtitle-color: #a3a3ff;
+    --mp3-text-color: #c0c0ff;
+
+    /* Formulaire */
+    --form-bg-color: #2c2c4a;
+    --form-input-bg-color: #1f1f3a;
+    --form-input-border-color: #5858f0;
+    --form-input-border-focus-color: #a3a3ff;
+    --form-input-text-color: #ffffff;
+    --form-input-placeholder-color: #8888ff;
+    --form-button-bg-color: #5858f0;
+    --form-button-text-color: #ffffff;
+    --form-button-bg-hover-color: #7a7aff;
+
+    /* Checkbox */
+    --checkbox-bg-default: #302b63;
+    --checkbox-bg-checked: #5858f0;
+    --checkbox-checkmark-border-color: #ffffff;
+    --checkbox-pulse-color: rgba(88,88,240,0.3);
+
+    /* Download status */
+    --download-status-color: #a3a3ff;
+
+    /* Video Info Box */
+    --infos-box-color: #2c2c4a;
+    --video-info-text-color: #e0e0ff;
+    --video-info-heading-color: #a3a3ff;
+    --video-info-list-color: #c0c0ff;
+    --video-info-list-strong-color: #ffffff;
+    --video-info-link-color: #5858f0;
+    --video-info-link-hover-color: #7a7aff;
+}
+
+body.neon .download-path {
+  color: var(--default-text-color);
+}

public/styles/theme/nf-theme.css

@@ -0,0 +1,46 @@
+body.nf {
+
+  background-image: url('../../assets/images/NF.jpg');
+  background-size: cover;
+  background-position: 70% center; 
+  background-attachment: fixed;
+
+  /* Couleurs générales */
+  --background-color: #1a1a1a;
+  --default-text-color: #e6dfd5;
+  --subtitle-color: #f5f0e6;
+  --mp3-text-color: #d8cfc2;
+
+  /* Formulaire */
+  --form-bg-color: #2a2a2a;
+  --form-input-bg-color: #222222;
+  --form-input-border-color: #4a4036;
+  --form-input-border-focus-color: #cbb89d;
+  --form-input-text-color: #f0e8dd;
+  --form-input-placeholder-color: #9a8f80;
+  --form-button-bg-color: #cbb89d;
+  --form-button-text-color: #1a1a1a;
+  --form-button-bg-hover-color: #b7a588;
+
+  /* Checkbox */
+  --checkbox-bg-default: #4a4036;
+  --checkbox-bg-checked: #cbb89d;
+  --checkbox-checkmark-border-color: #1a1a1a;
+  --checkbox-pulse-color: rgba(203,184,157,0.3);
+
+  /* Download status */
+  --download-status-color: #cbb89d;
+
+  /* Video Info Box */
+  --infos-box-color: #2a2a2a;
+  --video-info-text-color: #e6dfd5;
+  --video-info-heading-color: #f5f0e6;
+  --video-info-list-color: #d8cfc2;
+  --video-info-list-strong-color: #ffffff;
+  --video-info-link-color: #cbb89d;
+  --video-info-link-hover-color: #b7a588;
+}
+
+body.nf .download-path {
+  color: var(--default-text-color);
+}

public/styles/theme/spicy-theme.css

@@ -0,0 +1,43 @@
+body.spicy {
+
+  background-image: url('../../assets/images/spicy.webp');  
+  background-size:contain;
+  background-position: center;
+  background-attachment: fixed;
+  background-repeat: no-repeat;
+
+  /* Couleurs générales */
+  --background-color: #121212;
+  --default-text-color: #581010;
+  --subtitle-color: #3d0909;
+  --mp3-text-color: #ffffff;
+
+  /* Formulaire */
+  --form-bg-color: #1a1a1a;
+  --form-input-bg-color: #2b2b2b;
+  --form-input-border-color: #444444;
+  --form-input-border-focus-color: #ff1a1a;
+  --form-input-text-color: #eeeeee;
+  --form-input-placeholder-color: #888888;
+  --form-button-bg-color: #ff1a1a;
+  --form-button-text-color: #ffffff;
+  --form-button-bg-hover-color: #cc0000;
+
+  /* Checkbox */
+  --checkbox-bg-default: #555555;
+  --checkbox-bg-checked: #ff1a1a;
+  --checkbox-checkmark-border-color: #f5f5f5;
+  --checkbox-pulse-color: rgba(255, 26, 26, 0.5);
+
+  /* Download status */
+  --download-status-color: #ffffff;
+
+  /* Video Info Box */
+  --infos-box-color: #1a1a1a;
+  --video-info-text-color: #f5f5f5;
+  --video-info-heading-color: #ff1a1a;
+  --video-info-list-color: #cccccc;
+  --video-info-list-strong-color: #ffffff;
+  --video-info-link-color: #ff1a1a;
+  --video-info-link-hover-color: #cc0000;
+}

public/styles/theme/themeimport.css

@@ -0,0 +1,11 @@
+@import url("chirac-theme.css");
+@import url("dark-theme.css");
+@import url("default-theme.css");
+@import url("fanatic-theme.css");
+@import url("light-theme.css");
+@import url("cyberpunk-theme.css");
+@import url("spicy-theme.css");
+@import url("vilbrequin-theme.css");
+@import url("nf-theme.css");
+@import url("drift-theme.css");
+@import url("neon-theme.css");

public/styles/theme/vilbrequin-theme.css

@@ -0,0 +1,46 @@
+body.vilbrequin {
+
+  background-image: url('../../assets/images/Vilbrequin.webp');
+  background-size: cover;
+  background-position: center;
+  background-attachment: fixed;
+
+  /* Couleurs générales */
+  --background-color: #0a1f3d;
+  --default-text-color: #535353;
+  --subtitle-color: #001696;
+  --mp3-text-color: #ffffff;
+
+  /* Formulaire */
+  --form-bg-color: #12284f;
+  --form-input-bg-color: #1c3760;
+  --form-input-border-color: #2a4b80;
+  --form-input-border-focus-color: #00bfff;
+  --form-input-text-color: #f0f0f0;
+  --form-input-placeholder-color: #b0c4de;
+  --form-button-bg-color: #ffd700;
+  --form-button-text-color: #0a1f3d;  
+  --form-button-bg-hover-color: #e6c200;
+
+  /* Checkbox */
+  --checkbox-bg-default: #2a4b80;
+  --checkbox-bg-checked: #00bfff;
+  --checkbox-checkmark-border-color: #f0f0f0;
+  --checkbox-pulse-color: rgba(0,191,255,0.5);
+
+  /* Download status */
+  --download-status-color: #ffd700;
+
+  /* Video Info Box */
+  --infos-box-color: #12284f;
+  --video-info-text-color: #f0f0f0;
+  --video-info-heading-color: #00bfff;
+  --video-info-list-color: #dcdcdc;
+  --video-info-list-strong-color: #ffffff;
+  --video-info-link-color: #00bfff;
+  --video-info-link-hover-color: #009acd;
+}
+
+body.vilbrequin .download-path{
+  color: white;
+}