This commit is contained in:
2026-04-02 11:57:30 +02:00
parent b425ec78aa
commit e07c57ea56
3 changed files with 357 additions and 65 deletions
+223
View File
@@ -716,3 +716,226 @@ input[type="date"]::-webkit-calendar-picker-indicator:hover {
text-align: left !important; /* On annule l'alignement à droite du total */
}
}
/* ==========================================================================
13. BARRE DE PROGRESSION & FINANCES
========================================================================== */
.hol-progress-bar {
width: 100%;
height: 12px;
background: #e2e8f0;
border-radius: 6px;
margin-bottom: 10px;
display: flex;
overflow: hidden;
}
.hol-progress-paid {
background: #10b981;
}
.hol-progress-saved {
background: #3b82f6;
}
.hol-progress-labels {
display: flex;
justify-content: space-between;
font-size: 0.85rem;
}
.hol-label-paid {
color: #10b981;
font-weight: 600;
}
.hol-label-saved {
color: #3b82f6;
font-weight: 600;
}
.hol-label-left {
color: #ef4444;
font-weight: 700;
}
/* ==========================================================================
14. LÉGENDE DE LA CARTE
========================================================================== */
.hol-panel-header-group {
display: flex;
align-items: center;
gap: 15px;
flex-wrap: wrap;
}
.hol-map-legend {
display: flex;
gap: 12px;
font-size: 0.75rem;
color: #64748b;
background: white;
padding: 4px 10px;
border-radius: 12px;
border: 1px solid #e2e8f0;
}
.hol-legend-item {
display: flex;
align-items: center;
gap: 4px;
}
.hol-legend-color {
display: inline-block;
width: 12px;
height: 4px;
border-radius: 2px;
}
.hol-legend-color.aller {
background: #3b82f6;
}
.hol-legend-color.interm {
background: #8b5cf6;
}
.hol-legend-color.retour {
background: transparent;
height: 0;
border-bottom: 3px dashed #f97316;
border-radius: 0;
}
/* ==========================================================================
15. LIGNES DE DÉPENSES (Timeline & Modale JS)
========================================================================== */
.hol-expense-wrapper {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
margin-bottom: 8px;
border-bottom: 1px dashed #f1f5f9;
padding-bottom: 8px;
}
.hol-expense-wrapper:last-child {
margin-bottom: 0;
border-bottom: none;
padding-bottom: 0;
}
.hol-expense-main {
display: flex;
justify-content: space-between;
width: 100%;
font-size: 0.85rem;
}
.hol-expense-name {
color: #475569;
font-weight: 500;
}
.hol-expense-amount {
color: var(--text-main);
font-weight: bold;
}
.status-paid {
color: #10b981;
margin-left: 5px;
}
.status-pending {
color: #f59e0b;
margin-left: 5px;
}
.hol-expense-note {
font-size: 0.75rem;
color: #94a3b8;
padding-left: 24px;
word-break: break-all;
}
.hol-expense-link {
color: #3b82f6;
text-decoration: none;
}
.hol-expense-link:hover {
text-decoration: underline;
}
.hol-empty-step {
font-size: 0.8rem;
color: var(--text-muted);
font-style: italic;
padding: 5px 0;
}
/* Boutons de petite taille */
.pf-btn-small {
padding: 6px 14px !important;
font-size: 0.85rem !important;
width: auto !important;
height: auto !important;
margin: 0 !important;
}
/* Modale JS d'ajout de dépense */
.hol-form-row {
display: flex;
flex-direction: column;
gap: 6px;
padding: 10px;
background: #f8fafc;
border-radius: 8px;
border: 1px solid #e2e8f0;
}
.hol-form-inner {
display: flex;
gap: 8px;
align-items: center;
width: 100%;
}
.hol-form-select {
width: 50px;
padding: 8px 4px;
font-size: 1.2rem;
cursor: pointer;
}
.hol-form-text {
flex: 2;
padding: 8px;
font-size: 0.9rem;
}
.hol-form-number {
width: 80px;
text-align: right;
padding: 8px;
font-size: 0.9rem;
}
.hol-form-paid-label {
display: flex;
align-items: center;
cursor: pointer;
width: 55px;
}
.hol-form-paid-text {
font-size: 0.75rem;
margin-left: 4px;
font-weight: bold;
color: #64748b;
}
.hol-form-notes-input {
font-size: 0.8rem;
padding: 6px 8px;
border-style: dashed;
color: #475569;
width: calc(100% - 58px);
margin-left: 58px;
}
.btn-remove-expense {
width: 28px;
height: 28px;
border: none;
background: #fee2e2;
color: #ef4444;
border-radius: 6px;
cursor: pointer;
font-weight: bold;
display: flex;
justify-content: center;
align-items: center;
transition: 0.2s;
}
.btn-remove-expense:hover {
background: #fca5a5;
color: #b91c1c;
}