1.1

public/styles/theme/chirac-theme.css

@@ -0,0 +1,98 @@
+body.chirac {
+  /* Background image Chirac */
+  background-image: url('../../assets/images/goat.webp'); 
+  background-position: right;
+  background-repeat: no-repeat;
+  background-size: cover;
+  background-attachment: fixed;
+  
+  /* Couleurs drapeau français */
+  --background-color: rgba(255, 255, 255, 0.85); /* blanc légèrement transparent pour lisibilité */
+  --default-text-color: #002395; /* bleu foncé */
+  --subtitle-color: #EF4135; /* rouge vif */
+  --mp3-text-color: #002395; /* bleu */
+  
+  /* 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; /* bleu */
+  --form-button-text-color: #ffffff;
+  --form-button-bg-hover-color: #EF4135; /* rouge */
+  
+  /* 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;
+
+    /* animation d'apparition */
+  opacity: 0;
+  transition: opacity 0.8s ease, background-color 0.8s ease;
+}
+
+body.chirac.theme-active {
+  opacity: 1;
+}
+
+/* 
+
+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,45 @@
+body.cyberpunk {
+  /* Couleurs générales */
+  --background-color: #0d0d0d;                    /* noir profond */
+  --default-text-color: #e0e0e0;                   /* texte gris clair */
+  --subtitle-color: #ffea00;                       /* turquoise néon pour les sous-titres */
+  --mp3-text-color: #ffea00;                       /* jaune vif pour la checkbox */
+
+  /* Formulaire */
+  --form-bg-color: #141414;                        /* fond formulaire sombre */
+  --form-input-bg-color: #1a1a1a;                  /* inputs sombres */
+  --form-input-border-color: #333333;              /* bordure sobre */
+  --form-input-border-focus-color: #ffea00;        /* focus jaune néon */
+  --form-input-text-color: #e0e0e0;                /* texte clair */
+  --form-input-placeholder-color: #777777;         /* placeholder plus doux */
+  --form-button-bg-color: #ffea00;                 /* bouton jaune */
+  --form-button-text-color: #0d0d0d;               /* texte bouton noir */
+  --form-button-bg-hover-color: #d4c000;           /* hover jaune plus foncé */
+
+  /* Checkbox */
+  --checkbox-bg-default: #333333;                  /* fond checkbox sobre */
+  --checkbox-bg-checked: #ffea00;                  /* coché en jaune vif */
+  --checkbox-checkmark-border-color: #0d0d0d;      /* checkmark noir */
+  --checkbox-pulse-color: rgba(255, 234, 0, 0.5);  /* pulse néon jaune */
+
+  /* Download status */
+  --download-status-color: #fffbd1;                /* turquoise néon */
+
+  /* Video Info Box */
+  --infos-box-color: #1a1a1a;                      /* fond infos */
+  --video-info-text-color: #e0e0e0;                /* texte clair */
+  --video-info-heading-color: #ffea00;             /* titres turquoise néon */
+  --video-info-list-color: #cccccc;                /* texte liste gris clair */
+  --video-info-list-strong-color: #ffffff;         /* texte important blanc */
+  --video-info-link-color: #ffea00;                /* liens jaune néon */
+  --video-info-link-hover-color: #d4c000;          /* liens hover plus foncé */
+}
+
+body.cyberpunk {
+  background-image: url('../../assets/images/cyberpunk4.webp');
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-attachment: fixed;
+}
+

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/fanatic-theme.css

@@ -0,0 +1,36 @@
+body.fanatic{
+  /* Couleurs générales */
+  --background-color: #121212;              /* fond bleu nuit/noir */
+  --default-text-color: #eee;               /* texte clair principal */
+  --subtitle-color: #FF5900;                /* sous-titres, accent orange vif */
+  --mp3-text-color: #ffffff;                /* texte checkbox inline */
+
+  /* Formulaire */
+  --form-bg-color: #1e1e1e;                 /* fond formulaire sombre */
+  --form-input-bg-color: #2b2b2b;           /* fond inputs sombres */
+  --form-input-border-color: #333333;       /* bordure inputs */
+  --form-input-border-focus-color: #FF5900; /* bordure focus orange */
+  --form-input-text-color: #eeeeee;            /* texte inputs clair */
+  --form-input-placeholder-color: #666666; /* placeholder gris foncé */
+  --form-button-bg-color: #FF5900;          /* bouton orange */
+  --form-button-text-color: #121212;        /* texte bouton sombre */
+  --form-button-bg-hover-color: #e65500;    /* bouton hover orange foncé */
+
+  /* Checkbox */
+  --checkbox-bg-default: #555555;            /* gris moyen */
+  --checkbox-bg-checked: #ff6600;            /* orange vif */
+  --checkbox-checkmark-border-color: #eee;  /* blanc cassé */
+  --checkbox-pulse-color: rgba(255, 102, 0, 0.5); /* pulse orange translucide */
+
+  /* Download status */
+  --download-status-color: #FF5900;          /* orange */
+
+  /* Video Info Box */
+  --infos-box-color: #222222;                 /* fond infos sombre */
+  --video-info-text-color: #eee;              /* texte clair */
+  --video-info-heading-color: #FF5900;        /* titres orange */
+  --video-info-list-color: #ccc;               /* texte liste gris clair */
+  --video-info-list-strong-color: #fff;       /* texte important blanc */
+  --video-info-link-color: #FF5900;            /* liens orange */
+  --video-info-link-hover-color: #e65500;      /* liens hover orange foncé */
+}

public/styles/theme/light-theme.css

@@ -0,0 +1,36 @@
+body.light {
+  /* Couleurs générales */
+  --background-color: #dadada;              /* fond clair */
+  --default-text-color: #222222;            /* texte sombre */
+  --subtitle-color: #007bff;                /* bleu accent */
+  --mp3-text-color: #000000;                /* texte checkbox */
+
+  /* Formulaire */
+  --form-bg-color: #ffffff;                 /* fond formulaire blanc */
+  --form-input-bg-color: #fafafa;           /* fond inputs */
+  --form-input-border-color: #cccccc;       /* bordure inputs */
+  --form-input-border-focus-color: #007bff; /* focus bleu */
+  --form-input-text-color: #333333;         /* texte inputs */
+  --form-input-placeholder-color: #888888;  /* placeholder */
+  --form-button-bg-color: #007bff;          /* bouton bleu */
+  --form-button-text-color: #ffffff;        /* texte bouton */
+  --form-button-bg-hover-color: #0056b3;    /* hover bleu foncé */
+
+  /* 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/spicy-theme.css

@@ -0,0 +1,44 @@
+body.spicy {
+  /* Couleurs générales */
+  --background-color: #121212;             /* fond noir profond */
+  --default-text-color: #f5f5f5;           /* texte clair */
+  --subtitle-color: #e29191;               /* accent rouge piment */
+  --mp3-text-color: #ffffff;               /* texte checkbox inline */
+
+  /* Formulaire */
+  --form-bg-color: #1a1a1a;                /* fond formulaire gris très foncé */
+  --form-input-bg-color: #2b2b2b;          /* fond inputs gris foncé */
+  --form-input-border-color: #444444;      /* bordure gris */
+  --form-input-border-focus-color: #ff1a1a; /* focus rouge piment */
+  --form-input-text-color: #eeeeee;        /* texte inputs */
+  --form-input-placeholder-color: #888888; /* placeholder gris moyen */
+  --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é */
+
+  /* Checkbox */
+  --checkbox-bg-default: #555555;            /* gris moyen */
+  --checkbox-bg-checked: #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 */
+
+  /* Video Info Box */
+  --infos-box-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 */
+  --video-info-list-strong-color: #ffffff;   /* texte important blanc */
+  --video-info-link-color: #ff1a1a;          /* liens rouges */
+  --video-info-link-hover-color: #cc0000;    /* liens hover rouge foncé */
+}
+
+/* Optionnel: background piments */
+body.spicy {
+  background-image: url('../../assets/images/spicy.webp');  
+  background-size: cover;
+  background-position: center;
+  background-attachment: fixed;
+}

public/styles/theme/themeimport.css

@@ -0,0 +1,8 @@
+@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");

public/styles/theme/vilbrequin-theme.css

@@ -0,0 +1,48 @@
+body.vilbrequin {
+  /* Couleurs générales */
+  --background-color: #0a1f3d;             /* bleu Vilbrequin profond */
+  --default-text-color: #535353;           /* texte clair */
+  --subtitle-color: #001696;               /* bleu clair accent (turbo vibes) */
+  --mp3-text-color: #ffffff;               /* texte checkbox inline */
+
+  /* Formulaire */
+  --form-bg-color: #12284f;                /* fond formulaire bleu foncé */
+  --form-input-bg-color: #1c3760;          /* fond inputs bleu + clair */
+  --form-input-border-color: #2a4b80;      /* bordure bleue */
+  --form-input-border-focus-color: #00bfff; /* focus bleu clair */
+  --form-input-text-color: #f0f0f0;        /* texte inputs clair */
+  --form-input-placeholder-color: #b0c4de; /* placeholder gris bleuté */
+  --form-button-bg-color: #ffd700;         /* bouton jaune turbo */
+  --form-button-text-color: #0a1f3d;       /* texte bouton sombre */
+  --form-button-bg-hover-color: #e6c200;   /* hover jaune foncé */
+
+  /* Checkbox */
+  --checkbox-bg-default: #2a4b80;             /* bleu moyen */
+  --checkbox-bg-checked: #00bfff;             /* bleu clair accent */
+  --checkbox-checkmark-border-color: #f0f0f0; /* blanc cassé */
+  --checkbox-pulse-color: rgba(0,191,255,0.5); /* pulse bleu clair translucide */
+
+  /* Download status */
+  --download-status-color: #ffd700;           /* jaune turbo */
+
+  /* Video Info Box */
+  --infos-box-color: #12284f;                 /* fond infos bleu foncé */
+  --video-info-text-color: #f0f0f0;           /* texte clair */
+  --video-info-heading-color: #00bfff;        /* titres bleu clair */
+  --video-info-list-color: #dcdcdc;           /* texte liste gris clair */
+  --video-info-list-strong-color: #ffffff;    /* texte important blanc */
+  --video-info-link-color: #00bfff;           /* liens bleu clair */
+  --video-info-link-hover-color: #009acd;     /* liens hover bleu plus foncé */
+}
+
+/* Optionnel: motif turbo ou jantes */
+body.vilbrequin {
+  background-image: url('../../assets/images/Vilbrequin.avif'); /* adapte ton image */
+  background-size: cover;
+  background-position: center;
+  background-attachment: fixed;
+}
+
+body.vilbrequin .download-path{
+  color: white;
+}