/* ============================================================ Thème "Bleu" — 4ème thème autonome de l'application. Palette navy/indigo basée sur #3e4587 (brand) et #6b75c9 (primary). Activé par data-bs-theme="blue" sur la balise . ============================================================ */ [data-bs-theme="blue"] { /* === Échelle de gris → palette navy === */ --bs-gray-100: #1a1f3d; --bs-gray-100-rgb: 26, 31, 61; --bs-gray-200: #232a52; --bs-gray-200-rgb: 35, 42, 82; --bs-gray-300: #2d3563; --bs-gray-300-rgb: 45, 53, 99; --bs-gray-400: #3e4587; --bs-gray-400-rgb: 62, 69, 135; --bs-gray-500: #5b639e; --bs-gray-500-rgb: 91, 99, 158; --bs-gray-600: #7a83b8; --bs-gray-600-rgb: 122, 131, 184; --bs-gray-700: #a4adc8; --bs-gray-700-rgb: 164, 173, 200; --bs-gray-800: #d0d7e5; --bs-gray-800-rgb: 208, 215, 229; --bs-gray-900: #ffffff; --bs-gray-900-rgb: 255, 255, 255; /* === Couleurs sémantiques === */ --bs-white: #ffffff; --bs-light: #232a52; --bs-primary: #6b75c9; --bs-success: #50cd89; --bs-info: #7239ea; --bs-warning: #ffc700; --bs-danger: #f1416c; --bs-dark: #ffffff; --bs-secondary: #2d3563; --bs-primary-active: #5862b8; --bs-secondary-active: #3e4587; --bs-light-active: #2d3563; --bs-success-active: #47be7d; --bs-info-active: #5014d0; --bs-warning-active: #f1bc00; --bs-danger-active: #d9214e; --bs-dark-active: white; --bs-primary-light: #232a52; --bs-success-light: #1c3238; --bs-info-light: #2f264f; --bs-warning-light: #392f28; --bs-danger-light: #3a2434; --bs-dark-light: #232a52; --bs-secondary-light: #1a1f3d; --bs-red-light: #3a2424; --bs-primary-inverse: #ffffff; --bs-secondary-inverse: #a4adc8; --bs-light-inverse: #7a83b8; --bs-success-inverse: #ffffff; --bs-info-inverse: #ffffff; --bs-warning-inverse: #ffffff; --bs-danger-inverse: #ffffff; --bs-dark-inverse: #1a1f3d; --bs-white-rgb: 255, 255, 255; --bs-light-rgb: 35, 42, 82; --bs-primary-rgb: 107, 117, 201; --bs-success-rgb: 80, 205, 137; --bs-info-rgb: 114, 57, 234; --bs-warning-rgb: 255, 199, 0; --bs-danger-rgb: 241, 65, 108; --bs-dark-rgb: 255, 255, 255; --bs-secondary-rgb: 45, 53, 99; /* === Textes === */ --bs-text-muted: #5b639e; --bs-text-white: #ffffff; --bs-text-primary: #6b75c9; --bs-text-secondary: #2d3563; --bs-text-light: #232a52; --bs-text-success: #50cd89; --bs-text-info: #7239ea; --bs-text-warning: #ffc700; --bs-text-danger: #f1416c; --bs-text-dark: #ffffff; --bs-text-purple: #812b9e; --bs-text-gold: #EFBF04; --bs-text-blue: #6b75c9; --bs-text-orange: #d1714b; /* Échelle de texte recalibrée pour rester lisible sur body #232a52. Les --bs-text-gray-N sont indépendantes des --bs-gray-N (backgrounds). */ --bs-text-gray-100: #2d3563; --bs-text-gray-200: #3e4587; --bs-text-gray-300: #5b639e; --bs-text-gray-400: #7079bb; --bs-text-gray-500: #8b94ce; --bs-text-gray-600: #a4adc8; --bs-text-gray-700: #c0c7e0; --bs-text-gray-800: #e3e8f0; --bs-text-gray-900: #ffffff; /* === Bordures === */ --bs-border-color: #232a52; --bs-border-dashed-color: #2d3563; /* === Composants génériques === */ --bs-component-active-color: #ffffff; --bs-component-active-bg: #6b75c9; --bs-component-hover-color: #6b75c9; --bs-component-hover-bg: #1a1f3d; --bs-component-checked-color: #ffffff; --bs-component-checked-bg: #6b75c9; /* === Ombres === */ --bs-box-shadow-xs: 0 0.1rem 0.75rem 0.25rem rgba(0, 0, 0, 0.1); --bs-box-shadow-sm: 0 0.1rem 1rem 0.25rem rgba(0, 0, 0, 0.1); --bs-box-shadow: 0 0.5rem 1.5rem 0.5rem rgba(0, 0, 0, 0.15); --bs-box-shadow-lg: 0 1rem 2rem 1rem rgba(0, 0, 0, 0.2); /* === Inputs === */ --bs-input-color: var(--bs-gray-700); --bs-input-bg: var(--bs-body-bg); --bs-input-solid-color: var(--bs-gray-700); --bs-input-solid-bg: var(--bs-gray-100); --bs-input-solid-bg-focus: var(--bs-gray-200); --bs-input-solid-placeholder-color: var(--bs-gray-500); /* === Tooltips, tables, dropdowns === */ --bs-tooltip-box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.25); --bs-card-box-shadow: none; --bs-table-striped-bg: rgba(26, 31, 61, 0.75); --bs-table-loading-message-box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.4); --bs-dropdown-bg: #1f2547; --bs-dropdown-box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.4); /* === Code === */ --bs-code-bg: #232a52; --bs-code-box-shadow: 0px 3px 9px rgba(0, 0, 0, 0.1); --bs-code-color: #d989ff; /* === Symbols, bullets === */ --bs-symbol-label-color: #d0d7e5; --bs-symbol-label-bg: #1a1f3d; --bs-symbol-border-color: rgba(255, 255, 255, 0.5); --bs-bullet-bg-color: #3e4587; /* === ScrollTop === */ --bs-scrolltop-opacity: 0; --bs-scrolltop-opacity-on: 0.3; --bs-scrolltop-opacity-hover: 1; --bs-scrolltop-box-shadow: 0 0.5rem 1.5rem 0.5rem rgba(0, 0, 0, 0.1); --bs-scrolltop-bg-color: #6b75c9; --bs-scrolltop-bg-color-hover: #5862b8; --bs-scrolltop-icon-color: #ffffff; --bs-scrolltop-icon-color-hover: #ffffff; /* === Drawers === */ --bs-drawer-box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.15); --bs-drawer-bg-color: #1f2547; --bs-drawer-overlay-bg-color: rgba(0, 0, 0, 0.5); /* === Menus / sidebar === */ --bs-menu-dropdown-box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.4); --bs-menu-dropdown-bg-color: #1f2547; --bs-menu-heading-color: #5b639e; --bs-menu-link-color-hover: #6b75c9; --bs-menu-link-color-show: #6b75c9; --bs-menu-link-color-here: #6b75c9; --bs-menu-link-color-active: #6b75c9; --bs-menu-link-bg-color-hover: #1a1f3d; --bs-menu-link-bg-color-show: #1a1f3d; --bs-menu-link-bg-color-here: #1a1f3d; --bs-menu-link-bg-color-active: #1a1f3d; /* === Scrollbars, overlays === */ --bs-scrollbar-color: #232a52; --bs-scrollbar-hover-color: #2d3563; --bs-overlay-bg: rgba(255, 255, 255, 0.05); --bs-blockui-overlay-bg: rgba(255, 255, 255, 0.05); /* === Rating, ribbon === */ --bs-rating-color-default: #3e4587; --bs-rating-color-active: #FFAD0F; --bs-ribbon-label-box-shadow: 0px -1px 5px 0px rgba(255, 255, 255, 0.1); --bs-ribbon-label-bg: #6b75c9; --bs-ribbon-label-border-color: #4c56a8; --bs-ribbon-clip-bg: #F9F9F9; /* === Engage button === */ --bs-engage-btn-bg: #232a52; --bs-engage-btn-box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.4); --bs-engage-btn-border-color: #232a52; --bs-engage-btn-color: #d0d7e5; --bs-engage-btn-icon-color: #7a83b8; --bs-engage-btn-color-active: #d0d7e5; /* === Body (fond global de la page) === */ --bs-body-bg: #232a52; --bs-body-bg-rgb: 35, 42, 82; --bs-body-color: #a4adc8; --bs-body-color-rgb: 164, 173, 200; --bs-heading-color: #ffffff; /* === Optionnel : surfaces principales (cards, headers) === Ajuste si tes cards apparaissent transparentes ou mal contrastées */ --bs-card-bg: #323a73; --bs-card-border-color: #3e4587; /* ============================================================ Variables LAYOUT spécifiques à Metronic (sidebar, header, toolbar, footer, aside) ============================================================ */ /* === Fond global de l'application === */ --bs-app-bg-color: transparent; --bs-app-blank-bg-color: transparent; /* === Header (la barre du haut avec "Jeu", "Communauté") === */ --bs-app-header-base-bg-color: #1f2547; --bs-app-header-base-box-shadow: none; --bs-app-header-minimize-bg-color: #1f2547; --bs-app-header-minimize-box-shadow: 0 0.1rem 1rem 0.25rem rgba(0, 0, 0, 0.1); --bs-app-header-light-separator-color: #232a52; /* === Toolbar === */ --bs-app-toolbar-base-bg-color: #1f2547; --bs-app-toolbar-base-box-shadow: none; --bs-app-toolbar-base-border-top: 1px dashed #2d3563; /* === Aside (panneau latéral droit éventuel) === */ --bs-app-aside-base-bg-color: #1f2547; /* === Footer === */ --bs-app-footer-bg-color: transparent; --bs-app-footer-box-shadow: none; /* === Sidebar (la colonne de gauche avec OPRPG, avatar, menu) === */ --bs-app-sidebar-base-toggle-btn-box-shadow: none; --bs-app-sidebar-base-toggle-btn-bg-color: #232a52; --bs-app-sidebar-base-toggle-btn-border-color: none; --bs-app-sidebar-base-border-color: none; --bs-app-sidebar-light-bg-color: #1f2547; --bs-app-sidebar-light-box-shadow: none; --bs-app-sidebar-light-separator-color: #232a52; --bs-app-sidebar-light-scrollbar-color-hover: #232a52; --bs-app-sidebar-light-menu-heading-color: #5b639e; --bs-app-sidebar-light-menu-link-bg-color-active: #2a3163; --bs-app-sidebar-light-header-menu-link-bg-color-active: #2a3163; --bs-app-sidebar-light-menu-link-color: #d0d7e5; --bs-app-sidebar-light-menu-link-icon-color: #7a83b8; /* === Force le fond du body en navy === */ background-color: var(--bs-body-bg) !important; } /* ============================================================ Règles HORS du bloc principal — sélecteurs composés classiques. En thème "blue", on a un fond sombre → on cache les éléments destinés au fond clair (logos light, icônes light, etc.) et on laisse visibles ceux destinés au fond sombre. ============================================================ */ [data-bs-theme="blue"] .theme-light-show { display: none !important; } [data-bs-theme="blue"] .theme-dark-show { display: inline-block !important; } [data-bs-theme="blue"] .app-page, [data-bs-theme="blue"] .app-wrapper { border-top: none !important; } /* ============================================================ Force le fond des cards en bleu plus clair que le body. Nécessaire car Metronic redéfinit --bs-card-bg directement sur .card (style.bundle.css ligne 3806), ce qui écrase la valeur héritée du thème. ============================================================ */ [data-bs-theme="blue"] .card { --bs-card-bg: #323a73; background-color: #323a73; }