Feat: restructuration du CSS

front_end/src/index.css

@@ -1,39 +1,46 @@
-[data-theme='dark']{
+/* Variables de thème globales */
-  --tint0: #000000; /* 0% */
+[data-theme='dark'] {
-  --tint1: #0b0c0e; /* 5% */
+  --tint0: #000000;
-  --tint2: #16181d; /* 10% */
+  --tint1: #0b0c0e;
-  --tint3: #21252b; /* 15% */
+  --tint2: #16181d;
-  --tint4: #2c313a; /* 20% */
+  --tint3: #21252b;
-  --tint5: #373d48; /* 25% */
+  --tint4: #2c313a;
-
+  --tint5: #373d48;
-
   --text: #FFFFFF;
-  --text2:#000000;
+  --text2: #000000;
-
   --accent1: #44c1ee;
   --accent2: #0b235f;
   --disable: #030918;
+  --green-primary: #10b981;
+  --green-secondary: #059669;
+  --green-dark: #047857;
 }
 
-[data-theme='light']{
+[data-theme='light'] {
-  --tint0: #FFFFFF; /* 100% */
+  --tint0: #FFFFFF;
-  --tint1: #f4f1f1; /* 95% */
+  --tint1: #f4f1f1;
-  --tint2: #e8e4e3; /* 90% */
+  --tint2: #e8e4e3;
-  --tint3: #ddd6d5; /* 85% */
+  --tint3: #ddd6d5;
-  --tint4: #d2c8c6; /* 80% */
+  --tint4: #d2c8c6;
-  --tint5: #c6bab8; /* 75% */
+  --tint5: #c6bab8;
-
   --text: #000000;
-  --text2:#FFFFFF;
+  --text2: #FFFFFF;
-
   --accent1: #44c1ee;
   --accent2: #113388;
   --disable: #061231;
-
+  --green-primary: #10b981;
+  --green-secondary: #059669;
+  --green-dark: #047857;
 }
 
+/* Reset global */
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
 
-
+/* Styles de base */
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
@@ -41,70 +48,12 @@ body {
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
+  background-color: var(--tint0);
+  color: var(--text);
+  transition: background-color 0.3s ease, color 0.3s ease;
 }
 
 code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
-}
-
-.modal{
-  padding: 10px;
-  min-width: 200px;
-  min-height: 100px;
-}
-
-.loading{
-  width: 40px;
-  height: 40px;
-  animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-input{
-  background-color: var(--tint2);
-  color: var(--text);
-  border-color: var(--tint5);
-  border-radius: 8px;
-}
-
-button{
-  color: var(--text); 
-  background-color: var(--tint3);
-  border-radius: 8px;
-}
-
-select{
-  color: var(--text); 
-  background-color: var(--tint3);
-  border-radius: 8px;
-}
-
-.deleteButton{
-  background-color: #FF0000;
-  border-color: #AA0000;
-  border-radius: 10px;
-}
-
-.addButton{
-  background-color: var(--tint5);
-  border-radius: 10px;
-}
-
-.top_left_loading{
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-}
-
-.center_loading{
-  position: absolute;
-  inset: 0;
-  place-items: center;
-  pointer-events: none;
 }