This commit is contained in:
Jean-Philippe Staelen 2026-01-16 15:48:59 +01:00
commit 2b479eb6a3

View File

@ -404,211 +404,173 @@ a.statut:visited {
line-height: 1; line-height: 1;
} }
/* Styles pour le dashboard et le setup guidé */ /* ====================================
.esi-peppol-dashboard-wrap { TIMELINE VERTICALE - DASHBOARD
max-width: 1200px; ==================================== */
}
.esi-peppol-dashboard-intro {
font-size: 15px;
color: #50575e;
margin-bottom: 30px;
}
.esi-peppol-setup-guide { .esi-peppol-setup-guide {
background: #ffffff; max-width: 900px;
border-radius: 12px; margin-top: 30px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
padding: 32px;
margin: 30px 0;
} }
.esi-peppol-setup-title { .step {
margin: 0 0 32px 0; position: relative;
font-size: 24px; padding-left: 70px;
font-weight: 600; padding-bottom: 40px;
color: #1d2327; min-height: 80px;
border-bottom: 2px solid #f0f0f1;
padding-bottom: 16px;
} }
.esi-peppol-setup-step { /* Dernier élément sans padding-bottom */
margin-bottom: 24px; .step:last-child {
padding: 24px; padding-bottom: 0;
background: #f9f9f9;
border-radius: 8px;
border-left: 4px solid #c3c4c7;
transition: all 0.3s ease;
} }
.esi-peppol-setup-step:last-child { /* Cercle numéroté (::before) */
margin-bottom: 0; .step::before {
} content: attr(data-step);
position: absolute;
.esi-peppol-setup-step.completed { left: 0;
background: #f0f9f4; top: 0;
border-left-color: #10b981; width: 44px;
} height: 44px;
.esi-peppol-setup-step.pending {
background: #fffbf0;
border-left-color: #f59e0b;
}
.esi-peppol-setup-step.esi-peppol-step-no-check {
background: #f0f6ff;
border-left-color: #3b82f6;
}
.esi-peppol-setup-step.esi-peppol-step-optional {
background: #f8f9fa;
border-left-color: #9ca3af;
opacity: 0.9;
}
.esi-peppol-step-header {
display: flex;
align-items: flex-start;
gap: 20px;
}
.esi-peppol-step-number {
flex-shrink: 0;
width: 48px;
height: 48px;
border-radius: 50%; border-radius: 50%;
background: #ffffff;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
font-size: 20px;
font-weight: 600; font-weight: 600;
color: #50575e; font-size: 18px;
border: 3px solid #c3c4c7; z-index: 2;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
} /* État par défaut : cercle blanc, bord gris, numéro gris */
background-color: #ffffff;
.esi-peppol-setup-step.completed .esi-peppol-step-number { border: 3px solid #d1d5db;
background: #10b981;
border-color: #10b981;
color: #ffffff;
}
.esi-peppol-setup-step.pending .esi-peppol-step-number {
background: #ffffff;
border-color: #f59e0b;
color: #f59e0b;
}
.esi-peppol-setup-step.esi-peppol-step-no-check .esi-peppol-step-number {
background: #ffffff;
border-color: #3b82f6;
color: #3b82f6;
}
.esi-peppol-setup-step.esi-peppol-step-optional .esi-peppol-step-number {
background: #ffffff;
border-color: #9ca3af;
color: #9ca3af; color: #9ca3af;
} }
.esi-peppol-check-icon { /* Ligne verticale (::after) */
font-size: 28px; .step::after {
line-height: 1; content: '';
font-weight: 700; position: absolute;
left: 22px; /* Centre du cercle (44px / 2) */
top: 44px; /* Sous le cercle */
bottom: 0;
width: 3px;
/* État par défaut : ligne grise */
background-color: #d1d5db;
z-index: 1;
} }
.esi-peppol-step-content { /* Masquer la ligne sur le dernier élément */
flex: 1; .step:last-child::after {
display: none;
} }
.esi-peppol-step-title { /* Carte de contenu */
.step-card {
background-color: #f3f4f6;
border: 2px solid #e5e7eb;
border-radius: 8px;
padding: 20px 24px;
transition: all 0.3s ease;
}
.step-card h3 {
margin: 0 0 8px 0; margin: 0 0 8px 0;
font-size: 18px; font-size: 18px;
font-weight: 600; font-weight: 600;
color: #1d2327; color: #374151;
display: flex;
align-items: center;
gap: 12px;
} }
.esi-peppol-optional-badge { .step-card p {
display: inline-block;
padding: 2px 8px;
background: #e5e7eb;
color: #6b7280;
border-radius: 4px;
font-size: 12px;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.esi-peppol-step-description {
margin: 0 0 16px 0; margin: 0 0 16px 0;
font-size: 14px; color: #6b7280;
color: #646970;
line-height: 1.6; line-height: 1.6;
} }
.esi-peppol-step-value { .step-card .step-value {
margin-top: 12px;
padding: 12px;
background: #ffffff;
border-radius: 6px;
border: 1px solid #d1d5db;
}
.esi-peppol-step-value strong {
display: block;
margin-bottom: 6px;
font-size: 13px;
color: #374151;
font-weight: 600;
}
.esi-peppol-step-value code {
display: inline-block; display: inline-block;
padding: 4px 8px; background-color: #ffffff;
background: #f3f4f6;
border: 1px solid #d1d5db; border: 1px solid #d1d5db;
border-radius: 4px; border-radius: 4px;
font-family: 'Courier New', Courier, monospace;
font-size: 13px;
color: #1f2937;
}
.esi-peppol-webhook-display {
display: flex;
align-items: center;
gap: 12px;
margin: 16px 0;
padding: 12px;
background: #ffffff;
border-radius: 6px;
border: 1px solid #d1d5db;
}
.esi-peppol-webhook-url {
flex: 1;
padding: 8px 12px; padding: 8px 12px;
background: #f9fafb; margin-top: 8px;
border: 1px solid #e5e7eb;
border-radius: 4px;
font-family: 'Courier New', Courier, monospace;
font-size: 13px;
color: #1f2937;
word-break: break-all;
line-height: 1.5;
} }
.esi-peppol-step-note { .step-card .step-value strong {
margin: 12px 0 0 0; display: block;
margin-bottom: 4px;
font-size: 13px;
color: #6b7280;
}
.step-card .step-value code {
color: #1f2937;
font-size: 14px;
font-weight: 500;
}
.step-card .step-note {
margin-top: 12px;
font-size: 13px; font-size: 13px;
color: #6b7280; color: #6b7280;
font-style: italic; font-style: italic;
} }
<<<<<<< HEAD
/* ========================================
ÉTAT COMPLÉTÉ : .is-done
======================================== */
.step.is-done::before {
/* Check ✓ ou numéro en bleu */
background-color: #dbeafe;
border-color: #3b82f6;
color: #2563eb;
font-weight: 700;
}
.step.is-done::after {
/* Ligne bleue */
background-color: #3b82f6;
}
.step.is-done .step-card {
/* Carte fond bleu, texte blanc */
background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
border-color: #2563eb;
box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
}
.step.is-done .step-card h3 {
color: #ffffff;
}
.step.is-done .step-card p {
color: #dbeafe;
}
.step.is-done .step-card .step-value {
background-color: rgba(255, 255, 255, 0.95);
border-color: #2563eb;
}
.step.is-done .step-card .step-value strong {
color: #2563eb;
}
.step.is-done .step-card .step-value code {
color: #1e40af;
background-color: #eff6ff;
padding: 2px 6px;
border-radius: 3px;
}
/* Pour afficher un check ✓ sur les étapes complétées */
.step.is-done[data-step="✓"]::before {
font-size: 22px;
content: "✓";
=======
.esi-peppol-dashboard-actions { .esi-peppol-dashboard-actions {
margin-top: 40px; margin-top: 40px;
padding-top: 30px; padding-top: 30px;
@ -620,4 +582,5 @@ a.statut:visited {
font-size: 20px; font-size: 20px;
font-weight: 600; font-weight: 600;
color: #1d2327; color: #1d2327;
>>>>>>> f1fd1fe1015c57a9f30ec2f84ef5b774162d5a83
} }