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;
}
/* Styles pour le dashboard et le setup guidé */
.esi-peppol-dashboard-wrap {
max-width: 1200px;
}
.esi-peppol-dashboard-intro {
font-size: 15px;
color: #50575e;
margin-bottom: 30px;
}
/* ====================================
TIMELINE VERTICALE - DASHBOARD
==================================== */
.esi-peppol-setup-guide {
background: #ffffff;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
padding: 32px;
margin: 30px 0;
max-width: 900px;
margin-top: 30px;
}
.esi-peppol-setup-title {
margin: 0 0 32px 0;
font-size: 24px;
font-weight: 600;
color: #1d2327;
border-bottom: 2px solid #f0f0f1;
padding-bottom: 16px;
.step {
position: relative;
padding-left: 70px;
padding-bottom: 40px;
min-height: 80px;
}
.esi-peppol-setup-step {
margin-bottom: 24px;
padding: 24px;
background: #f9f9f9;
border-radius: 8px;
border-left: 4px solid #c3c4c7;
transition: all 0.3s ease;
/* Dernier élément sans padding-bottom */
.step:last-child {
padding-bottom: 0;
}
.esi-peppol-setup-step:last-child {
margin-bottom: 0;
}
.esi-peppol-setup-step.completed {
background: #f0f9f4;
border-left-color: #10b981;
}
.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;
/* Cercle numéroté (::before) */
.step::before {
content: attr(data-step);
position: absolute;
left: 0;
top: 0;
width: 44px;
height: 44px;
border-radius: 50%;
background: #ffffff;
display: flex;
align-items: center;
justify-content: center;
font-size: 20px;
font-weight: 600;
color: #50575e;
border: 3px solid #c3c4c7;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
font-size: 18px;
z-index: 2;
.esi-peppol-setup-step.completed .esi-peppol-step-number {
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;
/* État par défaut : cercle blanc, bord gris, numéro gris */
background-color: #ffffff;
border: 3px solid #d1d5db;
color: #9ca3af;
}
.esi-peppol-check-icon {
font-size: 28px;
line-height: 1;
font-weight: 700;
/* Ligne verticale (::after) */
.step::after {
content: '';
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 {
flex: 1;
/* Masquer la ligne sur le dernier élément */
.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;
font-size: 18px;
font-weight: 600;
color: #1d2327;
display: flex;
align-items: center;
gap: 12px;
color: #374151;
}
.esi-peppol-optional-badge {
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 {
.step-card p {
margin: 0 0 16px 0;
font-size: 14px;
color: #646970;
color: #6b7280;
line-height: 1.6;
}
.esi-peppol-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 {
.step-card .step-value {
display: inline-block;
padding: 4px 8px;
background: #f3f4f6;
background-color: #ffffff;
border: 1px solid #d1d5db;
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;
background: #f9fafb;
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;
margin-top: 8px;
}
.esi-peppol-step-note {
margin: 12px 0 0 0;
.step-card .step-value strong {
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;
color: #6b7280;
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 {
margin-top: 40px;
padding-top: 30px;
@ -620,4 +582,5 @@ a.statut:visited {
font-size: 20px;
font-weight: 600;
color: #1d2327;
>>>>>>> f1fd1fe1015c57a9f30ec2f84ef5b774162d5a83
}