From c720bc93ff08dcd4467ad75682675a44b204de19 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Ama=C3=ABl=20Kesteman?= Date: Sat, 10 Jan 2026 15:28:07 +0100 Subject: [PATCH] Feat: restructuration du CSS --- front_end/src/index.css | 117 ++++++++++++---------------------------- 1 file changed, 33 insertions(+), 84 deletions(-) diff --git a/front_end/src/index.css b/front_end/src/index.css index f6f9478..355219c 100644 --- a/front_end/src/index.css +++ b/front_end/src/index.css @@ -1,39 +1,46 @@ -[data-theme='dark']{ - --tint0: #000000; /* 0% */ - --tint1: #0b0c0e; /* 5% */ - --tint2: #16181d; /* 10% */ - --tint3: #21252b; /* 15% */ - --tint4: #2c313a; /* 20% */ - --tint5: #373d48; /* 25% */ - - +/* Variables de thème globales */ +[data-theme='dark'] { + --tint0: #000000; + --tint1: #0b0c0e; + --tint2: #16181d; + --tint3: #21252b; + --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']{ - --tint0: #FFFFFF; /* 100% */ - --tint1: #f4f1f1; /* 95% */ - --tint2: #e8e4e3; /* 90% */ - --tint3: #ddd6d5; /* 85% */ - --tint4: #d2c8c6; /* 80% */ - --tint5: #c6bab8; /* 75% */ - +[data-theme='light'] { + --tint0: #FFFFFF; + --tint1: #f4f1f1; + --tint2: #e8e4e3; + --tint3: #ddd6d5; + --tint4: #d2c8c6; + --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; } \ No newline at end of file