/* ============================================================ DeskNova — Système de styles (tokens + composants) Feuille autonome, indépendante de la mise en page. À importer dans n'importe quelle appli, puis appliquer les classes / variables. Recrée le LOOK, pas un écran précis. ============================================================ */ /* Polices : ajouter dans le */ :root { /* — Couleurs : marque — */ --dn-primary: #4f46e5; --dn-primary-hover: #4338ca; --dn-primary-tint: #eef0fe; /* fonds indigo clairs (sélection, nav active) */ /* — Couleurs : texte — */ --dn-ink: #101323; /* texte principal / titres */ --dn-text: #475467; --dn-text-soft: #667085; --dn-text-muted: #98a2b3; --dn-disabled: #cdd2db; --dn-disabled-2: #d0d5dd; /* — Couleurs : surfaces & bordures — */ --dn-bg: #f4f5f8; /* fond d'application */ --dn-surface: #ffffff; /* cartes, panneaux */ --dn-soft: #f6f7f9; /* hover doux */ --dn-soft-2: #f8f9fb; /* blocs internes */ --dn-soft-3: #f1f2f6; /* chips */ --dn-border: #ebedf1; /* bordure cartes */ --dn-border-2: #e4e7ec; /* bordure éléments (postes) */ --dn-border-3: #e6e8ec; /* bordure champs */ /* — Couleurs : sémantique — */ --dn-success: #12b76a; --dn-success-tint: #e7f8ee; --dn-confirm-a: #0fa15c; /* dégradé carte confirmée */ --dn-confirm-b: #0c8a4f; --dn-warning: #f5a623; /* télétravail */ --dn-danger: #f0436c; /* badge notif */ /* — Typographie — */ --dn-font-ui: 'Manrope', system-ui, sans-serif; --dn-font-display: 'Space Grotesk', sans-serif; /* — Rayons — */ --dn-r-pill: 20px; --dn-r-lg: 18px; /* grande carte */ --dn-r-md: 16px; /* cartes */ --dn-r-sm: 13px; /* boutons jour, badges sidebar */ --dn-r-xs: 11px; /* postes, boutons */ --dn-r-2xs: 10px; /* nav, champs */ /* — Ombres — */ --dn-shadow-tile: 0 1px 2px rgba(16,24,40,.05); --dn-shadow-tile-hover: 0 7px 16px rgba(16,24,40,.13); --dn-shadow-primary: 0 4px 12px rgba(79,70,229,.30); --dn-shadow-card: 0 8px 24px rgba(16,24,40,.06); --dn-shadow-confirm: 0 10px 26px rgba(15,161,92,.28); /* — Transition standard — */ --dn-transition: transform .12s ease, box-shadow .12s ease, background .12s ease; } /* ===== Base ===== */ .dn-root { font-family: var(--dn-font-ui); color: var(--dn-ink); background: var(--dn-bg); } .dn-display { font-family: var(--dn-font-display); letter-spacing: -.4px; } /* ===== Surfaces ===== */ .dn-card { background: var(--dn-surface); border: 1px solid var(--dn-border); border-radius: var(--dn-r-md); padding: 20px; } .dn-card--lg { border-radius: var(--dn-r-lg); padding: 24px; } .dn-card--float { box-shadow: var(--dn-shadow-card); } /* ===== Boutons ===== */ .dn-btn { font-family: var(--dn-font-ui); font-weight: 700; font-size: 13.5px; height: 40px; padding: 0 18px; border: none; border-radius: var(--dn-r-2xs); cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: var(--dn-transition); } .dn-btn--primary { background: var(--dn-primary); color: #fff; box-shadow: var(--dn-shadow-primary); } .dn-btn--primary:hover { background: var(--dn-primary-hover); } .dn-btn--lg { height: 46px; width: 100%; justify-content: center; border-radius: var(--dn-r-xs); font-size: 14.5px; } .dn-btn--ghost { background: transparent; color: var(--dn-text-muted); font-weight: 600; box-shadow: none; } .dn-btn--ghost:hover { color: var(--dn-text); } .dn-btn--outline-light { background: transparent; border: 1px solid rgba(255,255,255,.33); color: #fff; } .dn-btn--outline-light:hover { background: rgba(255,255,255,.12); } .dn-btn--icon { width: 40px; height: 40px; padding: 0; justify-content: center; background: var(--dn-surface); border: 1px solid var(--dn-border-3); } .dn-btn--icon:hover { background: var(--dn-soft); } /* ===== Champ / pilule d'info ===== */ .dn-pill { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border: 1px solid var(--dn-border-3); border-radius: var(--dn-r-2xs); font-size: 13.5px; font-weight: 600; color: var(--dn-text); } /* ===== Navigation latérale ===== */ .dn-nav-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--dn-r-2xs); color: var(--dn-text-soft); font-weight: 600; font-size: 14px; cursor: pointer; transition: var(--dn-transition); } .dn-nav-item:hover { background: var(--dn-soft); color: var(--dn-ink); } .dn-nav-item.is-active { background: var(--dn-primary-tint); color: var(--dn-primary); font-weight: 700; } /* ===== Sélecteur de jour ===== */ .dn-day { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 12px 0; border-radius: var(--dn-r-sm); background: var(--dn-surface); border: 1px solid var(--dn-border); color: var(--dn-ink); cursor: pointer; transition: var(--dn-transition); } .dn-day:hover { background: var(--dn-soft); } .dn-day .dn-day__name { font-size: 11.5px; font-weight: 600; opacity: .7; } .dn-day .dn-day__num { font-family: var(--dn-font-display); font-weight: 700; font-size: 18px; line-height: 1; } .dn-day.is-weekend { color: var(--dn-disabled); } .dn-day.is-selected { background: var(--dn-primary); color: #fff; border-color: var(--dn-primary); box-shadow: 0 5px 14px rgba(79,70,229,.28); } /* ===== KPI ===== */ .dn-kpi__label { font-size: 12px; font-weight: 700; color: var(--dn-text-muted); text-transform: uppercase; letter-spacing: .6px; } .dn-kpi__value { font-family: var(--dn-font-display); font-weight: 700; font-size: 30px; margin-top: 9px; } .dn-kpi__value--success { color: var(--dn-success); } .dn-kpi__value--primary { color: var(--dn-primary); } /* ===== Poste / tuile (états) ===== */ .dn-desk { position: relative; display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; padding: 0; border-radius: var(--dn-r-xs); font-family: var(--dn-font-ui); font-size: 12.5px; font-weight: 600; letter-spacing: .2px; box-sizing: border-box; transition: var(--dn-transition); } .dn-desk--compact { width: 38px; height: 38px; } .dn-desk__dot { position: absolute; top: 6px; right: 6px; width: 6px; height: 6px; border-radius: 50%; } .dn-desk--free { background: var(--dn-surface); border: 1px solid var(--dn-border-2); color: var(--dn-text); cursor: pointer; box-shadow: var(--dn-shadow-tile); } .dn-desk--free:hover { transform: translateY(-2px); box-shadow: var(--dn-shadow-tile-hover); } .dn-desk--free .dn-desk__dot { background: var(--dn-success); } .dn-desk--busy { background: var(--dn-soft-3); border: 1px solid var(--dn-soft-3); color: var(--dn-text-muted); cursor: default; font-size: 11px; } .dn-desk--off { background: #fbfcfd; border: 1px dashed var(--dn-border-2); color: var(--dn-disabled-2); cursor: not-allowed; } .dn-desk--selected { background: var(--dn-primary-tint); border: 1.5px solid var(--dn-primary); color: var(--dn-primary); cursor: pointer; box-shadow: 0 4px 11px rgba(79,70,229,.18); } .dn-desk--selected:hover { transform: translateY(-2px); } .dn-desk--selected .dn-desk__dot { background: var(--dn-primary); } .dn-desk--mine { background: var(--dn-primary); border: 1px solid var(--dn-primary); color: #fff; cursor: pointer; font-size: 17px; box-shadow: 0 4px 11px rgba(79,70,229,.35); } .dn-desk--mine:hover { transform: translateY(-2px); } /* ===== Badges & chips ===== */ .dn-badge { font-size: 11.5px; font-weight: 600; padding: 2px 9px; border-radius: var(--dn-r-pill); color: var(--dn-success); background: var(--dn-success-tint); } .dn-chip { font-size: 11.5px; font-weight: 600; padding: 5px 11px; border-radius: var(--dn-r-pill); color: var(--dn-text); background: var(--dn-soft-3); } /* ===== Avatar + pastille de statut ===== */ .dn-avatar { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #fff; font-weight: 700; font-size: 12.5px; } .dn-status-dot { position: absolute; bottom: 0; right: 0; width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--dn-surface); } .dn-status-dot--in { background: var(--dn-success); } /* au bureau */ .dn-status-dot--remote { background: var(--dn-warning); } /* télétravail */ .dn-status-dot--out { background: var(--dn-disabled-2); }/* absent */ /* ===== Carte de confirmation (succès) ===== */ .dn-confirm-card { border-radius: var(--dn-r-md); padding: 22px; color: #fff; background: linear-gradient(160deg, var(--dn-confirm-a), var(--dn-confirm-b)); box-shadow: var(--dn-shadow-confirm); } /* ===== Carte vide / invite ===== */ .dn-empty { background: var(--dn-surface); border: 1.5px dashed #d8dbe2; border-radius: var(--dn-r-md); padding: 26px 22px; text-align: center; } /* ===== Barre de progression ===== */ .dn-progress { height: 7px; border-radius: 6px; background: #e2e3f6; overflow: hidden; } .dn-progress__bar { height: 100%; background: var(--dn-primary); border-radius: 6px; } /* ===== Logo (carré + étoile) ===== */ .dn-logo { width: 34px; height: 34px; border-radius: var(--dn-r-2xs); background: var(--dn-primary); display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(79,70,229,.32); } .dn-logo__spark { width: 16px; height: 16px; background: #fff; display: block; clip-path: polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%); } .dn-wordmark { font-family: var(--dn-font-display); font-weight: 700; font-size: 19px; letter-spacing: -.4px; } .dn-wordmark em { font-style: normal; color: var(--dn-primary); }