/* ============================================================================= FINACTU — Surcharges de marque sur le thème Velzon 4.4.4 ----------------------------------------------------------------------------- Ce fichier surcharge la couleur « primary » de Velzon (bleu #405189 d'origine) par le rouge brique de la marque, et adapte quelques composants. Il fonctionne en mode CLAIR et SOMBRE (attribut data-bs-theme sur ). Palette de marque : - Rouge brique (primary) ....... #C1272D - Bordeaux / marron profond .... #9E1B32 - Corail / terracotta .......... #E8886A - Rose saumon clair ............ #EFC3B4 - Dégradé wordmark FINACTU ..... #D2432B -> #C1272D NB : ce fichier est dans public/assets/ (non versionné par git, cf. docs/velzon-dependencies.md). Le conserver lors de la ré-installation des assets Velzon sur un nouvel environnement. ============================================================================= */ :root { /* --- Jetons de marque réutilisables (accessibles partout) --- */ --finactu-primary: #C1272D; --finactu-bordeaux: #9E1B32; --finactu-corail: #E8886A; --finactu-saumon: #EFC3B4; --finactu-grad-from: #D2432B; --finactu-grad-to: #C1272D; /* --- Surcharge du « primary » Velzon (jetons partagés Bootstrap/Velzon) --- .bg-primary, .text-primary, .badge.bg-primary, .link-primary, .btn-soft-primary… consomment tous var(--vz-primary-rgb) : les recolorer ici suffit. */ --vz-primary: #C1272D; --vz-primary-rgb: 193, 39, 45; --vz-primary-text-emphasis: #9E1B32; --vz-primary-bg-subtle: #f9e7e7; --vz-primary-border-subtle: #eec3c4; /* Liens */ --vz-link-color: #C1272D; --vz-link-color-rgb: 193, 39, 45; --vz-link-hover-color: #9E1B32; --vz-link-hover-color-rgb: 158, 27, 50; /* Sidebar (menu vertical) — item actif / survol en rouge brique */ --vz-vertical-menu-item-active-color: #C1272D; --vz-vertical-menu-item-active-bg: rgba(193, 39, 45, .10); --vz-vertical-menu-item-hover-color: #C1272D; --vz-vertical-menu-sub-item-active-color: #C1272D; --vz-vertical-menu-sub-item-hover-color: #C1272D; } /* Mode sombre : on éclaircit le rouge pour garder le contraste + on réajuste les jetons « subtle » (fonds/bordures translucides). */ [data-bs-theme="dark"] { --vz-primary-text-emphasis: #e88f92; --vz-primary-bg-subtle: rgba(193, 39, 45, .16); --vz-primary-border-subtle: #6d2327; } /* Mode sombre + sidebar « light » : Velzon garde alors la sidebar BLANCHE (rendu incohérent). On la bascule sur la palette sombre native du thème ([data-sidebar=dark] : fond #212529), avec l'accent rouge éclairci. */ [data-bs-theme="dark"][data-sidebar="light"] { --vz-vertical-menu-bg: #212529; --vz-vertical-menu-border: #212529; --vz-vertical-menu-item-color: #7c7f90; --vz-vertical-menu-item-hover-color: #ff8a8e; --vz-vertical-menu-item-active-color: #ff8a8e; --vz-vertical-menu-item-active-bg: rgba(193, 39, 45, .18); --vz-vertical-menu-sub-item-color: #7c7f90; --vz-vertical-menu-sub-item-hover-color: #ff8a8e; --vz-vertical-menu-sub-item-active-color: #ff8a8e; --vz-vertical-menu-title-color: #5f6270; } /* ----------------------------------------------------------------------------- Boutons « primary » : Bootstrap 5.3 compile la couleur EN DUR dans .btn-primary (contrairement aux utilitaires qui utilisent des variables), il faut donc surcharger explicitement les jetons du bouton. ----------------------------------------------------------------------------- */ .btn-primary { --vz-btn-bg: #C1272D; --vz-btn-border-color: #C1272D; --vz-btn-hover-bg: #9E1B32; --vz-btn-hover-border-color: #9E1B32; --vz-btn-active-bg: #9E1B32; --vz-btn-active-border-color: #8a1730; --vz-btn-focus-shadow-rgb: 193, 39, 45; --vz-btn-disabled-bg: #C1272D; --vz-btn-disabled-border-color: #C1272D; } .btn-outline-primary { --vz-btn-color: #C1272D; --vz-btn-border-color: #C1272D; --vz-btn-hover-bg: #C1272D; --vz-btn-hover-border-color: #C1272D; --vz-btn-active-bg: #C1272D; --vz-btn-active-border-color:#C1272D; --vz-btn-focus-shadow-rgb: 193, 39, 45; } /* Boutons corail (accent secondaire de la marque, optionnel) */ .btn-corail { --vz-btn-color: #fff; --vz-btn-bg: #E8886A; --vz-btn-border-color: #E8886A; --vz-btn-hover-color: #fff; --vz-btn-hover-bg: #d9755a; --vz-btn-hover-border-color: #d9755a; --vz-btn-active-bg: #d9755a; --vz-btn-focus-shadow-rgb: 232, 136, 106; color: #fff; } /* ----------------------------------------------------------------------------- CORRECTIF Velzon : le bootstrap.min.css livré contient une règle empoisonnée « [type=email],[type=number],[type=tel],[type=url]{direction:rtl} » (artefact d'un outil de conversion RTL) → la saisie partait de droite à gauche dans ces champs. On rétablit le sens normal (ce fichier est chargé APRÈS bootstrap.min.css, même sélecteur → cette règle gagne). ----------------------------------------------------------------------------- */ [type=email], [type=number], [type=tel], [type=url] { direction: ltr; } /* ----------------------------------------------------------------------------- Contrôles de formulaire : focus + cases/switchs cochés en rouge brique ----------------------------------------------------------------------------- */ .form-check-input:checked { background-color: var(--vz-primary); border-color: var(--vz-primary); } .form-check-input:focus { border-color: #e19a9d; box-shadow: 0 0 0 .2rem rgba(193, 39, 45, .20); } .form-control:focus, .form-select:focus { border-color: #e19a9d; box-shadow: 0 0 0 .2rem rgba(193, 39, 45, .15); } /* Onglets / pills actifs */ .nav-pills .nav-link.active, .nav-pills .show > .nav-link { background-color: var(--vz-primary); } /* ----------------------------------------------------------------------------- Wordmark FINACTU en dégradé (utilisable sur le login, titres…) ----------------------------------------------------------------------------- */ .finactu-wordmark { background: linear-gradient(90deg, var(--finactu-grad-from), var(--finactu-grad-to)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--finactu-primary); /* repli si background-clip non supporté */ font-weight: 700; letter-spacing: .5px; } /* ----------------------------------------------------------------------------- Logo dans la sidebar / topbar Le PNG Finactu est transparent : pas de fond forcé, le logo suit la couleur de la sidebar (claire en mode clair, sombre en mode sombre). ----------------------------------------------------------------------------- */ .navbar-brand-box .logo img { display: inline-block; } /* Logo complet (sidebar déployée / topbar) */ .navbar-brand-box .logo-lg img { height: 26px; width: auto; } /* Icône seule (sidebar réduite, largeur ~70px) : on rogne le wordmark pour ne garder que la mosaïque de gauche. */ .navbar-brand-box .logo-sm img { height: 30px; width: 34px; object-fit: cover; object-position: left center; } /* ----------------------------------------------------------------------------- Petites finitions cohérentes avec un ERP « corporate finance » ----------------------------------------------------------------------------- */ .card { border: 1px solid var(--vz-border-color, #e9ebec); box-shadow: 0 1px 2px rgba(56, 65, 74, .06); } /* En-tête de tableau : léger fond neutre + libellés discrets */ .table > thead th { text-transform: uppercase; font-size: .72rem; letter-spacing: .4px; color: var(--vz-secondary-color, #878a99); font-weight: 600; } /* Avatar « initiales » (topbar, fiches) aux couleurs marque */ .avatar-initials { background-color: var(--vz-primary-bg-subtle); color: var(--vz-primary); font-weight: 600; } /* Choices.js : élément sélectionné / surligné en rouge brique */ .choices__list--dropdown .choices__item--selectable.is-highlighted, .choices__list[aria-expanded] .choices__item--selectable.is-highlighted { background-color: var(--vz-primary-bg-subtle); color: var(--vz-primary); } .choices__inner:focus-within { border-color: #e19a9d; } /* Utilitaires d'accent marque */ .text-brand { color: var(--finactu-primary) !important; } .bg-brand { background-color: var(--finactu-primary) !important; } .bg-brand-gradient { background: linear-gradient(90deg, var(--finactu-grad-from), var(--finactu-grad-to)) !important; } /* ----------------------------------------------------------------------------- Pages d'authentification (login / mot de passe oublié / réinitialisation) Fond Velzon « auth-one » recoloré au dégradé de marque. ----------------------------------------------------------------------------- */ .auth-one-bg { background: linear-gradient(135deg, var(--finactu-grad-from), var(--finactu-bordeaux)); } .auth-one-bg .bg-overlay { background: linear-gradient(to right, var(--finactu-grad-to), var(--finactu-bordeaux)); opacity: .85; } /* ----------------------------------------------------------------------------- List.js — pagination : page active aux couleurs marque (Velzon code #405189 en dur) ----------------------------------------------------------------------------- */ .listjs-pagination li.active .page { background-color: var(--vz-primary); border-color: var(--vz-primary); color: #fff; } .listjs-pagination li .page:hover { color: var(--vz-primary); } /* Ligne « aucun résultat » des tableaux filtrables */ .noresult { display: none; }