From 0cdce29e4002cfb865c42e30c1cb7e0a11178fd6 Mon Sep 17 00:00:00 2001 From: trochas Date: Sat, 10 Jan 2026 13:29:15 +0100 Subject: [PATCH] correction quelques variable css --- front_end/src/App.css | 38 ++++++++++------- front_end/src/components/style/edt.css | 42 +++++++++---------- front_end/src/components/style/objectList.css | 3 ++ 3 files changed, 46 insertions(+), 37 deletions(-) diff --git a/front_end/src/App.css b/front_end/src/App.css index b8a16e1..06b9594 100644 --- a/front_end/src/App.css +++ b/front_end/src/App.css @@ -8,16 +8,19 @@ --tint5: #373d48; --text: #FFFFFF; --text2: #000000; - --accent1: #44c1ee; - --accent2: #0b235f; - --disable: #030918; + --accent1: #10b981; + --accent2: #059669; + --disable: #047857; --green-primary: #10b981; --green-secondary: #059669; --green-dark: #047857; + --green-A-primary: #10b98120; + --green-A-secondary: #05966920; + --green-A-dark: #04785720; } [data-theme='light'] { - --tint0: #FFFFFF; + --tint0: #ffffff; --tint1: #f4f1f1; --tint2: #e8e4e3; --tint3: #ddd6d5; @@ -25,12 +28,15 @@ --tint5: #c6bab8; --text: #000000; --text2: #FFFFFF; - --accent1: #44c1ee; - --accent2: #113388; - --disable: #061231; - --green-primary: #10b981; - --green-secondary: #059669; - --green-dark: #047857; + --accent1: #00ce89; + --accent2: #00a571; + --disable: #00825d; + --green-primary: #00ce89; + --green-secondary: #00a571; + --green-dark: #00825d; + --green-A-primary: #00ce8920; + --green-A-secondary: #00a57120; + --green-A-dark: #00825d20; } /* Reset et base */ @@ -109,14 +115,14 @@ code { background-color: var(--tint1); border-radius: 20px; padding: 20px; - border: 2px solid rgba(16, 185, 129, 0.3); + border: 2px solid var(--green-A-secondary); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); transition: all 0.3s ease; } .card:hover { border-color: var(--green-primary); - box-shadow: 0 6px 16px rgba(16, 185, 129, 0.15); + box-shadow: 0 6px 16px var(--green-A-primary); transform: translateY(-2px); } @@ -156,7 +162,7 @@ textarea:focus { outline: none; border-color: var(--green-primary); background-color: var(--tint3); - box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1); + box-shadow: 0 0 0 3px var(--green-A-primary); } /* Conteneur de boutons inline */ @@ -187,7 +193,7 @@ select { select:focus { outline: none; border-color: var(--green-primary); - box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1); + box-shadow: 0 0 0 3px var(--green-A-primary); } select option { @@ -233,14 +239,14 @@ button.primary { background: linear-gradient(135deg, var(--green-primary), var(--green-secondary)); color: white; border: none; - box-shadow: 0 4px 6px rgba(16, 185, 129, 0.3); + box-shadow: 0 4px 6px var(--green-A-primary); padding: 5px 10px; } .btn-primary:hover, button.primary:hover { background: linear-gradient(135deg, var(--green-secondary), var(--green-dark)); - box-shadow: 0 6px 12px rgba(16, 185, 129, 0.4); + box-shadow: 0 6px 12px var(--green-A-primary); } /* Bouton secondaire */ diff --git a/front_end/src/components/style/edt.css b/front_end/src/components/style/edt.css index c00cbb8..fcb798c 100644 --- a/front_end/src/components/style/edt.css +++ b/front_end/src/components/style/edt.css @@ -3,7 +3,7 @@ background-color: var(--tint1); border-radius: 30px; padding: 10px; - border: 2px solid #10b981; /* Bordure verte */ + border: 2px solid var(--green-primary); /* Bordure verte */ box-shadow: 0 4px 6px rgba(16, 185, 129, 0.1); } @@ -41,7 +41,7 @@ } .edt_colonne:hover { - border-color: #10b981; + border-color: var(--green-primary); box-shadow: 0 2px 8px rgba(16, 185, 129, 0.15); } @@ -49,10 +49,10 @@ font-size: clamp(5px, 1vw, 18px); padding: 8px; border-radius: 20px; - height: 30px; + height: fit-content; text-align: center; font-size: 1em; - background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(16, 185, 129, 0.05)); + background: linear-gradient(135deg, var(--green-A-primary), var(--green-A-secondary)); font-weight: 600; } @@ -72,7 +72,7 @@ border-radius: 12px; padding: 5%; min-width: 0; - border-left: 3px solid #10b981; /* Accent vert à gauche */ + border-left: 3px solid var(--green-primary); /* Accent vert à gauche */ transition: all 0.3s ease; cursor: pointer; } @@ -81,7 +81,7 @@ background-color: var(--tint2); border-left-width: 5px; transform: translateX(3px); - box-shadow: -2px 2px 8px rgba(16, 185, 129, 0.2); + box-shadow: -2px 2px 8px var(--green-A-primary); } .edt_session:active { @@ -100,7 +100,7 @@ } .edt_button_week_select{ - background: linear-gradient(135deg, #10b981, #059669); + background: linear-gradient(135deg, var(--green-primary), var( --green-secondary)); color: white; height: 40px; border-radius: 20px; @@ -109,18 +109,18 @@ font-weight: 600; cursor: pointer; transition: all 0.3s ease; - box-shadow: 0 2px 4px rgba(16, 185, 129, 0.2); + box-shadow: 0 2px 4px var(--green-A-primary); } .edt_button_week_select:hover { - background: linear-gradient(135deg, #059669, #047857); + background: linear-gradient(135deg, var(--green-secondary), var(--green-dark)); transform: translateY(-2px); - box-shadow: 0 4px 8px rgba(16, 185, 129, 0.3); + box-shadow: 0 4px 8px var(--green-A-primary); } .edt_button_week_select:active { transform: translateY(0); - box-shadow: 0 1px 2px rgba(16, 185, 129, 0.2); + box-shadow: 0 1px 2px var(--green-A-primary); } .edt_session_modal{ @@ -128,15 +128,15 @@ padding: 10px; border-radius: 20px; position: relative; - border: 2px solid #10b981; - box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(16, 185, 129, 0.1); + border: 2px solid var(--green-primary); + box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1), 0 0 0 1px var(--green-A-primary); } .ent_activite_list{ padding: 10px; background-color: var(--tint3); border-radius: 10px; - border: 1px solid rgba(16, 185, 129, 0.2); + border: 1px solid var(--green-A-primary); } .edt_activite_modal{ @@ -145,14 +145,14 @@ border-radius: 20px; position: relative; border: 2px solid #10b981; - box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15); + box-shadow: 0 4px 12px var(--green-A-primary); } /* Classes bonus pour d'autres boutons */ .edt_button_secondary { background-color: var(--tint3); color: var(--text); - border: 2px solid #10b981; + border: 2px solid var(--green-primary); border-radius: 15px; padding: 10px 20px; cursor: pointer; @@ -161,14 +161,14 @@ } .edt_button_secondary:hover { - background-color: rgba(16, 185, 129, 0.1); - border-color: #059669; + background-color: var(--green-A-primary); + border-color: var(--green-secondary); } .edt_button_outline { background: transparent; - color: #10b981; - border: 2px solid #10b981; + color: var(--green-primary); + border: 2px solid var(--green-primary); border-radius: 18px; padding: 8px 16px; cursor: pointer; @@ -177,7 +177,7 @@ } .edt_button_outline:hover { - background-color: #10b981; + background-color: var(--green-primary); color: white; transform: scale(1.05); } \ No newline at end of file diff --git a/front_end/src/components/style/objectList.css b/front_end/src/components/style/objectList.css index 09d1bca..d9b464c 100644 --- a/front_end/src/components/style/objectList.css +++ b/front_end/src/components/style/objectList.css @@ -14,9 +14,12 @@ border-radius: 12px; padding: 10px; min-width: 0; + border: 2px solid; + border-color: var(--tint3); } .object:hover { background-color: var(--tint2); + border-color: var(--green-primary); } .object:active {