From e8aa2c9494354398e9cc3ff7e1919655a474f59f Mon Sep 17 00:00:00 2001 From: jps Date: Thu, 15 Jan 2026 16:40:13 +0100 Subject: [PATCH 1/2] ajout css --- assets/css/admin.css | 167 +++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 167 insertions(+) diff --git a/assets/css/admin.css b/assets/css/admin.css index 756fd39..8a3f66e 100644 --- a/assets/css/admin.css +++ b/assets/css/admin.css @@ -403,3 +403,170 @@ a.statut:visited { height: 16px; line-height: 1; } + +/* ==================================== + TIMELINE VERTICALE - DASHBOARD + ==================================== */ + +.esi-peppol-setup-guide { + max-width: 900px; + margin-top: 30px; +} + +.step { + position: relative; + padding-left: 70px; + padding-bottom: 40px; + min-height: 80px; +} + +/* Dernier élément sans padding-bottom */ +.step:last-child { + padding-bottom: 0; +} + +/* Cercle numéroté (::before) */ +.step::before { + content: attr(data-step); + position: absolute; + left: 0; + top: 0; + width: 44px; + height: 44px; + border-radius: 50%; + display: flex; + align-items: center; + justify-content: center; + font-weight: 600; + font-size: 18px; + z-index: 2; + + /* État par défaut : cercle blanc, bord gris, numéro gris */ + background-color: #ffffff; + border: 3px solid #d1d5db; + color: #9ca3af; +} + +/* 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; +} + +/* Masquer la ligne sur le dernier élément */ +.step:last-child::after { + display: none; +} + +/* 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: #374151; +} + +.step-card p { + margin: 0 0 16px 0; + color: #6b7280; + line-height: 1.6; +} + +.step-card .step-value { + display: inline-block; + background-color: #ffffff; + border: 1px solid #d1d5db; + border-radius: 4px; + padding: 8px 12px; + margin-top: 8px; +} + +.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; +} + +/* ======================================== + É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: "✓"; +} From ba2a7ddf9515ea2511068474f88f99ed5f4fceee Mon Sep 17 00:00:00 2001 From: jps Date: Thu, 15 Jan 2026 16:54:25 +0100 Subject: [PATCH 2/2] rajout css --- assets/css/admin.css | 203 ------------------------------------------- 1 file changed, 203 deletions(-) diff --git a/assets/css/admin.css b/assets/css/admin.css index 55ce87a..1253f75 100644 --- a/assets/css/admin.css +++ b/assets/css/admin.css @@ -404,7 +404,6 @@ a.statut:visited { line-height: 1; } -<<<<<<< HEAD /* ==================================== TIMELINE VERTICALE - DASHBOARD ==================================== */ @@ -513,208 +512,6 @@ a.statut:visited { .step-card .step-note { margin-top: 12px; -======= -/* 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; -} - -.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; -} - -.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; -} - -.esi-peppol-setup-step { - margin-bottom: 24px; - padding: 24px; - background: #f9f9f9; - border-radius: 8px; - border-left: 4px solid #c3c4c7; - transition: all 0.3s ease; -} - -.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; - 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); -} - -.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; - color: #9ca3af; -} - -.esi-peppol-check-icon { - font-size: 28px; - line-height: 1; - font-weight: 700; -} - -.esi-peppol-step-content { - flex: 1; -} - -.esi-peppol-step-title { - margin: 0 0 8px 0; - font-size: 18px; - font-weight: 600; - color: #1d2327; - display: flex; - align-items: center; - gap: 12px; -} - -.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 { - margin: 0 0 16px 0; - font-size: 14px; - color: #646970; - 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 { - display: inline-block; - padding: 4px 8px; - background: #f3f4f6; - 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; -} - -.esi-peppol-step-note { - margin: 12px 0 0 0; ->>>>>>> f1fd1fe1015c57a9f30ec2f84ef5b774162d5a83 font-size: 13px; color: #6b7280; font-style: italic;