perco/HouseHub
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

test debug dark mode
Deploy HouseHub / deploy (push) Successful in 2s
Details

Browse Source
This commit is contained in:
Cedric
2026-05-12 12:00:08 +02:00
parent 35c3ef020d
commit 19ab75f7df
5 changed files with 177 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files
global.css
+46 -29
View File
@@ -13,6 +13,15 @@
--text-muted: #64748b; --text-muted: #64748b;
--bg-page: #f8fafc; --bg-page: #f8fafc;
--bg-panel: #ffffff; --bg-panel: #ffffff;
--bg-subtle: #f1f5f9;
--bg-soft: #eff6ff;
--bg-danger-soft: #fef2f2;
--bg-overlay: rgba(15, 23, 42, 0.6);
--text-on-primary: #ffffff;
--text-danger-soft: #f87171;
--border-strong: #cbd5e1;
--border-danger-soft: #fecaca;
--focus-ring: rgba(37, 99, 235, 0.1);
/* Bordures, Arrondis & Ombres */ /* Bordures, Arrondis & Ombres */
--border-light: #e2e8f0; --border-light: #e2e8f0;
@@ -64,7 +73,7 @@ body.no-scroll {
/* === HEADER & NAVIGATION === */ /* === HEADER & NAVIGATION === */
.pf-header { .pf-header {
background: white; background: var(--bg-panel);
border-bottom: 1px solid var(--border-light); border-bottom: 1px solid var(--border-light);
padding: 0 20px; padding: 0 20px;
height: 64px; height: 64px;
@@ -96,11 +105,11 @@ body.no-scroll {
transition: all 0.2s; transition: all 0.2s;
} }
.pf-nav-link:hover { .pf-nav-link:hover {
background: #f1f5f9; background: var(--bg-subtle);
color: var(--text-main); color: var(--text-main);
} }
.pf-nav-link--active { .pf-nav-link--active {
background: #eff6ff; background: var(--bg-soft);
color: var(--primary); color: var(--primary);
} }
.pf-header-actions { .pf-header-actions {
@@ -125,8 +134,8 @@ body.no-scroll {
border: 1px solid transparent; border: 1px solid transparent;
} }
.pf-logout-btn:hover { .pf-logout-btn:hover {
background: #fef2f2; background: var(--bg-danger-soft);
border-color: #fecaca; border-color: var(--border-danger-soft);
} }
.pf-burger-btn { .pf-burger-btn {
display: none; display: none;
@@ -142,7 +151,7 @@ body.no-scroll {
display: none; display: none;
position: fixed; position: fixed;
inset: 0; inset: 0;
background: rgba(15, 23, 42, 0.6); background: var(--bg-overlay);
backdrop-filter: blur(4px); backdrop-filter: blur(4px);
z-index: 998; z-index: 998;
opacity: 0; opacity: 0;
@@ -216,12 +225,12 @@ body.no-scroll {
} }
.pf-mobile-nav-link:active { .pf-mobile-nav-link:active {
background: #f1f5f9; background: var(--bg-subtle);
} }
.pf-mobile-logout { .pf-mobile-logout {
color: var(--danger); color: var(--danger);
background: #fef2f2; background: var(--bg-danger-soft);
margin-top: 10px; margin-top: 10px;
} }
@@ -274,7 +283,7 @@ p {
margin-top: 32px; margin-top: 32px;
} }
.pf-module-card { .pf-module-card {
background: white; background: var(--bg-panel);
border: 1px solid var(--border-light); border: 1px solid var(--border-light);
border-radius: var(--radius); border-radius: var(--radius);
padding: 24px; padding: 24px;
@@ -289,7 +298,7 @@ p {
.pf-module-card:hover { .pf-module-card:hover {
transform: translateY(-4px); transform: translateY(-4px);
box-shadow: var(--shadow); box-shadow: var(--shadow);
border-color: #cbd5e1; border-color: var(--border-strong);
} }
.pf-card-icon { .pf-card-icon {
font-size: 2rem; font-size: 2rem;
@@ -322,7 +331,7 @@ p {
justify-content: center; justify-content: center;
gap: 8px; gap: 8px;
background: var(--primary); background: var(--primary);
color: white; color: var(--text-on-primary);
border: none; border: none;
border-radius: 8px; border-radius: 8px;
font-size: 1rem; font-size: 1rem;
@@ -336,14 +345,14 @@ p {
background: var(--primary-dark); background: var(--primary-dark);
} }
.pf-btn.btn-secondary { .pf-btn.btn-secondary {
background: white; background: var(--bg-panel);
color: var(--text-muted); color: var(--text-muted);
border: 1px solid var(--border-light); border: 1px solid var(--border-light);
} }
.pf-btn.btn-secondary:hover { .pf-btn.btn-secondary:hover {
background: #f8fafc; background: var(--bg-page);
color: var(--text-main); color: var(--text-main);
border-color: #94a3b8; border-color: var(--border-strong);
} }
/* Formulaires & Inputs Standards */ /* Formulaires & Inputs Standards */
@@ -363,17 +372,17 @@ p {
border: 1px solid var(--border-light); border: 1px solid var(--border-light);
border-radius: 8px; border-radius: 8px;
font-size: 1rem; font-size: 1rem;
background: #f8fafc; background: var(--bg-page);
color: var(--text-main); color: var(--text-main);
transition: all 0.2s; transition: all 0.2s;
font-family: inherit; font-family: inherit;
box-sizing: border-box; box-sizing: border-box;
} }
.pf-input:focus { .pf-input:focus {
background: white; background: var(--bg-panel);
border-color: var(--primary); border-color: var(--primary);
outline: none; outline: none;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); box-shadow: 0 0 0 3px var(--focus-ring);
} }
/* Tableaux Standards */ /* Tableaux Standards */
@@ -387,7 +396,7 @@ p {
overflow: hidden; overflow: hidden;
} }
.pf-table th { .pf-table th {
background: #f8fafc; background: var(--bg-page);
padding: 16px; padding: 16px;
text-align: left; text-align: left;
font-weight: 600; font-weight: 600;
@@ -407,7 +416,7 @@ p {
border-bottom: none; border-bottom: none;
} }
.pf-table tbody tr:hover { .pf-table tbody tr:hover {
background-color: #f8fafc; background-color: var(--bg-page);
} }
/* === 🪟 LE DESIGN SYSTEM DES MODALES (Applicable partout) === */ /* === 🪟 LE DESIGN SYSTEM DES MODALES (Applicable partout) === */
@@ -416,7 +425,7 @@ p {
position: fixed; position: fixed;
inset: 0; inset: 0;
z-index: 9999; z-index: 9999;
background: rgba(15, 23, 42, 0.6); background: var(--bg-overlay);
backdrop-filter: blur(4px); backdrop-filter: blur(4px);
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -480,7 +489,7 @@ p {
/* === FOOTER & TOASTS === */ /* === FOOTER & TOASTS === */
.pf-footer { .pf-footer {
border-top: 1px solid var(--border-light); border-top: 1px solid var(--border-light);
background: white; background: var(--bg-panel);
padding: 24px; padding: 24px;
text-align: center; text-align: center;
font-size: 0.85rem; font-size: 0.85rem;
@@ -492,7 +501,7 @@ p {
bottom: 20px; bottom: 20px;
right: 20px; right: 20px;
padding: 12px 24px; padding: 12px 24px;
background: white; background: var(--bg-panel);
border-radius: 12px; border-radius: 12px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
border-left: 5px solid var(--primary); border-left: 5px solid var(--primary);
@@ -548,7 +557,7 @@ p {
display: block; display: block;
width: 40px; width: 40px;
height: 5px; height: 5px;
background: #cbd5e1; background: var(--border-strong);
border-radius: 10px; border-radius: 10px;
margin: -10px auto 20px auto; margin: -10px auto 20px auto;
} }
@@ -588,13 +597,13 @@ p {
color: var(--primary); color: var(--primary);
} }
.btn-icon-action.edit:hover { .btn-icon-action.edit:hover {
background: #eff6ff; /* Fond bleu très clair au survol */ background: var(--bg-soft); /* Fond bleu très clair au survol */
} }
.btn-icon-action.delete { .btn-icon-action.delete {
color: var(--danger); color: var(--danger);
} }
.btn-icon-action.delete:hover { .btn-icon-action.delete:hover {
background: #fef2f2; /* Fond rouge très clair au survol */ background: var(--bg-danger-soft); /* Fond rouge très clair au survol */
} }
/* === 13. PAGE DE CONNEXION (LOGIN) === */ /* === 13. PAGE DE CONNEXION (LOGIN) === */
@@ -610,7 +619,7 @@ p {
width: 100%; width: 100%;
max-width: 400px; max-width: 400px;
padding: 32px; padding: 32px;
background: white; background: var(--bg-panel);
border-radius: 16px; border-radius: 16px;
box-shadow: var(--shadow-lg); box-shadow: var(--shadow-lg);
border: 1px solid var(--border-light); border: 1px solid var(--border-light);
@@ -641,11 +650,11 @@ p {
} }
.pf-login-error { .pf-login-error {
background: #fef2f2; background: var(--bg-danger-soft);
color: #ef4444; color: var(--danger);
padding: 12px; padding: 12px;
border-radius: 8px; border-radius: 8px;
border: 1px solid #fca5a5; border: 1px solid var(--border-danger-soft);
margin-bottom: 20px; margin-bottom: 20px;
font-size: 0.9rem; font-size: 0.9rem;
text-align: center; text-align: center;
@@ -699,6 +708,14 @@ p {
--border-light: #30363d; --border-light: #30363d;
--shadow: 0 4px 6px -1px rgba(0,0,0,.4), 0 2px 4px -2px rgba(0,0,0,.3); --shadow: 0 4px 6px -1px rgba(0,0,0,.4), 0 2px 4px -2px rgba(0,0,0,.3);
--shadow-lg: 0 10px 15px -3px rgba(0,0,0,.5), 0 4px 6px -4px rgba(0,0,0,.4); --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.5), 0 4px 6px -4px rgba(0,0,0,.4);
--bg-subtle: rgba(255,255,255,.06);
--bg-soft: rgba(59,130,246,.15);
--bg-danger-soft: rgba(239,68,68,.1);
--bg-overlay: rgba(0, 0, 0, 0.55);
--text-danger-soft: #f87171;
--border-strong: #484f58;
--border-danger-soft: rgba(239,68,68,.3);
--focus-ring: rgba(59,130,246,.25);
} }
[data-theme="dark"] body { background: var(--bg-page); color: var(--text-main); } [data-theme="dark"] body { background: var(--bg-page); color: var(--text-main); }
[data-theme="dark"] .pf-header { background: var(--bg-panel); border-color: var(--border-light); } [data-theme="dark"] .pf-header { background: var(--bg-panel); border-color: var(--border-light); }
modules/gift-list/gift-list.css
+15 -15
View File
@@ -37,8 +37,8 @@
} }
.cl-view-btn.is-active { .cl-view-btn.is-active {
background: #334155; background: var(--text-main);
color: white; color: var(--bg-panel);
} }
/* === FILTRES STICKY === */ /* === FILTRES STICKY === */
@@ -95,7 +95,7 @@
/* === SECTIONS ENFANTS === */ /* === SECTIONS ENFANTS === */
.pf-child-section { .pf-child-section {
margin-bottom: 30px; margin-bottom: 30px;
background: white; background: var(--bg-panel);
padding: 20px; padding: 20px;
border-radius: 16px; border-radius: 16px;
border: 1px solid var(--border-light); border: 1px solid var(--border-light);
@@ -120,7 +120,7 @@
overflow-x: auto; overflow-x: auto;
padding-bottom: 12px; padding-bottom: 12px;
margin-bottom: 15px; margin-bottom: 15px;
border-bottom: 1px solid #f1f5f9; border-bottom: 1px solid var(--bg-subtle);
scrollbar-width: none; /* Firefox */ scrollbar-width: none; /* Firefox */
} }
.pf-child-totals-bar::-webkit-scrollbar { .pf-child-totals-bar::-webkit-scrollbar {
@@ -128,13 +128,13 @@
} }
.pf-summary-pill { .pf-summary-pill {
white-space: nowrap; white-space: nowrap;
background: #f8fafc; background: var(--bg-page);
padding: 4px 12px; padding: 4px 12px;
border-radius: 50px; border-radius: 50px;
font-size: 0.8rem; font-size: 0.8rem;
font-weight: 700; font-weight: 700;
color: #475569; color: var(--text-muted);
border: 1px solid #cbd5e1; border: 1px solid var(--border-strong);
transition: opacity 0.2s; transition: opacity 0.2s;
} }
@@ -145,9 +145,9 @@
grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
} }
.pf-gift-card-compact { .pf-gift-card-compact {
background: white; background: var(--bg-panel);
border-radius: 10px; border-radius: 10px;
border: 1px solid #e2e8f0; border: 1px solid var(--border-light);
padding: 12px; padding: 12px;
position: relative; position: relative;
transition: 0.2s; transition: 0.2s;
@@ -156,12 +156,12 @@
min-height: 100px; min-height: 100px;
} }
.pf-gift-card-compact:hover { .pf-gift-card-compact:hover {
border-color: #cbd5e1; border-color: var(--border-strong);
box-shadow: var(--shadow-md); box-shadow: var(--shadow-md);
} }
.pf-gift-title { .pf-gift-title {
font-weight: 600; font-weight: 600;
color: #1e293b; color: var(--text-main);
font-size: 0.95rem; font-size: 0.95rem;
margin: 0 0 10px 0; margin: 0 0 10px 0;
line-height: 1.3; line-height: 1.3;
@@ -223,7 +223,7 @@
margin: 0; margin: 0;
} }
.pf-tricount-item { .pf-tricount-item {
background: white; background: var(--bg-panel);
padding: 12px 15px; padding: 12px 15px;
border: 1px solid var(--border-light); border: 1px solid var(--border-light);
border-radius: 8px; border-radius: 8px;
@@ -317,7 +317,7 @@
position: absolute; position: absolute;
top: calc(100% + 8px); top: calc(100% + 8px);
left: 0; left: 0;
background: white; background: var(--bg-panel);
border: 1px solid var(--border-light); border: 1px solid var(--border-light);
border-radius: 12px; border-radius: 12px;
padding: 8px; padding: 8px;
@@ -348,7 +348,7 @@
transition: 0.2s; transition: 0.2s;
} }
.pf-ms-option:hover { .pf-ms-option:hover {
background: #f8fafc; background: var(--bg-page);
} }
.pf-ms-option input[type="checkbox"] { .pf-ms-option input[type="checkbox"] {
margin: 0; margin: 0;
@@ -359,7 +359,7 @@
} }
.pf-ms-option.is-all { .pf-ms-option.is-all {
font-weight: 700; font-weight: 700;
border-bottom: 1px solid #e2e8f0; border-bottom: 1px solid var(--border-light);
padding-bottom: 10px; padding-bottom: 10px;
margin-bottom: 4px; margin-bottom: 4px;
border-radius: 6px 6px 0 0; border-radius: 6px 6px 0 0;
modules/holidays/holidays.css
+95 -46
View File
@@ -9,8 +9,14 @@ body.no-scroll {
:root { :root {
--primary: #2563eb; --primary: #2563eb;
--primary-hover: #1d4ed8; --primary-hover: #1d4ed8;
--bg-card: #ffffff; --bg-card: var(--bg-panel);
--text-muted: #64748b; --text-muted: #64748b;
--hol-accent-transport: #2563eb;
--hol-accent-accommodation: #059669;
--hol-accent-activity: #d97706;
--hol-info-bg: #e0f2fe;
--hol-info-text: #0369a1;
--hol-warning-bg: #fffbeb;
--radius-l: 16px; --radius-l: 16px;
--radius-m: 10px; --radius-m: 10px;
--radius-s: 6px; --radius-s: 6px;
@@ -57,7 +63,7 @@ body.no-scroll {
.hol-main-title { .hol-main-title {
font-size: 1.8rem; font-size: 1.8rem;
font-weight: 800; font-weight: 800;
color: #0f172a; color: var(--text-main);
margin: 0; margin: 0;
} }
@@ -124,7 +130,7 @@ body.no-scroll {
} }
.hol-map-toggle { .hol-map-toggle {
background: white; background: var(--bg-panel);
color: #0f766e; color: #0f766e;
border: 1px solid #ccfbf1; border: 1px solid #ccfbf1;
} }
@@ -135,19 +141,19 @@ body.no-scroll {
} }
.pf-btn.btn-secondary { .pf-btn.btn-secondary {
background: white; background: var(--bg-panel);
color: var(--text-muted); color: var(--text-muted);
border: 1px solid #cbd5e1; border: 1px solid var(--border-strong);
box-shadow: none; box-shadow: none;
} }
.pf-btn.btn-secondary:hover { .pf-btn.btn-secondary:hover {
background: #f8fafc; background: var(--bg-page);
color: var(--text-main); color: var(--text-main);
} }
/* Petit bouton + pour les colonnes */ /* Petit bouton + pour les colonnes */
.btn-icon-small { .btn-icon-small {
background: white !important; background: var(--bg-panel) !important;
border: 1px solid var(--border-light) !important; border: 1px solid var(--border-light) !important;
border-radius: 6px !important; border-radius: 6px !important;
width: 32px !important; width: 32px !important;
@@ -165,8 +171,8 @@ body.no-scroll {
} }
.btn-icon-small:hover { .btn-icon-small:hover {
background: #f1f5f9 !important; background: var(--bg-subtle) !important;
border-color: #cbd5e1 !important; border-color: var(--border-strong) !important;
transform: scale(1.05); transform: scale(1.05);
} }
@@ -197,7 +203,7 @@ body.no-scroll {
.hol-idea-card:hover { .hol-idea-card:hover {
transform: translateY(-5px); transform: translateY(-5px);
box-shadow: var(--shadow-hover); box-shadow: var(--shadow-hover);
border-color: #e2e8f0; border-color: var(--border-light);
} }
.hol-idea-card__head { .hol-idea-card__head {
@@ -226,7 +232,7 @@ body.no-scroll {
.hol-notes { .hol-notes {
font-size: 0.85rem; font-size: 0.85rem;
color: #64748b; color: var(--text-muted);
display: -webkit-box; display: -webkit-box;
-webkit-line-clamp: 2; -webkit-line-clamp: 2;
line-clamp: 2; line-clamp: 2;
@@ -279,7 +285,7 @@ body.no-scroll {
.pf-modal-content { .pf-modal-content {
position: relative; position: relative;
background: white; background: var(--bg-panel);
width: 95%; /* Responsive */ width: 95%; /* Responsive */
max-width: 1100px; /* Largeur augmentée pour 3 colonnes */ max-width: 1100px; /* Largeur augmentée pour 3 colonnes */
max-height: 90vh; max-height: 90vh;
@@ -292,13 +298,56 @@ body.no-scroll {
margin: auto; /* Sécurité centrage */ margin: auto; /* Sécurité centrage */
} }
.hol-modal-content {
max-width: 800px;
width: 95%;
}
.hol-flex-1 {
flex: 1;
}
.hol-flex-2 {
flex: 2;
}
.hol-date-range-group {
display: flex;
gap: 10px;
}
.hol-divider {
border: 0;
border-top: 1px solid var(--border-light);
margin: 20px 0;
}
.hol-cat-transport {
color: var(--hol-accent-transport);
}
.hol-cat-accommodation {
color: var(--hol-accent-accommodation);
}
.hol-cat-activity {
color: var(--hol-accent-activity);
}
.hol-btn-delete {
color: var(--danger);
border-color: var(--border-danger-soft);
margin-right: auto;
display: none;
}
/* Cas spécifique modale carte */ /* Cas spécifique modale carte */
.hol-dialog--map { .hol-dialog--map {
width: 95vw; width: 95vw;
height: 90vh; height: 90vh;
max-width: 1400px; max-width: 1400px;
padding: 0; padding: 0;
background: white; background: var(--bg-panel);
border-radius: 12px; border-radius: 12px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
@@ -316,20 +365,20 @@ body.no-scroll {
.pf-input { .pf-input {
width: 100%; width: 100%;
padding: 10px 12px; padding: 10px 12px;
border: 1px solid #cbd5e1; border: 1px solid var(--border-strong);
border-radius: var(--radius-m); border-radius: var(--radius-m);
font-size: 1rem; font-size: 1rem;
background: #ffffff; /* Fond blanc forcé */ background: var(--bg-panel);
color: var(--text-main); color: var(--text-main);
box-sizing: border-box; box-sizing: border-box;
transition: all 0.2s; transition: all 0.2s;
} }
.pf-input:focus { .pf-input:focus {
background: white; background: var(--bg-panel);
border-color: var(--primary); border-color: var(--primary);
outline: none; outline: none;
box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); box-shadow: 0 0 0 3px var(--focus-ring);
} }
.form-row { .form-row {
@@ -418,7 +467,7 @@ body.no-scroll {
align-items: center; align-items: center;
gap: 8px; /* Espace réduit */ gap: 8px; /* Espace réduit */
margin-bottom: 10px; margin-bottom: 10px;
background: white; background: var(--bg-panel);
padding: 8px; padding: 8px;
border-radius: 8px; border-radius: 8px;
border: 1px solid #f1f5f9; border: 1px solid #f1f5f9;
@@ -439,7 +488,7 @@ body.no-scroll {
padding: 6px 8px !important; padding: 6px 8px !important;
text-align: right; text-align: right;
font-weight: 600; font-weight: 600;
color: #059669; color: var(--hol-accent-accommodation);
} }
/* Checkbox Payé */ /* Checkbox Payé */
@@ -447,7 +496,7 @@ body.no-scroll {
display: flex; display: flex;
align-items: center; align-items: center;
font-size: 0.75rem; font-size: 0.75rem;
color: #64748b; color: var(--text-muted);
gap: 4px; gap: 4px;
cursor: pointer; cursor: pointer;
white-space: nowrap; white-space: nowrap;
@@ -470,7 +519,7 @@ body.no-scroll {
transition: background 0.2s; transition: background 0.2s;
} }
.btn-remove:hover { .btn-remove:hover {
background: #fef2f2; background: var(--bg-danger-soft);
color: #b91c1c; color: #b91c1c;
} }
@@ -643,13 +692,13 @@ input[type="date"]::-webkit-calendar-picker-indicator:hover {
padding: 4px 10px; padding: 4px 10px;
border-radius: 12px; border-radius: 12px;
font-weight: bold; font-weight: bold;
background: #e0f2fe; background: var(--hol-info-bg);
color: #0369a1; color: var(--hol-info-text);
} }
/* Bloc Résumé Financier */ /* Bloc Résumé Financier */
.hol-summary-card { .hol-summary-card {
background: white; background: var(--bg-panel);
padding: 20px; padding: 20px;
border-radius: var(--radius-l); border-radius: var(--radius-l);
box-shadow: var(--shadow-sm); box-shadow: var(--shadow-sm);
@@ -684,7 +733,7 @@ input[type="date"]::-webkit-calendar-picker-indicator:hover {
.hol-summary-value.total { .hol-summary-value.total {
font-size: 1.4rem; font-size: 1.4rem;
font-weight: bold; font-weight: bold;
color: #0f172a; color: var(--text-main);
} }
/* Grille principale : Carte + Timeline */ /* Grille principale : Carte + Timeline */
@@ -697,7 +746,7 @@ input[type="date"]::-webkit-calendar-picker-indicator:hover {
/* Panneaux (Carte et Timeline) */ /* Panneaux (Carte et Timeline) */
.hol-panel { .hol-panel {
background: white; background: var(--bg-panel);
border-radius: var(--radius-l); border-radius: var(--radius-l);
box-shadow: var(--shadow-sm); box-shadow: var(--shadow-sm);
border: 1px solid var(--border-light); border: 1px solid var(--border-light);
@@ -713,7 +762,7 @@ input[type="date"]::-webkit-calendar-picker-indicator:hover {
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
background: #f8fafc; background: var(--bg-page);
} }
.hol-panel-header h3 { .hol-panel-header h3 {
@@ -734,11 +783,11 @@ input[type="date"]::-webkit-calendar-picker-indicator:hover {
border-radius: 8px; border-radius: 8px;
margin-bottom: 15px; margin-bottom: 15px;
overflow: hidden; overflow: hidden;
background: white; background: var(--bg-panel);
} }
.hol-cp-header { .hol-cp-header {
background: #f8fafc; background: var(--bg-page);
padding: 12px 15px; padding: 12px 15px;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
@@ -756,7 +805,7 @@ input[type="date"]::-webkit-calendar-picker-indicator:hover {
} }
.hol-cp-title { .hol-cp-title {
color: #0f172a; color: var(--text-main);
font-size: 0.95rem; font-size: 0.95rem;
font-weight: 700; font-weight: 700;
cursor: pointer; cursor: pointer;
@@ -792,7 +841,7 @@ input[type="date"]::-webkit-calendar-picker-indicator:hover {
justify-content: space-between; justify-content: space-between;
font-size: 0.85rem; font-size: 0.85rem;
margin-bottom: 5px; margin-bottom: 5px;
border-bottom: 1px dashed #f1f5f9; border-bottom: 1px dashed var(--bg-subtle);
padding-bottom: 5px; padding-bottom: 5px;
} }
@@ -805,7 +854,7 @@ input[type="date"]::-webkit-calendar-picker-indicator:hover {
.hol-notes-panel { .hol-notes-panel {
padding: 15px; padding: 15px;
border-top: 1px solid var(--border-light); border-top: 1px solid var(--border-light);
background: #fffbeb; background: var(--hol-warning-bg);
flex-shrink: 0; flex-shrink: 0;
max-height: 200px; max-height: 200px;
overflow-y: auto; overflow-y: auto;
@@ -880,8 +929,8 @@ input[type="date"]::-webkit-calendar-picker-indicator:hover {
display: flex; display: flex;
gap: 12px; gap: 12px;
font-size: 0.75rem; font-size: 0.75rem;
color: #64748b; color: var(--text-muted);
background: white; background: var(--bg-panel);
padding: 4px 10px; padding: 4px 10px;
border-radius: 12px; border-radius: 12px;
border: 1px solid var(--border-light); border: 1px solid var(--border-light);
@@ -919,7 +968,7 @@ input[type="date"]::-webkit-calendar-picker-indicator:hover {
align-items: flex-start; align-items: flex-start;
gap: 4px; gap: 4px;
margin-bottom: 8px; margin-bottom: 8px;
border-bottom: 1px dashed #f1f5f9; border-bottom: 1px dashed var(--bg-subtle);
padding-bottom: 8px; padding-bottom: 8px;
} }
.hol-expense-wrapper:last-child { .hol-expense-wrapper:last-child {
@@ -935,7 +984,7 @@ input[type="date"]::-webkit-calendar-picker-indicator:hover {
font-size: 0.85rem; font-size: 0.85rem;
} }
.hol-expense-name { .hol-expense-name {
color: #475569; color: var(--text-muted);
font-weight: 500; font-weight: 500;
} }
.hol-expense-amount { .hol-expense-amount {
@@ -953,7 +1002,7 @@ input[type="date"]::-webkit-calendar-picker-indicator:hover {
.hol-expense-note { .hol-expense-note {
font-size: 0.75rem; font-size: 0.75rem;
color: #94a3b8; color: var(--border-strong);
padding-left: 24px; padding-left: 24px;
word-break: break-all; word-break: break-all;
} }
@@ -987,7 +1036,7 @@ input[type="date"]::-webkit-calendar-picker-indicator:hover {
flex-direction: column; flex-direction: column;
gap: 6px; gap: 6px;
padding: 10px; padding: 10px;
background: #f8fafc; background: var(--bg-page);
border-radius: 8px; border-radius: 8px;
border: 1px solid var(--border-light); border: 1px solid var(--border-light);
} }
@@ -1024,13 +1073,13 @@ input[type="date"]::-webkit-calendar-picker-indicator:hover {
font-size: 0.75rem; font-size: 0.75rem;
margin-left: 4px; margin-left: 4px;
font-weight: bold; font-weight: bold;
color: #64748b; color: var(--text-muted);
} }
.hol-form-notes-input { .hol-form-notes-input {
font-size: 0.8rem; font-size: 0.8rem;
padding: 6px 8px; padding: 6px 8px;
border-style: dashed; border-style: dashed;
color: #475569; color: var(--text-muted);
width: calc(100% - 58px); width: calc(100% - 58px);
margin-left: 58px; margin-left: 58px;
} }
@@ -1097,10 +1146,10 @@ input[type="date"]::-webkit-calendar-picker-indicator:hover {
/* Zone des activités non planifiées */ /* Zone des activités non planifiées */
.hol-unmapped-zone { .hol-unmapped-zone {
width: 250px; width: 250px;
background: #f8fafc; background: var(--bg-page);
padding: 15px; padding: 15px;
border-radius: 12px; border-radius: 12px;
border: 2px dashed #cbd5e1; border: 2px dashed var(--border-strong);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 10px; gap: 10px;
@@ -1110,7 +1159,7 @@ input[type="date"]::-webkit-calendar-picker-indicator:hover {
font-size: 0.85rem; font-size: 0.85rem;
font-weight: 700; font-weight: 700;
text-transform: uppercase; text-transform: uppercase;
color: #64748b; color: var(--text-muted);
margin-bottom: 5px; margin-bottom: 5px;
text-align: center; text-align: center;
} }
@@ -1130,16 +1179,16 @@ input[type="date"]::-webkit-calendar-picker-indicator:hover {
} }
.hol-calendar-zone::-webkit-scrollbar-track, .hol-calendar-zone::-webkit-scrollbar-track,
.hol-unmapped-zone::-webkit-scrollbar-track { .hol-unmapped-zone::-webkit-scrollbar-track {
background: #f1f5f9; background: var(--bg-subtle);
border-radius: 5px; border-radius: 5px;
} }
.hol-calendar-zone::-webkit-scrollbar-thumb, .hol-calendar-zone::-webkit-scrollbar-thumb,
.hol-unmapped-zone::-webkit-scrollbar-thumb { .hol-unmapped-zone::-webkit-scrollbar-thumb {
background: #cbd5e1; background: var(--border-strong);
border-radius: 5px; border-radius: 5px;
} }
.hol-calendar-zone::-webkit-scrollbar-thumb:hover { .hol-calendar-zone::-webkit-scrollbar-thumb:hover {
background: #94a3b8; background: var(--text-muted);
} }
.hol-calendar-zone .hol-drag-item { .hol-calendar-zone .hol-drag-item {
modules/holidays/views/modal.php
+12 -12
View File
@@ -1,5 +1,5 @@
<div id="holidayModal" class="pf-modal"> <div id="holidayModal" class="pf-modal">
<div class="pf-modal-content" style="max-width: 800px; width: 95%;"> <div class="pf-modal-content hol-modal-content">
<h3 id="modalTitle" class="pf-modal-title"><?= tr('hdl_modal_title') ?></h3> <h3 id="modalTitle" class="pf-modal-title"><?= tr('hdl_modal_title') ?></h3>
<form action="/modules/holidays/includes/api/save_holiday.php" method="POST" id="holidayForm"> <form action="/modules/holidays/includes/api/save_holiday.php" method="POST" id="holidayForm">
@@ -7,11 +7,11 @@
<input type="hidden" name="action" value="save"> <input type="hidden" name="action" value="save">
<div class="form-row"> <div class="form-row">
<div style="flex: 2;"> <div class="hol-flex-2">
<label class="pf-label"><?= tr('hdl_label_name') ?></label> <label class="pf-label"><?= tr('hdl_label_name') ?></label>
<input type="text" name="title" id="inp_title" class="pf-input" placeholder="<?= tr('hdl_ph_name') ?>" required> <input type="text" name="title" id="inp_title" class="pf-input" placeholder="<?= tr('hdl_ph_name') ?>" required>
</div> </div>
<div style="flex: 1;"> <div class="hol-flex-1">
<label class="pf-label"><?= tr('hdl_label_status') ?></label> <label class="pf-label"><?= tr('hdl_label_status') ?></label>
<select name="status" id="inp_status" class="pf-input"> <select name="status" id="inp_status" class="pf-input">
<option value="draft"><?= tr('hdl_status_draft') ?> ✏️</option> <option value="draft"><?= tr('hdl_status_draft') ?> ✏️</option>
@@ -28,24 +28,24 @@
<label class="pf-label"><?= tr('hdl_label_period') ?></label> <label class="pf-label"><?= tr('hdl_label_period') ?></label>
<input type="text" name="period_hint" id="inp_period" class="pf-input" placeholder="<?= tr('hdl_ph_period') ?>"> <input type="text" name="period_hint" id="inp_period" class="pf-input" placeholder="<?= tr('hdl_ph_period') ?>">
</div> </div>
<div style="display:flex; gap:10px;"> <div class="hol-date-range-group">
<div style="flex:1"> <div class="hol-flex-1">
<label class="pf-label"><?= tr('hdl_label_from') ?></label> <label class="pf-label"><?= tr('hdl_label_from') ?></label>
<input type="date" name="start_date" id="inp_start" class="pf-input"> <input type="date" name="start_date" id="inp_start" class="pf-input">
</div> </div>
<div style="flex:1"> <div class="hol-flex-1">
<label class="pf-label"><?= tr('hdl_label_to') ?></label> <label class="pf-label"><?= tr('hdl_label_to') ?></label>
<input type="date" name="end_date" id="inp_end" class="pf-input"> <input type="date" name="end_date" id="inp_end" class="pf-input">
</div> </div>
</div> </div>
</div> </div>
<hr style="border: 0; border-top: 1px solid var(--border-light); margin: 20px 0;"> <hr class="hol-divider">
<div class="hol-columns-wrapper"> <div class="hol-columns-wrapper">
<div class="hol-col"> <div class="hol-col">
<div class="hol-col-header"> <div class="hol-col-header">
<h4 style="color:#2563eb;">🚗 <?= tr('hdl_cat_transport') ?></h4> <h4 class="hol-cat-transport">🚗 <?= tr('hdl_cat_transport') ?></h4>
<button type="button" class="btn-add-item" onclick="addItem('transport')" title="<?= tr('hdl_add_transport') ?>">＋</button> <button type="button" class="btn-add-item" onclick="addItem('transport')" title="<?= tr('hdl_add_transport') ?>">＋</button>
</div> </div>
<div id="list_transport" class="dynamic-list"></div> <div id="list_transport" class="dynamic-list"></div>
@@ -53,7 +53,7 @@
<div class="hol-col"> <div class="hol-col">
<div class="hol-col-header"> <div class="hol-col-header">
<h4 style="color:#059669;">🏨 <?= tr('hdl_cat_accommodation') ?></h4> <h4 class="hol-cat-accommodation">🏨 <?= tr('hdl_cat_accommodation') ?></h4>
<button type="button" class="btn-add-item" onclick="addItem('accommodation')" title="<?= tr('hdl_add_accommodation') ?>">＋</button> <button type="button" class="btn-add-item" onclick="addItem('accommodation')" title="<?= tr('hdl_add_accommodation') ?>">＋</button>
</div> </div>
<div id="list_accommodation" class="dynamic-list"></div> <div id="list_accommodation" class="dynamic-list"></div>
@@ -61,14 +61,14 @@
<div class="hol-col"> <div class="hol-col">
<div class="hol-col-header"> <div class="hol-col-header">
<h4 style="color:#d97706;">🎫 <?= tr('hdl_cat_activity') ?></h4> <h4 class="hol-cat-activity">🎫 <?= tr('hdl_cat_activity') ?></h4>
<button type="button" class="btn-add-item" onclick="addItem('activity')" title="<?= tr('hdl_add_activity') ?>">＋</button> <button type="button" class="btn-add-item" onclick="addItem('activity')" title="<?= tr('hdl_add_activity') ?>">＋</button>
</div> </div>
<div id="list_activity" class="dynamic-list"></div> <div id="list_activity" class="dynamic-list"></div>
</div> </div>
</div> </div>
<hr style="border: 0; border-top: 1px solid var(--border-light); margin: 20px 0;"> <hr class="hol-divider">
<div class="form-row"> <div class="form-row">
<div> <div>
@@ -87,7 +87,7 @@
</div> </div>
<div class="modal-footer"> <div class="modal-footer">
<button type="button" onclick="deleteHoliday()" id="btn_delete" class="pf-btn btn-secondary" style="color:#ef4444; border-color:#fca5a5; margin-right:auto; display:none;"><?= tr('btn_delete') ?></button> <button type="button" onclick="deleteHoliday()" id="btn_delete" class="pf-btn btn-secondary hol-btn-delete"><?= tr('btn_delete') ?></button>
<button type="button" onclick="closeHolidayModal()" class="pf-btn btn-secondary"><?= tr('btn_cancel') ?></button> <button type="button" onclick="closeHolidayModal()" class="pf-btn btn-secondary"><?= tr('btn_cancel') ?></button>
<button type="submit" class="pf-btn"><?= tr('btn_save') ?></button> <button type="submit" class="pf-btn"><?= tr('btn_save') ?></button>
</div> </div>
modules/home/home.css
+9 -9
View File
@@ -10,7 +10,7 @@ body[data-page="home"] {
background-repeat: no-repeat; background-repeat: no-repeat;
/* Couleur de texte par défaut sur la home (Blanc) */ /* Couleur de texte par défaut sur la home (Blanc) */
color: #ffffff; color: var(--text-on-primary);
} }
/* Voile sombre pour garantir la lisibilité du texte blanc */ /* Voile sombre pour garantir la lisibilité du texte blanc */
@@ -18,7 +18,7 @@ body[data-page="home"]::before {
content: ""; content: "";
position: fixed; position: fixed;
inset: 0; inset: 0;
background: rgba(15, 23, 42, 0.5); /* Bleu nuit semi-transparent */ background: var(--bg-overlay); /* Bleu nuit semi-transparent */
z-index: -1; /* Derrière le contenu */ z-index: -1; /* Derrière le contenu */
} }
@@ -32,10 +32,10 @@ body[data-page="home"] .pf-header {
/* Adaptation des couleurs des liens du header sur fond sombre */ /* Adaptation des couleurs des liens du header sur fond sombre */
body[data-page="home"] .pf-logo { body[data-page="home"] .pf-logo {
color: #ffffff; color: var(--text-on-primary);
} }
body[data-page="home"] .pf-burger-btn { body[data-page="home"] .pf-burger-btn {
color: #ffffff; color: var(--text-on-primary);
} }
body[data-page="home"] .pf-nav-link { body[data-page="home"] .pf-nav-link {
@@ -43,7 +43,7 @@ body[data-page="home"] .pf-nav-link {
} }
body[data-page="home"] .pf-nav-link:hover { body[data-page="home"] .pf-nav-link:hover {
background: rgba(255, 255, 255, 0.2); background: rgba(255, 255, 255, 0.2);
color: #ffffff; color: var(--text-on-primary);
} }
body[data-page="home"] .pf-nav-link--active { body[data-page="home"] .pf-nav-link--active {
background: rgba(255, 255, 255, 0.9); background: rgba(255, 255, 255, 0.9);
@@ -55,11 +55,11 @@ body[data-page="home"] .pf-user-badge {
color: rgba(255, 255, 255, 0.9); color: rgba(255, 255, 255, 0.9);
} }
body[data-page="home"] .pf-logout-btn { body[data-page="home"] .pf-logout-btn {
color: #fca5a5; color: var(--text-danger-soft);
} /* Rouge clair */ } /* Rouge clair */
body[data-page="home"] .pf-logout-btn:hover { body[data-page="home"] .pf-logout-btn:hover {
background: rgba(255, 255, 255, 0.1); background: rgba(255, 255, 255, 0.1);
border-color: #fca5a5; border-color: var(--text-danger-soft);
} }
/* === 3. HERO SECTION (Message de Bienvenue) === */ /* === 3. HERO SECTION (Message de Bienvenue) === */
@@ -70,7 +70,7 @@ body[data-page="home"] .pf-logout-btn:hover {
} }
.pf-hero h1 { .pf-hero h1 {
color: #ffffff; color: var(--text-on-primary);
font-size: 2.5rem; font-size: 2.5rem;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); /* Ombre pour détacher le texte de l'image */ text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); /* Ombre pour détacher le texte de l'image */
margin-bottom: 12px; margin-bottom: 12px;
@@ -100,7 +100,7 @@ body[data-page="home"] .pf-modules-grid {
} }
.pf-module-card:hover { .pf-module-card:hover {
background: #ffffff; background: var(--bg-panel);
transform: translateY(-5px); transform: translateY(-5px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
} }