/* ============================================================================ MOLP — Composants custom (folio) ============================================================================ Version : 0.2.0 — charge APRÈS molp-bootstrap.css. Composants que Bootstrap n'offre pas, calibrés dashboards/cockpits. Tout est bâti sur la couche sémantique des tokens ; les rares primitives (--molp-night-*) apparaissent dans les zones VOLONTAIREMENT sombres dans les deux thèmes : sidebar, log viewer, bloc de code — c'est un choix d'identité (autorisé ici uniquement : ce fichier fait partie de la charte). Sommaire : 1. App shell (sidebar + topbar + main) 9. Avatars & status 2. Page header 10. Tags (badges soft) 3. Stat / KPI cards 11. Table toolbar 4. Empty state 12. Dropzone 5. Skeleton loaders 13. Code block 6. Log viewer 14. Theme toggle 7. Chat (bulles user/assistant) 15. Divider, utilitaires 8. Timeline & stepper ========================================================================== */ /* ============================================================ 1. APP SHELL — ; sidebar sombre signature ============================================================ */ .molp-app { display: grid; grid-template-columns: var(--molp-sidebar-width) 1fr; grid-template-rows: var(--molp-topbar-height) 1fr; grid-template-areas: "sidebar topbar" "sidebar main"; min-height: 100vh; background: var(--molp-color-bg); } /* --- Sidebar (sombre dans les deux thèmes — identité cockpit) --- */ .molp-sidebar { grid-area: sidebar; display: flex; flex-direction: column; gap: var(--molp-space-md); padding: var(--molp-space-md); background: var(--molp-gradient-sidebar); border-right: 1px solid var(--molp-night-800); color: var(--molp-night-100); overflow-y: auto; } .molp-sidebar-brand { display: flex; align-items: center; gap: var(--molp-space-xs); padding-bottom: var(--molp-space-md); border-bottom: 1px solid var(--molp-night-700); color: var(--molp-white); text-decoration: none; } .molp-sidebar-brand:hover { color: var(--molp-white); text-decoration: none; } .molp-sidebar-brand img { height: 32px; width: auto; border-radius: var(--molp-radius-xs); } .molp-sidebar-brand .brand-name { font-weight: var(--molp-font-bold); line-height: 1.1; } .molp-sidebar-brand .brand-sub { font-size: var(--molp-text-xs); color: var(--molp-night-300); } .molp-sidebar-section { display: flex; flex-direction: column; gap: 2px; } .molp-sidebar-section-title { font-size: var(--molp-text-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--molp-night-400); margin: var(--molp-space-2xs) var(--molp-space-xs); } .molp-sidebar-link { display: flex; align-items: center; gap: var(--molp-space-xs); padding: var(--molp-space-2xs) var(--molp-space-xs); border-radius: var(--molp-radius-sm); color: var(--molp-night-200); font-weight: var(--molp-font-medium); font-size: var(--molp-text-sm); text-decoration: none; transition: background var(--molp-transition-fast), color var(--molp-transition-fast); } .molp-sidebar-link .bi { font-size: 1.1em; } .molp-sidebar-link:hover { background: rgba(255, 255, 255, 0.07); color: var(--molp-white); text-decoration: none; } .molp-sidebar-link.active { background: rgba(245, 124, 0, 0.16); color: var(--molp-orange-300); } .molp-sidebar-link .badge { margin-left: auto; } .molp-sidebar-footer { margin-top: auto; padding-top: var(--molp-space-md); border-top: 1px solid var(--molp-night-700); } /* --- Topbar --- */ .molp-topbar { grid-area: topbar; display: flex; align-items: center; gap: var(--molp-space-sm); padding: 0 var(--molp-space-md); background: var(--molp-color-surface); border-bottom: 1px solid var(--molp-color-border); position: sticky; top: 0; z-index: var(--molp-z-sticky); } .molp-topbar-spacer { flex: 1; } /* --- Contenu --- */ .molp-main { grid-area: main; padding: var(--molp-space-lg); min-width: 0; } /* --- Responsive : sidebar en overlay sous 992px --- */ .molp-sidebar-toggle { display: none; } @media (max-width: 991.98px) { .molp-app { grid-template-columns: 1fr; grid-template-areas: "topbar" "main"; } .molp-sidebar { position: fixed; inset: 0 auto 0 0; width: var(--molp-sidebar-width); transform: translateX(-100%); transition: transform var(--molp-transition-base); z-index: var(--molp-z-overlay); } .molp-app.sidebar-open .molp-sidebar { transform: translateX(0); box-shadow: var(--molp-shadow-xl); } .molp-sidebar-toggle { display: inline-flex; } .molp-app.sidebar-open::after { content: ""; position: fixed; inset: 0; background: rgba(18, 18, 31, 0.55); z-index: calc(var(--molp-z-overlay) - 1); } } /* ============================================================ 2. PAGE HEADER ============================================================ */ .molp-page-header { display: flex; align-items: flex-end; justify-content: space-between; flex-wrap: wrap; gap: var(--molp-space-sm); margin-bottom: var(--molp-space-lg); } .molp-page-title { font-size: var(--molp-text-2xl); font-weight: var(--molp-font-bold); line-height: var(--molp-leading-tight); margin: 0; } .molp-page-sub { color: var(--molp-color-text-muted); margin: var(--molp-space-3xs) 0 0; } .molp-page-actions { display: flex; gap: var(--molp-space-2xs); } /* ============================================================ 3. STAT / KPI CARDS ============================================================ */ .molp-stat { display: flex; align-items: flex-start; gap: var(--molp-space-sm); padding: var(--molp-space-md); background: var(--molp-color-surface); border: 1px solid var(--molp-color-border); border-radius: var(--molp-radius-lg); } .molp-stat-icon { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; flex: none; border-radius: var(--molp-radius-md); background: var(--molp-color-primary-soft); color: var(--molp-color-primary); font-size: var(--molp-text-xl); } .molp-stat-icon.is-success { background: var(--molp-color-success-bg); color: var(--molp-color-success); } .molp-stat-icon.is-warning { background: var(--molp-color-warning-bg); color: var(--molp-color-warning); } .molp-stat-icon.is-error { background: var(--molp-color-error-bg); color: var(--molp-color-error); } .molp-stat-icon.is-info { background: var(--molp-color-info-bg); color: var(--molp-color-info); } .molp-stat-label { font-size: var(--molp-text-xs); font-weight: var(--molp-font-semibold); text-transform: uppercase; letter-spacing: 0.05em; color: var(--molp-color-text-muted); margin-bottom: 2px; } .molp-stat-value { font-size: var(--molp-text-2xl); font-weight: var(--molp-font-bold); line-height: var(--molp-leading-tight); font-variant-numeric: tabular-nums; } .molp-stat-delta { display: inline-flex; align-items: center; gap: 2px; font-size: var(--molp-text-sm); font-weight: var(--molp-font-semibold); } .molp-stat-delta.up { color: var(--molp-color-success); } .molp-stat-delta.down { color: var(--molp-color-error); } .molp-stat-delta .muted { color: var(--molp-color-text-faint); font-weight: var(--molp-font-regular); } /* ============================================================ 4. EMPTY STATE ============================================================ */ .molp-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--molp-space-2xs); padding: var(--molp-space-2xl) var(--molp-space-md); } .molp-empty > .bi { font-size: 44px; color: var(--molp-color-text-faint); background: var(--molp-color-surface-2); border-radius: var(--molp-radius-full); width: 88px; height: 88px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: var(--molp-space-2xs); } .molp-empty-title { font-size: var(--molp-text-lg); font-weight: var(--molp-font-semibold); margin: 0; } .molp-empty-text { color: var(--molp-color-text-muted); max-width: 42ch; margin: 0 0 var(--molp-space-sm); } /* ============================================================ 5. SKELETON LOADERS ============================================================ */ .molp-skeleton { position: relative; overflow: hidden; background: var(--molp-color-surface-2); border-radius: var(--molp-radius-xs); } .molp-skeleton::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent); animation: molp-shimmer 1.4s infinite; } [data-bs-theme="dark"] .molp-skeleton::after { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent); } .molp-skeleton.text { height: 12px; margin: 6px 0; } .molp-skeleton.title { height: 20px; width: 40%; margin: 8px 0; } .molp-skeleton.avatar { width: 40px; height: 40px; border-radius: var(--molp-radius-full); } .molp-skeleton.thumb { height: 120px; border-radius: var(--molp-radius-md); } @keyframes molp-shimmer { 100% { transform: translateX(100%); } } @media (prefers-reduced-motion: reduce) { .molp-skeleton::after { animation: none; } } /* ============================================================ 6. LOG VIEWER (toujours sombre — identité console) ============================================================ */ .molp-logs { background: var(--molp-night-950); color: var(--molp-night-100); font-family: var(--molp-font-mono); font-size: var(--molp-text-sm); line-height: 1.7; border: 1px solid var(--molp-night-800); border-radius: var(--molp-radius-md); padding: var(--molp-space-sm) var(--molp-space-md); overflow: auto; max-height: 420px; } .molp-log-line { display: flex; gap: var(--molp-space-xs); white-space: pre-wrap; } .molp-log-time { color: var(--molp-night-400); flex: none; } .molp-log-level { flex: none; width: 5.5ch; font-weight: var(--molp-font-semibold); } .molp-log-level.info { color: var(--molp-blue-400); } .molp-log-level.warn { color: var(--molp-amber-400); } .molp-log-level.error { color: var(--molp-red-400); } .molp-log-level.debug { color: var(--molp-night-300); } .molp-log-line.is-error { background: rgba(239, 68, 68, 0.12); margin: 0 calc(-1 * var(--molp-space-md)); padding: 0 var(--molp-space-md); } /* ============================================================ 7. CHAT — bulles user / assistant (cockpits IA) ============================================================ */ .molp-chat { display: flex; flex-direction: column; gap: var(--molp-space-sm); } .molp-msg { max-width: 76%; padding: var(--molp-space-2xs) var(--molp-space-sm); border-radius: var(--molp-radius-lg); line-height: var(--molp-leading-normal); } .molp-msg-user { align-self: flex-end; background: var(--molp-color-primary); color: var(--molp-color-on-primary); border-bottom-right-radius: var(--molp-radius-xs); } .molp-msg-assistant { align-self: flex-start; background: var(--molp-color-surface-2); border: 1px solid var(--molp-color-border); border-bottom-left-radius: var(--molp-radius-xs); } .molp-msg-meta { font-size: var(--molp-text-xs); color: var(--molp-color-text-faint); margin-top: 2px; } .molp-msg-user + .molp-msg-meta { align-self: flex-end; } /* Indicateur de frappe */ .molp-typing { display: inline-flex; gap: 4px; padding: var(--molp-space-2xs) 2px; } .molp-typing span { width: 7px; height: 7px; border-radius: var(--molp-radius-full); background: var(--molp-color-text-faint); animation: molp-typing 1.2s infinite; } .molp-typing span:nth-child(2) { animation-delay: 0.2s; } .molp-typing span:nth-child(3) { animation-delay: 0.4s; } @keyframes molp-typing { 0%, 60%, 100% { opacity: 0.35; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } } /* ============================================================ 8. TIMELINE & STEPPER ============================================================ */ .molp-timeline { list-style: none; margin: 0; padding: 0; position: relative; } .molp-timeline::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: var(--molp-color-border-strong); } .molp-timeline li { position: relative; padding: 0 0 var(--molp-space-md) var(--molp-space-lg); } .molp-timeline li:last-child { padding-bottom: 0; } .molp-timeline li::before { content: ""; position: absolute; left: 0; top: 4px; width: 16px; height: 16px; border-radius: var(--molp-radius-full); background: var(--molp-color-surface); border: 3px solid var(--molp-color-primary); } .molp-timeline li.is-success::before { border-color: var(--molp-color-success); } .molp-timeline li.is-error::before { border-color: var(--molp-color-error); } .molp-timeline li.is-muted::before { border-color: var(--molp-color-border-strong); } .molp-timeline-time { font-size: var(--molp-text-xs); color: var(--molp-color-text-faint); } .molp-timeline-title { font-weight: var(--molp-font-semibold); } .molp-timeline-text { color: var(--molp-color-text-muted); font-size: var(--molp-text-sm); } /* Stepper horizontal */ .molp-stepper { display: flex; list-style: none; margin: 0; padding: 0; } .molp-stepper li { flex: 1; display: flex; flex-direction: column; align-items: center; gap: var(--molp-space-3xs); position: relative; font-size: var(--molp-text-sm); color: var(--molp-color-text-muted); } .molp-stepper li:not(:first-child)::before { content: ""; position: absolute; top: 16px; right: 50%; width: 100%; height: 2px; background: var(--molp-color-border-strong); z-index: 0; } .molp-stepper li.is-done:not(:first-child)::before, .molp-stepper li.is-active:not(:first-child)::before { background: var(--molp-color-primary); } .molp-step-dot { width: 32px; height: 32px; border-radius: var(--molp-radius-full); display: inline-flex; align-items: center; justify-content: center; background: var(--molp-color-surface); border: 2px solid var(--molp-color-border-strong); font-weight: var(--molp-font-semibold); position: relative; z-index: 1; } .molp-stepper li.is-done .molp-step-dot { background: var(--molp-color-primary); border-color: var(--molp-color-primary); color: var(--molp-color-on-primary); } .molp-stepper li.is-active { color: var(--molp-color-text); font-weight: var(--molp-font-semibold); } .molp-stepper li.is-active .molp-step-dot { border-color: var(--molp-color-primary); color: var(--molp-color-primary); } /* ============================================================ 9. AVATARS & STATUS ============================================================ */ .molp-avatar { --size: 36px; width: var(--size); height: var(--size); border-radius: var(--molp-radius-full); display: inline-flex; align-items: center; justify-content: center; background: var(--molp-color-primary-soft); color: var(--molp-color-link); font-weight: var(--molp-font-semibold); font-size: calc(var(--size) * 0.38); position: relative; flex: none; overflow: visible; } .molp-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: inherit; } .molp-avatar.sm { --size: 28px; } .molp-avatar.lg { --size: 48px; } .molp-avatar-group { display: inline-flex; } .molp-avatar-group .molp-avatar { border: 2px solid var(--molp-color-surface); } .molp-avatar-group .molp-avatar + .molp-avatar { margin-left: -10px; } .molp-status-dot { position: absolute; right: 0; bottom: 0; width: 10px; height: 10px; border-radius: var(--molp-radius-full); border: 2px solid var(--molp-color-surface); background: var(--molp-color-text-faint); } .molp-status-dot.online { background: var(--molp-color-success); } .molp-status-dot.busy { background: var(--molp-color-error); } .molp-status-dot.away { background: var(--molp-color-warning); } /* ============================================================ 10. TAGS — badges "soft" arrondis ============================================================ */ .molp-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 10px; border-radius: var(--molp-radius-full); font-size: var(--molp-text-xs); font-weight: var(--molp-font-semibold); background: var(--molp-color-surface-2); color: var(--molp-color-text-muted); } .molp-tag .bi { font-size: 0.9em; } .molp-tag-primary { background: var(--molp-color-primary-soft); color: var(--molp-color-link); } .molp-tag-success { background: var(--molp-color-success-bg); color: var(--molp-color-success); } .molp-tag-warning { background: var(--molp-color-warning-bg); color: var(--molp-color-warning); } .molp-tag-error { background: var(--molp-color-error-bg); color: var(--molp-color-error); } .molp-tag-info { background: var(--molp-color-info-bg); color: var(--molp-color-info); } /* ============================================================ 11. TABLE TOOLBAR ============================================================ */ .molp-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--molp-space-2xs); margin-bottom: var(--molp-space-sm); } .molp-toolbar-search { position: relative; flex: 1 1 220px; max-width: 340px; } .molp-toolbar-search .bi { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--molp-color-text-faint); pointer-events: none; } .molp-toolbar-search .form-control { padding-left: 36px; } .molp-toolbar-spacer { flex: 1; } /* ============================================================ 12. DROPZONE ============================================================ */ .molp-dropzone { display: flex; flex-direction: column; align-items: center; gap: var(--molp-space-2xs); padding: var(--molp-space-xl) var(--molp-space-md); border: 2px dashed var(--molp-color-border-strong); border-radius: var(--molp-radius-lg); color: var(--molp-color-text-muted); text-align: center; cursor: pointer; transition: border-color var(--molp-transition-fast), background var(--molp-transition-fast); } .molp-dropzone .bi { font-size: var(--molp-text-3xl); color: var(--molp-color-text-faint); } .molp-dropzone:hover, .molp-dropzone.is-dragover { border-color: var(--molp-color-primary); background: var(--molp-color-primary-soft); } .molp-dropzone:hover .bi, .molp-dropzone.is-dragover .bi { color: var(--molp-color-primary); } /* ============================================================ 13. CODE BLOCK (toujours sombre — identité console) ============================================================ */ .molp-code { background: var(--molp-night-950); border: 1px solid var(--molp-night-800); border-radius: var(--molp-radius-md); overflow: hidden; } .molp-code-header { display: flex; align-items: center; justify-content: space-between; gap: var(--molp-space-sm); padding: var(--molp-space-2xs) var(--molp-space-sm); background: var(--molp-night-900); border-bottom: 1px solid var(--molp-night-800); color: var(--molp-night-300); font-size: var(--molp-text-xs); font-family: var(--molp-font-mono); } .molp-code pre { margin: 0; padding: var(--molp-space-sm) var(--molp-space-md); color: var(--molp-night-100); font-family: var(--molp-font-mono); font-size: var(--molp-text-sm); line-height: 1.7; overflow-x: auto; } .molp-code .btn-copy { color: var(--molp-night-300); background: transparent; border: 1px solid var(--molp-night-700); border-radius: var(--molp-radius-xs); font-size: var(--molp-text-xs); padding: 2px 8px; cursor: pointer; transition: color var(--molp-transition-fast), border-color var(--molp-transition-fast); } .molp-code .btn-copy:hover { color: var(--molp-white); border-color: var(--molp-night-500); } .molp-code .btn-copy.is-copied { color: var(--molp-green-400); border-color: var(--molp-green-600); } /* ============================================================ 14. THEME TOGGLE —