Feat: Custom Theme features and clean the old one

This commit is contained in:
MasterAcnolo
2026-04-11 18:10:51 +02:00
parent 9f88fe19c3
commit 23d11d8933
26 changed files with 400 additions and 657 deletions

View File

@@ -12,9 +12,6 @@
@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 {

View File

@@ -1,108 +0,0 @@
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;
--audio-only-label-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;
--paste-button-icon-color: #ffffff;
/* Checkbox */
--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 */
--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;
--video-info-list-strong-color: #000000;
--video-info-link-color: #002395;
--video-info-link-hover-color: #EF4135;
/* Playlist Color */
--playlist-background-color: #d1d1d1ca;
/* Settings */
--settings-button-bg-color: #00196a;
--settings-button-text-color: #dcdcdc;
--settings-modal-bg-color: #0b0528;
--settings-section-bg-color: #1c1055;
--settings-text-color: #cecece;
--settings-subtitle-color: #adadad;
}
/*
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
*/

View File

@@ -1,54 +0,0 @@
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 */
--audio-only-label-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é */
--paste-button-icon-color: #ffffff;
/* Checkbox */
--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 */
--video-info-bg-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;
/* Playlist Color */
--playlist-background-color: #303030;
/* Settings */
--settings-button-bg-color: #1e1e1e;
--settings-button-text-color: var(--default-text-color);
--settings-modal-bg-color: #1e1e1e;
--settings-section-bg-color: #2a2a2a;
--settings-text-color: var(--default-text-color);
--settings-subtitle-color: #aaa;
}

View File

@@ -1,66 +0,0 @@
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;
--audio-only-label-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;
--paste-button-icon-color: #ffffff;
/* Checkbox */
--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 */
--video-info-bg-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;
/* Settings */
--settings-button-bg-color: #1e222ace;
--settings-button-text-color: #b3b3b4;
--settings-modal-bg-color: #1e222a;
--settings-section-bg-color: #272d38;
--settings-text-color: #bababa;
--settings-subtitle-color: #cacaca;
}
body.drift .download-path{
color: #ededed;
}

View File

@@ -1,54 +0,0 @@
body.fanatic{
/* Couleurs générales */
--background-color: #121212;
--default-text-color: #eee;
--subtitle-color: #FF5900;
--audio-only-label-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;
--paste-button-icon-color: #f1f1f1;
/* Checkbox */
--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 */
--video-info-bg-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;
/* Playlist Color */
--playlist-background-color: #2b2b2b;
/* Settings */
--settings-button-bg-color: #1e1e1e;
--settings-button-text-color: #dcdcdc;
--settings-modal-bg-color: #1e1e1e;
--settings-section-bg-color: #2d2d2d;
--settings-text-color: #cecece;
--settings-subtitle-color: #adadad;
}

View File

@@ -1,53 +0,0 @@
body.light {
/* Couleurs générales */
--background-color: #dadada;
--default-text-color: #222222;
--subtitle-color: #007bff;
--audio-only-label-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;
--paste-button-icon-color: #ffffff;
/* Checkbox */
--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 */
--video-info-bg-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;
/* Playlist Color */
--playlist-background-color: #c5c5c5b2;
/* Settings */
--settings-button-bg-color: #e4e4e4;
--settings-button-text-color: var(--default-text-color);
--settings-modal-bg-color: #cbcbcb;
--settings-section-bg-color: #b8b8b8;
--settings-text-color: var(--default-text-color);
--settings-subtitle-color: #656565;
}

View File

@@ -1,64 +0,0 @@
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;
--audio-only-label-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;
--paste-button-icon-color: #ffffff;
/* Checkbox */
--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 */
--video-info-bg-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;
/* Playlist Color */
--playlist-background-color: #3e3e64;
/* Settings */
--settings-button-bg-color: #202038;
--settings-button-text-color: var(--default-text-color);
--settings-modal-bg-color: #242454;
--settings-section-bg-color: #2f2f6f;
--settings-text-color: var(--default-text-color);
--settings-subtitle-color: #d2d2d2;
}
body.neon .download-path {
color: var(--default-text-color);
}

View File

@@ -1,63 +0,0 @@
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;
--audio-only-label-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;
--paste-button-icon-color: #1a1a1a;
/* Checkbox */
--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 */
--video-info-bg-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;
/* Playlist Color */
--playlist-background-color: #4f4f4f;
/* Settings */
--settings-button-bg-color: #2a2a2a;
--settings-button-text-color: var(--default-text-color);
--settings-modal-bg-color: #2a2a2a;
--settings-section-bg-color: #313131;
--settings-text-color: var(--default-text-color);
--settings-subtitle-color: #7a7979;
}
body.nf .download-path {
color: var(--default-text-color);
}

View File

@@ -1,63 +0,0 @@
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 */
--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 */
--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;
--paste-button-icon-color: #ffffff;
/* Checkbox */
--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 */
--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;
--video-info-list-strong-color: #ffffff;
--video-info-link-color: #ff2a2a;
--video-info-link-hover-color: #b30000;
/* Playlist Color */
--playlist-background-color: #3f0000;
/* Settings */
--settings-button-bg-color: rgba(29, 0, 0, 0.784);
--settings-button-text-color: var(--default-text-color);
--settings-modal-bg-color: #121212;
--settings-section-bg-color: #1a1a1a;
--settings-text-color: var(--default-text-color);
--settings-subtitle-color: #7a7979;
}
body.cyberpunk .download-path {
color: var(--default-text-color);
}

View File

@@ -1,64 +0,0 @@
body.spicy {
/* Couleurs générales */
--background-color: #121212; /* fond noir profond */
--default-text-color: #ffffff; /* texte clair */
--subtitle-color: #f87918; /* accent rouge piment */
--audio-only-label-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é */
--paste-button-icon-color: #ffffff;
/* Checkbox */
--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 */
--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 */
--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é */
/* Playlist Color */
--playlist-background-color: #353232;
/* Settings */
--settings-button-bg-color: #1a1a1a;
--settings-button-text-color: #dcdcdc;
--settings-modal-bg-color: #1a1a1a;
--settings-section-bg-color: #292929;
--settings-text-color: #cecece;
--settings-subtitle-color: #adadad;
}
/* Optionnel: background piments */
body.spicy {
background-image: url('../../assets/images/Spicy.png');
background-size:cover;
background-position: center;
background-attachment: fixed;
background-repeat: no-repeat;
}

View File

@@ -1,9 +0,0 @@
@import url("chirac-theme.css");
@import url("dark-theme.css");
@import url("fanatic-theme.css");
@import url("light-theme.css");
@import url("nf-theme.css");
@import url("drift-theme.css");
@import url("neon-theme.css");
@import url("songbird-theme.css");
@import url("spicy-theme.css")

View File

@@ -39,6 +39,9 @@
--video-info-link-color: #007bff;
--video-info-link-hover-color: #0056b3;
/* Playlist */
--playlist-background-color: #4f4f4f;
/* Settings */
--settings-button-bg-color: var(--form-bg-color);
--settings-button-text-color: var(--default-text-color);