/* ═══════════════════════════════════════════════════════════════════════════ DA-DMPM — Charte « Systems » (cf. DA-DMPM.md + maquettes .dc.html) --------------------------------------------------------------------------- Tout est SCOPÉ sous .dmpm pour cohabiter avec style.css sans collision de variables (--bg / --border / --text existent dans les deux). On migre une page en enveloppant son contenu dans un conteneur .dmpm. Le thème clair/sombre suit l'attribut GLOBAL [data-theme] (toggle existant). Défaut (sans data-theme) = sombre, conformément à la charte. ═══════════════════════════════════════════════════════════════════════════ */ /* ── Jetons : SOMBRE (défaut) ─────────────────────────────────────────────── */ .dmpm { --bg:#1C1F24; --surface:#252A31; --surface-2:#2E343D; --border:rgba(255,255,255,0.12); --border-strong:rgba(255,255,255,0.26); --text:#EDEFF2; --muted:#B6BCC3; --faint:#828990; --accent:#82B49E; --accent-text:#97C7B1; --accent-fill:#6FA08C; --accent-fill-text:#0A1712; --accent-hover:#8ABBA5; --field-bg:#20242A; --stripe-a:#272C33; --stripe-b:#22262C; --track:#353B45; --st-ok:#7FC9A6; --st-ok-bg:rgba(111,160,140,0.18); --st-warn:#E0B267; --st-warn-bg:rgba(200,150,70,0.18); --st-err:#E08585; --st-err-bg:rgba(201,106,106,0.18); --st-off:#9BA1A8; --st-off-bg:rgba(255,255,255,0.07); --font-display:'Space Grotesk', system-ui, sans-serif; --font-ui:'Hanken Grotesk', system-ui, sans-serif; --font-mono:'Space Mono', ui-monospace, monospace; color:var(--text); font-family:var(--font-ui); } /* ── Jetons : CLAIR (via le data-theme global) ────────────────────────────── */ [data-theme="light"] .dmpm { --bg:#F6F6F4; --surface:#FFFFFF; --surface-2:#EFEFEC; --border:rgba(0,0,0,0.10); --border-strong:rgba(0,0,0,0.20); --text:#17191B; --muted:#5C6268; --faint:#9AA0A6; --accent:#4F7E6A; --accent-text:#3E6B58; --accent-fill:#4F7E6A; --accent-fill-text:#FFFFFF; --accent-hover:#5E9179; --field-bg:#FFFFFF; --stripe-a:#ECEDEA; --stripe-b:#E4E5E1; --track:#E4E5E1; --st-ok:#3E7E5F; --st-ok-bg:rgba(79,126,106,0.12); --st-warn:#9A7320; --st-warn-bg:rgba(180,130,40,0.13); --st-err:#B14A4A; --st-err-bg:rgba(177,74,74,0.10); --st-off:#6C727A; --st-off-bg:rgba(0,0,0,0.05); } .dmpm *, .dmpm *::before, .dmpm *::after { box-sizing:border-box; } .dmpm ::placeholder { color:var(--faint); } /* ── Adaptateur de migration ────────────────────────────────────────────── Re-mappe les jetons de style.css vers la charte DA, uniquement dans le scope .dmpm. Ainsi une page migrée (enveloppée dans .dmpm) voit toutes ses classes héritées — .ms-card, .badge, .btn, .folder-*, .modal-*, .form-*… — adopter la palette « Systems » sans réécriture ni changement de HTML/JS. */ .dmpm { --bg-card: var(--surface); --bg-card-2: var(--surface-2); --border-2: var(--border-strong); --text-sub: var(--muted); --text-dim: var(--faint); --green: var(--accent-text); --green-dim: var(--st-ok-bg); --green-glow: var(--st-ok-bg); --red: var(--st-err); --red-dim: var(--st-err-bg); --amber: var(--st-warn); --amber-dim: var(--st-warn-bg); --yellow: var(--st-warn); --blue: var(--accent-text); --font-sans: var(--font-ui); --radius: 2px; --radius-lg: 2px; --shadow: 0 12px 32px rgba(0,0,0,.35); --shadow-lg: 0 14px 34px rgba(0,0,0,.4); } /* Fond de page « anthracite » (pas noir pur) pour toute la zone de contenu d'une page migrée. Jetons neutres (hors scope) pour repeindre le
. */ :root { --da-bg:#1C1F24; } :root[data-theme="light"] { --da-bg:#F6F6F4; } .main-content:has(.dmpm-page) { background:var(--da-bg); } .dmpm.dmpm-page { background:var(--bg); min-height:100%; } /* ── Chrome global (body.dmpm) ──────────────────────────────────────────── La migration de tout le site se fait en posant .dmpm sur : le pont ci-dessus restyle les classes qui consomment des variables. Restent quelques couleurs codées en dur dans le chrome (sidebar/header) — corrigées ici. */ body.dmpm { background:var(--bg); color:var(--text); font-family:var(--font-ui); } /* Titres de page en Space Grotesk (déjà couvert par .dmpm h1/h2, rappel sûr) */ .dmpm .page-title { font-family:var(--font-display); } /* ── Sidebar DA native (« Systems ») ────────────────────────────────────── Restyle le chrome existant sans toucher au HTML/JS (mêmes classes/IDs). da-dmpm.css est chargé après style.css → .dmpm .sidebar l'emporte. */ .dmpm .sidebar { width:232px; background:var(--surface); border-right:1px solid var(--border); backdrop-filter:none; } .dmpm .sidebar.collapsed { width:64px; } .dmpm .sidebar-brand { border-bottom:1px solid var(--border); } .dmpm .sidebar-title { font-family:var(--font-display); letter-spacing:-.01em; } .dmpm .sidebar-subtitle { font-family:var(--font-mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); } .dmpm .sidebar-collapse-btn { border-radius:0; color:var(--muted); } .dmpm .sidebar-collapse-btn:hover { color:var(--text); background:var(--surface-2); } /* Items de nav : angles droits, palette DA */ .dmpm .nav-link { border-radius:0; color:var(--muted); font-weight:500; } .dmpm .nav-link:hover { color:var(--text); background:var(--surface-2); } /* Item actif façon « Systems » : fond surface-2 + filet d'accent à gauche */ .dmpm .nav-link.active, .dmpm .nav-sublink.active { color:var(--text); background:var(--surface-2); box-shadow:inset 2px 0 0 var(--accent); } .dmpm .nav-link.active svg { color:var(--accent); } .dmpm .nav-sublink { color:var(--faint); } .dmpm .nav-submenu { padding-left:.35rem; } .dmpm .nav-sublink { padding-left:2.3rem; } /* ≈ 37px, indentation DA */ .dmpm .nav-submenu-trigger { color:var(--muted); font-family:var(--font-ui); } .dmpm .nav-submenu-trigger:hover { color:var(--text); background:var(--surface-2); } .dmpm .nav-submenu-chevron { color:var(--faint); } .dmpm .nav-link-logout:hover { color:var(--st-err); background:var(--st-err-bg); } /* Badges profil / présence */ .dmpm .nav-user-badge { border-radius:0; border:1px solid var(--border); background:var(--surface-2); color:var(--muted); } .dmpm .nav-user-role { border-radius:3px; color:var(--st-warn); background:var(--st-warn-bg); font-family:var(--font-mono); font-size:.62rem; letter-spacing:.04em; } .dmpm .nav-presence-dot.online { background:var(--st-ok); box-shadow:0 0 0 2px var(--st-ok-bg); } .dmpm .nav-presence-dot.offline { background:var(--faint); } .dmpm .sidebar-divider { border-top-color:var(--border); } /* Mobile : le drawer garde sa largeur/position d'origine (ne pas hériter du 232px) */ @media (max-width:768px){ .dmpm .sidebar { width:200px; left:-210px; } .dmpm .sidebar.open { left:0; } } /* ── Boutons DA natifs ──────────────────────────────────────────────────── Angles droits, poids 600, remplissage accent-fill / contour / ghost. */ .dmpm .btn { border-radius:0; font-weight:600; } .dmpm .btn-xs { border-radius:0; } .dmpm .btn-primary { background:var(--accent-fill); color:var(--accent-fill-text); border-color:var(--accent-fill); } .dmpm .btn-primary:hover { background:var(--accent-hover); border-color:var(--accent-hover); color:var(--accent-fill-text); } .dmpm .btn-outline { border-color:var(--border-strong); color:var(--muted); } .dmpm .btn-outline:hover { border-color:var(--accent); color:var(--accent-text); } .dmpm .btn-ghost { color:var(--muted); } .dmpm .btn-ghost:hover { background:var(--surface-2); color:var(--text); } .dmpm .btn-danger-ghost:hover { color:var(--st-err); background:var(--st-err-bg); } .dmpm .btn-refresh-fw:hover, .dmpm .btn-refresh-fw.spinning { color:var(--accent-text); } /* ── Badges d'état DA natifs ──────────────────────────────────────────────── */ .dmpm .badge { border-radius:3px; } .dmpm .badge-ok, .dmpm .badge-success { background:var(--st-ok-bg); color:var(--st-ok); } .dmpm .badge-error, .dmpm .badge-unreachable, .dmpm .badge-timeout, .dmpm .badge-auth_error { background:var(--st-err-bg); color:var(--st-err); } .dmpm .badge-unknown { background:var(--st-off-bg); color:var(--st-off); } .dmpm .badge-running { background:var(--st-warn-bg); color:var(--st-warn); } /* ── Formulaires DA natifs ────────────────────────────────────────────────── */ .dmpm .form-card { border-radius:0; background:var(--surface); border-color:var(--border); } .dmpm .form-input, .dmpm textarea.form-input, .dmpm select.form-input { border-radius:0; background:var(--field-bg); border-color:var(--border-strong); font-family:var(--font-ui); } .dmpm .form-input:focus { border-color:var(--accent); box-shadow:0 0 0 2px var(--st-ok-bg); } .dmpm .form-input.mono { font-family:var(--font-mono); } .dmpm .form-label { color:var(--muted); } .dmpm .required { color:var(--accent-text); } /* ── Modales, carte d'auth, tables, toasts, recherche — DA natif ──────────── */ .dmpm .modal-box, .dmpm .auth-card { border-radius:0; background:var(--surface); border:1px solid var(--border); } .dmpm .modal-title { font-family:var(--font-display); letter-spacing:-.01em; } .dmpm .auth-title span, .dmpm .auth-main-title span, .dmpm .auth-title, .dmpm .auth-main-title { font-family:var(--font-display); } .dmpm .log-table-wrap { border-radius:0; background:var(--surface); border-color:var(--border); } .dmpm .log-table th { font-family:var(--font-mono); letter-spacing:.1em; color:var(--faint); background:var(--surface-2); } .dmpm .log-row-error td { background:var(--st-err-bg); } /* Toasts (couleurs codées en dur → jetons d'état) */ .dmpm .toast { border-radius:0; } .dmpm .toast-success { background:var(--st-ok-bg); border:1px solid var(--st-ok); color:var(--st-ok); } .dmpm .toast-error { background:var(--st-err-bg); border:1px solid var(--st-err); color:var(--st-err); } .dmpm .toast-info { background:var(--surface-2); border:1px solid var(--border-strong); color:var(--accent-text); } /* Barre de recherche */ .dmpm .ms-search-input { border-radius:0; background:var(--field-bg); border-color:var(--border-strong); } .dmpm .ms-search-input:focus { border-color:var(--accent); } /* ── Typographie ──────────────────────────────────────────────────────────── */ .dmpm .da-eyebrow { font-family:var(--font-mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--accent-text); } .dmpm .da-label { font-family:var(--font-mono); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--faint); } /* Titres du site : police display (Space Grotesk) uniquement — on NE touche pas aux tailles/marges existantes pour ne pas casser les mises en page migrées. */ .dmpm h1, .dmpm h2, .dmpm h3, .dmpm h4 { font-family:var(--font-display); letter-spacing:-0.01em; } /* Échelle DA explicite : réservée aux classes utilitaires (opt-in). */ .dmpm .da-h1 { font-family:var(--font-display); font-weight:700; font-size:clamp(40px,6vw,56px); letter-spacing:-0.02em; margin:0; } .dmpm .da-h2 { font-family:var(--font-display); font-weight:600; font-size:30px; letter-spacing:-0.01em; margin:0; } .dmpm .da-h3 { font-family:var(--font-display); font-weight:600; font-size:17px; letter-spacing:-0.01em; margin:0; } .dmpm .da-mono { font-family:var(--font-mono); } .dmpm .da-muted { color:var(--muted); } .dmpm .da-faint { color:var(--faint); } .dmpm .da-link { color:var(--accent-text); text-decoration:none; } .dmpm .da-link:hover { color:var(--text); } /* ── Mise en page ─────────────────────────────────────────────────────────── */ .dmpm .da-container { max-width:1220px; margin:0 auto; padding:56px 48px 96px; } .dmpm .da-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:20px; } @media (max-width:640px){ .dmpm .da-container { padding:32px 18px 64px; } } /* ── Cartes ───────────────────────────────────────────────────────────────── */ .dmpm .da-card { background:var(--surface); border:1px solid var(--border); padding:24px; display:flex; flex-direction:column; gap:16px; } .dmpm .da-card-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; } /* ── Boutons ──────────────────────────────────────────────────────────────── */ .dmpm .da-btn, .dmpm .da-btn-outline, .dmpm .da-btn-ghost { display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:inherit; font-size:14px; font-weight:600; line-height:1; padding:11px 20px; border:1px solid transparent; border-radius:0; cursor:pointer; transition:.2s; text-decoration:none; white-space:nowrap; } .dmpm .da-btn { background:var(--accent-fill); color:var(--accent-fill-text); } .dmpm .da-btn:hover { background:var(--accent-hover); color:var(--accent-fill-text); } .dmpm .da-btn-outline { border-color:var(--border-strong); color:var(--text); background:transparent; } .dmpm .da-btn-outline:hover { border-color:var(--accent); color:var(--accent-text); } .dmpm .da-btn-ghost { color:var(--accent-text); background:transparent; padding:11px 12px; } .dmpm .da-btn-ghost:hover { color:var(--text); } .dmpm .da-btn:disabled, .dmpm .da-btn-outline:disabled, .dmpm .da-btn-ghost:disabled { opacity:.5; cursor:not-allowed; } .dmpm .da-btn-sm { padding:8px 14px; font-size:13px; } /* Bouton-icône carré (actions compactes : refresh, upgrade…) */ .dmpm .da-icon-btn { display:inline-flex; align-items:center; justify-content:center; width:26px; height:26px; padding:0; border-radius:0; border:1px solid var(--border-strong); background:transparent; color:var(--muted); cursor:pointer; transition:.2s; flex-shrink:0; } .dmpm .da-icon-btn:hover { border-color:var(--accent); color:var(--accent-text); } .dmpm .da-icon-btn:disabled { opacity:.5; cursor:not-allowed; } .dmpm .da-icon-btn.da-icon-accent { border-color:rgba(111,160,140,.4); color:var(--accent-text); background:var(--st-ok-bg); } .dmpm .da-icon-btn.da-icon-accent:hover { border-color:var(--accent); } .dmpm .da-icon-btn.spinning svg { animation:da-spin .8s linear infinite; } @keyframes da-spin { to { transform:rotate(360deg); } } /* ── Champs ───────────────────────────────────────────────────────────────── */ .dmpm .da-field, .dmpm .da-textarea, .dmpm .da-select-trigger { width:100%; background:var(--field-bg); border:1px solid var(--border-strong); color:var(--text); font-family:inherit; font-size:14px; padding:11px 14px; outline:none; border-radius:0; transition:.2s; } .dmpm .da-textarea { resize:vertical; min-height:88px; line-height:1.5; } .dmpm .da-field:focus, .dmpm .da-textarea:focus { border-color:var(--accent); } /* Select (déclencheur + panneau) */ .dmpm .da-select { position:relative; } .dmpm .da-select-trigger { display:flex; align-items:center; justify-content:space-between; gap:10px; cursor:pointer; } .dmpm .da-select-trigger:hover { border-color:var(--accent); } .dmpm .da-select-caret { color:var(--muted); font-size:11px; } .dmpm .da-select-panel { display:none; position:absolute; top:calc(100% + 6px); left:0; right:0; z-index:40; background:var(--surface-2); border:1px solid var(--border-strong); box-shadow:0 12px 32px rgba(0,0,0,0.35); } .dmpm .da-select-panel.open { display:block; } .dmpm .da-option { display:flex; align-items:center; justify-content:space-between; padding:11px 14px; font-size:14px; cursor:pointer; } .dmpm .da-option:hover { background:var(--surface); } .dmpm .da-option .da-check { color:var(--accent-text); opacity:0; } .dmpm .da-option.selected .da-check { opacity:1; } /* Menu d'actions (déroulant) */ .dmpm .da-menu-panel { display:none; position:absolute; top:calc(100% + 6px); left:0; min-width:180px; z-index:40; background:var(--surface-2); border:1px solid var(--border-strong); box-shadow:0 12px 32px rgba(0,0,0,0.35); } .dmpm .da-menu-panel.open { display:block; } .dmpm .da-menu-item { padding:11px 14px; font-size:14px; cursor:pointer; } .dmpm .da-menu-item:hover { background:var(--surface); } .dmpm .da-menu-item.danger { color:#C96A6A; border-top:1px solid var(--border); } /* ── Badges d'état ────────────────────────────────────────────────────────── */ .dmpm .da-badge { display:inline-flex; align-items:center; gap:6px; padding:4px 10px; border-radius:3px; border:1px solid var(--st-off); background:var(--st-off-bg); color:var(--st-off); font-size:12px; font-weight:600; line-height:1.2; } /* Variante « pastille » : libellé mono MAJ + point */ .dmpm .da-pill { display:inline-flex; align-items:center; gap:7px; padding:5px 11px; border-radius:3px; border:1px solid var(--st-off); background:var(--st-off-bg); color:var(--st-off); font-family:var(--font-mono); font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; } .dmpm .da-pill::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; flex-shrink:0; } .dmpm .da-st-ok { border-color:var(--st-ok); background:var(--st-ok-bg); color:var(--st-ok); } .dmpm .da-st-warn { border-color:var(--st-warn); background:var(--st-warn-bg); color:var(--st-warn); } .dmpm .da-st-err { border-color:var(--st-err); background:var(--st-err-bg); color:var(--st-err); } .dmpm .da-st-off { border-color:var(--st-off); background:var(--st-off-bg); color:var(--st-off); } /* ── Contrôle segmenté ────────────────────────────────────────────────────── */ .dmpm .da-seg { display:inline-flex; border:1px solid var(--border); padding:4px; background:var(--field-bg); } .dmpm .da-seg-item { padding:8px 18px; font-size:13px; font-weight:600; cursor:pointer; background:transparent; color:var(--muted); border:none; font-family:inherit; transition:.2s; } .dmpm .da-seg-item.active { background:var(--accent-fill); color:var(--accent-fill-text); } /* ── Interrupteur ─────────────────────────────────────────────────────────── */ .dmpm .da-switch { width:44px; height:24px; border-radius:999px; border:1px solid var(--border-strong); background:var(--surface-2); position:relative; cursor:pointer; transition:.2s; flex-shrink:0; } .dmpm .da-switch::after { content:""; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%; background:var(--muted); transition:transform .2s, background .2s; } .dmpm .da-switch.on { background:var(--accent-fill); border-color:var(--accent-fill); } .dmpm .da-switch.on::after { transform:translateX(20px); background:var(--accent-fill-text); } /* ── Case à cocher ────────────────────────────────────────────────────────── */ .dmpm .da-check-box { width:19px; height:19px; border:1px solid var(--border-strong); background:var(--field-bg); display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--accent-fill-text); font-size:13px; line-height:1; cursor:pointer; } .dmpm .da-check-box.on { background:var(--accent-fill); border-color:var(--accent-fill); } /* ── Onglets ──────────────────────────────────────────────────────────────── */ .dmpm .da-tabs-head { display:flex; border-bottom:1px solid var(--border); padding:0 8px; gap:0; } .dmpm .da-tab { padding:14px 16px; font-size:14px; font-weight:600; cursor:pointer; border:none; background:transparent; font-family:inherit; border-bottom:2px solid transparent; color:var(--muted); transition:.15s; } .dmpm .da-tab.active { color:var(--text); border-bottom-color:var(--accent); } /* ── Barres repliables ────────────────────────────────────────────────────── */ .dmpm .da-collapse-head { display:flex; align-items:center; justify-content:space-between; padding:14px 18px; background:var(--surface-2); cursor:pointer; } .dmpm .da-collapse-caret { color:var(--muted); font-size:11px; transition:transform .2s; } .dmpm .da-collapse.collapsed .da-collapse-caret { transform:rotate(-90deg); } .dmpm .da-collapse-body { padding:18px; border-top:1px solid var(--border); } .dmpm .da-collapse.collapsed .da-collapse-body { display:none; } /* ── Placeholder rayé ─────────────────────────────────────────────────────── */ .dmpm .da-placeholder { background:repeating-linear-gradient(45deg, var(--stripe-a), var(--stripe-a) 11px, var(--stripe-b) 11px, var(--stripe-b) 22px); display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:12px; letter-spacing:.14em; color:var(--faint); text-transform:uppercase; } /* ── Kanban ───────────────────────────────────────────────────────────────── */ .dmpm .da-kanban-card { background:var(--surface-2); border:1px solid var(--border); border-left:2px solid var(--accent); padding:12px; cursor:pointer; transition:.2s; } .dmpm .da-kanban-card:hover { border-color:var(--accent); } .dmpm .da-kanban-col-head { display:flex; align-items:center; justify-content:space-between; font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); padding-bottom:8px; border-bottom:1px solid var(--border); } /* ── Gantt ────────────────────────────────────────────────────────────────── */ .dmpm .da-gantt-row { display:grid; grid-template-columns:190px 1fr; align-items:center; padding:8px 0; } .dmpm .da-gantt-track { position:relative; height:26px; background:repeating-linear-gradient(90deg, var(--field-bg), var(--field-bg) calc(25% - 1px), var(--border) 25%); } .dmpm .da-gantt-bar { position:absolute; top:3px; height:20px; background:var(--accent-fill); display:flex; align-items:center; padding:0 8px; font-family:var(--font-mono); font-size:10px; color:var(--accent-fill-text); }