NF Theme + Ajustement Other Themes

public/script/customthemes.js

@@ -21,6 +21,7 @@ const themes = {
   default: "Default",
   dark: "Sombre",
   light: "Clair",
+  nf : "NF",
   chirac: "Chirac",
   fanatic: "Fanatic",
   cyberpunk: "Cyberpunk",
@@ -32,6 +33,7 @@ const themeSubtitles = {
   default: "Because why not?",
   dark: "Darkness is my ally",
   light: "Qui aime ce thème ?",
+  nf : "You call it music, i call it my Therapist",
   chirac: "J'aime les pommes",
   fanatic: "Always Fnatic !",
   cyberpunk: "Wake up, choom. We’ve got a city to burn.",

public/styles/components/editpathbutton.css

@@ -29,13 +29,14 @@
   color: var(--form-button-text-color);
   border: none;
   padding: 0.3em 0.8em;
-  border-radius: 6px;
+  border-radius: 8px;
   cursor: pointer;
   transition: background-color 0.3s ease, transform 0.2s ease;
   box-shadow: 0 2px 5px rgba(0,0,0,0.2);
+  font-size: 0.9rem;
+  font-weight: 550;
 }
 
 .download-path button#changePath:hover {
   background-color: var(--form-button-bg-hover-color);
-  transform: scale(1.05);
 }

public/styles/theme/chirac-theme.css

@@ -1,7 +1,7 @@
 body.chirac {
   /* Background image Chirac */
-  background-image: url('../../assets/images/goat.webp'); 
-  background-position: right;
+  background-image: url('../../assets/images/Chirac.png'); 
+  /* background-position: right; */
   background-repeat: no-repeat;
   background-size: cover;
   background-attachment: fixed;

public/styles/theme/cyberpunk-theme.css

@@ -36,7 +36,7 @@ body.cyberpunk {
 }
 
 body.cyberpunk {
-  background-image: url('../../assets/images/cyberpunk4.webp');
+  background-image: url('../../assets/images/Cyberpunk.webp');
   background-size: cover;
   background-position: center;
   background-repeat: no-repeat;

public/styles/theme/nf-theme.css

@@ -0,0 +1,48 @@
+body.nf {
+  /* Couleurs générales */
+  --background-color: #1a1a1a;              /* fond sombre neutre */
+  --default-text-color: #e6dfd5;            /* texte beige clair */
+  --subtitle-color: #f5f0e6;                /* beige très clair (titres) */
+  --mp3-text-color: #d8cfc2;                /* texte checkbox */
+
+  /* Formulaire */
+  --form-bg-color: #2a2a2a;                 /* fond formulaire gris sombre */
+  --form-input-bg-color: #222222;           /* fond inputs sombre */
+  --form-input-border-color: #4a4036;       /* bordure beige/brun */
+  --form-input-border-focus-color: #cbb89d; /* beige doré en focus */
+  --form-input-text-color: #f0e8dd;         /* texte clair/beige */
+  --form-input-placeholder-color: #9a8f80;  /* placeholder beige/gris */
+  --form-button-bg-color: #cbb89d;          /* bouton beige doré */
+  --form-button-text-color: #1a1a1a;        /* texte sombre */
+  --form-button-bg-hover-color: #b7a588;    /* hover beige plus foncé */
+
+  /* Checkbox */
+  --checkbox-bg-default: #4a4036;             /* brun/gris */
+  --checkbox-bg-checked: #cbb89d;             /* beige doré */
+  --checkbox-checkmark-border-color: #1a1a1a; /* noir profond */
+  --checkbox-pulse-color: rgba(203,184,157,0.3); /* halo beige doux */
+
+  /* Download status */
+  --download-status-color: #cbb89d;           /* beige doré */
+
+  /* Video Info Box */
+  --infos-box-color: #2a2a2a;                 /* fond sombre */
+  --video-info-text-color: #e6dfd5;           /* texte beige clair */
+  --video-info-heading-color: #f5f0e6;        /* titres beige clair */
+  --video-info-list-color: #d8cfc2;           /* texte liste */
+  --video-info-list-strong-color: #ffffff;    /* texte fort blanc cassé */
+  --video-info-link-color: #cbb89d;           /* liens beige doré */
+  --video-info-link-hover-color: #b7a588;     /* hover beige plus foncé */
+}
+
+/* Fond inspiré de ton image beige */
+body.nf {
+  background-image: url('../../assets/images/NF.jpg'); /* mets ton image ici */
+  background-size: cover;
+  background-position: 70% center; 
+  background-attachment: fixed;
+}
+
+body.nf .download-path {
+  color: var(--default-text-color);
+}

public/styles/theme/spicy-theme.css

@@ -1,8 +1,14 @@
+/* 
+
+  
+
+*/
+
 body.spicy {
   /* Couleurs générales */
   --background-color: #121212;             /* fond noir profond */
-  --default-text-color: #f5f5f5;           /* texte clair */
-  --subtitle-color: #e29191;               /* accent rouge piment */
+  --default-text-color: #581010;           /* texte clair */
+  --subtitle-color: #3d0909;               /* accent rouge piment */
   --mp3-text-color: #ffffff;               /* texte checkbox inline */
 
   /* Formulaire */
@@ -37,8 +43,8 @@ body.spicy {
 
 /* Optionnel: background piments */
 body.spicy {
-  background-image: url('../../assets/images/spicy.webp');  
-  background-size: cover;
+  background-image: url('../../assets/images/Spicy.webp');  
+  background-size:contain;
   background-position: center;
   background-attachment: fixed;
 }

public/styles/theme/themeimport.css

@@ -5,4 +5,5 @@
 @import url("light-theme.css");
 @import url("cyberpunk-theme.css");
 @import url("spicy-theme.css");
-@import url("vilbrequin-theme.css");
+@import url("vilbrequin-theme.css");
+@import url("nf-theme.css");

public/styles/theme/vilbrequin-theme.css

@@ -37,7 +37,7 @@ body.vilbrequin {
 
 /* Optionnel: motif turbo ou jantes */
 body.vilbrequin {
-  background-image: url('../../assets/images/Vilbrequin.avif'); /* adapte ton image */
+  background-image: url('../../assets/images/Vilbrequin.webp'); /* adapte ton image */
   background-size: cover;
   background-position: center;
   background-attachment: fixed;