/* ============================================================================ Visiontek Cloud Backup — Design System (T1.7) ============================================================================ Feuille de style locale du design system (tokens + composants réutilisables). Contexte : application PHP natif (pas de build Node). Tailwind est chargé en CDN pour les utilitaires de layout ; CETTE feuille fournit les tokens CSS (palette, espacements, radii, ombres, typo, dark mode) et les composants réutilisables (`.vt-*`) utilisés dans les vues — résolution des duplications P2-1 et mise en cohérence du design system. Couleurs : thème CLAIR par défaut (dashboard B2B). Tokens sémantiques conformes à docs/ux-design-tokens.md (§2) — contrastes WCAG AA garantis. Dark Mode : bloc `.dark` prêt (activable), même philosophie. ========================================================================== */ /* ---------------------------------------------------------------------------- 1. Tokens — palette & sémantique (thème clair, par défaut) -------------------------------------------------------------------------- */ :root { /* Surfaces & neutres */ --background: #f8fafc; --surface: #ffffff; --surface-muted: #f1f5f9; --border: #e2e8f0; --border-strong: #cbd5e1; --foreground: #0f172a; --secondary: #475569; --muted-foreground: #64748b; /* Marque (primaire, bleu « confiance ») */ --primary: #2563eb; --primary-strong: #1d4ed8; --primary-hover: #1d4ed8; --primary-active: #1e40af; --primary-foreground: #ffffff; /* Sémantiques (réservées aux surfaces/pastilles/icônes — jamais en texte brut) */ --success: #16a34a; --success-hover: #15803d; --warning: #d97706; --warning-hover: #b45309; --danger: #dc2626; --danger-hover: #b91c1c; --info: #0284c7; --info-hover: #0369a1; /* Textes sémantiques (AA ≥ 4.5:1) */ --success-fg: #15803d; --warning-fg: #92400e; --danger-fg: #b91c1c; --info-fg: #0369a1; /* Fonds doux des badges / alertes (pattern 100/800) */ --success-soft: #dcfce7; --warning-soft: #fef3c7; --danger-soft: #fee2e2; --info-soft: #e0f2fe; /* Typographie */ --font-body: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-display: var(--font-body); --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; /* Espacements (base 4px) */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-6: 1.5rem; --space-8: 2rem; --space-12: 3rem; --space-16: 4rem; /* Radii */ --radius-sm: 0.25rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --radius-xl: 1rem; --radius-full: 9999px; /* Ombres */ --shadow-sm: 0 1px 2px rgb(0 0 0 / 0.05); --shadow-md: 0 4px 6px rgb(0 0 0 / 0.05), 0 2px 4px rgb(0 0 0 / 0.04); --shadow-lg: 0 10px 15px rgb(0 0 0 / 0.1), 0 4px 6px rgb(0 0 0 / 0.05); /* Transitions */ --transition-fast: 150ms ease; --transition-base: 250ms ease; --transition-slow: 350ms ease; } /* ---------------------------------------------------------------------------- 2. Dark Mode (optionnel, activable via classe .dark sur ou ) -------------------------------------------------------------------------- */ .dark { --background: #0f172a; --surface: #1e293b; --surface-muted: #334155; --border: #334155; --border-strong: #475569; --foreground: #f1f5f9; --secondary: #cbd5e1; --muted-foreground: #94a3b8; --primary: #60a5fa; --primary-strong: #3b82f6; --primary-hover: #60a5fa; --primary-active: #2563eb; --primary-foreground: #0f172a; } /* ---------------------------------------------------------------------------- 3. Base -------------------------------------------------------------------------- */ html { -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); color: var(--foreground); background-color: var(--background); margin: 0; line-height: 1.5; } /* ---------------------------------------------------------------------------- 4. Accessibilité -------------------------------------------------------------------------- */ /* Skip link : premier élément du body, invisible jusqu'au focus */ .vt-skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--primary); color: var(--primary-foreground); padding: 0.75rem 1rem; border-radius: 0 var(--radius-md) var(--radius-md) 0; font-weight: 600; text-decoration: none; } .vt-skip-link:focus { left: 0; } /* Focus visible : jamais outline-none sans alternative visible */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: var(--radius-sm); } /* x-cloak : masque les éléments Alpine non initialisés */ [x-cloak] { display: none !important; } /* ---------------------------------------------------------------------------- 5. Composants réutilisables (.vt-*) -------------------------------------------------------------------------- */ /* --- Carte --- */ .vt-card { background-color: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } /* --- Boutons --- */ .vt-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; border-radius: var(--radius-md); font-size: 0.875rem; font-weight: 500; line-height: 1.25rem; min-height: 44px; padding: 0.5rem 1rem; border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast); } .vt-btn:disabled { opacity: 0.5; pointer-events: none; } .vt-btn--primary { background-color: var(--primary); color: var(--primary-foreground); } .vt-btn--primary:hover { background-color: var(--primary-hover); } .vt-btn--primary:active { background-color: var(--primary-active); } .vt-btn--danger { background-color: var(--danger); color: #fff; } .vt-btn--danger:hover { background-color: var(--danger-hover); } .vt-btn--secondary { background-color: var(--surface); color: var(--foreground); border-color: var(--border); } .vt-btn--secondary:hover { background-color: var(--surface-muted); } .vt-btn--ghost { background-color: transparent; color: var(--foreground); } .vt-btn--ghost:hover { background-color: var(--surface-muted); } .vt-btn--link { background-color: transparent; color: var(--primary); border-color: transparent; min-height: auto; padding: 0.25rem 0.5rem; } .vt-btn--link:hover { text-decoration: underline; } /* Spinner de chargement (anti double-soumission, P1-5) */ .vt-btn--loading { opacity: 0.6; pointer-events: none; } /* --- Champs de formulaire --- */ .vt-label { display: block; font-size: 0.875rem; font-weight: 500; color: var(--foreground); margin-bottom: 0.25rem; } .vt-input { width: 100%; border-radius: var(--radius-md); border: 1px solid var(--border); background-color: var(--surface); padding: 0.5rem 0.75rem; font-size: 0.875rem; color: var(--foreground); transition: border-color var(--transition-fast), box-shadow var(--transition-fast); } .vt-input::placeholder { color: var(--muted-foreground); } .vt-input:focus { border-color: var(--primary); box-shadow: 0 0 0 2px rgb(37 99 235 / 0.2); outline: none; } .vt-input:disabled { background-color: var(--surface-muted); color: var(--muted-foreground); opacity: 0.6; } .vt-input--error { border-color: var(--danger); } .vt-input--error:focus { box-shadow: 0 0 0 2px rgb(220 38 38 / 0.2); } .vt-input--success { border-color: var(--success); } .vt-input--success:focus { box-shadow: 0 0 0 2px rgb(22 163 74 / 0.2); } .vt-field-error { margin-top: 0.25rem; font-size: 0.875rem; color: var(--danger-fg); } .vt-field-helper { margin-top: 0.25rem; font-size: 0.875rem; color: var(--muted-foreground); } /* --- Badge (pattern fond -100 / texte -800, AA) --- */ .vt-badge { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.125rem 0.625rem; border-radius: var(--radius-full); font-size: 0.75rem; font-weight: 500; line-height: 1.125rem; white-space: nowrap; } .vt-badge-success { background-color: var(--success-soft); color: #166534; } .vt-badge-error { background-color: var(--danger-soft); color: #b91c1c; } .vt-badge-warning { background-color: var(--warning-soft); color: #92400e; } .vt-badge-info { background-color: var(--info-soft); color: #0369a1; } .vt-badge-active { background-color: var(--success-soft); color: #166534; } .vt-badge-resolved { background-color: #e2e8f0; color: #475569; } .vt-badge-neutral { background-color: #e2e8f0; color: #475569; } /* --- Statut machine : pastille (décorative, aria-hidden) + libellé --- */ .vt-status { display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; } .vt-status-dot { width: 0.625rem; height: 0.625rem; border-radius: var(--radius-full); flex-shrink: 0; } .vt-status-label { font-size: 0.875rem; font-weight: 500; } /* --- Alerte / bannière --- */ .vt-alert { display: flex; gap: 0.75rem; align-items: flex-start; border-radius: var(--radius-lg); border: 1px solid var(--border); padding: 1rem; } .vt-alert--error { background-color: var(--danger-soft); border-color: rgb(220 38 38 / 0.3); color: #b91c1c; } .vt-alert--success { background-color: var(--success-soft); border-color: rgb(22 163 74 / 0.3); color: #15803d; } .vt-alert--warning { background-color: var(--warning-soft); border-color: rgb(217 119 6 / 0.3); color: #92400e; } .vt-alert--info { background-color: var(--info-soft); border-color: rgb(2 132 199 / 0.3); color: #0369a1; } /* --- Table --- */ .vt-table { width: 100%; border-collapse: collapse; } .vt-table thead th { background-color: var(--surface-muted); color: var(--muted-foreground); text-align: left; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; padding: 0.75rem 1rem; } .vt-table tbody td { padding: 0.75rem 1rem; font-size: 0.875rem; border-bottom: 1px solid var(--border); } .vt-table tbody tr:hover { background-color: var(--surface-muted); } /* --- KPI --- */ .vt-kpi-value { font-size: 1.875rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; color: var(--foreground); } /* --- Breadcrumb --- */ .vt-breadcrumb-link { color: var(--muted-foreground); text-decoration: none; } .vt-breadcrumb-link:hover { color: var(--foreground); } .vt-breadcrumb-current { color: var(--foreground); font-weight: 500; } .vt-breadcrumb-sep { color: var(--muted-foreground); } /* --- Sidebar --- */ .vt-sidebar-link { display: flex; align-items: center; gap: 0.75rem; border-radius: var(--radius-md); padding: 0.5rem 0.75rem; font-size: 0.875rem; font-weight: 500; text-decoration: none; transition: background-color var(--transition-fast), color var(--transition-fast); } .vt-sidebar-link:hover { background-color: var(--surface-muted); color: var(--foreground); } .vt-sidebar-link--active { background-color: var(--surface-muted); color: var(--foreground); font-weight: 600; } /* --- Skeleton --- */ .vt-skeleton { background-color: var(--surface-muted); border-radius: var(--radius-md); animation: vt-pulse 1.6s ease-in-out infinite; } @keyframes vt-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } } /* --- Empty state --- */ .vt-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; text-align: center; border: 1px dashed var(--border); border-radius: var(--radius-lg); background-color: var(--surface); padding: 2rem; } /* --- Overlay du drawer mobile --- */ .vt-drawer-overlay { position: fixed; inset: 0; z-index: 30; background-color: rgb(0 0 0 / 0.4); transition: opacity var(--transition-base); } /* --- Indicateur de contexte tenant --- */ .vt-context { display: inline-flex; align-items: center; gap: 0.5rem; background-color: var(--surface-muted); border: 1px solid var(--border); border-radius: var(--radius-full); padding: 0.25rem 0.75rem; font-size: 0.875rem; font-weight: 500; white-space: nowrap; } .vt-context--locked { color: var(--secondary); } .vt-context--global { color: var(--foreground); } /* --- Arborescence (topologie) : ligne de guidage verticale (résout P2-2) --- */ .tree-line { border-left: 2px solid var(--border); margin-left: 11px; padding-left: 20px; } /* ---------------------------------------------------------------------------- 6. Ticketing & Support (C5 v1.0 — T5.4) Badges domaine : pattern fond -100 / texte -700/-800 (AA vérifié, cf. docs/ux-design-tokens.md §2.4). Jamais la couleur seule : chaque badge porte un libellé textuel + icône (rendus par views/tickets/_badges.php). -------------------------------------------------------------------------- */ /* --- Badges statut ticket --- */ .vt-badge-tk-ouvert { background-color: #e0f2fe; color: #0369a1; } /* sky-100 / sky-700 — 5.17:1 */ .vt-badge-tk-encours { background-color: #dbeafe; color: #1e40af; } /* blue-100 / blue-800 — 8.60:1 */ .vt-badge-tk-attente { background-color: #fef3c7; color: #92400e; } /* amber-100 / amber-800 — 6.37:1 */ .vt-badge-tk-resolu { background-color: #dcfce7; color: #166534; } /* green-100 / green-800 — 6.50:1 */ .vt-badge-tk-ferme { background-color: #e2e8f0; color: #475569; } /* slate-100 / slate-600 — 6.15:1 */ /* --- Badges priorité --- */ .vt-badge-pr-basse { background-color: #e2e8f0; color: #475569; } /* slate-100 / slate-600 */ .vt-badge-pr-normale { background-color: #e0f2fe; color: #0369a1; } /* sky-100 / sky-700 */ .vt-badge-pr-haute { background-color: #fef3c7; color: #92400e; } /* amber-100 / amber-800 */ .vt-badge-pr-critique { background-color: #fee2e2; color: #b91c1c; } /* red-100 / red-700 — 5.30:1 */ /* --- Badges origine --- */ .vt-badge-or-auto { background-color: #e0e7ff; color: #4338ca; } /* indigo-100 / indigo-700 — 6.90:1 */ .vt-badge-or-user { background-color: #e2e8f0; color: #475569; } /* slate-100 / slate-600 */ .vt-badge-or-admin { background-color: #e0f2fe; color: #0369a1; } /* sky-100 / sky-700 */ /* --- Note interne (rôles internes uniquement — jamais envoyée à un admin) --- Distinction NON colorée seule : fond ambré + bordure gauche + badge « Note interne » + icône (rendus côté vue). */ .vt-note-interne { background-color: #fffbeb; /* amber-50 */ border: 1px solid rgb(217 119 6 / 0.35); border-left: 3px solid var(--warning); border-radius: var(--radius-md); } /* --- Fil de messages --- */ .vt-msg { background-color: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 1rem; } /* --- Kanban (vue MSP) --- */ .vt-kanban { display: flex; align-items: flex-start; gap: 1rem; overflow-x: auto; padding-bottom: 0.5rem; } .vt-kanban-col { flex: 1 1 0; min-width: 15rem; background-color: var(--surface-muted); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 0.75rem; } .vt-kanban-card { display: block; background-color: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md); padding: 0.75rem; text-decoration: none; box-shadow: var(--shadow-sm); transition: transform var(--transition-fast), box-shadow var(--transition-fast), border-color var(--transition-fast); } .vt-kanban-card:hover, .vt-kanban-card:focus-visible { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--border-strong); } /* --- Micro-interactions (phase 4) — neutralisées par la règle globale prefers-reduced-motion ci-dessous (duration 0.01ms) --- */ @keyframes vt-rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .vt-anim-rise { animation: vt-rise 300ms ease both; } /* Stagger léger des cartes Kanban (plafonné à 10 colonnes visibles) */ .vt-kanban-col:nth-child(2) .vt-kanban-card { animation-delay: 40ms; } .vt-kanban-col:nth-child(3) .vt-kanban-card { animation-delay: 80ms; } .vt-kanban-col:nth-child(4) .vt-kanban-card { animation-delay: 120ms; } .vt-kanban-col:nth-child(5) .vt-kanban-card { animation-delay: 160ms; } /* ---------------------------------------------------------------------------- 7. Explorateur distant (C5.2 — Sprint 5 UI) Badges de statut de scan : pattern fond -100 / texte -700/-800 (AA vérifié, cf. docs/ux-design-tokens.md §2.4). Jamais la couleur seule : chaque badge est accompagné de son libellé textuel (+ icône pendant running). L'arbre (treeview) suit le pattern "disclosure list" : indentation pilotée par la variable CSS --tree-level (0..5), aucune couleur inline. -------------------------------------------------------------------------- */ /* --- Badges statut de scan (contrastes AA sur fond -100) --- */ .vt-badge-scan-queued { background-color: #e0f2fe; color: #0369a1; } /* sky-100 / sky-700 — 5.17:1 */ .vt-badge-scan-running { background-color: #dbeafe; color: #1e40af; } /* blue-100 / blue-800 — 8.60:1 */ .vt-badge-scan-completed { background-color: #dcfce7; color: #166534; } /* green-100 / green-800 — 6.50:1 */ .vt-badge-scan-failed { background-color: #fee2e2; color: #b91c1c; } /* red-100 / red-700 — 5.30:1 */ .vt-badge-scan-expired { background-color: #fef3c7; color: #92400e; } /* amber-100 / amber-800 — 6.37:1 */ .vt-badge-scan-cancelled { background-color: #e2e8f0; color: #475569; } /* slate-100 / slate-600 — 6.15:1 */ /* --- Treeview (résultats de scan) --- */ .vt-tree { background-color: var(--surface); border-top: 1px solid var(--border); max-height: 32rem; overflow: auto; } .vt-tree ul { list-style: none; margin: 0; padding: 0; } .vt-tree-row { display: flex; align-items: center; gap: 0.5rem; min-height: 44px; /* cible tactile WCAG 2.2 AA */ padding: 0.25rem 0.75rem 0.25rem calc(0.75rem + var(--tree-level, 0) * 1.25rem); border-bottom: 1px solid var(--border); font-size: 0.875rem; transition: background-color var(--transition-fast); animation: vt-fadein 200ms ease both; } .vt-tree-row:hover { background-color: var(--surface-muted); } .vt-tree-row:last-child { border-bottom: 0; } .vt-tree-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Stagger léger à l'apparition (plafonné à 8 lignes visibles) */ .vt-tree-row:nth-child(2) { animation-delay: 20ms; } .vt-tree-row:nth-child(3) { animation-delay: 40ms; } .vt-tree-row:nth-child(4) { animation-delay: 60ms; } .vt-tree-row:nth-child(5) { animation-delay: 80ms; } .vt-tree-row:nth-child(6) { animation-delay: 100ms; } .vt-tree-row:nth-child(7) { animation-delay: 120ms; } .vt-tree-row:nth-child(8) { animation-delay: 140ms; } /* --- Chemins & identifiants (mono) --- */ .vt-path { font-family: var(--font-mono); font-size: 0.8125rem; } /* --- Spinner de polling (attendu, non bloquant) --- */ .vt-spinner { display: inline-block; width: 1rem; height: 1rem; flex-shrink: 0; border: 2px solid currentColor; border-right-color: transparent; border-radius: var(--radius-full); animation: vt-spin 0.8s linear infinite; } @keyframes vt-spin { to { transform: rotate(360deg); } } @keyframes vt-fadein { from { opacity: 0; } to { opacity: 1; } } /* --- Réduction de mouvement --- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }