correction quelques variable css

This commit is contained in:
trochas
2026-01-10 13:29:15 +01:00
parent 1feda556ff
commit 0cdce29e40
3 changed files with 46 additions and 37 deletions

View File

@@ -8,16 +8,19 @@
--tint5: #373d48; --tint5: #373d48;
--text: #FFFFFF; --text: #FFFFFF;
--text2: #000000; --text2: #000000;
--accent1: #44c1ee; --accent1: #10b981;
--accent2: #0b235f; --accent2: #059669;
--disable: #030918; --disable: #047857;
--green-primary: #10b981; --green-primary: #10b981;
--green-secondary: #059669; --green-secondary: #059669;
--green-dark: #047857; --green-dark: #047857;
--green-A-primary: #10b98120;
--green-A-secondary: #05966920;
--green-A-dark: #04785720;
} }
[data-theme='light'] { [data-theme='light'] {
--tint0: #FFFFFF; --tint0: #ffffff;
--tint1: #f4f1f1; --tint1: #f4f1f1;
--tint2: #e8e4e3; --tint2: #e8e4e3;
--tint3: #ddd6d5; --tint3: #ddd6d5;
@@ -25,12 +28,15 @@
--tint5: #c6bab8; --tint5: #c6bab8;
--text: #000000; --text: #000000;
--text2: #FFFFFF; --text2: #FFFFFF;
--accent1: #44c1ee; --accent1: #00ce89;
--accent2: #113388; --accent2: #00a571;
--disable: #061231; --disable: #00825d;
--green-primary: #10b981; --green-primary: #00ce89;
--green-secondary: #059669; --green-secondary: #00a571;
--green-dark: #047857; --green-dark: #00825d;
--green-A-primary: #00ce8920;
--green-A-secondary: #00a57120;
--green-A-dark: #00825d20;
} }
/* Reset et base */ /* Reset et base */
@@ -109,14 +115,14 @@ code {
background-color: var(--tint1); background-color: var(--tint1);
border-radius: 20px; border-radius: 20px;
padding: 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); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
transition: all 0.3s ease; transition: all 0.3s ease;
} }
.card:hover { .card:hover {
border-color: var(--green-primary); 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); transform: translateY(-2px);
} }
@@ -156,7 +162,7 @@ textarea:focus {
outline: none; outline: none;
border-color: var(--green-primary); border-color: var(--green-primary);
background-color: var(--tint3); 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 */ /* Conteneur de boutons inline */
@@ -187,7 +193,7 @@ select {
select:focus { select:focus {
outline: none; outline: none;
border-color: var(--green-primary); 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 { select option {
@@ -233,14 +239,14 @@ button.primary {
background: linear-gradient(135deg, var(--green-primary), var(--green-secondary)); background: linear-gradient(135deg, var(--green-primary), var(--green-secondary));
color: white; color: white;
border: none; 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; padding: 5px 10px;
} }
.btn-primary:hover, .btn-primary:hover,
button.primary:hover { button.primary:hover {
background: linear-gradient(135deg, var(--green-secondary), var(--green-dark)); 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 */ /* Bouton secondaire */

View File

@@ -3,7 +3,7 @@
background-color: var(--tint1); background-color: var(--tint1);
border-radius: 30px; border-radius: 30px;
padding: 10px; 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); box-shadow: 0 4px 6px rgba(16, 185, 129, 0.1);
} }
@@ -41,7 +41,7 @@
} }
.edt_colonne:hover { .edt_colonne:hover {
border-color: #10b981; border-color: var(--green-primary);
box-shadow: 0 2px 8px rgba(16, 185, 129, 0.15); box-shadow: 0 2px 8px rgba(16, 185, 129, 0.15);
} }
@@ -49,10 +49,10 @@
font-size: clamp(5px, 1vw, 18px); font-size: clamp(5px, 1vw, 18px);
padding: 8px; padding: 8px;
border-radius: 20px; border-radius: 20px;
height: 30px; height: fit-content;
text-align: center; text-align: center;
font-size: 1em; 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; font-weight: 600;
} }
@@ -72,7 +72,7 @@
border-radius: 12px; border-radius: 12px;
padding: 5%; padding: 5%;
min-width: 0; 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; transition: all 0.3s ease;
cursor: pointer; cursor: pointer;
} }
@@ -81,7 +81,7 @@
background-color: var(--tint2); background-color: var(--tint2);
border-left-width: 5px; border-left-width: 5px;
transform: translateX(3px); 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 { .edt_session:active {
@@ -100,7 +100,7 @@
} }
.edt_button_week_select{ .edt_button_week_select{
background: linear-gradient(135deg, #10b981, #059669); background: linear-gradient(135deg, var(--green-primary), var( --green-secondary));
color: white; color: white;
height: 40px; height: 40px;
border-radius: 20px; border-radius: 20px;
@@ -109,18 +109,18 @@
font-weight: 600; font-weight: 600;
cursor: pointer; cursor: pointer;
transition: all 0.3s ease; 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 { .edt_button_week_select:hover {
background: linear-gradient(135deg, #059669, #047857); background: linear-gradient(135deg, var(--green-secondary), var(--green-dark));
transform: translateY(-2px); 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 { .edt_button_week_select:active {
transform: translateY(0); 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{ .edt_session_modal{
@@ -128,15 +128,15 @@
padding: 10px; padding: 10px;
border-radius: 20px; border-radius: 20px;
position: relative; position: relative;
border: 2px solid #10b981; border: 2px solid var(--green-primary);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1), 0 0 0 1px rgba(16, 185, 129, 0.1); box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1), 0 0 0 1px var(--green-A-primary);
} }
.ent_activite_list{ .ent_activite_list{
padding: 10px; padding: 10px;
background-color: var(--tint3); background-color: var(--tint3);
border-radius: 10px; border-radius: 10px;
border: 1px solid rgba(16, 185, 129, 0.2); border: 1px solid var(--green-A-primary);
} }
.edt_activite_modal{ .edt_activite_modal{
@@ -145,14 +145,14 @@
border-radius: 20px; border-radius: 20px;
position: relative; position: relative;
border: 2px solid #10b981; 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 */ /* Classes bonus pour d'autres boutons */
.edt_button_secondary { .edt_button_secondary {
background-color: var(--tint3); background-color: var(--tint3);
color: var(--text); color: var(--text);
border: 2px solid #10b981; border: 2px solid var(--green-primary);
border-radius: 15px; border-radius: 15px;
padding: 10px 20px; padding: 10px 20px;
cursor: pointer; cursor: pointer;
@@ -161,14 +161,14 @@
} }
.edt_button_secondary:hover { .edt_button_secondary:hover {
background-color: rgba(16, 185, 129, 0.1); background-color: var(--green-A-primary);
border-color: #059669; border-color: var(--green-secondary);
} }
.edt_button_outline { .edt_button_outline {
background: transparent; background: transparent;
color: #10b981; color: var(--green-primary);
border: 2px solid #10b981; border: 2px solid var(--green-primary);
border-radius: 18px; border-radius: 18px;
padding: 8px 16px; padding: 8px 16px;
cursor: pointer; cursor: pointer;
@@ -177,7 +177,7 @@
} }
.edt_button_outline:hover { .edt_button_outline:hover {
background-color: #10b981; background-color: var(--green-primary);
color: white; color: white;
transform: scale(1.05); transform: scale(1.05);
} }

View File

@@ -14,9 +14,12 @@
border-radius: 12px; border-radius: 12px;
padding: 10px; padding: 10px;
min-width: 0; min-width: 0;
border: 2px solid;
border-color: var(--tint3);
} }
.object:hover { .object:hover {
background-color: var(--tint2); background-color: var(--tint2);
border-color: var(--green-primary);
} }
.object:active { .object:active {