Feat: ajout du CSS

This commit is contained in:
Amaël Kesteman
2026-01-10 11:33:03 +01:00
parent fca7362bb7
commit 5af249e0ca
7 changed files with 906 additions and 17 deletions

View File

@@ -1,7 +1,564 @@
.App {
background-color: var(--tint4);
color: var(--text);
min-height: 100vh;
padding: 16px;
/* Variables de thème */
[data-theme='dark'] {
--tint0: #000000;
--tint1: #0b0c0e;
--tint2: #16181d;
--tint3: #21252b;
--tint4: #2c313a;
--tint5: #373d48;
--text: #FFFFFF;
--text2: #000000;
--accent1: #44c1ee;
--accent2: #0b235f;
--disable: #030918;
--green-primary: #10b981;
--green-secondary: #059669;
--green-dark: #047857;
}
[data-theme='light'] {
--tint0: #FFFFFF;
--tint1: #f4f1f1;
--tint2: #e8e4e3;
--tint3: #ddd6d5;
--tint4: #d2c8c6;
--tint5: #c6bab8;
--text: #000000;
--text2: #FFFFFF;
--accent1: #44c1ee;
--accent2: #113388;
--disable: #061231;
--green-primary: #10b981;
--green-secondary: #059669;
--green-dark: #047857;
}
/* Reset et base */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
margin: 0;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
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;
background-color: var(--tint2);
padding: 2px 6px;
border-radius: 4px;
color: var(--green-primary);
}
/* Container principal */
.app-container {
min-height: 100vh;
background: linear-gradient(180deg, var(--tint0) 0%, var(--tint1) 100%);
}
/* Header / Navigation */
.app-header {
background-color: var(--tint1);
border-bottom: 2px solid var(--green-primary);
padding: 16px 24px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.app-nav {
display: flex;
gap: 16px;
align-items: center;
}
.app-nav a,
.nav-link {
color: var(--text);
text-decoration: none;
padding: 8px 16px;
border-radius: 8px;
transition: all 0.3s ease;
border: 2px solid transparent;
}
.app-nav a:hover,
.nav-link:hover {
background-color: var(--tint3);
border-color: var(--green-primary);
transform: translateY(-2px);
}
.app-nav a.active,
.nav-link.active {
background-color: var(--green-primary);
color: white;
}
/* Cards et containers */
.card {
background-color: var(--tint1);
border-radius: 20px;
padding: 20px;
border: 2px solid rgba(16, 185, 129, 0.3);
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);
transform: translateY(-2px);
}
.card-header {
border-bottom: 2px solid var(--green-primary);
padding-bottom: 12px;
margin-bottom: 16px;
color: var(--text);
font-weight: 600;
font-size: 1.2em;
}
.card-body {
color: var(--text);
}
/* Inputs */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
input[type="search"],
textarea {
background-color: var(--tint2);
color: var(--text);
border: 2px solid var(--tint5);
border-radius: 8px;
padding: 10px 14px;
transition: all 0.3s ease;
font-size: 15px;
}
input:focus,
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);
}
/* Conteneur de boutons inline */
.button-group,
.form-actions {
display: flex;
gap: 10px;
align-items: center;
flex-wrap: wrap;
}
input::placeholder,
textarea::placeholder {
color: var(--tint5);
}
/* Select */
select {
color: var(--text);
background-color: var(--tint3);
border: 2px solid var(--tint5);
border-radius: 8px;
padding: 10px 14px;
cursor: pointer;
transition: all 0.3s ease;
}
select:focus {
outline: none;
border-color: var(--green-primary);
box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.1);
}
select option {
background-color: var(--tint2);
color: var(--text);
}
/* Buttons */
button {
color: var(--text);
background-color: var(--tint3);
border: 2px solid var(--tint5);
border-radius: 8px;
padding: 5px 10px;
cursor: pointer;
transition: all 0.3s ease;
font-weight: 500;
font-size: 14px;
display: inline-block;
width: auto;
}
button:hover {
background-color: var(--tint4);
border-color: var(--green-primary);
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
button:active {
transform: translateY(0);
}
button:disabled {
opacity: 0.5;
cursor: not-allowed;
background-color: var(--disable);
}
/* Bouton primaire */
.btn-primary,
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);
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);
}
/* Bouton secondaire */
.btn-secondary,
button.secondary {
background-color: transparent;
color: var(--green-primary);
border: 2px solid var(--green-primary);
}
.btn-secondary:hover,
button.secondary:hover {
background-color: var(--green-primary);
color: white;
}
/* Bouton supprimer */
.deleteButton,
button.delete,
.btn-danger {
background-color: #dc2626;
border: 2px solid #991b1b;
border-radius: 10px;
color: white;
}
.deleteButton:hover,
button.delete:hover,
.btn-danger:hover {
background-color: #b91c1c;
border-color: #7f1d1d;
}
/* Bouton ajouter */
.addButton,
button.add,
.btn-success {
background-color: var(--green-primary);
border: none;
border-radius: 10px;
color: white;
}
.addButton:hover,
button.add:hover,
.btn-success:hover {
background-color: var(--green-secondary);
}
/* Modal */
.modal {
background-color: var(--tint2);
padding: 20px;
min-width: 300px;
min-height: 150px;
border-radius: 20px;
border: 2px solid var(--green-primary);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
position: relative;
}
.modal-overlay {
position: fixed;
inset: 0;
background-color: rgba(0, 0, 0, 0.7);
backdrop-filter: blur(4px);
display: grid;
place-items: center;
z-index: 1000;
}
.modal-header {
border-bottom: 2px solid var(--green-primary);
padding-bottom: 12px;
margin-bottom: 16px;
font-weight: 600;
font-size: 1.3em;
}
.modal-close {
position: absolute;
top: 10px;
right: 10px;
background-color: var(--tint4);
border: none;
border-radius: 50%;
width: 32px;
height: 32px;
cursor: pointer;
font-size: 18px;
display: grid;
place-items: center;
}
.modal-close:hover {
background-color: #dc2626;
color: white;
}
/* Loading */
.loading {
width: 40px;
height: 40px;
border: 3px solid var(--tint5);
border-top-color: var(--green-primary);
border-radius: 50%;
animation: spin 1s linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
.top_left_loading {
position: absolute;
inset: 0;
pointer-events: none;
display: flex;
padding: 10px;
}
.center_loading {
position: absolute;
inset: 0;
display: grid;
place-items: center;
pointer-events: none;
}
/* Tables */
table {
width: 100%;
border-collapse: collapse;
background-color: var(--tint1);
border-radius: 12px;
overflow: hidden;
}
thead {
background-color: var(--tint3);
border-bottom: 2px solid var(--green-primary);
}
th {
padding: 12px;
text-align: left;
font-weight: 600;
color: var(--text);
}
td {
padding: 12px;
border-bottom: 1px solid var(--tint4);
color: var(--text);
}
tr:hover {
background-color: var(--tint2);
}
/* Lists */
ul, ol {
color: var(--text);
padding-left: 20px;
}
li {
margin: 8px 0;
}
/* Links */
a {
color: var(--green-primary);
text-decoration: none;
transition: all 0.2s ease;
border-bottom: 2px solid transparent;
}
a:hover {
color: var(--green-secondary);
border-bottom-color: var(--green-primary);
}
/* Badges et tags */
.badge {
display: inline-block;
padding: 4px 12px;
border-radius: 12px;
font-size: 0.85em;
font-weight: 500;
background-color: var(--tint3);
color: var(--text);
border: 1px solid var(--tint5);
}
.badge-success {
background-color: rgba(16, 185, 129, 0.2);
color: var(--green-primary);
border-color: var(--green-primary);
}
.badge-danger {
background-color: rgba(220, 38, 38, 0.2);
color: #ef4444;
border-color: #dc2626;
}
.badge-warning {
background-color: rgba(245, 158, 11, 0.2);
color: #f59e0b;
border-color: #d97706;
}
/* Alerts */
.alert {
padding: 12px 16px;
border-radius: 10px;
margin: 12px 0;
border-left: 4px solid;
}
.alert-success {
background-color: rgba(16, 185, 129, 0.15);
border-left-color: var(--green-primary);
color: #6ee7b7;
}
.alert-error {
background-color: rgba(220, 38, 38, 0.15);
border-left-color: #ef4444;
color: #fca5a5;
}
.alert-warning {
background-color: rgba(245, 158, 11, 0.15);
border-left-color: #f59e0b;
color: #fcd34d;
}
.alert-info {
background-color: rgba(59, 130, 246, 0.15);
border-left-color: #3b82f6;
color: #93c5fd;
}
/* Scrollbar */
::-webkit-scrollbar {
width: 10px;
height: 10px;
}
::-webkit-scrollbar-track {
background: var(--tint2);
}
::-webkit-scrollbar-thumb {
background: var(--tint5);
border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
background: var(--green-primary);
}
/* Checkbox et radio */
input[type="checkbox"],
input[type="radio"] {
accent-color: var(--green-primary);
width: 18px;
height: 18px;
cursor: pointer;
}
/* Animations */
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.fade-in {
animation: fadeIn 0.3s ease;
}
.slide-up {
animation: slideUp 0.4s ease;
}
/* Responsive */
@media (max-width: 768px) {
.card {
padding: 16px;
border-radius: 15px;
}
button {
padding: 8px 16px;
font-size: 14px;
}
.modal {
min-width: 280px;
margin: 10px;
}
}

View File

@@ -3,14 +3,14 @@
background-color: var(--tint1);
border-radius: 30px;
padding: 10px;
border: 2px solid #10b981; /* Bordure verte */
box-shadow: 0 4px 6px rgba(16, 185, 129, 0.1);
}
.edt_header{
justify-content: center;
display: grid;
grid-template-columns: repeat(2, 0.5fr);
/* background-color: #0000FF; */
padding-bottom: 10px;
gap: 30%;
}
@@ -22,7 +22,6 @@
grid-template-columns: repeat(7, minmax(0, 1fr));
gap: 16px;
color: var(--text);
/* background-color: #00FF00; */
width: 100%;
}
@@ -30,7 +29,6 @@
position: absolute;
inset: 0;
display: grid;
/* place-items: center; */
pointer-events: none;
}
@@ -39,15 +37,23 @@
background-color: var(--tint3);
border-radius: 20px;
container-type: inline-size;
transition: all 0.3s ease;
}
.edt_colonne:hover {
border-color: #10b981;
box-shadow: 0 2px 8px rgba(16, 185, 129, 0.15);
}
.edt_day_header{
font-size: clamp(5px, 1vw, 18px);
padding: 8px;
/* background-color: var(--tint2); */
border-radius: 20px;
height: 30px;
text-align: center;
font-size: 1em;
background: linear-gradient(135deg, rgba(16, 185, 129, 0.1), rgba(16, 185, 129, 0.05));
font-weight: 600;
}
.edt_day_content{
@@ -57,26 +63,30 @@
padding: 8px;
border-radius: 20px;
min-width: 0;
/* background-color: #FF0000; */
}
.edt_session {
font-size: clamp(1px, 8cqi, 18px);
gap: 8px;
background-color: var(--tint4);
border-radius: 12px;
padding: 5%;
min-width: 0;
border-left: 3px solid #10b981; /* Accent vert à gauche */
transition: all 0.3s ease;
cursor: pointer;
}
.edt_session:hover {
background-color: var(--tint2);
border-left-width: 5px;
transform: translateX(3px);
box-shadow: -2px 2px 8px rgba(16, 185, 129, 0.2);
}
.edt_session:active {
background-color: var(--tint5);
transform: translateX(1px);
}
.edt_session_header{
@@ -86,33 +96,88 @@
.edt_date{
font-size: 0.75em;
font-weight: 500;
}
.edt_button_week_select{
background-color: var(--tint2);
color: var(--text);
background: linear-gradient(135deg, #10b981, #059669);
color: white;
height: 40px;
border-radius: 20px;
border: none;
padding: 0 20px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 2px 4px rgba(16, 185, 129, 0.2);
}
.edt_button_week_select:hover {
background: linear-gradient(135deg, #059669, #047857);
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(16, 185, 129, 0.3);
}
.edt_button_week_select:active {
transform: translateY(0);
box-shadow: 0 1px 2px rgba(16, 185, 129, 0.2);
}
.edt_session_modal{
background-color: var(--tint2);
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);
}
.ent_activite_list{
padding: 10px;
background-color: var(--tint3);
border-radius: 10px;
border: 1px solid rgba(16, 185, 129, 0.2);
}
.edt_activite_modal{
background-color: var(--tint3);
padding: 10px;
border-radius: 20px;
position: relative;
border: 2px solid #10b981;
box-shadow: 0 4px 12px rgba(16, 185, 129, 0.15);
}
/* Classes bonus pour d'autres boutons */
.edt_button_secondary {
background-color: var(--tint3);
color: var(--text);
border: 2px solid #10b981;
border-radius: 15px;
padding: 10px 20px;
cursor: pointer;
transition: all 0.3s ease;
font-weight: 500;
}
.edt_button_secondary:hover {
background-color: rgba(16, 185, 129, 0.1);
border-color: #059669;
}
.edt_button_outline {
background: transparent;
color: #10b981;
border: 2px solid #10b981;
border-radius: 18px;
padding: 8px 16px;
cursor: pointer;
transition: all 0.3s ease;
font-weight: 500;
}
.edt_button_outline:hover {
background-color: #10b981;
color: white;
transform: scale(1.05);
}