/* ========================================================================= Design tokens Modal Group - Inventory CMDB ========================================================================= 3 themes mutuellement exclusifs (slate / brand / dark) 3 densites (compact / cozy / spacious) 6 palettes accent configurables Inspire du design system livre dans C:/repo/_Ressources/styles.css. Application: (defaut) Override possible via Tweaks panel (persiste dans auth_users.ui_preferences). Compatibilite: ce fichier est charge AVANT style.css dans views/partials/app_start.php. Toutes les regles CSS existantes peuvent referencer var(--xxx) progressivement. La refonte est big bang mais le fichier reste isole pour rollback facile (decoder le ). ========================================================================= */ :root { /* ---- Surfaces (light, theme slate par defaut sur :root) ---- */ --bg: #f6f7f9; --surface: #ffffff; --surface-2: #fafbfc; --surface-3: #f1f3f6; --border: #e4e7ec; --border-soft: #eef0f3; --border-strong: #cdd2d9; /* ---- Texte ---- */ --text: #0f172a; --text-2: #475569; --text-3: #64748b; --text-muted: #94a3b8; /* ---- Brand (primary) ---- */ --primary: #1e3a8a; /* Modal navy */ --primary-2: #1e40af; --primary-soft: #eef2ff; --primary-ink: #ffffff; /* ---- Accent ---- */ --accent: #f59e0b; /* Modal orange */ --accent-soft: #fef3c7; --accent-ink: #78350f; /* ---- Semantique ---- */ --success: #16a34a; --success-soft: #dcfce7; --warn: #d97706; --warn-soft: #fef3c7; --danger: #dc2626; --danger-soft: #fee2e2; --info: #0284c7; --info-soft: #e0f2fe; /* ---- Geometrie ---- */ --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; /* ---- Ombres ---- */ --shadow-1: 0 1px 2px rgba(15,23,42,0.04), 0 1px 1px rgba(15,23,42,0.03); --shadow-2: 0 4px 16px rgba(15,23,42,0.06), 0 1px 3px rgba(15,23,42,0.04); --shadow-3: 0 16px 48px rgba(15,23,42,0.16), 0 4px 12px rgba(15,23,42,0.08); /* ---- Layout ---- */ --sidebar-w: 248px; --sidebar-w-collapsed: 64px; --header-h: 56px; /* ---- Densite (overridable via .density-*) ---- */ --density-pad: 12px; --density-row: 36px; --density-fs: 14px; --density-card: 14px 16px; --density-page: 22px 26px; --density-cell: 10px 14px; /* ---- Typo ---- */ --font-sans: "Plus Jakarta Sans", -apple-system, "Segoe UI", system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace; } /* ============== Theme: brand (Modal Group, defaut applicatif) ============== */ .theme-brand { --bg: #f4f5f9; --primary: #1e3a8a; --primary-2: #172e6e; --primary-soft: #e0e7ff; --accent: #ea7c1c; --accent-soft: #fff1de; --accent-ink: #7c4007; } /* ============== Theme: slate (clair classique, identique au :root) ========= Pas de regle: les valeurs sont deja celles de :root. La classe existe pour pouvoir switcher explicitement vers slate quand on etait sur brand/dark. */ .theme-slate { --bg: #f6f7f9; --primary: #1e3a8a; --primary-2: #1e40af; --primary-soft: #eef2ff; --accent: #f59e0b; --accent-soft: #fef3c7; --accent-ink: #78350f; } /* ============== Theme: dark (operateur) =================================== */ .theme-dark { --bg: #0b1020; --surface: #11172a; --surface-2: #151c33; --surface-3: #1a2240; --border: #1f2a4a; --border-soft: #182146; --border-strong: #2a386a; --text: #e5ecff; --text-2: #aab5d1; --text-3: #8794b6; --text-muted: #5b6892; --primary: #6e8cff; --primary-2: #93a8ff; --primary-soft: #1a2a55; --primary-ink: #07102a; --accent: #ffb547; --accent-soft: #3a2614; --accent-ink: #ffeacb; --success-soft: #103024; --warn-soft: #36230b; --danger-soft: #3a1313; --info-soft: #0e2942; --shadow-1: 0 1px 2px rgba(0,0,0,0.4); --shadow-2: 0 4px 16px rgba(0,0,0,0.4); --shadow-3: 0 16px 48px rgba(0,0,0,0.55); } /* ============== Densites ================================================= Overrident les --density-* du :root. Application via class sur . */ .density-compact { --density-pad: 8px; --density-row: 30px; --density-fs: 13px; --density-card: 10px 12px; --density-page: 16px 20px; --density-cell: 7px 12px; } .density-cozy { --density-pad: 12px; --density-row: 36px; --density-fs: 14px; --density-card: 14px 16px; --density-page: 22px 26px; --density-cell: 10px 14px; } .density-spacious { --density-pad: 18px; --density-row: 44px; --density-fs: 15px; --density-card: 18px 22px; --density-page: 28px 36px; --density-cell: 14px 18px; } /* ============== Base body ================================================= Applique font + bg + text de base via les tokens. Cette regle est defensive: tout l'existant continue de fonctionner, mais les nouveaux composants utiliseront directement les tokens. */ body { background: var(--bg); color: var(--text); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* ============== Tweaks panel (Apparence) ================================== */ /* Bouton flottant en bas-droite pour ouvrir le panel. z-index suffisamment haut pour passer au-dessus des modals existants (qui sont typiquement a 1000-2000). */ .tweaks-trigger { position: fixed; bottom: 20px; right: 20px; width: 44px; height: 44px; border-radius: 50%; background: var(--surface); border: 1px solid var(--border); color: var(--text-2); box-shadow: var(--shadow-2); display: grid; place-items: center; cursor: pointer; z-index: 100; transition: transform .14s ease, background .14s ease, box-shadow .14s ease; } .tweaks-trigger:hover { background: var(--surface-3); color: var(--text); transform: rotate(-12deg); box-shadow: var(--shadow-3); } /* Panel lateral droit (drawer slide-in). */ .tweaks-panel { position: fixed; top: 0; right: 0; bottom: 0; width: 320px; max-width: 100vw; background: var(--surface); border-left: 1px solid var(--border); box-shadow: var(--shadow-3); z-index: 110; display: flex; flex-direction: column; transform: translateX(100%); transition: transform .22s cubic-bezier(.4,0,.2,1); } .tweaks-panel.is-open { transform: translateX(0); } .tweaks-panel[hidden] { display: flex; } /* on garde le node pour l'animation */ .tweaks-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--border-soft); } .tweaks-head h2 { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; color: var(--text); flex: 1; } .tweaks-close { width: 28px; height: 28px; border-radius: 6px; border: 1px solid var(--border); background: var(--surface); color: var(--text-3); display: grid; place-items: center; cursor: pointer; } .tweaks-close:hover { background: var(--surface-3); color: var(--text); } .tweaks-section { padding: 16px 18px 12px 18px; border-bottom: 1px solid var(--border-soft); } .tweaks-section h3 { margin: 0 0 10px 0; font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-muted); font-weight: 600; } /* Boutons segmentes (theme, densite). Inspires des "segmented controls" iOS. */ .tweaks-segmented { display: flex; gap: 4px; padding: 3px; background: var(--surface-3); border-radius: 8px; } .tweaks-segmented button { flex: 1; padding: 6px 10px; font-size: 13px; font-weight: 600; border: none; background: transparent; color: var(--text-3); border-radius: 6px; cursor: pointer; transition: background .12s, color .12s, box-shadow .12s; } .tweaks-segmented button.is-active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-1); } .tweaks-segmented button:hover:not(.is-active) { color: var(--text); } /* Pastilles couleur (accent). */ .tweaks-swatches { display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; } .tweaks-swatches button { aspect-ratio: 1; border-radius: 8px; border: 2px solid transparent; cursor: pointer; position: relative; transition: transform .12s ease, border-color .12s; } .tweaks-swatches button:hover { transform: scale(1.06); } .tweaks-swatches button.is-active { border-color: var(--text); } .tweaks-swatches button.is-active::after { content: ""; position: absolute; inset: 6px; border: 2px solid white; border-radius: 4px; pointer-events: none; } .tweaks-foot { padding: 14px 18px; border-top: 1px solid var(--border-soft); display: flex; justify-content: flex-end; gap: 8px; margin-top: auto; }