Linus-Enjoyer/Freedom-Loader
1
0
Fork 0
mirror of https://github.com/MasterAcnolo/Freedom-Loader.git synced 2026-07-29 18:25:47 +02:00
Code Issues Packages Projects Releases Wiki Activity

Refactor: Update CSS variables

Browse Source 
Fix Progress bar
This commit is contained in:
MasterAcnolo
2026-04-11 15:17:05 +02:00
parent 24460cf0b5
commit 00c542925c
20 changed files with 165 additions and 120 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
public/index.html
View File

@@ -242,14 +242,15 @@
<button id="changePath">Edit</button> <button id="changePath">Edit</button>
</div> </div>
<div class="progress-container">
<div id="downloadProgressWrapper"> <div id="downloadProgressWrapper">
<div id="downloadProgress"></div> <div id="downloadProgress"></div>
</div> </div>
<div style="display: flex; gap: 20px;"> <div style="display: flex; gap: 20px;">
<div id="downloadProgressText"></div> <div id="downloadProgressText"></div>
<div id="downloadSpeedText"></div> <div id="downloadSpeedText"></div>
</div> </div>
</div>
<div id="downloadStatus"></div> <div id="downloadStatus"></div>

4
public/styles/components/checkbox.css
View File

@@ -15,13 +15,13 @@
} }
.checkmark { .checkmark {
--clr: var(--checkbox-bg-checked); --clr: var(--checkbox-checked-bg-color);
position: relative; position: relative;
top: 0; top: 0;
left: 0; left: 0;
height: 1.3em; height: 1.3em;
width: 1.3em; width: 1.3em;
background-color: var(--checkbox-bg-default); background-color: var(--checkbox-unchecked-bg-color);
border-radius: .5rem; border-radius: .5rem;
transition: background-color 300ms, border-radius 300ms; transition: background-color 300ms, border-radius 300ms;
} }

4
public/styles/components/loader.css
View File

@@ -4,9 +4,9 @@
gap: 10px; gap: 10px;
padding: 10px 20px; padding: 10px 20px;
background: var(--form-bg-color); background: var(--form-bg-color);
border: 2px solid var(--mp3-text-color); border: 2px solid var(--audio-only-label-color);
border-radius: 8px; border-radius: 8px;
color: var(--mp3-text-color); color: var(--audio-only-label-color);
font-weight: bold; font-weight: bold;
animation: pulse 1.2s infinite; animation: pulse 1.2s infinite;
} }

22
public/styles/components/progressBar.css
View File

@@ -1,22 +1,34 @@
/* Container pour isoler la progress bar */
.progress-container {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
padding: 10px 0;
margin-top: 20px;
}
/* Wrapper de la barre de téléchargement */ /* Wrapper de la barre de téléchargement */
#downloadProgressWrapper { #downloadProgressWrapper {
width: 100%; width: 100%;
max-width: 400px; max-width: 400px;
height: 12px; height: 12px;
background-color: #444; background-color: var(--progress-bar-bg-color, #cccccc);
border-radius: 6px; border-radius: 10px;
overflow: hidden; overflow: hidden;
margin: 10px auto; margin: 0;
display: none; display: none;
box-shadow: inset 0 1px 3px rgba(0,0,0,0.5); box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
box-sizing: border-box;
} }
/* Barre de progression */ /* Barre de progression */
#downloadProgress { #downloadProgress {
height: 100%; height: 100%;
width: 0%; width: 0%;
background-color: var(--video-info-link-color, #4caf50); background-color: var(--progress-bar-fill-color, #007bff);
border-radius: 6px 0 0 6px; border-radius: 10px;
transition: width 0.2s ease; transition: width 0.2s ease;
} }

3
public/styles/layout/form.css
View File

@@ -50,7 +50,7 @@ form#downloadForm {
align-items: center; align-items: center;
align-self: center; align-self: center;
gap: 0.5em; gap: 0.5em;
color: var(--form-input-text-color); color: var(--audio-only-label-color);
} }
#UrlInput { #UrlInput {
@@ -108,6 +108,7 @@ form#downloadForm {
} }
.paste-btn svg { .paste-btn svg {
color: var(--paste-button-icon-color);
width: 30px; width: 30px;
height: 30px; height: 30px;
} }

12
public/styles/layout/header.css
View File

@@ -1,11 +1,13 @@
header { header {
position: fixed;
top: 0;
width: 100%;
height: 48px;
z-index: 1100;
display: flex; display: flex;
flex-direction: column;
align-items: center; align-items: center;
margin-bottom: 2vw;
} }
#title {
header h1{ color: var(--default-text-color);
margin-bottom: 0.2vw;
} }

4
public/styles/layout/settingsPanel.css
View File

@@ -40,7 +40,7 @@
width: 40vw; width: 40vw;
max-width: 320px; max-width: 320px;
max-height: 80vh; max-height: 80vh;
background-color: var(--settings-bg-primary-color); background-color: var(--settings-modal-bg-color);
border-radius: 12px; border-radius: 12px;
padding: 20px; padding: 20px;
box-shadow: 0 8px 24px rgba(0,0,0,0.4); box-shadow: 0 8px 24px rgba(0,0,0,0.4);
@@ -89,7 +89,7 @@
flex-direction: column; flex-direction: column;
margin-bottom: 20px; margin-bottom: 20px;
padding: 10px 15px; padding: 10px 15px;
background: var(--settings-bg-secondary-color); background: var(--settings-section-bg-color);
border-radius: 12px; border-radius: 12px;
gap: 6px; gap: 6px;
} }

10
public/styles/layout/topbar.css
View File

@@ -2,20 +2,12 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
position: fixed;
top: 0;
z-index: 1100;
height: 48px;
width: 100%; width: 100%;
height: 100%;
background: #1f1f1f98; background: #1f1f1f98;
color: #eaeaea; color: #eaeaea;
-webkit-app-region: drag; -webkit-app-region: drag;
user-select: none; user-select: none;
} }
/* LEFT - custom buttons */ /* LEFT - custom buttons */

2
public/styles/layout/videoinfo.css
View File

@@ -4,7 +4,7 @@
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
padding: 1.5em 2em; padding: 1.5em 2em;
background-color: var(--infos-box-color); background-color: var(--video-info-bg-color);
border-radius: 12px; border-radius: 12px;
box-shadow: 0 8px 16px rgba(0,0,0,0.1); box-shadow: 0 8px 16px rgba(0,0,0,0.1);
color: var(--video-info-text-color); color: var(--video-info-text-color);

29
public/styles/styles.css
View File

@@ -1,18 +1,20 @@
/* Layout */ /* Layout */
@import url("layout/form.css"); @import url("layout/topbar.css");
@import url("layout/settingsPanel.css");
@import url("layout/container.css");
@import url("layout/header.css"); @import url("layout/header.css");
@import url("layout/form.css");
@import url("layout/container.css");
@import url("layout/settingsPanel.css");
@import url("layout/videoinfo.css"); @import url("layout/videoinfo.css");
/* Components */ /* Components */
@import url("components/checkbox.css"); @import url("components/checkbox.css");
@import url("components/loader.css"); @import url("components/loader.css");
@import url("theme/themeimport.css");
@import url("components/editpathbutton.css"); @import url("components/editpathbutton.css");
@import url("components/progressBar.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'); @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 { #app {
@@ -45,21 +47,9 @@ html,body{
font-style: normal; font-style: normal;
} }
html {
height: 100%;
}
body{ body{
margin: 0;
padding: 0;
background-color: var(--background-color); background-color: var(--background-color);
width: 100%;
height: 100%;
color: var(--default-text-color); color: var(--default-text-color);
display: flex;
flex-direction: column;
align-items: center;
position: relative;
} }
header { header {
@@ -81,6 +71,7 @@ main {
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
padding: 0; padding: 0;
gap: 0;
} }
/* Scrollbar pour main */ /* Scrollbar pour main */
@@ -128,10 +119,6 @@ body.light main::-webkit-scrollbar-thumb:hover {
color: var(--subtitle-color); color: var(--subtitle-color);
} }
.checkbox-inline{
color: var(--mp3-text-color);
}
body, body,
.container, .container,
input, input,

17
public/styles/theme/chirac-theme.css
View File

@@ -9,7 +9,7 @@ body.chirac {
--background-color: rgba(255, 255, 255, 0.85); --background-color: rgba(255, 255, 255, 0.85);
--default-text-color: #002395; --default-text-color: #002395;
--subtitle-color: #EF4135; --subtitle-color: #EF4135;
--mp3-text-color: #002395; --audio-only-label-color: #002395;
/* Formulaire */ /* Formulaire */
--form-bg-color: rgba(255, 255, 255, 0.9); --form-bg-color: rgba(255, 255, 255, 0.9);
@@ -21,18 +21,23 @@ body.chirac {
--form-button-bg-color: #002395; --form-button-bg-color: #002395;
--form-button-text-color: #ffffff; --form-button-text-color: #ffffff;
--form-button-bg-hover-color: #EF4135; --form-button-bg-hover-color: #EF4135;
--paste-button-icon-color: #ffffff;
/* Checkbox */ /* Checkbox */
--checkbox-bg-default: #cccccc; --checkbox-unchecked-bg-color: #cccccc;
--checkbox-bg-checked: #002395; --checkbox-checked-bg-color: #002395;
--checkbox-checkmark-border-color: #ffffff; --checkbox-checkmark-border-color: #ffffff;
--checkbox-pulse-color: rgba(0, 35, 149, 0.5); --checkbox-pulse-color: rgba(0, 35, 149, 0.5);
/* Download status */ /* Download status */
--download-status-color: #002395; --download-status-color: #002395;
/* Progress bar */
--progress-bar-bg-color: #d0d0d0;
--progress-bar-fill-color: #EF4135;
/* Video Info Box */ /* Video Info Box */
--infos-box-color: rgba(255, 255, 255, 0.9); --video-info-bg-color: rgba(255, 255, 255, 0.9);
--video-info-text-color: #000000; --video-info-text-color: #000000;
--video-info-heading-color: #EF4135; --video-info-heading-color: #EF4135;
--video-info-list-color: #444444; --video-info-list-color: #444444;
@@ -47,8 +52,8 @@ body.chirac {
--settings-button-bg-color: #00196a; --settings-button-bg-color: #00196a;
--settings-button-text-color: #dcdcdc; --settings-button-text-color: #dcdcdc;
--settings-bg-primary-color: #0b0528; --settings-modal-bg-color: #0b0528;
--settings-bg-secondary-color: #1c1055; --settings-section-bg-color: #1c1055;
--settings-text-color: #cecece; --settings-text-color: #cecece;
--settings-subtitle-color: #adadad; --settings-subtitle-color: #adadad;

17
public/styles/theme/dark-theme.css
View File

@@ -3,7 +3,7 @@ body.dark {
--background-color: #121212; /* noir/gris très foncé */ --background-color: #121212; /* noir/gris très foncé */
--default-text-color: #e0e0e0; /* texte clair */ --default-text-color: #e0e0e0; /* texte clair */
--subtitle-color: #2196f3; /* bleu accent */ --subtitle-color: #2196f3; /* bleu accent */
--mp3-text-color: #f5f5f5; /* texte checkbox */ --audio-only-label-color: #f5f5f5; /* texte checkbox */
/* Formulaire */ /* Formulaire */
--form-bg-color: #1e1e1e; /* fond formulaire */ --form-bg-color: #1e1e1e; /* fond formulaire */
@@ -15,18 +15,23 @@ body.dark {
--form-button-bg-color: #2196f3; /* bouton bleu */ --form-button-bg-color: #2196f3; /* bouton bleu */
--form-button-text-color: #ffffff; /* texte bouton */ --form-button-text-color: #ffffff; /* texte bouton */
--form-button-bg-hover-color: #1976d2; /* hover bleu plus foncé */ --form-button-bg-hover-color: #1976d2; /* hover bleu plus foncé */
--paste-button-icon-color: #ffffff;
/* Checkbox */ /* Checkbox */
--checkbox-bg-default: #555555; /* gris moyen */ --checkbox-unchecked-bg-color: #555555; /* gris moyen */
--checkbox-bg-checked: #2196f3; /* bleu accent */ --checkbox-checked-bg-color: #2196f3; /* bleu accent */
--checkbox-checkmark-border-color: #ffffff; /* blanc */ --checkbox-checkmark-border-color: #ffffff; /* blanc */
--checkbox-pulse-color: rgba(33, 150, 243, 0.5); --checkbox-pulse-color: rgba(33, 150, 243, 0.5);
/* Download status */ /* Download status */
--download-status-color: #2196f3; --download-status-color: #2196f3;
/* Progress bar */
--progress-bar-bg-color: #444444;
--progress-bar-fill-color: #2196f3;
/* Video Info Box */ /* Video Info Box */
--infos-box-color: #1a1a1a; --video-info-bg-color: #1a1a1a;
--video-info-text-color: #e0e0e0; --video-info-text-color: #e0e0e0;
--video-info-heading-color: #2196f3; --video-info-heading-color: #2196f3;
--video-info-list-color: #cccccc; --video-info-list-color: #cccccc;
@@ -41,8 +46,8 @@ body.dark {
--settings-button-bg-color: #1e1e1e; --settings-button-bg-color: #1e1e1e;
--settings-button-text-color: var(--default-text-color); --settings-button-text-color: var(--default-text-color);
--settings-bg-primary-color: #1e1e1e; --settings-modal-bg-color: #1e1e1e;
--settings-bg-secondary-color: #2a2a2a; --settings-section-bg-color: #2a2a2a;
--settings-text-color: var(--default-text-color); --settings-text-color: var(--default-text-color);
--settings-subtitle-color: #aaa; --settings-subtitle-color: #aaa;

17
public/styles/theme/drift-theme.css
View File

@@ -9,7 +9,7 @@ body.drift {
--background-color: #0f1218; --background-color: #0f1218;
--default-text-color: #3d4b61; --default-text-color: #3d4b61;
--subtitle-color: #1a1a1a; --subtitle-color: #1a1a1a;
--mp3-text-color: #c0d4ff; --audio-only-label-color: #c0d4ff;
/* Formulaire */ /* Formulaire */
--form-bg-color: #1e222a; --form-bg-color: #1e222a;
@@ -21,18 +21,23 @@ body.drift {
--form-button-bg-color: #2a2979; --form-button-bg-color: #2a2979;
--form-button-text-color: #ffffff; --form-button-text-color: #ffffff;
--form-button-bg-hover-color: #353393; --form-button-bg-hover-color: #353393;
--paste-button-icon-color: #ffffff;
/* Checkbox */ /* Checkbox */
--checkbox-bg-default: #2a2e38; --checkbox-unchecked-bg-color: #2a2e38;
--checkbox-bg-checked: #2a2979; --checkbox-checked-bg-color: #2a2979;
--checkbox-checkmark-border-color: #ffffff; --checkbox-checkmark-border-color: #ffffff;
--checkbox-pulse-color: rgba(76,108,255,0.3); --checkbox-pulse-color: rgba(76,108,255,0.3);
/* Download status */ /* Download status */
--download-status-color: #ff8e8e; --download-status-color: #ff8e8e;
/* Progress bar */
--progress-bar-bg-color: #3b4b6d;
--progress-bar-fill-color: #ff8e8e;
/* Video Info Box */ /* Video Info Box */
--infos-box-color: #1e222ad0; --video-info-bg-color: #1e222ad0;
--video-info-text-color: #e8e8f0; --video-info-text-color: #e8e8f0;
--video-info-heading-color: #9ab6ff; --video-info-heading-color: #9ab6ff;
--video-info-list-color: #c0d4ff; --video-info-list-color: #c0d4ff;
@@ -47,8 +52,8 @@ body.drift {
--settings-button-bg-color: #1e222ace; --settings-button-bg-color: #1e222ace;
--settings-button-text-color: #b3b3b4; --settings-button-text-color: #b3b3b4;
--settings-bg-primary-color: #1e222a; --settings-modal-bg-color: #1e222a;
--settings-bg-secondary-color: #272d38; --settings-section-bg-color: #272d38;
--settings-text-color: #bababa; --settings-text-color: #bababa;
--settings-subtitle-color: #cacaca; --settings-subtitle-color: #cacaca;

17
public/styles/theme/fanatic-theme.css
View File

@@ -3,7 +3,7 @@ body.fanatic{
--background-color: #121212; --background-color: #121212;
--default-text-color: #eee; --default-text-color: #eee;
--subtitle-color: #FF5900; --subtitle-color: #FF5900;
--mp3-text-color: #ffffff; --audio-only-label-color: #ffffff;
/* Formulaire */ /* Formulaire */
--form-bg-color: #1e1e1e; --form-bg-color: #1e1e1e;
@@ -15,18 +15,23 @@ body.fanatic{
--form-button-bg-color: #FF5900; --form-button-bg-color: #FF5900;
--form-button-text-color: #121212; --form-button-text-color: #121212;
--form-button-bg-hover-color: #e65500; --form-button-bg-hover-color: #e65500;
--paste-button-icon-color: #f1f1f1;
/* Checkbox */ /* Checkbox */
--checkbox-bg-default: #555555; --checkbox-unchecked-bg-color: #555555;
--checkbox-bg-checked: #ff6600; --checkbox-checked-bg-color: #ff6600;
--checkbox-checkmark-border-color: #eee; --checkbox-checkmark-border-color: #eee;
--checkbox-pulse-color: rgba(255, 102, 0, 0.5); --checkbox-pulse-color: rgba(255, 102, 0, 0.5);
/* Download status */ /* Download status */
--download-status-color: #FF5900; --download-status-color: #FF5900;
/* Progress bar */
--progress-bar-bg-color: #444444;
--progress-bar-fill-color: #FF5900;
/* Video Info Box */ /* Video Info Box */
--infos-box-color: #222222; --video-info-bg-color: #222222;
--video-info-text-color: #eee; --video-info-text-color: #eee;
--video-info-heading-color: #FF5900; --video-info-heading-color: #FF5900;
--video-info-list-color: #ccc; --video-info-list-color: #ccc;
@@ -41,8 +46,8 @@ body.fanatic{
--settings-button-bg-color: #1e1e1e; --settings-button-bg-color: #1e1e1e;
--settings-button-text-color: #dcdcdc; --settings-button-text-color: #dcdcdc;
--settings-bg-primary-color: #1e1e1e; --settings-modal-bg-color: #1e1e1e;
--settings-bg-secondary-color: #2d2d2d; --settings-section-bg-color: #2d2d2d;
--settings-text-color: #cecece; --settings-text-color: #cecece;
--settings-subtitle-color: #adadad; --settings-subtitle-color: #adadad;

17
public/styles/theme/light-theme.css
View File

@@ -3,7 +3,7 @@ body.light {
--background-color: #dadada; --background-color: #dadada;
--default-text-color: #222222; --default-text-color: #222222;
--subtitle-color: #007bff; --subtitle-color: #007bff;
--mp3-text-color: #000000; --audio-only-label-color: #000000;
/* Formulaire */ /* Formulaire */
--form-bg-color: #ffffff; --form-bg-color: #ffffff;
@@ -15,18 +15,23 @@ body.light {
--form-button-bg-color: #007bff; --form-button-bg-color: #007bff;
--form-button-text-color: #ffffff; --form-button-text-color: #ffffff;
--form-button-bg-hover-color: #0056b3; --form-button-bg-hover-color: #0056b3;
--paste-button-icon-color: #ffffff;
/* Checkbox */ /* Checkbox */
--checkbox-bg-default: #cccccc; --checkbox-unchecked-bg-color: #cccccc;
--checkbox-bg-checked: #007bff; --checkbox-checked-bg-color: #007bff;
--checkbox-checkmark-border-color: #ffffff; --checkbox-checkmark-border-color: #ffffff;
--checkbox-pulse-color: rgba(0, 123, 255, 0.4); --checkbox-pulse-color: rgba(0, 123, 255, 0.4);
/* Download status */ /* Download status */
--download-status-color: #007bff; --download-status-color: #007bff;
/* Progress bar */
--progress-bar-bg-color: #e0e0e0;
--progress-bar-fill-color: #007bff;
/* Video Info Box */ /* Video Info Box */
--infos-box-color: #ffffff; --video-info-bg-color: #ffffff;
--video-info-text-color: #222222; --video-info-text-color: #222222;
--video-info-heading-color: #007bff; --video-info-heading-color: #007bff;
--video-info-list-color: #444444; --video-info-list-color: #444444;
@@ -41,8 +46,8 @@ body.light {
--settings-button-bg-color: #e4e4e4; --settings-button-bg-color: #e4e4e4;
--settings-button-text-color: var(--default-text-color); --settings-button-text-color: var(--default-text-color);
--settings-bg-primary-color: #cbcbcb; --settings-modal-bg-color: #cbcbcb;
--settings-bg-secondary-color: #b8b8b8; --settings-section-bg-color: #b8b8b8;
--settings-text-color: var(--default-text-color); --settings-text-color: var(--default-text-color);
--settings-subtitle-color: #656565; --settings-subtitle-color: #656565;
} }

17
public/styles/theme/neon-theme.css
View File

@@ -10,7 +10,7 @@ body.neon {
--background-color: #1b1b2f; --background-color: #1b1b2f;
--default-text-color: #e0e0ff; --default-text-color: #e0e0ff;
--subtitle-color: #a3a3ff; --subtitle-color: #a3a3ff;
--mp3-text-color: #c0c0ff; --audio-only-label-color: #c0c0ff;
/* Formulaire */ /* Formulaire */
--form-bg-color: #2c2c4a; --form-bg-color: #2c2c4a;
@@ -22,18 +22,23 @@ body.neon {
--form-button-bg-color: #5858f0; --form-button-bg-color: #5858f0;
--form-button-text-color: #ffffff; --form-button-text-color: #ffffff;
--form-button-bg-hover-color: #7a7aff; --form-button-bg-hover-color: #7a7aff;
--paste-button-icon-color: #ffffff;
/* Checkbox */ /* Checkbox */
--checkbox-bg-default: #302b63; --checkbox-unchecked-bg-color: #302b63;
--checkbox-bg-checked: #5858f0; --checkbox-checked-bg-color: #5858f0;
--checkbox-checkmark-border-color: #ffffff; --checkbox-checkmark-border-color: #ffffff;
--checkbox-pulse-color: rgba(88,88,240,0.3); --checkbox-pulse-color: rgba(88,88,240,0.3);
/* Download status */ /* Download status */
--download-status-color: #a3a3ff; --download-status-color: #a3a3ff;
/* Progress bar */
--progress-bar-bg-color: #302b63;
--progress-bar-fill-color: #a3a3ff;
/* Video Info Box */ /* Video Info Box */
--infos-box-color: #2c2c4a; --video-info-bg-color: #2c2c4a;
--video-info-text-color: #e0e0ff; --video-info-text-color: #e0e0ff;
--video-info-heading-color: #a3a3ff; --video-info-heading-color: #a3a3ff;
--video-info-list-color: #c0c0ff; --video-info-list-color: #c0c0ff;
@@ -48,8 +53,8 @@ body.neon {
--settings-button-bg-color: #202038; --settings-button-bg-color: #202038;
--settings-button-text-color: var(--default-text-color); --settings-button-text-color: var(--default-text-color);
--settings-bg-primary-color: #242454; --settings-modal-bg-color: #242454;
--settings-bg-secondary-color: #2f2f6f; --settings-section-bg-color: #2f2f6f;
--settings-text-color: var(--default-text-color); --settings-text-color: var(--default-text-color);
--settings-subtitle-color: #d2d2d2; --settings-subtitle-color: #d2d2d2;
} }

17
public/styles/theme/nf-theme.css
View File

@@ -9,7 +9,7 @@ body.nf {
--background-color: #1a1a1a; --background-color: #1a1a1a;
--default-text-color: #e6dfd5; --default-text-color: #e6dfd5;
--subtitle-color: #f5f0e6; --subtitle-color: #f5f0e6;
--mp3-text-color: #d8cfc2; --audio-only-label-color: #d8cfc2;
/* Formulaire */ /* Formulaire */
--form-bg-color: #2a2a2a; --form-bg-color: #2a2a2a;
@@ -21,18 +21,23 @@ body.nf {
--form-button-bg-color: #cbb89d; --form-button-bg-color: #cbb89d;
--form-button-text-color: #1a1a1a; --form-button-text-color: #1a1a1a;
--form-button-bg-hover-color: #b7a588; --form-button-bg-hover-color: #b7a588;
--paste-button-icon-color: #1a1a1a;
/* Checkbox */ /* Checkbox */
--checkbox-bg-default: #4a4036; --checkbox-unchecked-bg-color: #4a4036;
--checkbox-bg-checked: #cbb89d; --checkbox-checked-bg-color: #cbb89d;
--checkbox-checkmark-border-color: #1a1a1a; --checkbox-checkmark-border-color: #1a1a1a;
--checkbox-pulse-color: rgba(203,184,157,0.3); --checkbox-pulse-color: rgba(203,184,157,0.3);
/* Download status */ /* Download status */
--download-status-color: #cbb89d; --download-status-color: #cbb89d;
/* Progress bar */
--progress-bar-bg-color: #4a4036;
--progress-bar-fill-color: #cbb89d;
/* Video Info Box */ /* Video Info Box */
--infos-box-color: #2a2a2a; --video-info-bg-color: #2a2a2a;
--video-info-text-color: #e6dfd5; --video-info-text-color: #e6dfd5;
--video-info-heading-color: #f5f0e6; --video-info-heading-color: #f5f0e6;
--video-info-list-color: #d8cfc2; --video-info-list-color: #d8cfc2;
@@ -47,8 +52,8 @@ body.nf {
--settings-button-bg-color: #2a2a2a; --settings-button-bg-color: #2a2a2a;
--settings-button-text-color: var(--default-text-color); --settings-button-text-color: var(--default-text-color);
--settings-bg-primary-color: #2a2a2a; --settings-modal-bg-color: #2a2a2a;
--settings-bg-secondary-color: #313131; --settings-section-bg-color: #313131;
--settings-text-color: var(--default-text-color); --settings-text-color: var(--default-text-color);
--settings-subtitle-color: #7a7979; --settings-subtitle-color: #7a7979;
} }

17
public/styles/theme/songbird-theme.css
View File

@@ -9,7 +9,7 @@ body.songbird {
--background-color: #0a0a0a; /* noir profond */ --background-color: #0a0a0a; /* noir profond */
--default-text-color: #ff2a2a; /* rouge néon */ --default-text-color: #ff2a2a; /* rouge néon */
--subtitle-color: #f2f2f2; /* rouge sombre */ --subtitle-color: #f2f2f2; /* rouge sombre */
--mp3-text-color: #ff4d4d; /* rouge un peu plus clair */ --audio-only-label-color: #ff4d4d; /* rouge un peu plus clair */
/* Formulaire */ /* Formulaire */
--form-bg-color: rgba(20,0,0,0.85); /* noir semi-transparent avec rouge */ --form-bg-color: rgba(20,0,0,0.85); /* noir semi-transparent avec rouge */
@@ -21,18 +21,23 @@ body.songbird {
--form-button-bg-color: #b30000; --form-button-bg-color: #b30000;
--form-button-text-color: #ffffff; --form-button-text-color: #ffffff;
--form-button-bg-hover-color: #ff2a2a; --form-button-bg-hover-color: #ff2a2a;
--paste-button-icon-color: #ffffff;
/* Checkbox */ /* Checkbox */
--checkbox-bg-default: #630000; --checkbox-unchecked-bg-color: #630000;
--checkbox-bg-checked: #ff2a2a; --checkbox-checked-bg-color: #ff2a2a;
--checkbox-checkmark-border-color: #ffffff; --checkbox-checkmark-border-color: #ffffff;
--checkbox-pulse-color: rgba(255,42,42,0.3); --checkbox-pulse-color: rgba(255,42,42,0.3);
/* Download status */ /* Download status */
--download-status-color: #ff2a2a; --download-status-color: #ff2a2a;
/* Progress bar */
--progress-bar-bg-color: #630000;
--progress-bar-fill-color: #ff2a2a;
/* Video Info Box */ /* Video Info Box */
--infos-box-color: rgba(30,0,0,0.9); --video-info-bg-color: rgba(30,0,0,0.9);
--video-info-text-color: #ff4d4d; --video-info-text-color: #ff4d4d;
--video-info-heading-color: #ff2a2a; --video-info-heading-color: #ff2a2a;
--video-info-list-color: #b30000; --video-info-list-color: #b30000;
@@ -47,8 +52,8 @@ body.songbird {
--settings-button-bg-color: rgba(29, 0, 0, 0.784); --settings-button-bg-color: rgba(29, 0, 0, 0.784);
--settings-button-text-color: var(--default-text-color); --settings-button-text-color: var(--default-text-color);
--settings-bg-primary-color: #121212; --settings-modal-bg-color: #121212;
--settings-bg-secondary-color: #1a1a1a; --settings-section-bg-color: #1a1a1a;
--settings-text-color: var(--default-text-color); --settings-text-color: var(--default-text-color);
--settings-subtitle-color: #7a7979; --settings-subtitle-color: #7a7979;
} }

17
public/styles/theme/spicy-theme.css
View File

@@ -3,7 +3,7 @@ body.spicy {
--background-color: #121212; /* fond noir profond */ --background-color: #121212; /* fond noir profond */
--default-text-color: #ffffff; /* texte clair */ --default-text-color: #ffffff; /* texte clair */
--subtitle-color: #f87918; /* accent rouge piment */ --subtitle-color: #f87918; /* accent rouge piment */
--mp3-text-color: #ffffff; /* texte checkbox inline */ --audio-only-label-color: #ffffff; /* texte checkbox inline */
/* Formulaire */ /* Formulaire */
--form-bg-color: #1a1a1a; /* fond formulaire gris très foncé */ --form-bg-color: #1a1a1a; /* fond formulaire gris très foncé */
@@ -15,18 +15,23 @@ body.spicy {
--form-button-bg-color: #ff1a1a; /* bouton rouge vif */ --form-button-bg-color: #ff1a1a; /* bouton rouge vif */
--form-button-text-color: #ffffff; /* texte bouton blanc */ --form-button-text-color: #ffffff; /* texte bouton blanc */
--form-button-bg-hover-color: #cc0000; /* hover rouge foncé */ --form-button-bg-hover-color: #cc0000; /* hover rouge foncé */
--paste-button-icon-color: #ffffff;
/* Checkbox */ /* Checkbox */
--checkbox-bg-default: #555555; /* gris moyen */ --checkbox-unchecked-bg-color: #555555; /* gris moyen */
--checkbox-bg-checked: #ff1a1a; /* rouge piment */ --checkbox-checked-bg-color: #ff1a1a; /* rouge piment */
--checkbox-checkmark-border-color: #f5f5f5; /* blanc cassé */ --checkbox-checkmark-border-color: #f5f5f5; /* blanc cassé */
--checkbox-pulse-color: rgba(255, 26, 26, 0.5); /* pulse rouge translucide */ --checkbox-pulse-color: rgba(255, 26, 26, 0.5); /* pulse rouge translucide */
/* Download status */ /* Download status */
--download-status-color: #ffffff; /* rouge vif */ --download-status-color: #ffffff; /* rouge vif */
/* Progress bar */
--progress-bar-bg-color: #444444;
--progress-bar-fill-color: #ff1a1a;
/* Video Info Box */ /* Video Info Box */
--infos-box-color: #1a1a1a; /* fond infos gris foncé */ --video-info-bg-color: #1a1a1a; /* fond infos gris foncé */
--video-info-text-color: #f5f5f5; /* texte clair */ --video-info-text-color: #f5f5f5; /* texte clair */
--video-info-heading-color: #ff1a1a; /* titres rouges */ --video-info-heading-color: #ff1a1a; /* titres rouges */
--video-info-list-color: #cccccc; /* texte liste gris clair */ --video-info-list-color: #cccccc; /* texte liste gris clair */
@@ -41,8 +46,8 @@ body.spicy {
--settings-button-bg-color: #1a1a1a; --settings-button-bg-color: #1a1a1a;
--settings-button-text-color: #dcdcdc; --settings-button-text-color: #dcdcdc;
--settings-bg-primary-color: #1a1a1a; --settings-modal-bg-color: #1a1a1a;
--settings-bg-secondary-color: #292929; --settings-section-bg-color: #292929;
--settings-text-color: #cecece; --settings-text-color: #cecece;
--settings-subtitle-color: #adadad; --settings-subtitle-color: #adadad;

17
public/styles/variables.css
View File

@@ -3,7 +3,7 @@
--background-color: #001224; --background-color: #001224;
--default-text-color: #eee; --default-text-color: #eee;
--subtitle-color: #007bff; --subtitle-color: #007bff;
--mp3-text-color: #000000; --audio-only-label-color: #000000;
/* Formulaire */ /* Formulaire */
--form-bg-color: #ffffff; --form-bg-color: #ffffff;
@@ -15,18 +15,23 @@
--form-button-bg-color: #007bff; --form-button-bg-color: #007bff;
--form-button-text-color: #ffffff; --form-button-text-color: #ffffff;
--form-button-bg-hover-color: #0056b3; --form-button-bg-hover-color: #0056b3;
--paste-button-icon-color: #ffffff;
/* Checkbox */ /* Checkbox */
--checkbox-bg-default: #cccccc; --checkbox-unchecked-bg-color: #cccccc;
--checkbox-bg-checked: #3B82F6; --checkbox-checked-bg-color: #3B82F6;
--checkbox-checkmark-border-color: #E0E0E2; --checkbox-checkmark-border-color: #E0E0E2;
--checkbox-pulse-color: rgba(59, 130, 246, 0.5); --checkbox-pulse-color: rgba(59, 130, 246, 0.5);
/* Download status */ /* Download status */
--download-status-color: #007bff; --download-status-color: #007bff;
/* Progress bar */
--progress-bar-bg-color: #cccccc;
--progress-bar-fill-color: #007bff;
/* Video Info Box */ /* Video Info Box */
--infos-box-color: #f0f0f0; --video-info-bg-color: #f0f0f0;
--video-info-text-color: #222222; --video-info-text-color: #222222;
--video-info-heading-color: #007bff; --video-info-heading-color: #007bff;
--video-info-list-color: #444444; --video-info-list-color: #444444;
@@ -38,8 +43,8 @@
--settings-button-bg-color: var(--form-bg-color); --settings-button-bg-color: var(--form-bg-color);
--settings-button-text-color: var(--default-text-color); --settings-button-text-color: var(--default-text-color);
--settings-bg-primary-color: var(--form-bg-color); --settings-modal-bg-color: var(--form-bg-color);
--settings-bg-secondary-color: var(--form-bg-color); --settings-section-bg-color: var(--form-bg-color);
--settings-text-color: var(--default-text-color); --settings-text-color: var(--default-text-color);
--settings-subtitle-color: #aaa; --settings-subtitle-color: #aaa;