CSS Variable Begin

public/styles/components/checkbox.css

@@ -1,5 +1,3 @@
-/* From Uiverse.io by bociKond */ 
-/* Hide the default checkbox */
 .checkbox-mp3 input {
   position: absolute;
   opacity: 0;
@@ -16,9 +14,8 @@
   user-select: none;
 }
 
-/* Create a custom checkbox */
 .checkmark {
-  --clr: #0B6E4F;
+  --clr: #3B82F6 ;
   position: relative;
   top: 0;
   left: 0;
@@ -29,26 +26,22 @@
   transition: 300ms;
 }
 
-/* When the checkbox is checked, add a blue background */
 .checkbox-mp3 input:checked ~ .checkmark {
   background-color: var(--clr);
   border-radius: .5rem;
   animation: pulse 500ms ease-in-out;
 }
 
-/* Create the checkmark/indicator (hidden when not checked) */
 .checkmark:after {
   content: "";
   position: absolute;
   display: none;
 }
 
-/* Show the checkmark when checked */
 .checkbox-mp3 input:checked ~ .checkmark:after {
   display: block;
 }
 
-/* Style the checkmark/indicator */
 .container .checkmark:after {
   left: 0.45em;
   top: 0.25em;
@@ -61,7 +54,7 @@
 
 @keyframes pulse {
   0% {
-    box-shadow: 0 0 0 #0B6E4F90;
+    box-shadow: 0 0 0 var(--checkbox-pulse-color);
     rotate: 20deg;
   }
 
@@ -70,11 +63,11 @@
   }
 
   75% {
-    box-shadow: 0 0 0 10px #0B6E4F60;
+    box-shadow: 0 0 0 10px var(--checkbox-pulse-color);
   }
 
   100% {
-    box-shadow: 0 0 0 13px #0B6E4F30;
+    box-shadow: 0 0 0 13px var(--checkbox-pulse-color);
     rotate: 0;
   }
 }

public/styles/styles.css

@@ -3,7 +3,8 @@
 @import url("layout/ctr-infos.css");
 @import url("layout/header.css");
 @import url("layout/videoinfo.css");
-@import url("button/checkbox.css");
+@import url("components/checkbox.css");
+@import url("variables.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');
 
@@ -11,22 +12,22 @@ html,body{
     margin: 0;
     padding: 0;
     scroll-behavior: smooth;
-    /* outline: 2px solid red; */
-      font-family: "Poppins", sans-serif;
+    /* outline: 2px solid red; */ /*<-- Utile pour le début ça */ 
+    font-family: "Poppins", sans-serif;
     font-weight: 500;
     font-style: normal;
 }
 
 body {
     margin: 0;
-    /* background-color: #f5f5f5; */
-    background-image: linear-gradient(to left top, #838383, #a1a1a1, #bfbfbf, #dfdfdf, #ffffff);
+    background-color: var(--background-color);
+    /* background-image: linear-gradient(to left top, #838383, #a1a1a1, #bfbfbf, #dfdfdf, #ffffff);
     background-size: cover;
     background-position: center;
-    background-attachment: fixed;
+    background-attachment: fixed; */
     width: 100%;
     height: 100%;
-    color: #333;
+    color:  #F8FAFC;
     display: flex;
     justify-content: center;
     align-items: center;   
@@ -34,9 +35,15 @@ body {
     flex-direction: column;
     align-items: center;
 
- 
 }
 
+header p{
+  color: var(--subtitle-color);
+}
+
+.checkbox-inline{
+  color: var(--mp3-text-color);
+}
 
 /* #videoInfo {
   margin-top: 100px; 

public/styles/variables.css

@@ -0,0 +1,9 @@
+:root{
+    --background-color : #0F172A;
+    --title-color: ;
+    --subtitle-color : #a3aab4;
+    --mp3-text-color: #0F172A;
+    --default-text-color: #F8FAFC;
+
+    --checkbox-pulse-color:#9bbcf1;
+}