diff --git a/public/assets/images/Songbird.webp b/public/assets/images/Songbird.webp new file mode 100644 index 0000000..e43a4b8 Binary files /dev/null and b/public/assets/images/Songbird.webp differ diff --git a/public/index.html b/public/index.html index 874a800..c34f0a3 100644 --- a/public/index.html +++ b/public/index.html @@ -64,8 +64,11 @@
-
-
+
+
+
+
+
diff --git a/public/script/customthemes.js b/public/script/customthemes.js index b158d74..88b0df7 100644 --- a/public/script/customthemes.js +++ b/public/script/customthemes.js @@ -4,6 +4,7 @@ const themes = { light: { label: "Clair", subtitle: "Qui aime ce thème ?" }, neon: { label: "Néon", subtitle: "How was your day ?"}, nf: { label: "NF", subtitle: "You call it music, i call it my Therapist" }, + songbird: { label: "Songbird", subtitle: "From Her to Eternity" }, drift: { label: "Drift", subtitle: "Si la route t'appelle, contre appel" }, fanatic: { label: "Fanatic", subtitle: "Always Fnatic !" }, chirac: { label: "Chirac", subtitle: "J'aime les pommes" }, diff --git a/public/styles/components/progressBar.css b/public/styles/components/progressBar.css index e973728..7a38726 100644 --- a/public/styles/components/progressBar.css +++ b/public/styles/components/progressBar.css @@ -20,7 +20,7 @@ transition: width 0.2s ease; } -#downloadProgressText { +#downloadProgressText, #downloadSpeedText { text-align: center; font-size: 0.8rem; color: #fff; @@ -35,7 +35,7 @@ height: 10px; } - #downloadProgressText { + #downloadProgressText, #downloadSpeedText { font-size: 0.7rem; } } diff --git a/public/styles/layout/videoinfo.css b/public/styles/layout/videoinfo.css index fd997d6..743dc00 100644 --- a/public/styles/layout/videoinfo.css +++ b/public/styles/layout/videoinfo.css @@ -89,7 +89,7 @@ /* Un item de playlist */ #playlistVideos > div { - background: #3f3f3f; + background: var(--playlist-background-color); border-radius: 10px; padding: 10px; box-shadow: 0 4px 12px rgba(0,0,0,0.15); diff --git a/public/styles/theme/chirac-theme.css b/public/styles/theme/chirac-theme.css index 6818b5c..daee9f3 100644 --- a/public/styles/theme/chirac-theme.css +++ b/public/styles/theme/chirac-theme.css @@ -33,12 +33,15 @@ body.chirac { /* Video Info Box */ --infos-box-color: rgba(255, 255, 255, 0.9); - --video-info-text-color: #002395; + --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; } diff --git a/public/styles/theme/dark-theme.css b/public/styles/theme/dark-theme.css index 534b815..b259c33 100644 --- a/public/styles/theme/dark-theme.css +++ b/public/styles/theme/dark-theme.css @@ -33,4 +33,7 @@ body.dark { --video-info-list-strong-color: #ffffff; --video-info-link-color: #2196f3; --video-info-link-hover-color: #1976d2; + + /* Playlist Color */ + --playlist-background-color: #303030; } diff --git a/public/styles/theme/default-theme.css b/public/styles/theme/default-theme.css index a3fa903..a3d2017 100644 --- a/public/styles/theme/default-theme.css +++ b/public/styles/theme/default-theme.css @@ -26,13 +26,16 @@ --download-status-color: #007bff; /* Video Info Box */ - --infos-box-color: #f0f0f0; - --video-info-text-color: #222222; + --infos-box-color: #0c0140; + --video-info-text-color: #ffffff; --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: #070823a3; } body.default .download-path #savePath { diff --git a/public/styles/theme/drift-theme.css b/public/styles/theme/drift-theme.css index c88693d..9d318a7 100644 --- a/public/styles/theme/drift-theme.css +++ b/public/styles/theme/drift-theme.css @@ -32,16 +32,20 @@ body.drift { --download-status-color: #ff8e8e; /* Video Info Box */ - --infos-box-color: #1e222a; + --infos-box-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; } + body.drift .download-path{ color: #ededed; } diff --git a/public/styles/theme/fanatic-theme.css b/public/styles/theme/fanatic-theme.css index 3601445..3f8ff0c 100644 --- a/public/styles/theme/fanatic-theme.css +++ b/public/styles/theme/fanatic-theme.css @@ -33,4 +33,7 @@ body.fanatic{ --video-info-list-strong-color: #fff; --video-info-link-color: #FF5900; --video-info-link-hover-color: #e65500; + + /* Playlist Color */ + --playlist-background-color: #2b2b2b; } diff --git a/public/styles/theme/light-theme.css b/public/styles/theme/light-theme.css index 12d7724..862f47d 100644 --- a/public/styles/theme/light-theme.css +++ b/public/styles/theme/light-theme.css @@ -33,4 +33,7 @@ body.light { --video-info-list-strong-color: #000000; --video-info-link-color: #007bff; --video-info-link-hover-color: #0056b3; + + /* Playlist Color */ + --playlist-background-color: #c5c5c5b2; } diff --git a/public/styles/theme/neon-theme.css b/public/styles/theme/neon-theme.css index 544a23a..987cd83 100644 --- a/public/styles/theme/neon-theme.css +++ b/public/styles/theme/neon-theme.css @@ -40,6 +40,9 @@ body.neon { --video-info-list-strong-color: #ffffff; --video-info-link-color: #5858f0; --video-info-link-hover-color: #7a7aff; + + /* Playlist Color */ + --playlist-background-color: #3e3e64; } body.neon .download-path { diff --git a/public/styles/theme/nf-theme.css b/public/styles/theme/nf-theme.css index 5bef409..65b086a 100644 --- a/public/styles/theme/nf-theme.css +++ b/public/styles/theme/nf-theme.css @@ -39,6 +39,9 @@ body.nf { --video-info-list-strong-color: #ffffff; --video-info-link-color: #cbb89d; --video-info-link-hover-color: #b7a588; + + /* Playlist Color */ + --playlist-background-color: #4f4f4f; } body.nf .download-path { diff --git a/public/styles/theme/songbird-theme.css b/public/styles/theme/songbird-theme.css new file mode 100644 index 0000000..3eaaab3 --- /dev/null +++ b/public/styles/theme/songbird-theme.css @@ -0,0 +1,49 @@ +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 */ + --mp3-text-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; + + /* Checkbox */ + --checkbox-bg-default: #630000; + --checkbox-bg-checked: #ff2a2a; + --checkbox-checkmark-border-color: #ffffff; + --checkbox-pulse-color: rgba(255,42,42,0.3); + + /* Download status */ + --download-status-color: #ff2a2a; + + /* Video Info Box */ + --infos-box-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; +} + +body.cyberpunk .download-path { + color: var(--default-text-color); +} diff --git a/public/styles/theme/themeimport.css b/public/styles/theme/themeimport.css index 3e2a493..3adb993 100644 --- a/public/styles/theme/themeimport.css +++ b/public/styles/theme/themeimport.css @@ -5,4 +5,5 @@ @import url("light-theme.css"); @import url("nf-theme.css"); @import url("drift-theme.css"); -@import url("neon-theme.css"); \ No newline at end of file +@import url("neon-theme.css"); +@import url("songbird-theme.css"); \ No newline at end of file