/* * MantisDarkMode — dark theme for MantisBT 2.x * Activated by adding the .mantis-dark class on the element. * The companion JS sets/removes this class based on localStorage. */ /* ---------- Toggle button (always present in the navbar) ---------- */ #mantis-dark-mode-toggle-li > a { cursor: pointer; padding: 12px 14px; color: inherit; line-height: 1; } #mantis-dark-mode-toggle-li > a:hover { opacity: .7; } #mantis-dark-mode-toggle-li .fa-sun-o { display: none; } .mantis-dark #mantis-dark-mode-toggle-li .fa-moon-o { display: none; } .mantis-dark #mantis-dark-mode-toggle-li .fa-sun-o { display: inline-block; } /* ---------- Color palette ---------- */ :root { --mdm-bg: #1e1f23; --mdm-surface: #282a30; --mdm-surface-2: #32353c; --mdm-border: #3f424a; --mdm-text: #e0e0e0; --mdm-text-muted: #9aa0a6; --mdm-link: #6db3ff; --mdm-link-hover: #99c8ff; --mdm-focus: #4dabf7; } /* ---------- Base layout ---------- */ .mantis-dark, .mantis-dark body, .mantis-dark .main-content, .mantis-dark .main-container, .mantis-dark #page-content, .mantis-dark .body-light-layout, .mantis-dark .login-layout { background-color: var(--mdm-bg) !important; color: var(--mdm-text); } .mantis-dark a { color: var(--mdm-link); } .mantis-dark a:hover, .mantis-dark a:focus { color: var(--mdm-link-hover); } .mantis-dark hr { border-color: var(--mdm-border); } .mantis-dark .text-muted, .mantis-dark .small, .mantis-dark small { color: var(--mdm-text-muted) !important; } .mantis-dark code, .mantis-dark pre { background: var(--mdm-surface-2); color: var(--mdm-text); border-color: var(--mdm-border); } /* ---------- Top navbar ---------- */ .mantis-dark .navbar, .mantis-dark .navbar-default { background: var(--mdm-surface) !important; border-color: var(--mdm-border) !important; } .mantis-dark .navbar-default .navbar-nav > li > a, .mantis-dark .user-info, .mantis-dark .user-info small, .mantis-dark .dropdown-toggle, .mantis-dark .navbar-brand { color: var(--mdm-text) !important; } /* ---------- Sidebar / breadcrumbs ---------- */ .mantis-dark .sidebar, .mantis-dark .nav-list, .mantis-dark .nav-list > li > a, .mantis-dark .breadcrumb, .mantis-dark .breadcrumbs { background: var(--mdm-surface) !important; border-color: var(--mdm-border) !important; color: var(--mdm-text); } .mantis-dark .nav-list > li.active > a, .mantis-dark .nav-list > li > a:hover { background: var(--mdm-surface-2) !important; color: var(--mdm-text) !important; } .mantis-dark .breadcrumb > li, .mantis-dark .breadcrumbs > li { color: var(--mdm-text); } .mantis-dark .breadcrumb > li > a, .mantis-dark .breadcrumbs > li > a { color: var(--mdm-link); } /* ---------- Widgets / panels / cards ---------- */ .mantis-dark .widget-box, .mantis-dark .widget-main, .mantis-dark .widget-body, .mantis-dark .panel, .mantis-dark .panel-default, .mantis-dark .panel-body, .mantis-dark .well { background: var(--mdm-surface) !important; color: var(--mdm-text) !important; border-color: var(--mdm-border) !important; } .mantis-dark .widget-header, .mantis-dark .widget-header-small, .mantis-dark .panel-heading, .mantis-dark .widget-toolbox { background: var(--mdm-surface-2) !important; color: var(--mdm-text) !important; border-color: var(--mdm-border) !important; } .mantis-dark .widget-header h4, .mantis-dark .widget-header .widget-title, .mantis-dark .panel-title { color: var(--mdm-text) !important; } .mantis-dark .alert-info { background: var(--mdm-surface-2) !important; color: var(--mdm-text) !important; border-color: var(--mdm-border) !important; } /* ---------- Tables ---------- */ .mantis-dark .table, .mantis-dark .table-bordered, .mantis-dark .table > thead, .mantis-dark .table > tbody, .mantis-dark .table > tfoot { background: var(--mdm-surface) !important; color: var(--mdm-text) !important; border-color: var(--mdm-border) !important; } .mantis-dark .table > thead > tr > th, .mantis-dark .table > tbody > tr > td, .mantis-dark .table > tfoot > tr > td, .mantis-dark .table-bordered > thead > tr > th, .mantis-dark .table-bordered > tbody > tr > td { border-color: var(--mdm-border) !important; color: var(--mdm-text) !important; } .mantis-dark .table-striped > tbody > tr:nth-of-type(odd) { background: var(--mdm-surface-2) !important; } .mantis-dark .table > tbody > tr:hover, .mantis-dark .table-hover > tbody > tr:hover { background: #3a3d44 !important; } /* ---------- Forms ---------- */ .mantis-dark .form-control, .mantis-dark input[type="text"], .mantis-dark input[type="password"], .mantis-dark input[type="email"], .mantis-dark input[type="number"], .mantis-dark input[type="search"], .mantis-dark input[type="date"], .mantis-dark textarea, .mantis-dark select { background: var(--mdm-surface-2) !important; color: var(--mdm-text) !important; border-color: var(--mdm-border) !important; } .mantis-dark .form-control:focus, .mantis-dark input:focus, .mantis-dark textarea:focus, .mantis-dark select:focus { border-color: var(--mdm-focus) !important; box-shadow: 0 0 4px rgba(77,171,247,.35) !important; } .mantis-dark .form-control::placeholder { color: var(--mdm-text-muted); } .mantis-dark label { color: var(--mdm-text); } /* ---------- Buttons ---------- */ .mantis-dark .btn-default, .mantis-dark .btn-white { background: var(--mdm-surface-2) !important; color: var(--mdm-text) !important; border-color: var(--mdm-border) !important; } .mantis-dark .btn-default:hover, .mantis-dark .btn-white:hover { background: #4a4d54 !important; } /* ---------- Modals ---------- */ .mantis-dark .modal-content, .mantis-dark .modal-header, .mantis-dark .modal-body, .mantis-dark .modal-footer { background: var(--mdm-surface) !important; color: var(--mdm-text) !important; border-color: var(--mdm-border) !important; } /* ---------- Dropdowns ---------- */ .mantis-dark .dropdown-menu { background: var(--mdm-surface) !important; border-color: var(--mdm-border) !important; } .mantis-dark .dropdown-menu > li > a { color: var(--mdm-text) !important; } .mantis-dark .dropdown-menu > li > a:hover, .mantis-dark .dropdown-menu > li > a:focus { background: var(--mdm-surface-2) !important; color: var(--mdm-link-hover) !important; } /* ---------- Projects dropdown (navbar "Tous les projets") ---------- */ /* Mantis utilise un skin Ace .dropdown-yellow (fond jaune) qu'il faut * surcharger en dark. Le menu lui-même est #projects-list. */ .mantis-dark #projects-list, .mantis-dark .dropdown-yellow, .mantis-dark .scrollable-menu, .mantis-dark .list.dropdown-yellow { background: var(--mdm-surface) !important; color: var(--mdm-text) !important; border-color: var(--mdm-border) !important; } .mantis-dark #projects-list > li > a, .mantis-dark #projects-list .list a, .mantis-dark .list.dropdown-yellow > li > a { color: var(--mdm-text) !important; background: transparent !important; } .mantis-dark #projects-list > li > a:hover, .mantis-dark #projects-list .list a:hover, .mantis-dark .list.dropdown-yellow > li > a:hover, .mantis-dark #projects-list .list a:focus { background: var(--mdm-surface-2) !important; color: var(--mdm-link-hover) !important; } .mantis-dark #projects-list li.active > a, .mantis-dark .list.dropdown-yellow > li.active > a { background: var(--mdm-surface-2) !important; color: var(--mdm-link-hover) !important; } /* Séparateurs entre projets */ .mantis-dark #projects-list li.divider, .mantis-dark .dropdown-menu .divider { background-color: var(--mdm-border) !important; } /* Searchbox en haut du menu (pour filtrer les projets) */ .mantis-dark .projects-searchbox input.search, .mantis-dark .projects-searchbox .form-control { background: var(--mdm-surface-2) !important; color: var(--mdm-text) !important; border-color: var(--mdm-border) !important; } .mantis-dark .projects-searchbox input.search::placeholder { color: var(--mdm-text-muted); } /* La caret (petite flèche) au-dessus du menu, qui hérite du skin yellow */ .mantis-dark .dropdown-caret > .dropdown-menu:before { border-bottom-color: var(--mdm-surface) !important; } .mantis-dark .dropdown-caret > .dropdown-menu:after { border-bottom-color: var(--mdm-surface) !important; } /* ---------- Tabs ---------- */ .mantis-dark .nav-tabs, .mantis-dark .nav-tabs > li > a { border-color: var(--mdm-border) !important; background: transparent !important; color: var(--mdm-text) !important; } .mantis-dark .nav-tabs > li.active > a, .mantis-dark .nav-tabs > li.active > a:hover { background: var(--mdm-surface) !important; border-color: var(--mdm-border) !important; color: var(--mdm-text) !important; border-bottom-color: var(--mdm-surface) !important; } /* ---------- Footer ---------- */ .mantis-dark #footer, .mantis-dark .footer { background: var(--mdm-surface) !important; color: var(--mdm-text-muted) !important; border-color: var(--mdm-border) !important; } /* ---------- Login page ---------- */ .mantis-dark .login-container, .mantis-dark .signup-box, .mantis-dark .signup-box .header, .mantis-dark .signup-box .toolbar { background: var(--mdm-surface) !important; color: var(--mdm-text) !important; border-color: var(--mdm-border) !important; }