/* Mini-chart strokes look better in white on solid cards */ .nk-cmwg1-ck canvas, .nk-cmwg .nk-cmwg1-ck canvas{ mix-blend-mode: normal; } /* keep default look */ :root{ --sd-accent: #9C73F5; --sd-ink: #2A6478; --sd-muted: #717171; /* Indigo (light → vivid) */ --sd-i1: #9C73F5; /* base */ --sd-i2: #8B7FF6; --sd-i3: #7A8FF8; --sd-i4: #6A9EFA; --sd-i5: #5EA3FC; /* bright blue that still fits */ /* Ink blues (deep → soft) */ --sd-b1: #2C3E50; /* base */ --sd-b2: #6A9EFA; --sd-b3: #9C73F5; --sd-b4: #CF6532; --sd-b5: #6E8FA9; /* Neutrals */ --sd-g1: #717171; --sd-g2: #8A8A8A; --sd-g3: #A3A3A3; --sd-g4: #C7C7C7; --sd-g5: #E5E5E5; } /* Use accent tint for small “dim” badges/icons */ .card .icon.icon-circle[class*="-dim"]{ background-color: rgba(156,115,245,.12) !important; /* #9C73F5 @ 12% */ color: var(--sd-i1) !important; } /* FullCalendar “today” tint to brand (if you use it) */ .fc .fc-daygrid-day.fc-day-today{ background-color: rgba(156,115,245,.08) !important; /* #9C73F5 @ 8% */ } /* Progress bars that used BS context colors → follow brand */ .progress .bg-primary, .progress .bg-info, .progress .bg-warning, .progress .bg-danger { background-color: var(--sd-i1) !important; } /* 0) Fonts Urbanist – fichiers placés dans /font (et ./font pour sous-dossiers) */ @font-face{ font-family: "Urbanist"; src: url("./font/Urbanist-Regular.ttf") format("truetype"), url("/font/Urbanist-Regular.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face{ font-family: "Urbanist"; src: url("./font/Urbanist-SemiBold.ttf") format("truetype"), url("/font/Urbanist-SemiBold.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; } /* ================================================================ Variables / Thème ================================================================ */ :root{ /* ---------- 1. Palette « brand » Bootstrap ------------------- */ /* (toutes les classes bg-primary / bg-info / bg-warning / bg-danger, ainsi que les graphes DashLite qui réutilisent ces variables) */ --bs-primary: #323C5B; /* indigo foncé */ --bs-primary-rgb: 50, 60, 91; --bs-info: #2746B0; /* bleu roi */ --bs-info-rgb: 39, 70, 176; --bs-warning: #5F27B0; /* violet */ --bs-warning-rgb: 95, 39, 176; --bs-danger: #B0274D; /* framboise */ --bs-danger-rgb: 176, 39, 77; /* ---------- 2. Palette « Services » --------------------------- */ --svc-psy: #2A6478; /* Assistance psy */ --svc-bien: #6A9EFA; /* Bien-être & relaxation */ --svc-coach: #9C73F5; /* Coaching & vidéos */ --svc-quiz: #CF6532; /* Gamification / quiz */ /* ---------- 3. Typo & couleurs globales ---------------------- */ --sd-font-sans: "Urbanist", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", "Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji"; --sd-text: #717171; /* texte courant (par défaut) */ --sd-title: #2C3E50; /* titres / éléments importants */ /* Alimente Bootstrap/DashLite partout */ --bs-font-sans-serif: var(--sd-font-sans); --bs-body-font-family: var(--sd-font-sans); --bs-body-color: var(--sd-text); --bs-heading-color: var(--sd-title); /* ---------- 4. Fond de page (LIGHT par défaut) ---------------- */ /* Bootstrap 5 lit --bs-body-bg pour peindre et utilitaires */ --bs-body-bg: #F8EEE5; /* couleur claire */ --bs-body-bg-rgb: 248,238,229; /* RGB cohérent */ /* BS utilitaire – garde les opacités gérées par Bootstrap */ --bs-bg-opacity: 1; /* ---------- 5. Sidebar états (LIGHT) -------------------------- */ /* Sélectionné = #CF6532, Non sélectionné = #717171 */ --sidebar-active-color: #CF6532; /* texte + icône sélectionnés */ --sidebar-active-rgb: 207,101,50; --sidebar-active-bg: rgba(var(--sidebar-active-rgb), .16); --sidebar-hover-bg: rgba(var(--sidebar-active-rgb), .08); } /* Support explicite si un attribut de thème est utilisé ailleurs */ [data-bs-theme="light"]{ --bs-body-bg: #F8EEE5; --bs-body-bg-rgb: 248,238,229; --bs-body-color: var(--sd-text); --bs-heading-color: var(--sd-title); } /* Variante sombre à base de variables (si vous passez en data-bs-theme="dark") */ [data-bs-theme="dark"]{ --bs-body-bg: #0B1220; --bs-body-bg-rgb: 11,18,32; } /* ---------- Application du fond + surfaces claires -------------- */ body{ background-color: var(--bs-body-bg); font-family: var(--bs-body-font-family); color: var(--bs-body-color); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Titres et classes DashLite de titres → SemiBold + couleur titre */ h1,h2,h3,h4,h5,h6, .h1,.h2,.h3,.h4,.h5,.h6, .title,.nk-block-title,.page-title, .card-title .title, .overline-title,.overline-title-alt, .lead-text,.lead-text-lg,.tb-lead, .nk-file-name .title,.nk-file-name-text .title, .project-title .title,.kanban-item-title .title{ font-family: var(--sd-font-sans) !important; font-weight: 600 !important; color: var(--sd-title) !important; } /* Texte secondaire / descriptions → couleur body + Regular */ .card-title p, .small, small, .sub-text, .sub-text-sm, .nk-block-des, .progress-text, .project-progress-task, .team-info li span:first-child, .nk-ibx-menu-text, .nk-fmg-menu-text, .caption-text, .text-muted, .text-soft, .text-primary-alt{ color: var(--sd-text) !important; font-family: var(--sd-font-sans) !important; font-weight: 400 !important; } /* Liens suivent la couleur du conteneur (pas de bleu par défaut) */ a, a:hover, a:focus { color: inherit; } /* Teinte identique pour l’entête et la barre latérale en mode « light » */ .nk-header.is-light, .nk-sidebar.is-light{ background-color: var(--bs-body-bg) !important; } /* ---------- Dark switch (fallback DashLite: body.dark-mode) ----- */ body.dark-mode{ background-color: #0B1220 !important; } body.dark-mode .nk-header, body.dark-mode .nk-sidebar{ background-color: #0B1220 !important; } /* (Optionnel) Cartes plus sombres en dark : body.dark-mode .card{ background-color:#111827 !important; color:#cbd5e1 !important; } */ /* ================================================================ Sidebar (LIGHT only) – typographie + couleurs ================================================================ */ /* Titre de section du menu (ex: “TABLEAU DE BORD”) */ .nk-menu-heading .overline-title{ font-family: var(--sd-font-sans) !important; font-weight: 600 !important; color: var(--sd-title) !important; /* #2C3E50 */ } /* Liens NON sélectionnés : texte + icône en #717171 */ .nk-sidebar.is-light .nk-menu > li > .nk-menu-link, .nk-sidebar.is-light .nk-menu-sub .nk-menu-link, .nk-sidebar.is-light .nk-menu-text{ font-family: var(--sd-font-sans) !important; font-weight: 600 !important; /* labels semi-bold */ color: var(--sd-text) !important; /* #717171 */ } .nk-sidebar.is-light .nk-menu > li > .nk-menu-link .nk-menu-icon, .nk-sidebar.is-light .nk-menu > li > .nk-menu-link .nk-menu-icon .icon, .nk-sidebar.is-light .nk-menu-sub .nk-menu-link .nk-menu-icon, .nk-sidebar.is-light .nk-menu-sub .nk-menu-link .nk-menu-icon .icon{ color: var(--sd-text) !important; /* #717171 */ } /* Chevron/caret des items de menu hérite la même couleur */ .nk-sidebar.is-light .nk-menu > li > .nk-menu-link::after{ color: inherit !important; border-color: currentColor !important; } /* Item SÉLECTIONNÉ : texte + icône = #CF6532 + fond doux */ .nk-sidebar.is-light .nk-menu > li.active > .nk-menu-link, .nk-sidebar.is-light .nk-menu > li.current-menu > .nk-menu-link{ background-color: var(--sidebar-active-bg) !important; color: var(--sidebar-active-color) !important; } .nk-sidebar.is-light .nk-menu > li.active > .nk-menu-link .nk-menu-icon, .nk-sidebar.is-light .nk-menu > li.active > .nk-menu-link .nk-menu-icon .icon, .nk-sidebar.is-light .nk-menu > li.current-menu > .nk-menu-link .nk-menu-icon, .nk-sidebar.is-light .nk-menu > li.current-menu > .nk-menu-link .nk-menu-icon .icon{ color: var(--sidebar-active-color) !important; } .nk-sidebar.is-light .nk-menu > li.active > .nk-menu-link::after, .nk-sidebar.is-light .nk-menu > li.current-menu > .nk-menu-link::after{ color: var(--sidebar-active-color) !important; border-color: var(--sidebar-active-color) !important; } /* Hover : garder le texte/icône en #717171, seulement un petit fond */ .nk-sidebar.is-light .nk-menu > li > .nk-menu-link:hover{ background-color: var(--sidebar-hover-bg) !important; color: var(--sd-text) !important; } .nk-sidebar.is-light .nk-menu > li > .nk-menu-link:hover .nk-menu-icon, .nk-sidebar.is-light .nk-menu > li > .nk-menu-link:hover .nk-menu-icon .icon{ color: var(--sd-text) !important; } /* ================================================================ Lisibilité du texte sur les cartes colorées ================================================================ */ .bg-primary, .bg-info, .bg-warning, .bg-danger{ color:#fff !important; } .border-total { border: 1px solid #6b5b95; /* tweak to your palette */ } /* ================================================================ Helpers génériques (inchangés) ================================================================ */ .analytic-ov-data .title{min-height:2.5rem;display:block;line-height:1.25rem;} @media (min-width:992px){ .full-lg-12{flex:0 0 100%;max-width:100%;} } /* ... (section 2 et 3 déjà correcte, non reproduite ici) ... */ /* ================================================================ 4. Carte “Temps moyen passé” ================================================================ */ .svc-stat{ border:2px solid; border-radius:12px; padding:1rem 1.25rem; text-align:left; line-height:1.25; } .svc-stat .amount{font-weight:600;font-size:1.25rem;margin-bottom:.125rem;} .svc-stat .title {font-size:.875rem;color: var(--sd-text);} /* (était #6b7a99) */ /* Hauteurs pour le graphique, responsive… (identique) */ /* ---------- 4-B. Couleurs des tuiles (nouveau) -------------- */ .border-psy { border-color: var(--svc-psy) !important; } .border-bien { border-color: var(--svc-bien) !important; } .border-coach { border-color: var(--svc-coach) !important; } .border-quiz { border-color: var(--svc-quiz) !important; } /* --------------------------------------------------------------- RÉPARTITION PAR TYPE DE SERVICE --------------------------------------------------------------- */ #serviceSplitCard .analytic-wp-data{ display:flex; align-items:center; min-height:4.5rem; /* ~2× original */ margin-bottom:.75rem; /* espace respire */ } /* partie gauche : mini line-chart */ #serviceSplitCard .analytic-wp-graph{ flex:1 1 auto; margin-right:1rem; } #serviceSplitCard .analytic-wp-ck canvas{ width:100% !important; height:48px !important; } /* partie droite : valeur + sous-titre */ #serviceSplitCard .analytic-wp-text{ flex:0 0 90px; text-align:right; } #serviceSplitCard .amount{ font-size:1.25rem; font-weight:600; } #serviceSplitCard .subtitle{ font-size:.8125rem; color: var(--sd-text); } .fw-table .nk-tb-col:first-child{ /* la colonne “Utilisateur” prend toute la largeur dispo */ flex: 1 1 0; } .fw-table .nk-tb-col:nth-child(2), .fw-table .nk-tb-col:nth-child(3){ /* Verified + Statut : largeur fixe à droite */ flex: 0 0 130px; text-align: right; } /* optionnel – centre le petit ✓ */ .fw-table .nk-tb-col:nth-child(2){ text-align:center; } /* -------------------------------------------------------------- (Le JS du graphe reste dans /assets/js/charts/gd-time.js) -------------------------------------------------------------- */ @media (min-width: 992px){ .svc-time-card .nk-order-ovwg .row{ align-items: stretch !important; } .svc-time-card .nk-order-ovwg-ck, .svc-time-card .nk-order-ovwg-ck canvas{ height: 100% !important; } } @media (min-width: 992px){ .svc-time-card .nk-order-ovwg .row{ align-items: stretch !important; } .svc-time-card .nk-order-ovwg-ck, .svc-time-card .nk-order-ovwg-ck canvas{ height: 100% !important; } } /* ================================================================ Sidebar (LIGHT) – selected = #CF6532, others = #717171 (FINAL override – paste at the very end of custom-brand.css) ================================================================ */ /* 1) Brand for the active item */ :root{ --sidebar-active-color: #CF6532; /* selected text & icon */ --sidebar-active-rgb: 207,101,50; /* rgb of #CF6532 */ --sidebar-active-bg: rgba(var(--sidebar-active-rgb), .16); --sidebar-hover-bg: rgba(var(--sidebar-active-rgb), .08); } /* 2) Default (non-selected) items: label + icon use #717171 */ .nk-sidebar.is-light .nk-menu > li > .nk-menu-link, .nk-sidebar.is-light .nk-menu-sub .nk-menu-link{ color: var(--sd-text) !important; /* #717171 */ font-weight: 600; /* keep your semibold labels */ } .nk-sidebar.is-light .nk-menu-text{ color: var(--sd-text) !important; /* #717171 */ font-weight: 600 !important; } .nk-sidebar.is-light .nk-menu > li > .nk-menu-link .nk-menu-icon, .nk-sidebar.is-light .nk-menu > li > .nk-menu-link .nk-menu-icon .icon, .nk-sidebar.is-light .nk-menu-sub .nk-menu-link .nk-menu-icon, .nk-sidebar.is-light .nk-menu-sub .nk-menu-link .nk-menu-icon .icon{ color: var(--sd-text) !important; /* #717171 */ } /* Ensure the chevron/caret (pseudo-element) inherits the same color */ .nk-sidebar.is-light .nk-menu > li > .nk-menu-link::after{ color: inherit !important; border-color: currentColor !important; /* for border-based carets */ } /* 3) Selected (active/current) item: label + icon = #CF6532, with a soft bg */ .nk-sidebar.is-light .nk-menu > li.active > .nk-menu-link, .nk-sidebar.is-light .nk-menu > li.current-menu > .nk-menu-link, .nk-sidebar.is-light .nk-menu-sub li.active > .nk-menu-link{ background-color: var(--sidebar-active-bg) !important; color: var(--sidebar-active-color) !important; /* affects the */ } /* — ALSO color the inner text span explicitly — */ .nk-sidebar.is-light .nk-menu > li.active > .nk-menu-link .nk-menu-text, .nk-sidebar.is-light .nk-menu > li.current-menu > .nk-menu-link .nk-menu-text, .nk-sidebar.is-light .nk-menu-sub li.active > .nk-menu-link .nk-menu-text{ color: var(--sidebar-active-color) !important; /* #CF6532 */ } /* Icons inside the active item */ .nk-sidebar.is-light .nk-menu > li.active > .nk-menu-link .nk-menu-icon, .nk-sidebar.is-light .nk-menu > li.active > .nk-menu-link .nk-menu-icon .icon, .nk-sidebar.is-light .nk-menu > li.current-menu > .nk-menu-link .nk-menu-icon, .nk-sidebar.is-light .nk-menu > li.current-menu > .nk-menu-link .nk-menu-icon .icon, .nk-sidebar.is-light .nk-menu-sub li.active > .nk-menu-link .nk-menu-icon, .nk-sidebar.is-light .nk-menu-sub li.active > .nk-menu-link .nk-menu-icon .icon{ color: var(--sidebar-active-color) !important; } /* caret on active inherits too */ .nk-sidebar.is-light .nk-menu > li.active > .nk-menu-link::after, .nk-sidebar.is-light .nk-menu > li.current-menu > .nk-menu-link::after, .nk-sidebar.is-light .nk-menu-sub li.active > .nk-menu-link::after{ color: var(--sidebar-active-color) !important; border-color: var(--sidebar-active-color) !important; } /* 4) Hover: keep text/icons grey (#717171), only tint the background */ .nk-sidebar.is-light .nk-menu > li > .nk-menu-link:hover{ background-color: var(--sidebar-hover-bg) !important; color: var(--sd-text) !important; } .nk-sidebar.is-light .nk-menu > li > .nk-menu-link:hover .nk-menu-icon, .nk-sidebar.is-light .nk-menu > li > .nk-menu-link:hover .nk-menu-icon .icon{ color: var(--sd-text) !important; } /* ================================================================ FINAL OVERRIDES — metric-card colors (DashLite 3.3.x) Paste at the very end of custom-brand.css ================================================================ */ /* 1) Brand variables (win by cascade) */ :root{ --bs-primary: #2A6478; --bs-primary-rgb: 44,62,80; --bs-info: #6A9EFA; --bs-info-rgb: 106,158,250; --bs-warning: #9C73F5; --bs-warning-rgb: 156,115,245; --bs-danger: #CF6532; --bs-danger-rgb: 72,102,128; } /* 2) Hard overrides because DashLite compiles .bg-* with fixed hex */ .bg-primary{ background-color:#2A6478 !important; color:#fff !important; } .bg-info { background-color:#6A9EFA !important; color:#fff !important; } .bg-warning{ background-color:#9C73F5 !important; color:#fff !important; } .bg-danger { background-color:#CF6532 !important; color:#fff !important; } /* Dim helpers used by icons/badges on those cards */ .bg-primary-dim{ background-color:rgba(44,62,80,.12) !important; color:#fff; } .bg-info-dim { background-color:rgba(106,158,250,.12) !important; color:#fff; } .bg-warning-dim{ background-color:rgba(156,115,245,.12) !important; color:#fff; } .bg-danger-dim { background-color:rgba(72,102,128,.12) !important; color:#fff; } /* Keep headings/text inside colored cards white */ .card.bg-primary .card-inner h6, .card.bg-info .card-inner h6, .card.bg-warning .card-inner h6, .card.bg-danger .card-inner h6, .card.bg-primary .card-inner, .card.bg-info .card-inner, .card.bg-warning .card-inner, .card.bg-danger .card-inner{ color:#fff !important; } /* ===== Brand orange for avatars & dropdown icons ===== */ :root{ --brand-orange: #CF6532; --brand-orange-rgb: 207,101,50; } /* Topbar avatar (the small circle) + the avatar in the dropdown card */ .nk-header .user-toggle .user-avatar, .dropdown-menu .user-card .user-avatar{ background-color: var(--brand-orange) !important; color: #fff !important; /* icon/initials on the avatar */ border-color: transparent !important; } .nk-header .user-toggle .user-avatar em.icon{ color:#fff !important; } /* Icons in the dropdown list */ .dropdown-menu .link-list em.icon{ color: var(--brand-orange) !important; } .dropdown-menu .link-list a:hover{ background: rgba(var(--brand-orange-rgb), .10) !important; color: var(--brand-orange) !important; } .dropdown-menu .link-list a:hover em.icon{ color:#fff !important; } /* ===== Avatars inside user lists/tables ===== */ /* Your table markup uses:

...

We can re-color those without changing your JS by overriding that class: */ .nk-tb-list .user-avatar.bg-purple, .fw-table .user-avatar.bg-purple{ background-color: var(--brand-orange) !important; color:#fff !important; } /* (Optional) If you prefer a neutral class instead of bg-purple: 1) in JS/HTML change 'bg-purple' -> 'bg-brand' 2) keep this helper: */ .bg-brand{ background-color: var(--brand-orange) !important; color:#fff !important; } /* ========================================================= Final brand tweaks — kill the leftover purple ========================================================= */ :root{ --brand-orange: #CF6532; --brand-orange-rgb: 207,101,50; } /* 1) Pager: active page number (e.g. 1, 2, 3…) */ .pagination .page-item.active .page-link{ background-color: var(--brand-orange) !important; border-color: var(--brand-orange) !important; color: #fff !important; } .pagination .page-link:focus, .pagination .page-link:hover{ border-color: var(--brand-orange) !important; color: var(--brand-orange) !important; } /* 1b) Page-size dropdown (10 / 20 / 50) – “active” item */ #page-size-menu li.active > a{ color: var(--brand-orange) !important; } #page-size-menu li > a::before{ /* the small bullet/check */ border-color: var(--brand-orange) !important; } #page-size-menu li.active > a::before{ background: var(--brand-orange) !important; border-color: var(--brand-orange) !important; } /* 2) The “+” icon button (keep HTML as-is) */ .nk-block-tools-opt .btn.btn-icon.btn-primary{ background-color: var(--brand-orange) !important; border-color: var(--brand-orange) !important; color: #fff !important; } .nk-block-tools-opt .btn.btn-icon.btn-primary em.icon{ color: #fff !important; /* the plus glyph */ } /* 3) “Pending” status in the table → orange, not purple */ .tb-status.text-warning, .text-warning{ color: var(--brand-orange) !important; } /* (optional) if any purple-tinted badges are left */ .badge.badge-primary, .bg-purple, .text-purple{ background-color: var(--brand-orange) !important; color:#fff !important; } /* === Brand buttons → Orange (#CF6532) === */ :root{ --brand-orange: #CF6532; --brand-orange-600: #B6522A; /* hover/active */ } /* Solid primary */ .btn.btn-primary{ background-color: var(--brand-orange) !important; border-color: var(--brand-orange) !important; color:#fff !important; } .btn-primary:hover, .btn-primary:focus, .btn-primary:active, .btn-primary.active, .show>.btn-primary.dropdown-toggle{ background-color: var(--brand-orange-600) !important; border-color: var(--brand-orange-600) !important; color:#fff !important; } .btn-primary:focus{ box-shadow: 0 0 0 .25rem rgba(207,101,50,.25) !important; } .btn-primary:disabled, .btn-primary.disabled{ background-color: var(--brand-orange) !important; border-color: var(--brand-orange) !important; } /* Outline primary */ .btn-outline-primary{ color: var(--brand-orange) !important; border-color: var(--brand-orange) !important; } .btn-outline-primary:hover, .btn-outline-primary:focus, .btn-outline-primary:active, .btn-outline-primary.active, .show>.btn-outline-primary.dropdown-toggle{ background-color: var(--brand-orange) !important; border-color: var(--brand-orange) !important; color:#fff !important; } .btn-outline-primary:focus{ box-shadow: 0 0 0 .25rem rgba(207,101,50,.25) !important; } /* Link-style buttons (if used) */ .btn-link{ color: var(--brand-orange) !important; } .btn-link:hover, .btn-link:focus{ color: var(--brand-orange-600) !important; } /* Switch/toggle to match brand */ .custom-control-input:checked + .custom-control-label::before{ background-color: var(--brand-orange) !important; border-color: var(--brand-orange) !important; } .custom-control-input:focus + .custom-control-label::before{ box-shadow: 0 0 0 .25rem rgba(207,101,50,.25) !important; border-color: var(--brand-orange) !important; }