@charset "UTF-8"; /*! * --------------------------------------------------------------------- * * GLPI - Gestionnaire Libre de Parc Informatique * * http://glpi-project.org * * @copyright 2015-2026 Teclib' and contributors. * @copyright 2003-2014 by the INDEPNET Development Team. * @licence https://www.gnu.org/licenses/gpl-3.0.html * * --------------------------------------------------------------------- * * LICENSE * * This file is part of GLPI. * * This program is free software: you can redistribute it and/or modify * it under the terms of the GNU General Public License as published by * the Free Software Foundation, either version 3 of the License, or * (at your option) any later version. * * This program is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU General Public License for more details. * * You should have received a copy of the GNU General Public License * along with this program. If not, see . * * --------------------------------------------------------------------- */ /*! * --------------------------------------------------------------------- * * GLPI - Gestionnaire Libre de Parc Informatique * * http://glpi-project.org * * @copyright 2015-2026 Teclib' and contributors. * @copyright 2003-2014 by the INDEPNET Development Team. * @licence https://www.gnu.org/licenses/gpl-3.0.html * * --------------------------------------------------------------------- * * LICENSE * * This file is part of GLPI. * * This program is free software: you can redistribute it and/or modify * it under the terms of the GNU General Public License as published by * the Free Software Foundation, either version 3 of the License, or * (at your option) any later version. * * This program is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU General Public License for more details. * * You should have received a copy of the GNU General Public License * along with this program. If not, see . * * --------------------------------------------------------------------- */ :root[data-glpi-theme-dark="1"] { --tblr-dark: #000; --tblr-light: #e6e6e6; --tblr-info: #5885c0; --tblr-body-bg: #000; --tblr-body-color: #e6e6e6; --tblr-body-color-rgb: 230, 230, 230; --tblr-bg-surface: color-mix(in srgb, var(--tblr-body-bg), black 2%); --tblr-border-color: color-mix(in srgb, var(--tblr-body-bg), white 33.33%); --tblr-gray-100: var(--tblr-dark); --tblr-gray-200: color-mix(in srgb, var(--tblr-dark), var(--tblr-light) 2%); --tblr-gray-300: color-mix(in srgb, var(--tblr-dark), var(--tblr-light) 6%); --tblr-gray-400: color-mix(in srgb, var(--tblr-dark), var(--tblr-light) 12%); --tblr-gray-500: color-mix(in srgb, var(--tblr-dark), var(--tblr-light) 22%); --tblr-gray-600: color-mix(in srgb, var(--tblr-dark), var(--tblr-light) 40%); --tblr-gray-700: color-mix(in srgb, var(--tblr-dark), var(--tblr-light) 64%); --tblr-gray-800: color-mix(in srgb, var(--tblr-dark), var(--tblr-light) 84%); --tblr-gray-900: var(--tblr-light); --tblr-gray-50: var(--tblr-gray-300); --glpi-tabs-active-bg: color-mix(in srgb, var(--tblr-bg-surface), white 10%); --glpi-tabs-border-color: transparent; --glpi-scrollbar-thumb-color: color-mix(in srgb, var(--tblr-secondary), transparent 75%); --glpi-timeline-itil-content-bg: #212221d3; --glpi-timeline-itil-content-fg: #85bd81; --glpi-timeline-itil-content-border-color: #1d201db4; --glpi-timeline-fup-bg: #222; --glpi-timeline-fup-fg: #acacac; --glpi-timeline-fup-border-color: #3b3b3b; --glpi-timeline-task-bg: #2722172f; --glpi-timeline-task-fg: #ccb686; --glpi-timeline-task-border-color: #363532; --glpi-timeline-solution-bg: #3a4d55; --glpi-timeline-solution-fg: #89bfd3; --glpi-timeline-solution-border-color: #435963; --glpi-timeline-document-bg: #2b4137; --glpi-timeline-document-fg: #68b997; --glpi-timeline-badge-bg: rgb(104, 104, 104, 15%); --glpi-timeline-badge-fg: rgb(236, 236, 236, 80%); --glpi-badge-bg: color-mix(in srgb, var(--tblr-link-color), var(--tblr-dark) 85%); --glpi-illustrations-background: rgb(204, 204, 204); --glpi-illustrations-primary: hsl(from var(--tblr-primary) h s 65); --glpi-illustrations-header-dark: hsl(from var(--glpi-illustrations-background) h s 30); --glpi-illustrations-header-light: hsl(from var(--glpi-illustrations-background) h s 50); } :root[data-glpi-theme-dark="1"] .navbar-nav.user-menu .bg-red-lt { background-color: rgba(214, 57, 57, 0.2) !important; } :root[data-glpi-theme-dark="1"] .form-check-input:not(:checked), :root[data-glpi-theme-dark="1"] .form-select, :root[data-glpi-theme-dark="1"] .form-file-text, :root[data-glpi-theme-dark="1"] .form-control, :root[data-glpi-theme-dark="1"] .form-selectgroup-label, :root[data-glpi-theme-dark="1"] .form-selectgroup-check, :root[data-glpi-theme-dark="1"] .form-imagecheck-figure::before { border-color: var(--tblr-border-color); } :root[data-glpi-theme-dark="1"] .card { border: 1px solid var(--tblr-border-color); } :root[data-glpi-theme-dark="1"] input[type=color] { background-color: transparent; } :root[data-glpi-theme-dark="1"] .table-danger { --tblr-table-bg: #642b2b; --tblr-table-striped-bg: #642b2b; --tblr-table-striped-color: var(--tblr-light); --tblr-table-active-bg: #642b2b; --tblr-table-active-color: var(--tblr-light); --tblr-table-hover-bg: #642b2b; --tblr-table-hover-color: var(--tblr-light); color: var(--tblr-light); border-color: #6d000a; } :root[data-glpi-theme-dark="1"] .search_page .search-container .search-card .search-results.deleted-results td { color: var(--tblr-light); } :root[data-glpi-theme-dark="1"] .navbar-collapsed #navbar-menu .nav-item .nav-link + .dropdown-menu { background-color: var(--tblr-bg-surface) !important; color: var(--glpi-mainmenu-fg) !important; } :root[data-glpi-theme-dark="1"] .page-anonymous .glpi-logo { --logo: var(--glpi-logo-light-login) !important; } :root[data-glpi-theme-dark="1"] .qtip-bootstrap, :root[data-glpi-theme-dark="1"] .popover .popover-body { background-color: var(--tblr-bg-surface) !important; color: var(--tblr-light) !important; } :root[data-glpi-theme-dark="1"] .popover .popover-arrow::after { border-top-color: var(--tblr-bg-surface) !important; } :root[data-glpi-theme-dark="1"] iframe.tox-edit-area__iframe { background-color: var(--tblr-bg-surface) !important; } :root[data-glpi-theme-dark="1"] .search_page .search-container .search-card .search-header .search-controls .btn-active-search { background-color: rgba(207, 245, 209, 0.1607843137); color: #cff5d1; } :root[data-glpi-theme-dark="1"] .search_page .search-container .search-card .search-header .search-controls .btn-active-sort { background-color: rgba(255, 224, 204, 0.1803921569); color: #ffe0cc; } :root[data-glpi-theme-dark="1"] .avatar { color: var(--tblr-dark); } :root[data-glpi-theme-dark="1"] .list-group { --tblr-list-group-action-active-bg: rgb(var(--tblr-secondary-rgb), 0.5); } /*! * --------------------------------------------------------------------- * * GLPI - Gestionnaire Libre de Parc Informatique * * http://glpi-project.org * * @copyright 2015-2026 Teclib' and contributors. * @copyright 2003-2014 by the INDEPNET Development Team. * @licence https://www.gnu.org/licenses/gpl-3.0.html * * --------------------------------------------------------------------- * * LICENSE * * This file is part of GLPI. * * This program is free software: you can redistribute it and/or modify * it under the terms of the GNU General Public License as published by * the Free Software Foundation, either version 3 of the License, or * (at your option) any later version. * * This program is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU General Public License for more details. * * You should have received a copy of the GNU General Public License * along with this program. If not, see . * * --------------------------------------------------------------------- */ :root[data-glpi-theme=aerialgreen] { --tblr-primary-rgb: 142, 197, 71; --tblr-secondary: #768363; --tblr-secondary-fg: #fcfcfc; --tblr-link-color-rgb: 69, 148, 54; --glpi-mainmenu-bg: #459436; --glpi-helpdesk-header: hsl(111deg, 41%, 85%); --glpi-mainmenu-fg: #f4f6fa; --glpi-palette-color-1: #459436; --glpi-palette-color-2: #365731; --glpi-palette-color-3: #8ec547; --glpi-palette-color-4: #fec95c; --glpi-illustrations-gradient-1: hsl(110deg, 47%, 92%); --glpi-illustrations-gradient-2: hsl(110deg, 47%, 72%); --glpi-illustrations-gradient-3: hsl(110deg, 47%, 45%); } /*! * --------------------------------------------------------------------- * * GLPI - Gestionnaire Libre de Parc Informatique * * http://glpi-project.org * * @copyright 2015-2026 Teclib' and contributors. * @copyright 2003-2014 by the INDEPNET Development Team. * @licence https://www.gnu.org/licenses/gpl-3.0.html * * --------------------------------------------------------------------- * * LICENSE * * This file is part of GLPI. * * This program is free software: you can redistribute it and/or modify * it under the terms of the GNU General Public License as published by * the Free Software Foundation, either version 3 of the License, or * (at your option) any later version. * * This program is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU General Public License for more details. * * You should have received a copy of the GNU General Public License * along with this program. If not, see . * * --------------------------------------------------------------------- */ :root[data-glpi-theme=auror] { --glpi-palette-color-1: #1b2f62; --glpi-palette-color-2: #fff; --glpi-palette-color-3: #3a5693; --glpi-palette-color-4: #fec95c; } /*! * --------------------------------------------------------------------- * * GLPI - Gestionnaire Libre de Parc Informatique * * http://glpi-project.org * * @copyright 2015-2026 Teclib' and contributors. * @copyright 2003-2014 by the INDEPNET Development Team. * @licence https://www.gnu.org/licenses/gpl-3.0.html * * --------------------------------------------------------------------- * * LICENSE * * This file is part of GLPI. * * This program is free software: you can redistribute it and/or modify * it under the terms of the GNU General Public License as published by * the Free Software Foundation, either version 3 of the License, or * (at your option) any later version. * * This program is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU General Public License for more details. * * You should have received a copy of the GNU General Public License * along with this program. If not, see . * * --------------------------------------------------------------------- */ :root[data-glpi-theme=auror_dark] { --tblr-dark: #232e3c; --tblr-light: #9ca8c0; --tblr-body-bg: #1f2936; --tblr-bg-surface: #232e3c; --tblr-body-color: #9ca8c0; --tblr-primary-rgb: 254, 201, 92; --tblr-primary-fg: #644e21; --tblr-secondary: #b0bbd4; --tblr-secondary-fg: #262d3d; --tblr-link-color-rgb: 182, 195, 224; --tblr-muted: #757d91; --tblr-badge-bg: var(--tblr-light); --tblr-badge-color: var(--tblr-dark); --glpi-form-header-fg: #6ba8f3; --glpi-form-header-border-color: transparent; --glpi-mainmenu-bg: #232e3c; --glpi-mainmenu-fg: #ffffffb3; --glpi-helpdesk-header: hsl(213.9deg, 27.1%, 30.7%); --glpi-helpdesk-tiles-section-bg: hsl(213.9deg, 27.1%, 25.7%); --glpi-helpdesk-tabs-section-bg: hsl(213.9deg, 27.1%, 20.7%); --glpi-tabs-bg: #1d2531; --glpi-tabs-fg: var(--tblr-light); --glpi-tabs-border-color: transparent; --glpi-tabs-active-bg: #2a3a4f; --glpi-tabs-active-fg: #d8dfe7; --glpi-tabs-active-border-color: transparent; --glpi-itil-secondary-bg: #1d2531; --glpi-timeline-fup-bg: #1c2430; --glpi-timeline-fup-fg: #8892a8; --glpi-timeline-fup-border: #2f3d50; --glpi-palette-color-1: #1b2f62; --glpi-palette-color-2: #131425; --glpi-palette-color-3: #3a5693; --glpi-palette-color-4: #fec95c; --glpi-illustrations-gradient-1: hsl(213.9deg, 27.1%, 70%); --glpi-illustrations-gradient-2: hsl(213.9deg, 27.1%, 40%); --glpi-illustrations-gradient-3: hsl(213.9deg, 27.1%, 20%); } /*! * --------------------------------------------------------------------- * * GLPI - Gestionnaire Libre de Parc Informatique * * http://glpi-project.org * * @copyright 2015-2026 Teclib' and contributors. * @copyright 2003-2014 by the INDEPNET Development Team. * @licence https://www.gnu.org/licenses/gpl-3.0.html * * --------------------------------------------------------------------- * * LICENSE * * This file is part of GLPI. * * This program is free software: you can redistribute it and/or modify * it under the terms of the GNU General Public License as published by * the Free Software Foundation, either version 3 of the License, or * (at your option) any later version. * * This program is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU General Public License for more details. * * You should have received a copy of the GNU General Public License * along with this program. If not, see . * * --------------------------------------------------------------------- */ :root[data-glpi-theme=automn] { --tblr-primary-rgb: 242, 178, 101; --tblr-primary-fg: #8b4d34; --tblr-secondary: #757575; --tblr-secondary-fg: #f4f6fa; --tblr-link-color-rgb: 192, 111, 61; --glpi-mainmenu-bg: #8b4d34; --glpi-helpdesk-header: hsl(18deg, 41%, 85%); --glpi-mainmenu-fg: #f4f6fa; --glpi-palette-color-1: #8b4d34; --glpi-palette-color-2: #58372e; --glpi-palette-color-3: #f2b265; --glpi-palette-color-4: #c06f3d; --glpi-illustrations-gradient-1: hsl(17deg, 46%, 92%); --glpi-illustrations-gradient-2: hsl(17deg, 46%, 72%); --glpi-illustrations-gradient-3: hsl(17deg, 46%, 45%); } /*! * --------------------------------------------------------------------- * * GLPI - Gestionnaire Libre de Parc Informatique * * http://glpi-project.org * * @copyright 2015-2026 Teclib' and contributors. * @copyright 2003-2014 by the INDEPNET Development Team. * @licence https://www.gnu.org/licenses/gpl-3.0.html * * --------------------------------------------------------------------- * * LICENSE * * This file is part of GLPI. * * This program is free software: you can redistribute it and/or modify * it under the terms of the GNU General Public License as published by * the Free Software Foundation, either version 3 of the License, or * (at your option) any later version. * * This program is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU General Public License for more details. * * You should have received a copy of the GNU General Public License * along with this program. If not, see . * * --------------------------------------------------------------------- */ :root[data-glpi-theme=classic] { --tblr-primary-rgb: 242, 178, 101; --tblr-primary-fg: #8f5a0a; --tblr-secondary: #888373; --tblr-secondary-fg: #8f5a0a; --tblr-link-color-rgb: 101, 153, 0; --glpi-mainmenu-bg: #98a458; --glpi-helpdesk-header: hsl(70deg, 26%, 85%); --glpi-mainmenu-fg: #000; --glpi-palette-color-1: #E1D39E; --glpi-palette-color-2: #877C52; --glpi-palette-color-3: #C0CC7B; --glpi-palette-color-4: #FEC95C; --glpi-illustrations-gradient-1: hsl(69deg, 26%, 92%); --glpi-illustrations-gradient-2: hsl(69deg, 26%, 62%); --glpi-illustrations-gradient-3: hsl(69deg, 26%, 45%); } /*! * --------------------------------------------------------------------- * * GLPI - Gestionnaire Libre de Parc Informatique * * http://glpi-project.org * * @copyright 2015-2026 Teclib' and contributors. * @copyright 2003-2014 by the INDEPNET Development Team. * @licence https://www.gnu.org/licenses/gpl-3.0.html * * --------------------------------------------------------------------- * * LICENSE * * This file is part of GLPI. * * This program is free software: you can redistribute it and/or modify * it under the terms of the GNU General Public License as published by * the Free Software Foundation, either version 3 of the License, or * (at your option) any later version. * * This program is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU General Public License for more details. * * You should have received a copy of the GNU General Public License * along with this program. If not, see . * * --------------------------------------------------------------------- */ :root[data-glpi-theme=clockworkorange] { --tblr-primary-rgb: 252, 121, 98; --tblr-primary-fg: #fff; --tblr-link-color-rgb: 179, 56, 34; --glpi-mainmenu-bg: #b2341c; --glpi-helpdesk-header: hsl(11deg, 65%, 85%); --glpi-mainmenu-fg: #fce7e4; --glpi-palette-color-1: #ff5131; --glpi-palette-color-2: #b2341c; --glpi-palette-color-3: #ff7c64; --glpi-palette-color-4: #fff; --glpi-illustrations-gradient-1: hsl(10deg, 73%, 92%); --glpi-illustrations-gradient-2: hsl(10deg, 73%, 62%); --glpi-illustrations-gradient-3: hsl(10deg, 73%, 45%); } /*! * --------------------------------------------------------------------- * * GLPI - Gestionnaire Libre de Parc Informatique * * http://glpi-project.org * * @copyright 2015-2026 Teclib' and contributors. * @copyright 2003-2014 by the INDEPNET Development Team. * @licence https://www.gnu.org/licenses/gpl-3.0.html * * --------------------------------------------------------------------- * * LICENSE * * This file is part of GLPI. * * This program is free software: you can redistribute it and/or modify * it under the terms of the GNU General Public License as published by * the Free Software Foundation, either version 3 of the License, or * (at your option) any later version. * * This program is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU General Public License for more details. * * You should have received a copy of the GNU General Public License * along with this program. If not, see . * * --------------------------------------------------------------------- */ :root[data-glpi-theme=dark] { --tblr-primary-rgb: 88, 89, 87; --tblr-primary-fg: #fff; --tblr-link-color-rgb: 22, 21, 20; --glpi-mainmenu-bg: #161514; --glpi-helpdesk-header: hsl(31deg, 5%, 75%); --glpi-mainmenu-fg: #fff; --glpi-palette-color-1: #161514; --glpi-palette-color-2: #fff; --glpi-palette-color-3: #585957; --glpi-palette-color-4: #3f403e; --glpi-illustrations-gradient-1: hsl(30deg, 5%, 92%); --glpi-illustrations-gradient-2: hsl(30deg, 5%, 62%); --glpi-illustrations-gradient-3: hsl(30deg, 5%, 45%); } /*! * --------------------------------------------------------------------- * * GLPI - Gestionnaire Libre de Parc Informatique * * http://glpi-project.org * * @copyright 2015-2026 Teclib' and contributors. * @copyright 2003-2014 by the INDEPNET Development Team. * @licence https://www.gnu.org/licenses/gpl-3.0.html * * --------------------------------------------------------------------- * * LICENSE * * This file is part of GLPI. * * This program is free software: you can redistribute it and/or modify * it under the terms of the GNU General Public License as published by * the Free Software Foundation, either version 3 of the License, or * (at your option) any later version. * * This program is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU General Public License for more details. * * You should have received a copy of the GNU General Public License * along with this program. If not, see . * * --------------------------------------------------------------------- */ :root[data-glpi-theme=darker] { --tblr-dark: #242323; --tblr-light: #aaa; --tblr-body-bg: #1f1e1e; --tblr-body-color: #aaa; --tblr-bg-surface: #242323; --tblr-primary-rgb: 107, 107, 107; --tblr-primary-fg: #aaa; --tblr-secondary: #737572; --tblr-secondary-fg: #f3f3f3; --tblr-link-color-rgb: 136, 136, 136; --tblr-link-hover-color-rgb: 200, 200, 200; --tblr-code-color: #B4B4B4; --tblr-muted: #aaa; --tblr-badge-bg: var(--tblr-light); --tblr-badge-color: var(--tblr-dark); --glpi-mainmenu-bg: #242323; --glpi-helpdesk-header: #1f1e1e; --glpi-helpdesk-tiles-section-bg: hsl(0deg, 1.6%, 20%); --glpi-helpdesk-tabs-section-bg: hsl(0deg, 1.6%, 10%); --glpi-illustrations-header-light: hsl(40deg, 5%, 4%); --glpi-mainmenu-fg: #f4f6fa; --glpi-form-header-border-color: transparent; --glpi-form-header-fg: var(--tblr-light); --glpi-tabs-bg: #222121; --glpi-tabs-fg: var(--tblr-light); --glpi-tabs-border-color: transparent; --glpi-tabs-active-bg: #3a3938; --glpi-tabs-active-fg: var(--tblr-muted); --glpi-tabs-active-border-color: transparent; --glpi-itil-secondary-bg: #222121; --glpi-palette-color-1: #161514; --glpi-palette-color-2: #131e21; --glpi-palette-color-3: #585957; --glpi-palette-color-4: #3f403e; --glpi-illustrations-gradient-1: hsl(0deg, 1%, 70%); --glpi-illustrations-gradient-2: hsl(0deg, 1%, 35%); --glpi-illustrations-gradient-3: hsl(0deg, 1%, 20%); } /*! * --------------------------------------------------------------------- * * GLPI - Gestionnaire Libre de Parc Informatique * * http://glpi-project.org * * @copyright 2015-2026 Teclib' and contributors. * @copyright 2003-2014 by the INDEPNET Development Team. * @licence https://www.gnu.org/licenses/gpl-3.0.html * * --------------------------------------------------------------------- * * LICENSE * * This file is part of GLPI. * * This program is free software: you can redistribute it and/or modify * it under the terms of the GNU General Public License as published by * the Free Software Foundation, either version 3 of the License, or * (at your option) any later version. * * This program is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU General Public License for more details. * * You should have received a copy of the GNU General Public License * along with this program. If not, see . * * --------------------------------------------------------------------- */ :root[data-glpi-theme=flood] { --tblr-primary-rgb: 244, 212, 173; --tblr-secondary: #757575; --tblr-link-color-rgb: 0, 101, 115; --tblr-badge-bg: #d0d9f0; --tblr-badge-color: rgb(58, 73, 102); --glpi-mainmenu-bg: #006573; --glpi-helpdesk-header: hsl(188deg, 40%, 61%); --glpi-mainmenu-fg: #f4f6fa; --glpi-search-bg: #fcf7f1; --glpi-search-fg: #756d61; --glpi-palette-color-1: #006573; --glpi-palette-color-2: #005572; --glpi-palette-color-3: #81beaa; --glpi-palette-color-4: #f4d4ad; --glpi-illustrations-gradient-1: hsl(187deg, 50%, 92%); --glpi-illustrations-gradient-2: hsl(187deg, 40%, 70%); --glpi-illustrations-gradient-3: hsl(187deg, 50%, 35%); } /*! * --------------------------------------------------------------------- * * GLPI - Gestionnaire Libre de Parc Informatique * * http://glpi-project.org * * @copyright 2015-2026 Teclib' and contributors. * @copyright 2003-2014 by the INDEPNET Development Team. * @licence https://www.gnu.org/licenses/gpl-3.0.html * * --------------------------------------------------------------------- * * LICENSE * * This file is part of GLPI. * * This program is free software: you can redistribute it and/or modify * it under the terms of the GNU General Public License as published by * the Free Software Foundation, either version 3 of the License, or * (at your option) any later version. * * This program is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU General Public License for more details. * * You should have received a copy of the GNU General Public License * along with this program. If not, see . * * --------------------------------------------------------------------- */ :root[data-glpi-theme=greenflat] { --tblr-primary-rgb: 254, 201, 92; --tblr-link-color-rgb: 0, 122, 88; --glpi-mainmenu-bg: #09a071; --glpi-helpdesk-header: hsl(162deg, 40%, 85%); --glpi-mainmenu-fg: #fff; --glpi-palette-color-1: #09a071; --glpi-palette-color-2: #004630; --glpi-palette-color-3: #007a58; --glpi-palette-color-4: #fec95c; --glpi-illustrations-gradient-1: hsl(161deg, 40%, 92%); --glpi-illustrations-gradient-2: hsl(161deg, 40%, 65%); --glpi-illustrations-gradient-3: hsl(161deg, 40%, 38%); } /*! * --------------------------------------------------------------------- * * GLPI - Gestionnaire Libre de Parc Informatique * * http://glpi-project.org * * @copyright 2015-2026 Teclib' and contributors. * @copyright 2003-2014 by the INDEPNET Development Team. * @licence https://www.gnu.org/licenses/gpl-3.0.html * * --------------------------------------------------------------------- * * LICENSE * * This file is part of GLPI. * * This program is free software: you can redistribute it and/or modify * it under the terms of the GNU General Public License as published by * the Free Software Foundation, either version 3 of the License, or * (at your option) any later version. * * This program is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU General Public License for more details. * * You should have received a copy of the GNU General Public License * along with this program. If not, see . * * --------------------------------------------------------------------- */ :root[data-glpi-theme=hipster] { --tblr-primary-rgb: 255, 210, 202; --tblr-primary-fg: #d6665a; --tblr-secondary: #d6665a; --tblr-secondary-fg: #fff; --tblr-link-color-rgb: 117, 164, 139; --glpi-mainmenu-bg: #d6665a; --glpi-helpdesk-header: hsl(7deg, 54%, 85%); --glpi-mainmenu-fg: #ffd2ca; --glpi-palette-color-1: #dc9b74; --glpi-palette-color-2: #75a48b; --glpi-palette-color-3: #42282e; --glpi-palette-color-4: #d6665a; --glpi-illustrations-gradient-1: hsl(6deg, 60%, 92%); --glpi-illustrations-gradient-2: hsl(6deg, 60%, 65%); --glpi-illustrations-gradient-3: hsl(6deg, 60%, 40%); } /*! * --------------------------------------------------------------------- * * GLPI - Gestionnaire Libre de Parc Informatique * * http://glpi-project.org * * @copyright 2015-2026 Teclib' and contributors. * @copyright 2003-2014 by the INDEPNET Development Team. * @licence https://www.gnu.org/licenses/gpl-3.0.html * * --------------------------------------------------------------------- * * LICENSE * * This file is part of GLPI. * * This program is free software: you can redistribute it and/or modify * it under the terms of the GNU General Public License as published by * the Free Software Foundation, either version 3 of the License, or * (at your option) any later version. * * This program is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU General Public License for more details. * * You should have received a copy of the GNU General Public License * along with this program. If not, see . * * --------------------------------------------------------------------- */ :root[data-glpi-theme=icecream] { --tblr-primary-rgb: 213, 79, 88; --tblr-primary-fg: #f3edd3; --tblr-secondary: #113f59; --tblr-secondary-fg: #a9e3e4; --tblr-link-color-rgb: 20, 146, 148; --glpi-mainmenu-bg: #113f59; --glpi-helpdesk-header: hsl(203deg, 63%, 85%); --glpi-mainmenu-fg: #f3edd3; --glpi-palette-color-1: #113f59; --glpi-palette-color-2: #19bec0; --glpi-palette-color-3: #f3edd3; --glpi-palette-color-4: #d54f58; --glpi-illustrations-gradient-1: hsl(202deg, 68%, 92%); --glpi-illustrations-gradient-2: hsl(202deg, 68%, 72%); --glpi-illustrations-gradient-3: hsl(202deg, 68%, 40%); } /*! * --------------------------------------------------------------------- * * GLPI - Gestionnaire Libre de Parc Informatique * * http://glpi-project.org * * @copyright 2015-2026 Teclib' and contributors. * @copyright 2003-2014 by the INDEPNET Development Team. * @licence https://www.gnu.org/licenses/gpl-3.0.html * * --------------------------------------------------------------------- * * LICENSE * * This file is part of GLPI. * * This program is free software: you can redistribute it and/or modify * it under the terms of the GNU General Public License as published by * the Free Software Foundation, either version 3 of the License, or * (at your option) any later version. * * This program is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU General Public License for more details. * * You should have received a copy of the GNU General Public License * along with this program. If not, see . * * --------------------------------------------------------------------- */ :root[data-glpi-theme=lightblue] { --tblr-primary-rgb: 200, 234, 253; --tblr-secondary: #656d77; --tblr-link-color-rgb: 44, 115, 167; --tblr-badge-bg: #d0d9f0; --tblr-badge-color: rgb(58, 73, 102); --glpi-mainmenu-bg: #1a7ab2; --glpi-helpdesk-header: hsl(203deg, 70%, 85%); --glpi-mainmenu-fg: #f4f6fa; --glpi-palette-color-1: #1a7ab2; --glpi-palette-color-2: #41b1ff; --glpi-palette-color-3: #7cc7f1; --glpi-palette-color-4: #fff; --glpi-illustrations-gradient-1: hsl(202deg, 75%, 92%); --glpi-illustrations-gradient-2: hsl(202deg, 75%, 72%); --glpi-illustrations-gradient-3: hsl(202deg, 75%, 40%); } /*! * --------------------------------------------------------------------- * * GLPI - Gestionnaire Libre de Parc Informatique * * http://glpi-project.org * * @copyright 2015-2026 Teclib' and contributors. * @copyright 2003-2014 by the INDEPNET Development Team. * @licence https://www.gnu.org/licenses/gpl-3.0.html * * --------------------------------------------------------------------- * * LICENSE * * This file is part of GLPI. * * This program is free software: you can redistribute it and/or modify * it under the terms of the GNU General Public License as published by * the Free Software Foundation, either version 3 of the License, or * (at your option) any later version. * * This program is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU General Public License for more details. * * You should have received a copy of the GNU General Public License * along with this program. If not, see . * * --------------------------------------------------------------------- */ :root[data-glpi-theme=midnight] { --tblr-dark: #000; --tblr-light: #e6e6e6; --tblr-body-bg: #000; --tblr-primary-rgb: 182, 195, 224; --tblr-primary-fg: #232e3c; --tblr-secondary: #b0bbd4; --tblr-secondary-fg: #262d3d; --tblr-link-color-rgb: 200, 200, 200; --tblr-link-hover-color-rgb: 225, 225, 225; --tblr-code-color: #B4B4B4; --tblr-muted: #c6cad2; --tblr-muted-rgb: 198, 202, 210; --tblr-badge-bg: var(--tblr-light); --tblr-badge-color: var(--tblr-dark); --glpi-mainmenu-bg: var(--tblr-body-bg); --glpi-helpdesk-header: #1f1e1e; --glpi-helpdesk-tiles-section-bg: hsl(0deg, 1.6%, 4%); --glpi-helpdesk-tabs-section-bg: #000; --glpi-illustrations-header-light: hsl(40deg, 5%, 4%); --glpi-mainmenu-fg: var(--tblr-body-color); --glpi-form-header-fg: #6ba8f3; --glpi-form-header-border-color: transparent; --glpi-tabs-bg: #1a1a1a; --glpi-tabs-fg: var(--tblr-light); --glpi-tabs-border-color: transparent; --glpi-tabs-active-bg: #3a3938; --glpi-tabs-active-fg: var(--tblr-muted); --glpi-tabs-active-border-color: transparent; --glpi-itil-secondary-bg: #1d2531; --glpi-timeline-fup-bg: #1c2430; --glpi-timeline-fup-fg: #8892a8; --glpi-timeline-fup-border: #2f3d50; --glpi-palette-color-1: #000; --glpi-palette-color-2: #1b1b1b; --glpi-palette-color-3: #858585; --glpi-palette-color-4: #c2c2c2; --glpi-illustrations-gradient-1: hsl(0deg, 1.6%, 70%); --glpi-illustrations-gradient-2: hsl(0deg, 1.6%, 40%); --glpi-illustrations-gradient-3: hsl(0deg, 1.6%, 20%); } /*! * --------------------------------------------------------------------- * * GLPI - Gestionnaire Libre de Parc Informatique * * http://glpi-project.org * * @copyright 2015-2026 Teclib' and contributors. * @copyright 2003-2014 by the INDEPNET Development Team. * @licence https://www.gnu.org/licenses/gpl-3.0.html * * --------------------------------------------------------------------- * * LICENSE * * This file is part of GLPI. * * This program is free software: you can redistribute it and/or modify * it under the terms of the GNU General Public License as published by * the Free Software Foundation, either version 3 of the License, or * (at your option) any later version. * * This program is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU General Public License for more details. * * You should have received a copy of the GNU General Public License * along with this program. If not, see . * * --------------------------------------------------------------------- */ :root[data-glpi-theme=premiumred] { --tblr-primary-rgb: 251, 99, 86; --tblr-primary-fg: #fff; --tblr-link-color-rgb: 200, 50, 38; --glpi-mainmenu-bg: #a2291f; --glpi-helpdesk-header: hsl(6deg, 63%, 85%); --glpi-mainmenu-fg: #f3eae9; --glpi-palette-color-1: #a2291f; --glpi-palette-color-2: #621913; --glpi-palette-color-3: #e2392b; --glpi-palette-color-4: #c83226; --glpi-illustrations-gradient-1: hsl(5deg, 68%, 92%); --glpi-illustrations-gradient-2: hsl(5deg, 68%, 72%); --glpi-illustrations-gradient-3: hsl(5deg, 68%, 42%); } /*! * --------------------------------------------------------------------- * * GLPI - Gestionnaire Libre de Parc Informatique * * http://glpi-project.org * * @copyright 2015-2026 Teclib' and contributors. * @copyright 2003-2014 by the INDEPNET Development Team. * @licence https://www.gnu.org/licenses/gpl-3.0.html * * --------------------------------------------------------------------- * * LICENSE * * This file is part of GLPI. * * This program is free software: you can redistribute it and/or modify * it under the terms of the GNU General Public License as published by * the Free Software Foundation, either version 3 of the License, or * (at your option) any later version. * * This program is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU General Public License for more details. * * You should have received a copy of the GNU General Public License * along with this program. If not, see . * * --------------------------------------------------------------------- */ :root[data-glpi-theme=purplehaze] { --tblr-primary-rgb: 115, 110, 185; --tblr-primary-fg: #fff; --tblr-link-color-rgb: 86, 75, 127; --glpi-mainmenu-bg: #353166; --glpi-helpdesk-header: hsl(246deg, 58%, 85%); --glpi-mainmenu-fg: #fff; --glpi-palette-color-1: #363268; --glpi-palette-color-2: #564b7f; --glpi-palette-color-3: #8783c2; --glpi-palette-color-4: #fff; --glpi-illustrations-gradient-1: hsl(245deg, 58%, 92%); --glpi-illustrations-gradient-2: hsl(245deg, 58%, 72%); --glpi-illustrations-gradient-3: hsl(245deg, 58%, 45%); } /*! * --------------------------------------------------------------------- * * GLPI - Gestionnaire Libre de Parc Informatique * * http://glpi-project.org * * @copyright 2015-2026 Teclib' and contributors. * @copyright 2003-2014 by the INDEPNET Development Team. * @licence https://www.gnu.org/licenses/gpl-3.0.html * * --------------------------------------------------------------------- * * LICENSE * * This file is part of GLPI. * * This program is free software: you can redistribute it and/or modify * it under the terms of the GNU General Public License as published by * the Free Software Foundation, either version 3 of the License, or * (at your option) any later version. * * This program is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU General Public License for more details. * * You should have received a copy of the GNU General Public License * along with this program. If not, see . * * --------------------------------------------------------------------- */ :root[data-glpi-theme=teclib] { --tblr-primary-rgb: 188, 218, 26; --tblr-primary-fg: #353b17; --tblr-link-color-rgb: 169, 88, 185; --glpi-mainmenu-bg: #a958b9; --glpi-helpdesk-header: hsl(291deg, 30%, 85%); --glpi-mainmenu-fg: #fff; --glpi-palette-color-1: #ba77c8; --glpi-palette-color-2: #8e21a1; --glpi-palette-color-3: #f1f1f2; --glpi-palette-color-4: #bcda1a; --glpi-illustrations-gradient-1: hsl(290deg, 38%, 92%); --glpi-illustrations-gradient-2: hsl(290deg, 38%, 72%); --glpi-illustrations-gradient-3: hsl(290deg, 38%, 42%); } /*! * --------------------------------------------------------------------- * * GLPI - Gestionnaire Libre de Parc Informatique * * http://glpi-project.org * * @copyright 2015-2026 Teclib' and contributors. * @copyright 2003-2014 by the INDEPNET Development Team. * @licence https://www.gnu.org/licenses/gpl-3.0.html * * --------------------------------------------------------------------- * * LICENSE * * This file is part of GLPI. * * This program is free software: you can redistribute it and/or modify * it under the terms of the GNU General Public License as published by * the Free Software Foundation, either version 3 of the License, or * (at your option) any later version. * * This program is distributed in the hope that it will be useful, * but WITHOUT ANY WARRANTY; without even the implied warranty of * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the * GNU General Public License for more details. * * You should have received a copy of the GNU General Public License * along with this program. If not, see . * * --------------------------------------------------------------------- */ :root[data-glpi-theme=vintage] { --tblr-primary-rgb: 249, 32, 29; --tblr-primary-fg: #fff; --tblr-link-color-rgb: 191, 8, 5; --glpi-mainmenu-bg: #064260; --glpi-helpdesk-header: hsl(201deg, 83%, 85%); --glpi-mainmenu-fg: #fff; --glpi-palette-color-1: #064260; --glpi-palette-color-2: #700618; --glpi-palette-color-3: #bf0805; --glpi-palette-color-4: #f2ef9f; --glpi-illustrations-gradient-1: hsl(200deg, 88%, 92%); --glpi-illustrations-gradient-2: hsl(200deg, 83%, 70%); --glpi-illustrations-gradient-3: hsl(200deg, 88%, 40%); } /*! * Tema MBL Claro */ :root[data-glpi-theme=mbl] { --tblr-primary-rgb: 0, 151, 57; --tblr-secondary: #6f7d7a; --tblr-link-color-rgb: 0, 121, 48; --tblr-badge-bg: #e6f4ec; --tblr-badge-color: #005c2b; --glpi-mainmenu-bg: #006b65; --glpi-mainmenu-fg: #ffffff; --glpi-helpdesk-header: #dff3e8; --glpi-search-bg: #ffffff; --glpi-search-fg: #32423d; --glpi-palette-color-1: #007f3d; --glpi-palette-color-2: #006b65; --glpi-palette-color-3: #8ed1b2; --glpi-palette-color-4: #e8f5ee; --glpi-illustrations-gradient-1: #f4fbf7; --glpi-illustrations-gradient-2: #dff3e8; --glpi-illustrations-gradient-3: #007f3d; } /* ========================= ESTILO ESTRUTURAL MBL ========================= */ :root[data-glpi-theme=mbl] body { background: #f4f7f6 !important; } /* Topo */ :root[data-glpi-theme=mbl] .navbar, :root[data-glpi-theme=mbl] header.navbar { background: rgba(255, 255, 255, 0.95) !important; backdrop-filter: blur(8px); border-bottom: 1px solid #dfe7e4 !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.04); } /* Menu lateral */ :root[data-glpi-theme=mbl] .navbar-vertical, :root[data-glpi-theme=mbl] .sidebar { background: linear-gradient(180deg, #006b65 0%, #007f3d 100%) !important; border-right: none !important; box-shadow: 4px 0 18px rgba(0, 0, 0, 0.08); } :root[data-glpi-theme=mbl] .navbar-vertical .nav-link, :root[data-glpi-theme=mbl] .sidebar .nav-link { border-radius: 14px !important; margin: 4px 10px !important; color: #fff !important; transition: all 0.2s ease; } :root[data-glpi-theme=mbl] .navbar-vertical .nav-link:hover, :root[data-glpi-theme=mbl] .sidebar .nav-link:hover, :root[data-glpi-theme=mbl] .navbar-vertical .nav-link.active, :root[data-glpi-theme=mbl] .sidebar .nav-link.active { background: rgba(255, 255, 255, 0.14) !important; color: #fff !important; } /* Conteúdo central */ :root[data-glpi-theme=mbl] .page-body, :root[data-glpi-theme=mbl] .page-wrapper, :root[data-glpi-theme=mbl] .card, :root[data-glpi-theme=mbl] .tab-content, :root[data-glpi-theme=mbl] .table-responsive, :root[data-glpi-theme=mbl] .ticket-timeline, :root[data-glpi-theme=mbl] .grid-stack-item-content { border-radius: 18px !important; } /* Cards */ :root[data-glpi-theme=mbl] .card, :root[data-glpi-theme=mbl] .grid-stack-item-content, :root[data-glpi-theme=mbl] .tile, :root[data-glpi-theme=mbl] .dashboard .card { background: #ffffff !important; border: 1px solid #e3ebe7 !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05) !important; border-radius: 18px !important; } /* Cabeçalhos de cards */ :root[data-glpi-theme=mbl] .card-header { border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; background: #ffffff !important; border-bottom: 1px solid #edf2f0 !important; } /* Botões */ :root[data-glpi-theme=mbl] .btn { border-radius: 14px !important; font-weight: 600 !important; } :root[data-glpi-theme=mbl] .btn-primary, :root[data-glpi-theme=mbl] .btn-outline-primary:hover { background: linear-gradient(180deg, #00b050 0%, #009739 100%) !important; border-color: #009739 !important; color: #fff !important; box-shadow: 0 6px 16px rgba(0, 151, 57, 0.18); } :root[data-glpi-theme=mbl] .btn-primary:hover { background: linear-gradient(180deg, #009e49 0%, #008532 100%) !important; border-color: #008532 !important; } /* Inputs e selects */ :root[data-glpi-theme=mbl] .form-control, :root[data-glpi-theme=mbl] .form-select, :root[data-glpi-theme=mbl] select, :root[data-glpi-theme=mbl] input[type=text], :root[data-glpi-theme=mbl] input[type=password], :root[data-glpi-theme=mbl] input[type=search], :root[data-glpi-theme=mbl] textarea { border-radius: 14px !important; border: 1px solid #d9e5df !important; background: #ffffff !important; box-shadow: none !important; } :root[data-glpi-theme=mbl] .form-control:focus, :root[data-glpi-theme=mbl] .form-select:focus, :root[data-glpi-theme=mbl] select:focus, :root[data-glpi-theme=mbl] input:focus, :root[data-glpi-theme=mbl] textarea:focus { border-color: #009739 !important; box-shadow: 0 0 0 3px rgba(0, 151, 57, 0.12) !important; } /* Campo de busca do topo */ :root[data-glpi-theme=mbl] .search-input, :root[data-glpi-theme=mbl] input[placeholder*=Pesquisar] { border-radius: 16px !important; background: #fff !important; } /* Abas */ :root[data-glpi-theme=mbl] .nav-tabs { border-bottom: none !important; gap: 6px; } :root[data-glpi-theme=mbl] .nav-tabs .nav-link { border-radius: 14px 14px 0 0 !important; border: 1px solid #e4ece8 !important; background: #f7faf8 !important; color: #44534d !important; } :root[data-glpi-theme=mbl] .nav-tabs .nav-link.active { background: #ffffff !important; color: #006b65 !important; font-weight: 700 !important; border-bottom-color: #ffffff !important; } /* Breadcrumb */ :root[data-glpi-theme=mbl] .breadcrumb { background: transparent !important; } /* Tabelas */ :root[data-glpi-theme=mbl] .table { border-radius: 16px !important; overflow: hidden !important; background: #fff !important; } :root[data-glpi-theme=mbl] .table thead th { background: #eef7f2 !important; color: #0c4d34 !important; border-bottom: 1px solid #dde9e3 !important; } :root[data-glpi-theme=mbl] .table tbody tr:hover { background: #f7fcf9 !important; } /* Badges */ :root[data-glpi-theme=mbl] .badge { border-radius: 999px !important; padding: 0.45em 0.75em !important; } /* Modal */ :root[data-glpi-theme=mbl] .modal-content { border-radius: 20px !important; border: none !important; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.12) !important; } /* Dashboard cards coloridos */ :root[data-glpi-theme=mbl] .dashboard .card, :root[data-glpi-theme=mbl] .dashboard .tile { border-radius: 20px !important; } /* Scrollbar opcional */ :root[data-glpi-theme=mbl] ::-webkit-scrollbar { width: 10px; height: 10px; } :root[data-glpi-theme=mbl] ::-webkit-scrollbar-track { background: #edf3f0; } :root[data-glpi-theme=mbl] ::-webkit-scrollbar-thumb { background: #b8cbc2; border-radius: 999px; } :root[data-glpi-theme=mbl] ::-webkit-scrollbar-thumb:hover { background: #009739; } /* ========================= FIX MBL - LISTAGENS GLPI Corrige telas como Chamados recorrentes ========================= */ /* Evita que tabelas/listagens fiquem cortadas ou sobrepostas */ :root[data-glpi-theme=mbl] .table-responsive, :root[data-glpi-theme=mbl] .search-results, :root[data-glpi-theme=mbl] .list-group, :root[data-glpi-theme=mbl] .tab_cadre_fixehov { overflow: visible !important; } /* Mantém a área da listagem arredondada sem quebrar a tabela */ :root[data-glpi-theme=mbl] .search_page .card, :root[data-glpi-theme=mbl] .search-page .card, :root[data-glpi-theme=mbl] .page-body .card { border-radius: 20px !important; } /* Corrige espaçamento interno de telas de listagem */ :root[data-glpi-theme=mbl] .search_page, :root[data-glpi-theme=mbl] .search-page, :root[data-glpi-theme=mbl] .list-search-container { padding-top: 0 !important; } /* Remove interferência do arredondamento direto na tabela */ :root[data-glpi-theme=mbl] .table { border-radius: 0 !important; overflow: visible !important; margin-bottom: 0 !important; } /* Deixa o cabeçalho da tabela estável */ :root[data-glpi-theme=mbl] .table thead, :root[data-glpi-theme=mbl] .table thead tr, :root[data-glpi-theme=mbl] .table thead th { position: relative !important; z-index: 2 !important; } /* Garante que as linhas não subam para baixo do cabeçalho */ :root[data-glpi-theme=mbl] .table tbody, :root[data-glpi-theme=mbl] .table tbody tr, :root[data-glpi-theme=mbl] .table tbody td { position: relative !important; z-index: 1 !important; } /* Altura mínima das linhas para evitar sobreposição */ :root[data-glpi-theme=mbl] .table tbody tr { min-height: 38px !important; } /* Células com respiro */ :root[data-glpi-theme=mbl] .table th, :root[data-glpi-theme=mbl] .table td { padding-top: 10px !important; padding-bottom: 10px !important; vertical-align: middle !important; } /* Barra superior de ações da listagem */ :root[data-glpi-theme=mbl] .search-header, :root[data-glpi-theme=mbl] .search-actions, :root[data-glpi-theme=mbl] .card-header { position: relative !important; z-index: 5 !important; } /* Checkboxes da listagem */ :root[data-glpi-theme=mbl] .table input[type=checkbox], :root[data-glpi-theme=mbl] input[type=checkbox].form-check-input { position: relative !important; z-index: 3 !important; } /* Paginação/rodapé da listagem */ :root[data-glpi-theme=mbl] .card-footer, :root[data-glpi-theme=mbl] .search-footer { border-bottom-left-radius: 20px !important; border-bottom-right-radius: 20px !important; background: #ffffff !important; } /* ========================================================== MBL Claro - Correção mínima de legibilidade em chamados Mantém o tema original e ajusta apenas conteúdo da timeline ========================================================== */ /* Card/conteúdo principal do chamado */ :root[data-glpi-theme=mbl] .timeline-item .card, :root[data-glpi-theme=mbl] .timeline-item .timeline-content, :root[data-glpi-theme=mbl] .timeline-item .content { background-color: #ffffff !important; color: #173b32 !important; border-color: #cfe5dc !important; } /* Corpo do e-mail/acompanhamento dentro da timeline */ :root[data-glpi-theme=mbl] .timeline-item .rich_text_container, :root[data-glpi-theme=mbl] .timeline-item .rich_text_container p, :root[data-glpi-theme=mbl] .timeline-item .rich_text_container div, :root[data-glpi-theme=mbl] .timeline-item .rich_text_container span, :root[data-glpi-theme=mbl] .timeline-item .rich_text_container li, :root[data-glpi-theme=mbl] .timeline-item .rich_text_container td, :root[data-glpi-theme=mbl] .timeline-item .rich_text_container th { color: #173b32 !important; } /* Título/assunto do chamado dentro da timeline */ :root[data-glpi-theme=mbl] .timeline-item h1, :root[data-glpi-theme=mbl] .timeline-item h2, :root[data-glpi-theme=mbl] .timeline-item h3, :root[data-glpi-theme=mbl] .timeline-item h4, :root[data-glpi-theme=mbl] .timeline-item h5, :root[data-glpi-theme=mbl] .timeline-item strong, :root[data-glpi-theme=mbl] .timeline-item b { color: #006b48 !important; } /* Textos auxiliares do card */ :root[data-glpi-theme=mbl] .timeline-item .text-muted, :root[data-glpi-theme=mbl] .timeline-item small { color: #527269 !important; } /* Links no corpo do chamado */ :root[data-glpi-theme=mbl] .timeline-item .rich_text_container a { color: #008f5d !important; } :root[data-glpi-theme=mbl] .timeline-item .rich_text_container a:hover { color: #004f35 !important; } /* Imagens e assinaturas do e-mail */ :root[data-glpi-theme=mbl] .timeline-item .rich_text_container img { opacity: 1 !important; filter: none !important; } /* ========================================================== MBL Claro - Fundo verde suave Reduz o excesso de branco sem alterar cards e formulários ========================================================== */ :root[data-glpi-theme=mbl] body, :root[data-glpi-theme=mbl] .page, :root[data-glpi-theme=mbl] .page-wrapper, :root[data-glpi-theme=mbl] .page-body { background-color: #f2fbf7 !important; } /* Área central do chamado */ :root[data-glpi-theme=mbl] .layout-fluid, :root[data-glpi-theme=mbl] .page-content, :root[data-glpi-theme=mbl] .content, :root[data-glpi-theme=mbl] main { background-color: #f2fbf7 !important; } /* Mantém cards, formulários e caixas brancos para leitura */ :root[data-glpi-theme=mbl] .card, :root[data-glpi-theme=mbl] .timeline-item .card, :root[data-glpi-theme=mbl] .timeline-content, :root[data-glpi-theme=mbl] .right-sidebar, :root[data-glpi-theme=mbl] .itil-sidebar, :root[data-glpi-theme=mbl] .page-aside, :root[data-glpi-theme=mbl] .form-control, :root[data-glpi-theme=mbl] .form-select, :root[data-glpi-theme=mbl] select, :root[data-glpi-theme=mbl] textarea, :root[data-glpi-theme=mbl] input { background-color: #ffffff !important; } /* Separadores e bordas mais suaves no fundo claro */ :root[data-glpi-theme=mbl] .card, :root[data-glpi-theme=mbl] .timeline-item .card, :root[data-glpi-theme=mbl] .right-sidebar, :root[data-glpi-theme=mbl] .page-aside { border-color: #cfe5dc !important; } /* ========================================================== MBL Claro - Fundo suave específico da tela de chamados Deixa a área interna menos branca e mais confortável ========================================================== */ /* Fundo principal da tela de chamado */ :root[data-glpi-theme=mbl] body:has(.timeline-item) .page, :root[data-glpi-theme=mbl] body:has(.timeline-item) .page-wrapper, :root[data-glpi-theme=mbl] body:has(.timeline-item) .page-body, :root[data-glpi-theme=mbl] body:has(.timeline-item) .page-content, :root[data-glpi-theme=mbl] body:has(.timeline-item) main, :root[data-glpi-theme=mbl] body:has(.timeline-item) .layout-fluid, :root[data-glpi-theme=mbl] body:has(.timeline-item) .content { background-color: #eaf8f1 !important; } /* Área central da timeline do chamado */ :root[data-glpi-theme=mbl] body:has(.timeline-item) .timeline, :root[data-glpi-theme=mbl] body:has(.timeline-item) .timeline-wrapper, :root[data-glpi-theme=mbl] body:has(.timeline-item) .timeline-list, :root[data-glpi-theme=mbl] body:has(.timeline-item) .itil-timeline, :root[data-glpi-theme=mbl] body:has(.timeline-item) .itil-main, :root[data-glpi-theme=mbl] body:has(.timeline-item) .itil-left-side { background-color: #eaf8f1 !important; } /* Card do chamado com verde quase branco, sem ficar branco puro */ :root[data-glpi-theme=mbl] body:has(.timeline-item) .timeline-item .card, :root[data-glpi-theme=mbl] body:has(.timeline-item) .timeline-content, :root[data-glpi-theme=mbl] body:has(.timeline-item) .timeline-item .content { background-color: #fbfffd !important; border-color: #b9dfd0 !important; color: #173b32 !important; box-shadow: 0 8px 22px rgba(0, 90, 60, 0.08) !important; } /* Corpo do texto do chamado */ :root[data-glpi-theme=mbl] body:has(.timeline-item) .timeline-item .rich_text_container, :root[data-glpi-theme=mbl] body:has(.timeline-item) .timeline-item .rich_text_container p, :root[data-glpi-theme=mbl] body:has(.timeline-item) .timeline-item .rich_text_container div, :root[data-glpi-theme=mbl] body:has(.timeline-item) .timeline-item .rich_text_container span { background-color: transparent !important; color: #173b32 !important; } /* Coluna lateral direita do chamado */ :root[data-glpi-theme=mbl] body:has(.timeline-item) .right-sidebar, :root[data-glpi-theme=mbl] body:has(.timeline-item) .itil-sidebar, :root[data-glpi-theme=mbl] body:has(.timeline-item) .page-aside { background-color: #f7fffb !important; border-color: #b9dfd0 !important; } /* Mantém campos brancos para leitura */ :root[data-glpi-theme=mbl] body:has(.timeline-item) input, :root[data-glpi-theme=mbl] body:has(.timeline-item) select, :root[data-glpi-theme=mbl] body:has(.timeline-item) textarea, :root[data-glpi-theme=mbl] body:has(.timeline-item) .form-control, :root[data-glpi-theme=mbl] body:has(.timeline-item) .form-select, :root[data-glpi-theme=mbl] body:has(.timeline-item) .select2-selection { background-color: #ffffff !important; color: #173b32 !important; border-color: #c7e5da !important; } /* Abas laterais do chamado */ :root[data-glpi-theme=mbl] body:has(.timeline-item) .list-group-item, :root[data-glpi-theme=mbl] body:has(.timeline-item) .nav-tabs .nav-link { background-color: #f7fffb !important; border-color: #c7e5da !important; color: #173b32 !important; } /* Aba ativa */ :root[data-glpi-theme=mbl] body:has(.timeline-item) .list-group-item.active, :root[data-glpi-theme=mbl] body:has(.timeline-item) .nav-tabs .nav-link.active { background-color: #e0f4eb !important; border-color: #008f5d !important; color: #006b48 !important; font-weight: 700 !important; } /* ========================================================== MBL Claro - Refinamento chamado Ajusta barra lateral direita e balão da mensagem ========================================================== */ /* Fundo geral da coluna direita do chamado */ :root[data-glpi-theme=mbl] body:has(.timeline-item) .right-sidebar, :root[data-glpi-theme=mbl] body:has(.timeline-item) .itil-sidebar, :root[data-glpi-theme=mbl] body:has(.timeline-item) .itil-right-side, :root[data-glpi-theme=mbl] body:has(.timeline-item) .ticket-sidebar, :root[data-glpi-theme=mbl] body:has(.timeline-item) .page-aside, :root[data-glpi-theme=mbl] body:has(.timeline-item) aside, :root[data-glpi-theme=mbl] body:has(.timeline-item) .card:has(.form-label), :root[data-glpi-theme=mbl] body:has(.timeline-item) .card:has(select), :root[data-glpi-theme=mbl] body:has(.timeline-item) .card:has(input) { background-color: #f4fbf8 !important; border-color: #b9dfd0 !important; color: #173b32 !important; } /* Seções da lateral direita: Chamado, Atores, Itens etc. */ :root[data-glpi-theme=mbl] body:has(.timeline-item) .right-sidebar .card-header, :root[data-glpi-theme=mbl] body:has(.timeline-item) .itil-sidebar .card-header, :root[data-glpi-theme=mbl] body:has(.timeline-item) .itil-right-side .card-header, :root[data-glpi-theme=mbl] body:has(.timeline-item) .ticket-sidebar .card-header, :root[data-glpi-theme=mbl] body:has(.timeline-item) .page-aside .card-header, :root[data-glpi-theme=mbl] body:has(.timeline-item) aside .card-header, :root[data-glpi-theme=mbl] body:has(.timeline-item) .accordion-header, :root[data-glpi-theme=mbl] body:has(.timeline-item) .accordion-button { background-color: #e0f4eb !important; border-color: #b9dfd0 !important; color: #006b48 !important; font-weight: 700 !important; } /* Corpo das seções da lateral */ :root[data-glpi-theme=mbl] body:has(.timeline-item) .right-sidebar .card-body, :root[data-glpi-theme=mbl] body:has(.timeline-item) .itil-sidebar .card-body, :root[data-glpi-theme=mbl] body:has(.timeline-item) .itil-right-side .card-body, :root[data-glpi-theme=mbl] body:has(.timeline-item) .ticket-sidebar .card-body, :root[data-glpi-theme=mbl] body:has(.timeline-item) .page-aside .card-body, :root[data-glpi-theme=mbl] body:has(.timeline-item) aside .card-body { background-color: #f7fffb !important; color: #173b32 !important; } /* Labels da lateral direita */ :root[data-glpi-theme=mbl] body:has(.timeline-item) .right-sidebar label, :root[data-glpi-theme=mbl] body:has(.timeline-item) .itil-sidebar label, :root[data-glpi-theme=mbl] body:has(.timeline-item) .itil-right-side label, :root[data-glpi-theme=mbl] body:has(.timeline-item) .ticket-sidebar label, :root[data-glpi-theme=mbl] body:has(.timeline-item) .page-aside label, :root[data-glpi-theme=mbl] body:has(.timeline-item) aside label, :root[data-glpi-theme=mbl] body:has(.timeline-item) .form-label { color: #315f52 !important; font-weight: 600 !important; } /* Campos da lateral direita */ :root[data-glpi-theme=mbl] body:has(.timeline-item) .right-sidebar input, :root[data-glpi-theme=mbl] body:has(.timeline-item) .right-sidebar select, :root[data-glpi-theme=mbl] body:has(.timeline-item) .right-sidebar textarea, :root[data-glpi-theme=mbl] body:has(.timeline-item) .itil-sidebar input, :root[data-glpi-theme=mbl] body:has(.timeline-item) .itil-sidebar select, :root[data-glpi-theme=mbl] body:has(.timeline-item) .itil-sidebar textarea, :root[data-glpi-theme=mbl] body:has(.timeline-item) .itil-right-side input, :root[data-glpi-theme=mbl] body:has(.timeline-item) .itil-right-side select, :root[data-glpi-theme=mbl] body:has(.timeline-item) .itil-right-side textarea, :root[data-glpi-theme=mbl] body:has(.timeline-item) .page-aside input, :root[data-glpi-theme=mbl] body:has(.timeline-item) .page-aside select, :root[data-glpi-theme=mbl] body:has(.timeline-item) .page-aside textarea, :root[data-glpi-theme=mbl] body:has(.timeline-item) aside input, :root[data-glpi-theme=mbl] body:has(.timeline-item) aside select, :root[data-glpi-theme=mbl] body:has(.timeline-item) aside textarea, :root[data-glpi-theme=mbl] body:has(.timeline-item) .select2-selection { background-color: #ffffff !important; color: #173b32 !important; border-color: #a9d9c6 !important; } /* Foco dos campos */ :root[data-glpi-theme=mbl] body:has(.timeline-item) input:focus, :root[data-glpi-theme=mbl] body:has(.timeline-item) select:focus, :root[data-glpi-theme=mbl] body:has(.timeline-item) textarea:focus, :root[data-glpi-theme=mbl] body:has(.timeline-item) .select2-selection:focus { border-color: #008f5d !important; box-shadow: 0 0 0 3px rgba(0, 143, 93, 0.12) !important; } /* Balão/card da mensagem do chamado */ :root[data-glpi-theme=mbl] body:has(.timeline-item) .timeline-item .card, :root[data-glpi-theme=mbl] body:has(.timeline-item) .timeline-content, :root[data-glpi-theme=mbl] body:has(.timeline-item) .timeline-item .content { background-color: #f9fffc !important; border: 1px solid #a9d9c6 !important; color: #173b32 !important; border-radius: 14px !important; box-shadow: 0 10px 26px rgba(0, 90, 60, 0.1) !important; } /* Cabeçalho/metadados do balão */ :root[data-glpi-theme=mbl] body:has(.timeline-item) .timeline-item .card-header, :root[data-glpi-theme=mbl] body:has(.timeline-item) .timeline-item .timeline-header { background-color: #eefaf4 !important; border-bottom: 1px solid #b9dfd0 !important; color: #315f52 !important; border-radius: 14px 14px 0 0 !important; } /* Corpo do balão */ :root[data-glpi-theme=mbl] body:has(.timeline-item) .timeline-item .card-body, :root[data-glpi-theme=mbl] body:has(.timeline-item) .timeline-item .rich_text_container { background-color: #f9fffc !important; color: #173b32 !important; } /* Linha divisória dentro do balão */ :root[data-glpi-theme=mbl] body:has(.timeline-item) .timeline-item hr, :root[data-glpi-theme=mbl] body:has(.timeline-item) .timeline-item .border-top, :root[data-glpi-theme=mbl] body:has(.timeline-item) .timeline-item .border-bottom { border-color: #c7e5da !important; } /* Avatar/iniciais do autor na timeline */ :root[data-glpi-theme=mbl] body:has(.timeline-item) .timeline-item .avatar, :root[data-glpi-theme=mbl] body:has(.timeline-item) .timeline-item .timeline-badge { background-color: #7ee7c6 !important; color: #005b3f !important; border: 1px solid #00a878 !important; } /* Badges/chips dentro do chamado */ :root[data-glpi-theme=mbl] body:has(.timeline-item) .badge, :root[data-glpi-theme=mbl] body:has(.timeline-item) .timeline-item .badge, :root[data-glpi-theme=mbl] body:has(.timeline-item) .timeline-item .tag { background-color: #e0f4eb !important; color: #006b48 !important; border-color: #b9dfd0 !important; } /* ========================================================== MBL Claro - Barra lateral esquerda refinada Ajusta sidebar para combinar com fundo verde suave do tema ========================================================== */ /* Fundo principal da sidebar */ :root[data-glpi-theme=mbl] .navbar-vertical, :root[data-glpi-theme=mbl] aside.navbar-vertical { background: linear-gradient(180deg, #07513f 0%, #0b6a4a 48%, #0f7c52 100%) !important; border-right: 1px solid #7fcdb1 !important; box-shadow: 6px 0 22px rgba(0, 80, 55, 0.18) !important; } /* Remove fundos internos conflitantes */ :root[data-glpi-theme=mbl] .navbar-vertical .navbar-collapse, :root[data-glpi-theme=mbl] .navbar-vertical .navbar-nav, :root[data-glpi-theme=mbl] .navbar-vertical .navbar-brand, :root[data-glpi-theme=mbl] .navbar-vertical .container-fluid { background: transparent !important; } /* Área da logo */ :root[data-glpi-theme=mbl] .navbar-vertical .navbar-brand { padding-top: 14px !important; padding-bottom: 14px !important; border-bottom: 1px solid rgba(255, 255, 255, 0.18) !important; } /* Links principais */ :root[data-glpi-theme=mbl] .navbar-vertical .nav-link { color: #e8fff6 !important; border-radius: 10px !important; margin: 2px 8px !important; padding: 9px 12px !important; border: 1px solid transparent !important; transition: all 0.16s ease-in-out !important; font-weight: 600 !important; } /* Ícones */ :root[data-glpi-theme=mbl] .navbar-vertical .nav-link i, :root[data-glpi-theme=mbl] .navbar-vertical .nav-link svg, :root[data-glpi-theme=mbl] .navbar-vertical .nav-link .nav-link-icon { color: #bff5e2 !important; opacity: 0.95 !important; } /* Hover */ :root[data-glpi-theme=mbl] .navbar-vertical .nav-link:hover { background: rgba(255, 255, 255, 0.13) !important; border-color: rgba(255, 255, 255, 0.2) !important; color: #ffffff !important; transform: translateX(2px); } /* Item principal aberto/ativo */ :root[data-glpi-theme=mbl] .navbar-vertical .nav-link.active, :root[data-glpi-theme=mbl] .navbar-vertical .nav-item.active > .nav-link, :root[data-glpi-theme=mbl] .navbar-vertical .nav-item.show > .nav-link, :root[data-glpi-theme=mbl] .navbar-vertical .nav-item.dropdown.show > .nav-link { background: linear-gradient(90deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.12)) !important; border-color: rgba(255, 255, 255, 0.3) !important; color: #ffffff !important; font-weight: 700 !important; box-shadow: inset 3px 0 0 #bff5e2, 0 4px 12px rgba(0, 0, 0, 0.12) !important; } /* Ícones do ativo */ :root[data-glpi-theme=mbl] .navbar-vertical .nav-link.active i, :root[data-glpi-theme=mbl] .navbar-vertical .nav-link.active svg, :root[data-glpi-theme=mbl] .navbar-vertical .nav-item.active > .nav-link i, :root[data-glpi-theme=mbl] .navbar-vertical .nav-item.active > .nav-link svg, :root[data-glpi-theme=mbl] .navbar-vertical .nav-item.show > .nav-link i, :root[data-glpi-theme=mbl] .navbar-vertical .nav-item.show > .nav-link svg { color: #ffffff !important; opacity: 1 !important; } /* Submenu */ :root[data-glpi-theme=mbl] .navbar-vertical .dropdown-menu, :root[data-glpi-theme=mbl] .navbar-vertical .nav-item .dropdown-menu, :root[data-glpi-theme=mbl] .navbar-vertical .navbar-nav .dropdown-menu { background: rgba(3, 61, 45, 0.42) !important; border: 1px solid rgba(255, 255, 255, 0.16) !important; border-radius: 12px !important; margin: 4px 8px 8px 8px !important; padding: 6px !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04) !important; } /* Links do submenu */ :root[data-glpi-theme=mbl] .navbar-vertical .dropdown-menu .dropdown-item, :root[data-glpi-theme=mbl] .navbar-vertical .dropdown-menu .nav-link, :root[data-glpi-theme=mbl] .navbar-vertical .navbar-nav .dropdown-menu .nav-link { color: #e4fff4 !important; border-radius: 8px !important; margin: 1px 0 !important; padding: 8px 10px !important; background: transparent !important; font-weight: 600 !important; } /* Hover submenu */ :root[data-glpi-theme=mbl] .navbar-vertical .dropdown-menu .dropdown-item:hover, :root[data-glpi-theme=mbl] .navbar-vertical .dropdown-menu .nav-link:hover { background: rgba(255, 255, 255, 0.16) !important; color: #ffffff !important; } /* Item ativo dentro do submenu */ :root[data-glpi-theme=mbl] .navbar-vertical .dropdown-menu .dropdown-item.active, :root[data-glpi-theme=mbl] .navbar-vertical .dropdown-menu .nav-link.active, :root[data-glpi-theme=mbl] .navbar-vertical .dropdown-menu .nav-item.active > .nav-link { background: #eaf8f1 !important; color: #07513f !important; font-weight: 800 !important; border-left: 4px solid #00a878 !important; box-shadow: 0 2px 8px rgba(0, 80, 55, 0.16) !important; } /* Ícones do submenu ativo */ :root[data-glpi-theme=mbl] .navbar-vertical .dropdown-menu .nav-link.active i, :root[data-glpi-theme=mbl] .navbar-vertical .dropdown-menu .nav-link.active svg, :root[data-glpi-theme=mbl] .navbar-vertical .dropdown-menu .dropdown-item.active i, :root[data-glpi-theme=mbl] .navbar-vertical .dropdown-menu .dropdown-item.active svg { color: #07513f !important; } /* Botão "Encontrar um menu" */ :root[data-glpi-theme=mbl] .navbar-vertical .btn, :root[data-glpi-theme=mbl] .navbar-vertical button { background: rgba(255, 255, 255, 0.14) !important; border: 1px solid rgba(255, 255, 255, 0.22) !important; color: #ffffff !important; border-radius: 999px !important; font-weight: 700 !important; } /* Botão recolher menu */ :root[data-glpi-theme=mbl] .navbar-vertical .navbar-toggler, :root[data-glpi-theme=mbl] .navbar-vertical [class*=collapse] button { background: rgba(255, 255, 255, 0.16) !important; border-color: rgba(255, 255, 255, 0.24) !important; color: #ffffff !important; } /* Setas dos menus expansíveis */ :root[data-glpi-theme=mbl] .navbar-vertical .dropdown-toggle:after { border-color: #dffff2 !important; opacity: 0.95 !important; } /* Separação entre grupos */ :root[data-glpi-theme=mbl] .navbar-vertical .nav-item { margin-bottom: 1px !important; } /* Scrollbar da sidebar */ :root[data-glpi-theme=mbl] .navbar-vertical ::-webkit-scrollbar { width: 7px; } :root[data-glpi-theme=mbl] .navbar-vertical ::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.12); } :root[data-glpi-theme=mbl] .navbar-vertical ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.32); border-radius: 999px; } /* ========================================================== MBL Claro - Barra lateral esquerda refinada Ajusta sidebar para combinar com fundo verde suave do tema ========================================================== */ /* Fundo principal da sidebar */ :root[data-glpi-theme=mbl] .navbar-vertical, :root[data-glpi-theme=mbl] aside.navbar-vertical { background: linear-gradient(180deg, #07513f 0%, #0b6a4a 48%, #0f7c52 100%) !important; border-right: 1px solid #7fcdb1 !important; box-shadow: 6px 0 22px rgba(0, 80, 55, 0.18) !important; } /* Remove fundos internos conflitantes */ :root[data-glpi-theme=mbl] .navbar-vertical .navbar-collapse, :root[data-glpi-theme=mbl] .navbar-vertical .navbar-nav, :root[data-glpi-theme=mbl] .navbar-vertical .navbar-brand, :root[data-glpi-theme=mbl] .navbar-vertical .container-fluid { background: transparent !important; } /* Área da logo */ :root[data-glpi-theme=mbl] .navbar-vertical .navbar-brand { padding-top: 14px !important; padding-bottom: 14px !important; border-bottom: 1px solid rgba(255, 255, 255, 0.18) !important; } /* Links principais */ :root[data-glpi-theme=mbl] .navbar-vertical .nav-link { color: #e8fff6 !important; border-radius: 10px !important; margin: 2px 8px !important; padding: 9px 12px !important; border: 1px solid transparent !important; transition: all 0.16s ease-in-out !important; font-weight: 600 !important; } /* Ícones */ :root[data-glpi-theme=mbl] .navbar-vertical .nav-link i, :root[data-glpi-theme=mbl] .navbar-vertical .nav-link svg, :root[data-glpi-theme=mbl] .navbar-vertical .nav-link .nav-link-icon { color: #bff5e2 !important; opacity: 0.95 !important; } /* Hover */ :root[data-glpi-theme=mbl] .navbar-vertical .nav-link:hover { background: rgba(255, 255, 255, 0.13) !important; border-color: rgba(255, 255, 255, 0.2) !important; color: #ffffff !important; transform: translateX(2px); } /* Item principal aberto/ativo */ :root[data-glpi-theme=mbl] .navbar-vertical .nav-link.active, :root[data-glpi-theme=mbl] .navbar-vertical .nav-item.active > .nav-link, :root[data-glpi-theme=mbl] .navbar-vertical .nav-item.show > .nav-link, :root[data-glpi-theme=mbl] .navbar-vertical .nav-item.dropdown.show > .nav-link { background: linear-gradient(90deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0.12)) !important; border-color: rgba(255, 255, 255, 0.3) !important; color: #ffffff !important; font-weight: 700 !important; box-shadow: inset 3px 0 0 #bff5e2, 0 4px 12px rgba(0, 0, 0, 0.12) !important; } /* Ícones do ativo */ :root[data-glpi-theme=mbl] .navbar-vertical .nav-link.active i, :root[data-glpi-theme=mbl] .navbar-vertical .nav-link.active svg, :root[data-glpi-theme=mbl] .navbar-vertical .nav-item.active > .nav-link i, :root[data-glpi-theme=mbl] .navbar-vertical .nav-item.active > .nav-link svg, :root[data-glpi-theme=mbl] .navbar-vertical .nav-item.show > .nav-link i, :root[data-glpi-theme=mbl] .navbar-vertical .nav-item.show > .nav-link svg { color: #ffffff !important; opacity: 1 !important; } /* Submenu */ :root[data-glpi-theme=mbl] .navbar-vertical .dropdown-menu, :root[data-glpi-theme=mbl] .navbar-vertical .nav-item .dropdown-menu, :root[data-glpi-theme=mbl] .navbar-vertical .navbar-nav .dropdown-menu { background: rgba(3, 61, 45, 0.42) !important; border: 1px solid rgba(255, 255, 255, 0.16) !important; border-radius: 12px !important; margin: 4px 8px 8px 8px !important; padding: 6px !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04) !important; } /* Links do submenu */ :root[data-glpi-theme=mbl] .navbar-vertical .dropdown-menu .dropdown-item, :root[data-glpi-theme=mbl] .navbar-vertical .dropdown-menu .nav-link, :root[data-glpi-theme=mbl] .navbar-vertical .navbar-nav .dropdown-menu .nav-link { color: #e4fff4 !important; border-radius: 8px !important; margin: 1px 0 !important; padding: 8px 10px !important; background: transparent !important; font-weight: 600 !important; } /* Hover submenu */ :root[data-glpi-theme=mbl] .navbar-vertical .dropdown-menu .dropdown-item:hover, :root[data-glpi-theme=mbl] .navbar-vertical .dropdown-menu .nav-link:hover { background: rgba(255, 255, 255, 0.16) !important; color: #ffffff !important; } /* Item ativo dentro do submenu */ :root[data-glpi-theme=mbl] .navbar-vertical .dropdown-menu .dropdown-item.active, :root[data-glpi-theme=mbl] .navbar-vertical .dropdown-menu .nav-link.active, :root[data-glpi-theme=mbl] .navbar-vertical .dropdown-menu .nav-item.active > .nav-link { background: #eaf8f1 !important; color: #07513f !important; font-weight: 800 !important; border-left: 4px solid #00a878 !important; box-shadow: 0 2px 8px rgba(0, 80, 55, 0.16) !important; } /* Ícones do submenu ativo */ :root[data-glpi-theme=mbl] .navbar-vertical .dropdown-menu .nav-link.active i, :root[data-glpi-theme=mbl] .navbar-vertical .dropdown-menu .nav-link.active svg, :root[data-glpi-theme=mbl] .navbar-vertical .dropdown-menu .dropdown-item.active i, :root[data-glpi-theme=mbl] .navbar-vertical .dropdown-menu .dropdown-item.active svg { color: #07513f !important; } /* Botão "Encontrar um menu" */ :root[data-glpi-theme=mbl] .navbar-vertical .btn, :root[data-glpi-theme=mbl] .navbar-vertical button { background: rgba(255, 255, 255, 0.14) !important; border: 1px solid rgba(255, 255, 255, 0.22) !important; color: #ffffff !important; border-radius: 999px !important; font-weight: 700 !important; } /* Botão recolher menu */ :root[data-glpi-theme=mbl] .navbar-vertical .navbar-toggler, :root[data-glpi-theme=mbl] .navbar-vertical [class*=collapse] button { background: rgba(255, 255, 255, 0.16) !important; border-color: rgba(255, 255, 255, 0.24) !important; color: #ffffff !important; } /* Setas dos menus expansíveis */ :root[data-glpi-theme=mbl] .navbar-vertical .dropdown-toggle:after { border-color: #dffff2 !important; opacity: 0.95 !important; } /* Separação entre grupos */ :root[data-glpi-theme=mbl] .navbar-vertical .nav-item { margin-bottom: 1px !important; } /* Scrollbar da sidebar */ :root[data-glpi-theme=mbl] .navbar-vertical ::-webkit-scrollbar { width: 7px; } :root[data-glpi-theme=mbl] .navbar-vertical ::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.12); } :root[data-glpi-theme=mbl] .navbar-vertical ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.32); border-radius: 999px; } /*! * Tema MBL-Escuro - Grupo MBL * Arquivo limpo para GLPI * Substitui duplicidades do antigo _mbl_escuro.scss */ :root[data-glpi-theme=mbl_escuro] { /* Core GLPI / Tabler */ --tblr-primary-rgb: 0, 202, 111; --tblr-secondary: #8fa8a1; --tblr-link-color-rgb: 0, 214, 118; --tblr-body-bg: #071512; --tblr-body-color: #e8f6f1; --tblr-bg-surface: #0b211c; --tblr-bg-surface-secondary: #071c18; --tblr-card-bg: #0b211c; --tblr-border-color: #16483d; --tblr-border-color-translucent: rgba(22, 72, 61, .85); --tblr-badge-bg: #073d2d; --tblr-badge-color: #8ff0c2; --glpi-mainmenu-bg: #002f28; --glpi-mainmenu-fg: #ffffff; --glpi-helpdesk-header: #003d32; --glpi-search-bg: #082d27; --glpi-search-fg: #dff8ef; --glpi-palette-color-1: #00c46a; --glpi-palette-color-2: #009739; --glpi-palette-color-3: #006b65; --glpi-palette-color-4: #001f1a; --glpi-illustrations-gradient-1: #001f1a; --glpi-illustrations-gradient-2: #003d32; --glpi-illustrations-gradient-3: #00c46a; } /* ===================================================== BASE GERAL ===================================================== */ :root[data-glpi-theme=mbl_escuro] body, :root[data-glpi-theme=mbl_escuro] .page, :root[data-glpi-theme=mbl_escuro] .page-wrapper, :root[data-glpi-theme=mbl_escuro] .page-body { background: #071512 !important; color: #e8f6f1 !important; } :root[data-glpi-theme=mbl_escuro] a { color: #38e899 !important; } :root[data-glpi-theme=mbl_escuro] a:hover { color: #7ff2bd !important; } :root[data-glpi-theme=mbl_escuro] hr { border-color: #16483d !important; opacity: 1 !important; } /* ===================================================== TOPO E MENU ===================================================== */ :root[data-glpi-theme=mbl_escuro] .navbar, :root[data-glpi-theme=mbl_escuro] header.navbar { background: rgba(5, 24, 20, 0.96) !important; border-bottom: 1px solid #123d34 !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35) !important; } :root[data-glpi-theme=mbl_escuro] .navbar-vertical, :root[data-glpi-theme=mbl_escuro] .sidebar { background: linear-gradient(180deg, #002f28 0%, #005f3b 55%, #007f3d 100%) !important; border-right: none !important; box-shadow: 4px 0 22px rgba(0, 0, 0, 0.38) !important; } :root[data-glpi-theme=mbl_escuro] .navbar-vertical .nav-link, :root[data-glpi-theme=mbl_escuro] .sidebar .nav-link { border-radius: 14px !important; margin: 4px 10px !important; color: #f4fff9 !important; transition: all 0.2s ease; } :root[data-glpi-theme=mbl_escuro] .navbar-vertical .nav-link:hover, :root[data-glpi-theme=mbl_escuro] .sidebar .nav-link:hover, :root[data-glpi-theme=mbl_escuro] .navbar-vertical .nav-link.active, :root[data-glpi-theme=mbl_escuro] .sidebar .nav-link.active { background: rgba(0, 214, 118, 0.2) !important; color: #ffffff !important; } /* ===================================================== CARDS, PAINÉIS E FORMULÁRIOS ===================================================== */ :root[data-glpi-theme=mbl_escuro] .card, :root[data-glpi-theme=mbl_escuro] .grid-stack-item-content, :root[data-glpi-theme=mbl_escuro] .tile, :root[data-glpi-theme=mbl_escuro] .dashboard .card, :root[data-glpi-theme=mbl_escuro] .tab-content { background: #0b211c !important; border: 1px solid #16483d !important; color: #e8f6f1 !important; border-radius: 18px !important; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.32) !important; } :root[data-glpi-theme=mbl_escuro] .card-header { background: #0d2a23 !important; border-bottom: 1px solid #16483d !important; color: #f4fff9 !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; } :root[data-glpi-theme=mbl_escuro] .card-footer, :root[data-glpi-theme=mbl_escuro] .search-footer { background: #0b211c !important; border-top: 1px solid #16483d !important; color: #e8f6f1 !important; } :root[data-glpi-theme=mbl_escuro] h1, :root[data-glpi-theme=mbl_escuro] h2, :root[data-glpi-theme=mbl_escuro] h3, :root[data-glpi-theme=mbl_escuro] h4, :root[data-glpi-theme=mbl_escuro] h5, :root[data-glpi-theme=mbl_escuro] .card-title { color: #f4fff9 !important; } :root[data-glpi-theme=mbl_escuro] label, :root[data-glpi-theme=mbl_escuro] .form-label, :root[data-glpi-theme=mbl_escuro] .text-muted, :root[data-glpi-theme=mbl_escuro] .breadcrumb, :root[data-glpi-theme=mbl_escuro] .breadcrumb a { color: #b8d6cd !important; } :root[data-glpi-theme=mbl_escuro] .form-control, :root[data-glpi-theme=mbl_escuro] .form-select, :root[data-glpi-theme=mbl_escuro] select, :root[data-glpi-theme=mbl_escuro] input[type=text], :root[data-glpi-theme=mbl_escuro] input[type=password], :root[data-glpi-theme=mbl_escuro] input[type=search], :root[data-glpi-theme=mbl_escuro] textarea { background: #071c18 !important; border: 1px solid #1b5a4c !important; color: #f4fff9 !important; border-radius: 14px !important; box-shadow: none !important; } :root[data-glpi-theme=mbl_escuro] input::placeholder, :root[data-glpi-theme=mbl_escuro] textarea::placeholder { color: #8fb5aa !important; } :root[data-glpi-theme=mbl_escuro] .form-control:focus, :root[data-glpi-theme=mbl_escuro] .form-select:focus, :root[data-glpi-theme=mbl_escuro] select:focus, :root[data-glpi-theme=mbl_escuro] input:focus, :root[data-glpi-theme=mbl_escuro] textarea:focus { border-color: #00d67a !important; box-shadow: 0 0 0 3px rgba(0, 214, 118, 0.18) !important; } /* ===================================================== BOTÕES ===================================================== */ :root[data-glpi-theme=mbl_escuro] .btn { border-radius: 14px !important; font-weight: 700 !important; border-color: #1e5c4e !important; } :root[data-glpi-theme=mbl_escuro] .btn-primary, :root[data-glpi-theme=mbl_escuro] .btn-outline-primary:hover { background: linear-gradient(180deg, #00d67a 0%, #009739 100%) !important; border-color: #00c46a !important; color: #ffffff !important; box-shadow: 0 8px 20px rgba(0, 214, 118, 0.24) !important; } :root[data-glpi-theme=mbl_escuro] .btn-primary:hover { background: linear-gradient(180deg, #00ef86 0%, #00a84b 100%) !important; border-color: #00ef86 !important; } :root[data-glpi-theme=mbl_escuro] .btn-outline-secondary, :root[data-glpi-theme=mbl_escuro] .btn-secondary { background: #0b211c !important; border-color: #1e5c4e !important; color: #e8f6f1 !important; } /* ===================================================== ABAS, DROPDOWNS, BADGES E MODAIS ===================================================== */ :root[data-glpi-theme=mbl_escuro] .nav-tabs { border-bottom: none !important; gap: 6px; } :root[data-glpi-theme=mbl_escuro] .nav-tabs .nav-link { background: #0a1e1a !important; color: #b8d6cd !important; border: 1px solid #16483d !important; border-radius: 14px 14px 0 0 !important; } :root[data-glpi-theme=mbl_escuro] .nav-tabs .nav-link.active { background: #0b211c !important; color: #00d67a !important; font-weight: 700 !important; border-bottom-color: #0b211c !important; } :root[data-glpi-theme=mbl_escuro] .badge { background: #073d2d !important; color: #8ff0c2 !important; border-radius: 999px !important; padding: 0.45em 0.75em !important; } :root[data-glpi-theme=mbl_escuro] .dropdown-menu { background: #0b211c !important; border: 1px solid #16483d !important; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.42) !important; border-radius: 16px !important; } :root[data-glpi-theme=mbl_escuro] .dropdown-item { color: #e8f6f1 !important; } :root[data-glpi-theme=mbl_escuro] .dropdown-item:hover { background: #12382f !important; color: #ffffff !important; } :root[data-glpi-theme=mbl_escuro] .modal-content { background: #0b211c !important; color: #e8f6f1 !important; border: 1px solid #16483d !important; border-radius: 20px !important; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.35) !important; } /* ===================================================== TABELAS / LISTAGENS ===================================================== */ :root[data-glpi-theme=mbl_escuro] .table-responsive, :root[data-glpi-theme=mbl_escuro] .search-results, :root[data-glpi-theme=mbl_escuro] .list-group, :root[data-glpi-theme=mbl_escuro] .tab_cadre_fixehov { overflow: visible !important; } :root[data-glpi-theme=mbl_escuro] .table { background: #0b211c !important; color: #e8f6f1 !important; border-radius: 0 !important; overflow: visible !important; margin-bottom: 0 !important; border-collapse: collapse !important; } :root[data-glpi-theme=mbl_escuro] table.table thead, :root[data-glpi-theme=mbl_escuro] table.table thead tr, :root[data-glpi-theme=mbl_escuro] table.table thead th { position: static !important; top: auto !important; bottom: auto !important; transform: none !important; } :root[data-glpi-theme=mbl_escuro] table.table thead th { background: #10372f !important; color: #c7f7e2 !important; border-bottom: 1px solid #1d5c4d !important; height: auto !important; min-height: 0 !important; padding: 12px 16px !important; vertical-align: middle !important; line-height: 1.3 !important; } :root[data-glpi-theme=mbl_escuro] table.table tbody { display: table-row-group !important; } :root[data-glpi-theme=mbl_escuro] table.table tbody tr { background: #0b211c !important; color: #e8f6f1 !important; display: table-row !important; height: auto !important; } :root[data-glpi-theme=mbl_escuro] table.table tbody tr:hover { background: #12382f !important; } :root[data-glpi-theme=mbl_escuro] table.table td, :root[data-glpi-theme=mbl_escuro] table.table th { border-color: #16483d !important; } :root[data-glpi-theme=mbl_escuro] table.table tbody td { display: table-cell !important; padding: 12px 16px !important; vertical-align: middle !important; } /* ===================================================== AVATAR ===================================================== */ :root[data-glpi-theme=mbl_escuro] .avatar { color: #ffffff !important; border: 1px solid rgba(0, 214, 118, 0.45) !important; font-weight: 700 !important; text-shadow: none !important; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; } :root[data-glpi-theme=mbl_escuro] .avatar:not([style*=background-image]):not([style*="background:"]) { background: linear-gradient(135deg, #00c46a 0%, #007f3d 100%) !important; } :root[data-glpi-theme=mbl_escuro] .avatar span, :root[data-glpi-theme=mbl_escuro] .avatar-initials, :root[data-glpi-theme=mbl_escuro] .avatar-title { color: #ffffff !important; font-weight: 700 !important; } :root[data-glpi-theme=mbl_escuro] .avatar img { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: inherit !important; } /* ===================================================== DASHBOARD CLEAN ===================================================== */ :root[data-glpi-theme=mbl_escuro] .dashboard, :root[data-glpi-theme=mbl_escuro] .grid-stack { background: radial-gradient(circle at top left, rgba(0, 151, 57, 0.08), transparent 28%), linear-gradient(180deg, #06110f 0%, #050b0a 100%) !important; } :root[data-glpi-theme=mbl_escuro] .grid-stack { padding: 20px !important; } :root[data-glpi-theme=mbl_escuro] .dashboard .card, :root[data-glpi-theme=mbl_escuro] .dashboard-card, :root[data-glpi-theme=mbl_escuro] .grid-stack-item-content, :root[data-glpi-theme=mbl_escuro] .dashboard-widget { background: linear-gradient(145deg, #111820 0%, #0b1118 100%) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 26px !important; box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34) !important; overflow: hidden !important; } :root[data-glpi-theme=mbl_escuro] .dashboard .card:hover, :root[data-glpi-theme=mbl_escuro] .dashboard-card:hover, :root[data-glpi-theme=mbl_escuro] .grid-stack-item-content:hover, :root[data-glpi-theme=mbl_escuro] .dashboard-widget:hover { border-color: rgba(0, 214, 118, 0.32) !important; box-shadow: 0 22px 50px rgba(0, 0, 0, 0.44), 0 0 20px rgba(0, 214, 118, 0.06) !important; } :root[data-glpi-theme=mbl_escuro] .dashboard .card-header, :root[data-glpi-theme=mbl_escuro] .dashboard-card .card-header, :root[data-glpi-theme=mbl_escuro] .grid-stack-item-content .card-header { background: transparent !important; border-bottom: 0 !important; padding: 22px 24px 8px 24px !important; } :root[data-glpi-theme=mbl_escuro] .dashboard .card-title, :root[data-glpi-theme=mbl_escuro] .dashboard-card-title, :root[data-glpi-theme=mbl_escuro] .grid-stack-item-content h2, :root[data-glpi-theme=mbl_escuro] .grid-stack-item-content h3, :root[data-glpi-theme=mbl_escuro] .grid-stack-item-content h4 { color: #ffffff !important; font-size: 1.05rem !important; font-weight: 800 !important; letter-spacing: -0.02em !important; } :root[data-glpi-theme=mbl_escuro] .dashboard .display-1, :root[data-glpi-theme=mbl_escuro] .dashboard .display-2, :root[data-glpi-theme=mbl_escuro] .dashboard .display-3, :root[data-glpi-theme=mbl_escuro] .dashboard .display-4, :root[data-glpi-theme=mbl_escuro] .dashboard .big-number, :root[data-glpi-theme=mbl_escuro] .grid-stack-item-content .big-number { color: #ffffff !important; font-weight: 900 !important; letter-spacing: -0.04em !important; } :root[data-glpi-theme=mbl_escuro] .dashboard small, :root[data-glpi-theme=mbl_escuro] .dashboard .text-muted, :root[data-glpi-theme=mbl_escuro] .grid-stack-item-content small { color: #8e98a8 !important; font-weight: 600 !important; } :root[data-glpi-theme=mbl_escuro] .dashboard .card i, :root[data-glpi-theme=mbl_escuro] .dashboard .ti, :root[data-glpi-theme=mbl_escuro] .dashboard .fas, :root[data-glpi-theme=mbl_escuro] .dashboard .far, :root[data-glpi-theme=mbl_escuro] .dashboard svg { color: #00d67a !important; filter: drop-shadow(0 0 12px rgba(0, 214, 118, 0.24)); } /* ===================================================== FIX RODAPÉ / BARRA INFERIOR DO CHAMADO ===================================================== */ /* Importante: As linhas brancas vinham de fundo/borda herdados por variáveis Tabler e por wrappers da timeline. Aqui removemos a borda branca e forçamos fundo escuro somente na área de ticket/timeline. */ :root[data-glpi-theme=mbl_escuro] .itil-object, :root[data-glpi-theme=mbl_escuro] .ticket-timeline, :root[data-glpi-theme=mbl_escuro] .timeline { background-color: #071512 !important; border-color: #16483d !important; } :root[data-glpi-theme=mbl_escuro] .itil-object .timeline-buttons, :root[data-glpi-theme=mbl_escuro] .ticket-timeline .timeline-buttons, :root[data-glpi-theme=mbl_escuro] .timeline-buttons, :root[data-glpi-theme=mbl_escuro] .timeline-footer, :root[data-glpi-theme=mbl_escuro] .itil-footer, :root[data-glpi-theme=mbl_escuro] .itil-object-footer, :root[data-glpi-theme=mbl_escuro] .ticket-footer, :root[data-glpi-theme=mbl_escuro] .sticked-footer, :root[data-glpi-theme=mbl_escuro] .sticky-footer, :root[data-glpi-theme=mbl_escuro] .fixed-bottom { background: #071512 !important; background-color: #071512 !important; border: 0 !important; border-top: 1px solid #16483d !important; box-shadow: none !important; outline: none !important; } :root[data-glpi-theme=mbl_escuro] .itil-object .timeline-buttons *, :root[data-glpi-theme=mbl_escuro] .ticket-timeline .timeline-buttons *, :root[data-glpi-theme=mbl_escuro] .timeline-buttons *, :root[data-glpi-theme=mbl_escuro] .timeline-footer *, :root[data-glpi-theme=mbl_escuro] .itil-footer *, :root[data-glpi-theme=mbl_escuro] .itil-object-footer *, :root[data-glpi-theme=mbl_escuro] .ticket-footer * { border-color: #16483d !important; box-shadow: none !important; } :root[data-glpi-theme=mbl_escuro] .itil-object .bg-white, :root[data-glpi-theme=mbl_escuro] .itil-object .bg-light, :root[data-glpi-theme=mbl_escuro] .itil-object .bg-body, :root[data-glpi-theme=mbl_escuro] .itil-object .bg-body-tertiary, :root[data-glpi-theme=mbl_escuro] .ticket-timeline .bg-white, :root[data-glpi-theme=mbl_escuro] .ticket-timeline .bg-light, :root[data-glpi-theme=mbl_escuro] .ticket-timeline .bg-body, :root[data-glpi-theme=mbl_escuro] .ticket-timeline .bg-body-tertiary, :root[data-glpi-theme=mbl_escuro] .timeline .bg-white, :root[data-glpi-theme=mbl_escuro] .timeline .bg-light, :root[data-glpi-theme=mbl_escuro] .timeline .bg-body, :root[data-glpi-theme=mbl_escuro] .timeline .bg-body-tertiary { background: #071512 !important; background-color: #071512 !important; } :root[data-glpi-theme=mbl_escuro] .itil-object .border, :root[data-glpi-theme=mbl_escuro] .itil-object .border-top, :root[data-glpi-theme=mbl_escuro] .itil-object .border-bottom, :root[data-glpi-theme=mbl_escuro] .itil-object .border-light, :root[data-glpi-theme=mbl_escuro] .ticket-timeline .border, :root[data-glpi-theme=mbl_escuro] .ticket-timeline .border-top, :root[data-glpi-theme=mbl_escuro] .ticket-timeline .border-bottom, :root[data-glpi-theme=mbl_escuro] .ticket-timeline .border-light, :root[data-glpi-theme=mbl_escuro] .timeline .border, :root[data-glpi-theme=mbl_escuro] .timeline .border-top, :root[data-glpi-theme=mbl_escuro] .timeline .border-bottom, :root[data-glpi-theme=mbl_escuro] .timeline .border-light { border-color: #16483d !important; } /* Se a faixa branca estiver vindo do wrapper direto da área de resposta */ :root[data-glpi-theme=mbl_escuro] .timeline-buttons > div, :root[data-glpi-theme=mbl_escuro] .timeline-buttons > form, :root[data-glpi-theme=mbl_escuro] .timeline-buttons .d-flex, :root[data-glpi-theme=mbl_escuro] .timeline-buttons .container, :root[data-glpi-theme=mbl_escuro] .timeline-buttons .container-fluid, :root[data-glpi-theme=mbl_escuro] .timeline-buttons .row, :root[data-glpi-theme=mbl_escuro] .timeline-buttons .col { background: #071512 !important; background-color: #071512 !important; border-top: 0 !important; border-bottom: 0 !important; } /* Botões da barra inferior */ :root[data-glpi-theme=mbl_escuro] .timeline-buttons .btn, :root[data-glpi-theme=mbl_escuro] .itil-footer .btn, :root[data-glpi-theme=mbl_escuro] .ticket-footer .btn { border-radius: 14px !important; } :root[data-glpi-theme=mbl_escuro] .timeline-buttons .btn-primary, :root[data-glpi-theme=mbl_escuro] .itil-footer .btn-primary, :root[data-glpi-theme=mbl_escuro] .ticket-footer .btn-primary { background: linear-gradient(180deg, #00d67a 0%, #009739 100%) !important; border-color: #00c46a !important; color: #ffffff !important; } /* ===================================================== SCROLLBAR ===================================================== */ :root[data-glpi-theme=mbl_escuro] ::-webkit-scrollbar { width: 10px; height: 10px; } :root[data-glpi-theme=mbl_escuro] ::-webkit-scrollbar-track { background: #071512; } :root[data-glpi-theme=mbl_escuro] ::-webkit-scrollbar-thumb { background: #1e5c4e; border-radius: 999px; } :root[data-glpi-theme=mbl_escuro] ::-webkit-scrollbar-thumb:hover { background: #00c46a; } /* ===================================================== MBL-ESCURO - FIX DEFINITIVO LINHA BRANCA NO CHAMADO Elemento identificado: .card-title.card-header.mx-n3.mt-n3 ===================================================== */ :root[data-glpi-theme=mbl_escuro] .card-title.card-header.mx-n3.mt-n3 { background-color: #071512 !important; border-top-color: #16483d !important; border-bottom-color: #16483d !important; border-left-color: #16483d !important; border-right-color: #16483d !important; box-shadow: none !important; } /* Garante que qualquer linha interna desse cabeçalho siga o tema escuro */ :root[data-glpi-theme=mbl_escuro] .card-title.card-header.mx-n3.mt-n3::before, :root[data-glpi-theme=mbl_escuro] .card-title.card-header.mx-n3.mt-n3::after { background-color: #16483d !important; border-color: #16483d !important; box-shadow: none !important; } /* ===================================================== MBL-ESCURO - REMOVER LINHA BRANCA INFERIOR DO TICKET Elemento detectado: .card-title.card-header.mx-n3.mt-n3 ===================================================== */ /* Remove totalmente a borda branca do cabeçalho interno da timeline */ :root[data-glpi-theme=mbl_escuro] .card-title.card-header.mx-n3.mt-n3, :root[data-glpi-theme=mbl_escuro] .card-header.mx-n3.mt-n3, :root[data-glpi-theme=mbl_escuro] div.card-title.card-header.mx-n3.mt-n3 { background: #071512 !important; background-color: #071512 !important; border: 0 !important; border-top: 0 !important; border-bottom: 0 !important; box-shadow: none !important; outline: 0 !important; } /* Remove bordas/pseudo-elementos desse cabeçalho */ :root[data-glpi-theme=mbl_escuro] .card-title.card-header.mx-n3.mt-n3::before, :root[data-glpi-theme=mbl_escuro] .card-title.card-header.mx-n3.mt-n3::after, :root[data-glpi-theme=mbl_escuro] .card-header.mx-n3.mt-n3::before, :root[data-glpi-theme=mbl_escuro] .card-header.mx-n3.mt-n3::after { display: none !important; content: none !important; background: transparent !important; border: 0 !important; box-shadow: none !important; } /* Corrige o card/timeline que contém esse cabeçalho */ :root[data-glpi-theme=mbl_escuro] .card:has(.card-title.card-header.mx-n3.mt-n3), :root[data-glpi-theme=mbl_escuro] .timeline-item:has(.card-title.card-header.mx-n3.mt-n3), :root[data-glpi-theme=mbl_escuro] .timeline-content:has(.card-title.card-header.mx-n3.mt-n3) { background: #071512 !important; border-color: #16483d !important; box-shadow: none !important; } /* Remove qualquer linha clara próxima da barra de resposta */ :root[data-glpi-theme=mbl_escuro] .timeline-buttons, :root[data-glpi-theme=mbl_escuro] .timeline-buttons *, :root[data-glpi-theme=mbl_escuro] .itil-footer, :root[data-glpi-theme=mbl_escuro] .itil-footer *, :root[data-glpi-theme=mbl_escuro] .sticked-footer, :root[data-glpi-theme=mbl_escuro] .sticked-footer * { border-top-color: #16483d !important; border-bottom-color: #16483d !important; box-shadow: none !important; } /* Se algum elemento ainda insistir em borda branca dentro da timeline */ :root[data-glpi-theme=mbl_escuro] .timeline [style*="255, 255, 255"], :root[data-glpi-theme=mbl_escuro] .ticket-timeline [style*="255, 255, 255"], :root[data-glpi-theme=mbl_escuro] .itil-object [style*="255, 255, 255"] { border-color: #16483d !important; background-color: #071512 !important; } /* ========================================================= MBL-Escuro - Correção leitura de chamados abertos por e-mail Força fonte clara apenas no conteúdo textual do chamado ========================================================= */ .timeline-item, .timeline-item .content, .timeline-item .timeline-content, .timeline-item .rich_text_container, .timeline-item .rich_text_container *, .timeline-item .text, .timeline-item .text *, .timeline-item .itilcontent, .timeline-item .itilcontent *, .rich_text_container, .rich_text_container * { color: #e8fff4 !important; } /* Links dentro do corpo do e-mail/chamado */ .timeline-item a, .rich_text_container a { color: #00e08a !important; font-weight: 600; } /* Caso o e-mail venha com fundo branco/cinza embutido */ .timeline-item .rich_text_container, .timeline-item .itilcontent, .rich_text_container { background-color: transparent !important; } /* Assinaturas/imagens de e-mail não devem ser afetadas */ .timeline-item img, .rich_text_container img { color: initial !important; } /* ========================================================= MBL-Escuro - Correção linha inferior do chamado Elemento identificado: #itil-footer.border-top ========================================================= */ :root[data-glpi-theme=mbl_escuro] #itil-footer, :root[data-glpi-theme=mbl_escuro] .itil-footer { background: #071512 !important; background-color: #071512 !important; border-top: 0 !important; border-bottom: 0 !important; box-shadow: none !important; } /* Barra dos botões dentro do rodapé do chamado */ :root[data-glpi-theme=mbl_escuro] #itil-footer .buttons-bar, :root[data-glpi-theme=mbl_escuro] .itil-footer .buttons-bar { background: #071512 !important; background-color: #071512 !important; border: 0 !important; box-shadow: none !important; } /* Área lateral direita dos botões, onde apareceu outro borderTop */ :root[data-glpi-theme=mbl_escuro] #itil-footer .form-buttons, :root[data-glpi-theme=mbl_escuro] .itil-footer .form-buttons, :root[data-glpi-theme=mbl_escuro] #itil-footer .card-footer, :root[data-glpi-theme=mbl_escuro] .itil-footer .card-footer { background: #071512 !important; background-color: #071512 !important; border-top: 0 !important; border-bottom: 0 !important; box-shadow: none !important; } /* ========================================================= MBL-Escuro - Correção preview/tooltip do chamado Corrige fonte preta no pop-up ao passar o mouse no chamado ========================================================= */ /* Container do preview/tooltip */ :root[data-glpi-theme=mbl_escuro] .qtip, :root[data-glpi-theme=mbl_escuro] .qtip-bootstrap, :root[data-glpi-theme=mbl_escuro] .qtip-content, :root[data-glpi-theme=mbl_escuro] .tooltip, :root[data-glpi-theme=mbl_escuro] .tooltip-inner, :root[data-glpi-theme=mbl_escuro] .popover, :root[data-glpi-theme=mbl_escuro] .popover-body { background: #071512 !important; background-color: #071512 !important; color: #e8fff4 !important; border-color: #16483d !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45) !important; } /* Força fonte clara no conteúdo do preview, inclusive HTML vindo de e-mail */ :root[data-glpi-theme=mbl_escuro] .qtip *, :root[data-glpi-theme=mbl_escuro] .qtip-bootstrap *, :root[data-glpi-theme=mbl_escuro] .qtip-content *, :root[data-glpi-theme=mbl_escuro] .tooltip-inner *, :root[data-glpi-theme=mbl_escuro] .popover-body * { color: #e8fff4 !important; } /* Links dentro do preview */ :root[data-glpi-theme=mbl_escuro] .qtip a, :root[data-glpi-theme=mbl_escuro] .qtip-bootstrap a, :root[data-glpi-theme=mbl_escuro] .qtip-content a, :root[data-glpi-theme=mbl_escuro] .tooltip-inner a, :root[data-glpi-theme=mbl_escuro] .popover-body a { color: #00e08a !important; font-weight: 600; } /* Imagens/assinaturas não devem herdar cor forçada */ :root[data-glpi-theme=mbl_escuro] .qtip img, :root[data-glpi-theme=mbl_escuro] .qtip-bootstrap img, :root[data-glpi-theme=mbl_escuro] .qtip-content img, :root[data-glpi-theme=mbl_escuro] .tooltip-inner img, :root[data-glpi-theme=mbl_escuro] .popover-body img { color: initial !important; } /* Seta do pop-up, quando existir */ :root[data-glpi-theme=mbl_escuro] .qtip-tip, :root[data-glpi-theme=mbl_escuro] .tooltip-arrow, :root[data-glpi-theme=mbl_escuro] .popover-arrow::after { border-color: #071512 !important; } /* ========================================================= MBL FIX - Alertas warning no tema escuro Corrige contraste do alerta amarelo na tela de plug-ins ========================================================= */ .alert-warning, .alert.alert-warning, div.alert-warning, div.alert.alert-warning { background-color: #3a2600 !important; color: #ffd866 !important; border: 1px solid #d98c00 !important; box-shadow: 0 0 0 1px rgba(255, 168, 0, 0.18) !important; } .alert-warning *, .alert.alert-warning *, div.alert-warning *, div.alert.alert-warning * { color: #ffd866 !important; } .alert-warning a, .alert.alert-warning a { color: #ffffff !important; font-weight: 600 !important; text-decoration: underline !important; } .alert-warning .ti, .alert-warning i, .alert-warning svg, .alert.alert-warning .ti, .alert.alert-warning i, .alert.alert-warning svg { color: #ffb020 !important; fill: #ffb020 !important; stroke: #ffb020 !important; } /* ========================================================== MBL Escuro - Correção específica Plug-ins / Marketplace GLPI 11 - Ajuste de contraste e legibilidade ========================================================== */ /* Cores semânticas de warning no tema escuro */ :root[data-glpi-theme=mbl_escuro] { --tblr-warning: #f0b84f; --tblr-warning-rgb: 240, 184, 79; --tblr-warning-bg-subtle: #2c210f; --tblr-warning-border-subtle: #a87417; --tblr-warning-text-emphasis: #ffe7a3; } /* Alertas amarelos / avisos de atualização */ :root[data-glpi-theme=mbl_escuro] .alert-warning, :root[data-glpi-theme=mbl_escuro] .alert.alert-warning, :root[data-glpi-theme=mbl_escuro] .bg-warning, :root[data-glpi-theme=mbl_escuro] .bg-warning-subtle, :root[data-glpi-theme=mbl_escuro] .table-warning, :root[data-glpi-theme=mbl_escuro] .list-group-item-warning { background-color: #2c210f !important; border-color: #a87417 !important; color: #ffe7a3 !important; } /* Textos dentro dos alertas warning */ :root[data-glpi-theme=mbl_escuro] .alert-warning *, :root[data-glpi-theme=mbl_escuro] .bg-warning *, :root[data-glpi-theme=mbl_escuro] .bg-warning-subtle *, :root[data-glpi-theme=mbl_escuro] .table-warning *, :root[data-glpi-theme=mbl_escuro] .list-group-item-warning * { color: #ffe7a3 !important; } /* Área principal do Marketplace / Plug-ins */ :root[data-glpi-theme=mbl_escuro] .marketplace, :root[data-glpi-theme=mbl_escuro] .marketplace * { border-color: #164d3d; } /* Cards dos plug-ins */ :root[data-glpi-theme=mbl_escuro] .marketplace .plugin, :root[data-glpi-theme=mbl_escuro] .marketplace .plugin-card, :root[data-glpi-theme=mbl_escuro] .marketplace .card { background-color: #0b211c !important; border-color: #164d3d !important; color: #e8f6f1 !important; } /* Hover dos cards */ :root[data-glpi-theme=mbl_escuro] .marketplace .plugin:hover, :root[data-glpi-theme=mbl_escuro] .marketplace .plugin-card:hover, :root[data-glpi-theme=mbl_escuro] .marketplace .card:hover { background-color: #10352c !important; border-color: #00c896 !important; color: #ffffff !important; } /* Títulos dos plug-ins */ :root[data-glpi-theme=mbl_escuro] .marketplace .plugin .plugin-name, :root[data-glpi-theme=mbl_escuro] .marketplace .plugin .title, :root[data-glpi-theme=mbl_escuro] .marketplace .plugin h3, :root[data-glpi-theme=mbl_escuro] .marketplace .plugin h4, :root[data-glpi-theme=mbl_escuro] .marketplace .plugin a, :root[data-glpi-theme=mbl_escuro] .marketplace .card-title { color: #ffffff !important; } /* Descrições, versões e textos secundários */ :root[data-glpi-theme=mbl_escuro] .marketplace .text-muted, :root[data-glpi-theme=mbl_escuro] .marketplace .plugin-version, :root[data-glpi-theme=mbl_escuro] .marketplace .plugin-description, :root[data-glpi-theme=mbl_escuro] .marketplace small, :root[data-glpi-theme=mbl_escuro] .marketplace .small { color: #b8d6cd !important; } /* Ícones dos plug-ins e botões laterais */ :root[data-glpi-theme=mbl_escuro] .marketplace i, :root[data-glpi-theme=mbl_escuro] .marketplace svg, :root[data-glpi-theme=mbl_escuro] .marketplace .ti, :root[data-glpi-theme=mbl_escuro] .marketplace .fas, :root[data-glpi-theme=mbl_escuro] .marketplace .far, :root[data-glpi-theme=mbl_escuro] .marketplace .fa { color: #9cdcc8 !important; opacity: 1 !important; } /* Botões dentro dos cards */ :root[data-glpi-theme=mbl_escuro] .marketplace .btn { background-color: #0f3a30 !important; border-color: #1b8065 !important; color: #eafff7 !important; } :root[data-glpi-theme=mbl_escuro] .marketplace .btn:hover { background-color: #00a878 !important; border-color: #00c896 !important; color: #ffffff !important; } /* Tags dos plug-ins */ :root[data-glpi-theme=mbl_escuro] .marketplace .plugins-tags .tag, :root[data-glpi-theme=mbl_escuro] .marketplace .tag, :root[data-glpi-theme=mbl_escuro] .marketplace .badge { background-color: #0f3a30 !important; border-color: #1b8065 !important; color: #dffff2 !important; } /* Campo de filtro da lista de plug-ins */ :root[data-glpi-theme=mbl_escuro] input[placeholder*="Filtrar lista de plug-ins"] { background-color: #071f19 !important; border-color: #136b54 !important; color: #eafff7 !important; } :root[data-glpi-theme=mbl_escuro] input[placeholder*="Filtrar lista de plug-ins"]::placeholder { color: #8fb8aa !important; } /* Cards/áreas claras inesperadas dentro da página de plug-ins */ :root[data-glpi-theme=mbl_escuro] .page-wrapper .marketplace .bg-light, :root[data-glpi-theme=mbl_escuro] .page-wrapper .marketplace .bg-white { background-color: #0b211c !important; color: #e8f6f1 !important; } /* Links dentro da tela de plug-ins */ :root[data-glpi-theme=mbl_escuro] .marketplace a:not(.btn) { color: #7ee7c6 !important; } :root[data-glpi-theme=mbl_escuro] .marketplace a:not(.btn):hover { color: #ffffff !important; } /* ========================================================== MBL Escuro - Correção específica Plugin More Reporting GLPI 11 - Ajuste de contraste em cards, filtros, tabelas e gráficos ========================================================== */ /* Base geral do More Reporting */ :root[data-glpi-theme=mbl_escuro] body[data-page*=mreporting], :root[data-glpi-theme=mbl_escuro] body[class*=mreporting], :root[data-glpi-theme=mbl_escuro] .mreporting, :root[data-glpi-theme=mbl_escuro] .plugin_mreporting, :root[data-glpi-theme=mbl_escuro] #plugin_mreporting { background-color: #071512 !important; color: #e8f6f1 !important; } /* Containers principais */ :root[data-glpi-theme=mbl_escuro] body[data-page*=mreporting] .page-wrapper, :root[data-glpi-theme=mbl_escuro] body[class*=mreporting] .page-wrapper, :root[data-glpi-theme=mbl_escuro] .mreporting .page-wrapper, :root[data-glpi-theme=mbl_escuro] .plugin_mreporting, :root[data-glpi-theme=mbl_escuro] #plugin_mreporting { background-color: #071512 !important; } /* Cards, caixas e blocos */ :root[data-glpi-theme=mbl_escuro] body[data-page*=mreporting] .card, :root[data-glpi-theme=mbl_escuro] body[class*=mreporting] .card, :root[data-glpi-theme=mbl_escuro] .mreporting .card, :root[data-glpi-theme=mbl_escuro] .plugin_mreporting .card, :root[data-glpi-theme=mbl_escuro] #plugin_mreporting .card, :root[data-glpi-theme=mbl_escuro] .mreporting .tab_cadre, :root[data-glpi-theme=mbl_escuro] .plugin_mreporting .tab_cadre, :root[data-glpi-theme=mbl_escuro] #plugin_mreporting .tab_cadre { background-color: #0b211c !important; border-color: #164d3d !important; color: #e8f6f1 !important; } /* Cabeçalhos de cards e painéis */ :root[data-glpi-theme=mbl_escuro] body[data-page*=mreporting] .card-header, :root[data-glpi-theme=mbl_escuro] body[class*=mreporting] .card-header, :root[data-glpi-theme=mbl_escuro] .mreporting .card-header, :root[data-glpi-theme=mbl_escuro] .plugin_mreporting .card-header, :root[data-glpi-theme=mbl_escuro] #plugin_mreporting .card-header, :root[data-glpi-theme=mbl_escuro] .mreporting .tab_bg_1, :root[data-glpi-theme=mbl_escuro] .plugin_mreporting .tab_bg_1, :root[data-glpi-theme=mbl_escuro] #plugin_mreporting .tab_bg_1 { background-color: #0f2d25 !important; border-color: #1b8065 !important; color: #ffffff !important; } /* Títulos e textos principais */ :root[data-glpi-theme=mbl_escuro] body[data-page*=mreporting] h1, :root[data-glpi-theme=mbl_escuro] body[data-page*=mreporting] h2, :root[data-glpi-theme=mbl_escuro] body[data-page*=mreporting] h3, :root[data-glpi-theme=mbl_escuro] body[data-page*=mreporting] h4, :root[data-glpi-theme=mbl_escuro] body[class*=mreporting] h1, :root[data-glpi-theme=mbl_escuro] body[class*=mreporting] h2, :root[data-glpi-theme=mbl_escuro] body[class*=mreporting] h3, :root[data-glpi-theme=mbl_escuro] body[class*=mreporting] h4, :root[data-glpi-theme=mbl_escuro] .mreporting h1, :root[data-glpi-theme=mbl_escuro] .mreporting h2, :root[data-glpi-theme=mbl_escuro] .mreporting h3, :root[data-glpi-theme=mbl_escuro] .mreporting h4, :root[data-glpi-theme=mbl_escuro] .plugin_mreporting h1, :root[data-glpi-theme=mbl_escuro] .plugin_mreporting h2, :root[data-glpi-theme=mbl_escuro] .plugin_mreporting h3, :root[data-glpi-theme=mbl_escuro] .plugin_mreporting h4, :root[data-glpi-theme=mbl_escuro] #plugin_mreporting h1, :root[data-glpi-theme=mbl_escuro] #plugin_mreporting h2, :root[data-glpi-theme=mbl_escuro] #plugin_mreporting h3, :root[data-glpi-theme=mbl_escuro] #plugin_mreporting h4 { color: #ffffff !important; } /* Textos secundários */ :root[data-glpi-theme=mbl_escuro] body[data-page*=mreporting] .text-muted, :root[data-glpi-theme=mbl_escuro] body[class*=mreporting] .text-muted, :root[data-glpi-theme=mbl_escuro] .mreporting .text-muted, :root[data-glpi-theme=mbl_escuro] .plugin_mreporting .text-muted, :root[data-glpi-theme=mbl_escuro] #plugin_mreporting .text-muted, :root[data-glpi-theme=mbl_escuro] .mreporting small, :root[data-glpi-theme=mbl_escuro] .plugin_mreporting small, :root[data-glpi-theme=mbl_escuro] #plugin_mreporting small { color: #b8d6cd !important; } /* Tabelas */ :root[data-glpi-theme=mbl_escuro] body[data-page*=mreporting] table, :root[data-glpi-theme=mbl_escuro] body[class*=mreporting] table, :root[data-glpi-theme=mbl_escuro] .mreporting table, :root[data-glpi-theme=mbl_escuro] .plugin_mreporting table, :root[data-glpi-theme=mbl_escuro] #plugin_mreporting table { background-color: #0b211c !important; color: #e8f6f1 !important; border-color: #164d3d !important; } /* Cabeçalhos das tabelas */ :root[data-glpi-theme=mbl_escuro] body[data-page*=mreporting] table th, :root[data-glpi-theme=mbl_escuro] body[class*=mreporting] table th, :root[data-glpi-theme=mbl_escuro] .mreporting table th, :root[data-glpi-theme=mbl_escuro] .plugin_mreporting table th, :root[data-glpi-theme=mbl_escuro] #plugin_mreporting table th { background-color: #0f2d25 !important; color: #ffffff !important; border-color: #1b8065 !important; } /* Células das tabelas */ :root[data-glpi-theme=mbl_escuro] body[data-page*=mreporting] table td, :root[data-glpi-theme=mbl_escuro] body[class*=mreporting] table td, :root[data-glpi-theme=mbl_escuro] .mreporting table td, :root[data-glpi-theme=mbl_escuro] .plugin_mreporting table td, :root[data-glpi-theme=mbl_escuro] #plugin_mreporting table td { background-color: #0b211c !important; color: #e8f6f1 !important; border-color: #164d3d !important; } /* Linhas alternadas e hover */ :root[data-glpi-theme=mbl_escuro] body[data-page*=mreporting] table tr:hover td, :root[data-glpi-theme=mbl_escuro] body[class*=mreporting] table tr:hover td, :root[data-glpi-theme=mbl_escuro] .mreporting table tr:hover td, :root[data-glpi-theme=mbl_escuro] .plugin_mreporting table tr:hover td, :root[data-glpi-theme=mbl_escuro] #plugin_mreporting table tr:hover td { background-color: #10352c !important; color: #ffffff !important; } /* Inputs, selects e filtros */ :root[data-glpi-theme=mbl_escuro] body[data-page*=mreporting] input, :root[data-glpi-theme=mbl_escuro] body[data-page*=mreporting] select, :root[data-glpi-theme=mbl_escuro] body[data-page*=mreporting] textarea, :root[data-glpi-theme=mbl_escuro] body[class*=mreporting] input, :root[data-glpi-theme=mbl_escuro] body[class*=mreporting] select, :root[data-glpi-theme=mbl_escuro] body[class*=mreporting] textarea, :root[data-glpi-theme=mbl_escuro] .mreporting input, :root[data-glpi-theme=mbl_escuro] .mreporting select, :root[data-glpi-theme=mbl_escuro] .mreporting textarea, :root[data-glpi-theme=mbl_escuro] .plugin_mreporting input, :root[data-glpi-theme=mbl_escuro] .plugin_mreporting select, :root[data-glpi-theme=mbl_escuro] .plugin_mreporting textarea, :root[data-glpi-theme=mbl_escuro] #plugin_mreporting input, :root[data-glpi-theme=mbl_escuro] #plugin_mreporting select, :root[data-glpi-theme=mbl_escuro] #plugin_mreporting textarea { background-color: #071f19 !important; border-color: #136b54 !important; color: #eafff7 !important; } /* Select2 usado em filtros do GLPI */ :root[data-glpi-theme=mbl_escuro] body[data-page*=mreporting] .select2-container .select2-selection, :root[data-glpi-theme=mbl_escuro] body[class*=mreporting] .select2-container .select2-selection, :root[data-glpi-theme=mbl_escuro] .mreporting .select2-container .select2-selection, :root[data-glpi-theme=mbl_escuro] .plugin_mreporting .select2-container .select2-selection, :root[data-glpi-theme=mbl_escuro] #plugin_mreporting .select2-container .select2-selection { background-color: #071f19 !important; border-color: #136b54 !important; color: #eafff7 !important; } /* Opções do Select2 */ :root[data-glpi-theme=mbl_escuro] .select2-dropdown, :root[data-glpi-theme=mbl_escuro] .select2-results__option { background-color: #071f19 !important; color: #eafff7 !important; } :root[data-glpi-theme=mbl_escuro] .select2-results__option--highlighted { background-color: #00a878 !important; color: #ffffff !important; } /* Botões */ :root[data-glpi-theme=mbl_escuro] body[data-page*=mreporting] .btn, :root[data-glpi-theme=mbl_escuro] body[class*=mreporting] .btn, :root[data-glpi-theme=mbl_escuro] .mreporting .btn, :root[data-glpi-theme=mbl_escuro] .plugin_mreporting .btn, :root[data-glpi-theme=mbl_escuro] #plugin_mreporting .btn { background-color: #0f3a30 !important; border-color: #1b8065 !important; color: #eafff7 !important; } /* Hover dos botões */ :root[data-glpi-theme=mbl_escuro] body[data-page*=mreporting] .btn:hover, :root[data-glpi-theme=mbl_escuro] body[class*=mreporting] .btn:hover, :root[data-glpi-theme=mbl_escuro] .mreporting .btn:hover, :root[data-glpi-theme=mbl_escuro] .plugin_mreporting .btn:hover, :root[data-glpi-theme=mbl_escuro] #plugin_mreporting .btn:hover { background-color: #00a878 !important; border-color: #00c896 !important; color: #ffffff !important; } /* Alertas dentro do More Reporting */ :root[data-glpi-theme=mbl_escuro] body[data-page*=mreporting] .alert, :root[data-glpi-theme=mbl_escuro] body[class*=mreporting] .alert, :root[data-glpi-theme=mbl_escuro] .mreporting .alert, :root[data-glpi-theme=mbl_escuro] .plugin_mreporting .alert, :root[data-glpi-theme=mbl_escuro] #plugin_mreporting .alert { background-color: #102820 !important; border-color: #1b8065 !important; color: #e8f6f1 !important; } /* Alertas amarelos */ :root[data-glpi-theme=mbl_escuro] body[data-page*=mreporting] .alert-warning, :root[data-glpi-theme=mbl_escuro] body[class*=mreporting] .alert-warning, :root[data-glpi-theme=mbl_escuro] .mreporting .alert-warning, :root[data-glpi-theme=mbl_escuro] .plugin_mreporting .alert-warning, :root[data-glpi-theme=mbl_escuro] #plugin_mreporting .alert-warning { background-color: #2c210f !important; border-color: #a87417 !important; color: #ffe7a3 !important; } /* Gráficos SVG / Highcharts, caso o plugin use */ :root[data-glpi-theme=mbl_escuro] body[data-page*=mreporting] .highcharts-background, :root[data-glpi-theme=mbl_escuro] body[class*=mreporting] .highcharts-background, :root[data-glpi-theme=mbl_escuro] .mreporting .highcharts-background, :root[data-glpi-theme=mbl_escuro] .plugin_mreporting .highcharts-background, :root[data-glpi-theme=mbl_escuro] #plugin_mreporting .highcharts-background { fill: #0b211c !important; } :root[data-glpi-theme=mbl_escuro] body[data-page*=mreporting] .highcharts-title, :root[data-glpi-theme=mbl_escuro] body[data-page*=mreporting] .highcharts-axis-title, :root[data-glpi-theme=mbl_escuro] body[data-page*=mreporting] .highcharts-axis-labels text, :root[data-glpi-theme=mbl_escuro] body[data-page*=mreporting] .highcharts-legend text, :root[data-glpi-theme=mbl_escuro] body[class*=mreporting] .highcharts-title, :root[data-glpi-theme=mbl_escuro] body[class*=mreporting] .highcharts-axis-title, :root[data-glpi-theme=mbl_escuro] body[class*=mreporting] .highcharts-axis-labels text, :root[data-glpi-theme=mbl_escuro] body[class*=mreporting] .highcharts-legend text, :root[data-glpi-theme=mbl_escuro] .mreporting .highcharts-title, :root[data-glpi-theme=mbl_escuro] .mreporting .highcharts-axis-title, :root[data-glpi-theme=mbl_escuro] .mreporting .highcharts-axis-labels text, :root[data-glpi-theme=mbl_escuro] .mreporting .highcharts-legend text, :root[data-glpi-theme=mbl_escuro] .plugin_mreporting .highcharts-title, :root[data-glpi-theme=mbl_escuro] .plugin_mreporting .highcharts-axis-title, :root[data-glpi-theme=mbl_escuro] .plugin_mreporting .highcharts-axis-labels text, :root[data-glpi-theme=mbl_escuro] .plugin_mreporting .highcharts-legend text, :root[data-glpi-theme=mbl_escuro] #plugin_mreporting .highcharts-title, :root[data-glpi-theme=mbl_escuro] #plugin_mreporting .highcharts-axis-title, :root[data-glpi-theme=mbl_escuro] #plugin_mreporting .highcharts-axis-labels text, :root[data-glpi-theme=mbl_escuro] #plugin_mreporting .highcharts-legend text { fill: #e8f6f1 !important; color: #e8f6f1 !important; } :root[data-glpi-theme=mbl_escuro] body[data-page*=mreporting] .highcharts-grid-line, :root[data-glpi-theme=mbl_escuro] body[class*=mreporting] .highcharts-grid-line, :root[data-glpi-theme=mbl_escuro] .mreporting .highcharts-grid-line, :root[data-glpi-theme=mbl_escuro] .plugin_mreporting .highcharts-grid-line, :root[data-glpi-theme=mbl_escuro] #plugin_mreporting .highcharts-grid-line { stroke: #164d3d !important; } /* Links */ :root[data-glpi-theme=mbl_escuro] body[data-page*=mreporting] a:not(.btn), :root[data-glpi-theme=mbl_escuro] body[class*=mreporting] a:not(.btn), :root[data-glpi-theme=mbl_escuro] .mreporting a:not(.btn), :root[data-glpi-theme=mbl_escuro] .plugin_mreporting a:not(.btn), :root[data-glpi-theme=mbl_escuro] #plugin_mreporting a:not(.btn) { color: #7ee7c6 !important; } :root[data-glpi-theme=mbl_escuro] body[data-page*=mreporting] a:not(.btn):hover, :root[data-glpi-theme=mbl_escuro] body[class*=mreporting] a:not(.btn):hover, :root[data-glpi-theme=mbl_escuro] .mreporting a:not(.btn):hover, :root[data-glpi-theme=mbl_escuro] .plugin_mreporting a:not(.btn):hover, :root[data-glpi-theme=mbl_escuro] #plugin_mreporting a:not(.btn):hover { color: #ffffff !important; } /* ========================================================== MBL Escuro - Hotfix More Reporting legado Corrige graph.php e telas antigas do plugin mreporting ========================================================== */ /* Detecta telas do More Reporting pelo breadcrumb/link do plugin */ :root[data-glpi-theme=mbl_escuro] body:has(a[href*="plugins/mreporting"]), :root[data-glpi-theme=mbl_escuro] body:has(form[action*="plugins/mreporting"]), :root[data-glpi-theme=mbl_escuro] body:has(a[href*="mreporting/front/graph.php"]) { background-color: #071512 !important; color: #e8f6f1 !important; } /* Área principal da tela */ :root[data-glpi-theme=mbl_escuro] body:has(a[href*="plugins/mreporting"]) .page-wrapper, :root[data-glpi-theme=mbl_escuro] body:has(form[action*="plugins/mreporting"]) .page-wrapper, :root[data-glpi-theme=mbl_escuro] body:has(a[href*="mreporting/front/graph.php"]) .page-wrapper, :root[data-glpi-theme=mbl_escuro] body:has(a[href*="plugins/mreporting"]) .page-body, :root[data-glpi-theme=mbl_escuro] body:has(form[action*="plugins/mreporting"]) .page-body, :root[data-glpi-theme=mbl_escuro] body:has(a[href*="mreporting/front/graph.php"]) .page-body { background-color: #071512 !important; color: #e8f6f1 !important; } /* Blocos antigos do plugin, inclusive áreas cinza claras */ :root[data-glpi-theme=mbl_escuro] body:has(a[href*="plugins/mreporting"]) .page-body table, :root[data-glpi-theme=mbl_escuro] body:has(form[action*="plugins/mreporting"]) .page-body table, :root[data-glpi-theme=mbl_escuro] body:has(a[href*="plugins/mreporting"]) .page-body tr, :root[data-glpi-theme=mbl_escuro] body:has(form[action*="plugins/mreporting"]) .page-body tr, :root[data-glpi-theme=mbl_escuro] body:has(a[href*="plugins/mreporting"]) .page-body td, :root[data-glpi-theme=mbl_escuro] body:has(form[action*="plugins/mreporting"]) .page-body td, :root[data-glpi-theme=mbl_escuro] body:has(a[href*="plugins/mreporting"]) .page-body div, :root[data-glpi-theme=mbl_escuro] body:has(form[action*="plugins/mreporting"]) .page-body div { background-color: #071512 !important; color: #e8f6f1 !important; border-color: #164d3d !important; } /* Faixas/cabeçalhos do relatório */ :root[data-glpi-theme=mbl_escuro] body:has(a[href*="plugins/mreporting"]) .page-body table th, :root[data-glpi-theme=mbl_escuro] body:has(form[action*="plugins/mreporting"]) .page-body table th, :root[data-glpi-theme=mbl_escuro] body:has(a[href*="plugins/mreporting"]) .tab_cadre th, :root[data-glpi-theme=mbl_escuro] body:has(form[action*="plugins/mreporting"]) .tab_cadre th, :root[data-glpi-theme=mbl_escuro] body:has(a[href*="plugins/mreporting"]) .tab_bg_1, :root[data-glpi-theme=mbl_escuro] body:has(form[action*="plugins/mreporting"]) .tab_bg_1, :root[data-glpi-theme=mbl_escuro] body:has(a[href*="plugins/mreporting"]) .tab_bg_2, :root[data-glpi-theme=mbl_escuro] body:has(form[action*="plugins/mreporting"]) .tab_bg_2 { background-color: #0b211c !important; color: #ffffff !important; border-color: #164d3d !important; } /* Área branca/cinza do cabeçalho e rodapé do gráfico */ :root[data-glpi-theme=mbl_escuro] body:has(a[href*="plugins/mreporting"]) .center, :root[data-glpi-theme=mbl_escuro] body:has(form[action*="plugins/mreporting"]) .center, :root[data-glpi-theme=mbl_escuro] body:has(a[href*="plugins/mreporting"]) .tab_cadre, :root[data-glpi-theme=mbl_escuro] body:has(form[action*="plugins/mreporting"]) .tab_cadre { background-color: #0b211c !important; color: #e8f6f1 !important; border-color: #164d3d !important; } /* Títulos e labels */ :root[data-glpi-theme=mbl_escuro] body:has(a[href*="plugins/mreporting"]) h1, :root[data-glpi-theme=mbl_escuro] body:has(a[href*="plugins/mreporting"]) h2, :root[data-glpi-theme=mbl_escuro] body:has(a[href*="plugins/mreporting"]) h3, :root[data-glpi-theme=mbl_escuro] body:has(a[href*="plugins/mreporting"]) h4, :root[data-glpi-theme=mbl_escuro] body:has(a[href*="plugins/mreporting"]) label, :root[data-glpi-theme=mbl_escuro] body:has(a[href*="plugins/mreporting"]) strong, :root[data-glpi-theme=mbl_escuro] body:has(a[href*="plugins/mreporting"]) b, :root[data-glpi-theme=mbl_escuro] body:has(form[action*="plugins/mreporting"]) h1, :root[data-glpi-theme=mbl_escuro] body:has(form[action*="plugins/mreporting"]) h2, :root[data-glpi-theme=mbl_escuro] body:has(form[action*="plugins/mreporting"]) h3, :root[data-glpi-theme=mbl_escuro] body:has(form[action*="plugins/mreporting"]) h4, :root[data-glpi-theme=mbl_escuro] body:has(form[action*="plugins/mreporting"]) label, :root[data-glpi-theme=mbl_escuro] body:has(form[action*="plugins/mreporting"]) strong, :root[data-glpi-theme=mbl_escuro] body:has(form[action*="plugins/mreporting"]) b { color: #ffffff !important; } /* Textos comuns */ :root[data-glpi-theme=mbl_escuro] body:has(a[href*="plugins/mreporting"]) p, :root[data-glpi-theme=mbl_escuro] body:has(a[href*="plugins/mreporting"]) span, :root[data-glpi-theme=mbl_escuro] body:has(a[href*="plugins/mreporting"]) small, :root[data-glpi-theme=mbl_escuro] body:has(form[action*="plugins/mreporting"]) p, :root[data-glpi-theme=mbl_escuro] body:has(form[action*="plugins/mreporting"]) span, :root[data-glpi-theme=mbl_escuro] body:has(form[action*="plugins/mreporting"]) small { color: #d8f3ea !important; } /* Links Voltar, Configuração, Exportar */ :root[data-glpi-theme=mbl_escuro] body:has(a[href*="plugins/mreporting"]) a:not(.btn), :root[data-glpi-theme=mbl_escuro] body:has(form[action*="plugins/mreporting"]) a:not(.btn) { color: #7ee7c6 !important; } :root[data-glpi-theme=mbl_escuro] body:has(a[href*="plugins/mreporting"]) a:not(.btn):hover, :root[data-glpi-theme=mbl_escuro] body:has(form[action*="plugins/mreporting"]) a:not(.btn):hover { color: #ffffff !important; } /* Inputs, selects e filtros do relatório */ :root[data-glpi-theme=mbl_escuro] body:has(a[href*="plugins/mreporting"]) input, :root[data-glpi-theme=mbl_escuro] body:has(a[href*="plugins/mreporting"]) select, :root[data-glpi-theme=mbl_escuro] body:has(a[href*="plugins/mreporting"]) textarea, :root[data-glpi-theme=mbl_escuro] body:has(form[action*="plugins/mreporting"]) input, :root[data-glpi-theme=mbl_escuro] body:has(form[action*="plugins/mreporting"]) select, :root[data-glpi-theme=mbl_escuro] body:has(form[action*="plugins/mreporting"]) textarea { background-color: #06291f !important; border-color: #00a878 !important; color: #eafff7 !important; } /* Botões do relatório */ :root[data-glpi-theme=mbl_escuro] body:has(a[href*="plugins/mreporting"]) .btn, :root[data-glpi-theme=mbl_escuro] body:has(a[href*="plugins/mreporting"]) button, :root[data-glpi-theme=mbl_escuro] body:has(a[href*="plugins/mreporting"]) input[type=submit], :root[data-glpi-theme=mbl_escuro] body:has(form[action*="plugins/mreporting"]) .btn, :root[data-glpi-theme=mbl_escuro] body:has(form[action*="plugins/mreporting"]) button, :root[data-glpi-theme=mbl_escuro] body:has(form[action*="plugins/mreporting"]) input[type=submit] { background-color: #00a878 !important; border-color: #00c896 !important; color: #ffffff !important; } /* Área do gráfico */ :root[data-glpi-theme=mbl_escuro] body:has(a[href*="plugins/mreporting"]) svg, :root[data-glpi-theme=mbl_escuro] body:has(form[action*="plugins/mreporting"]) svg, :root[data-glpi-theme=mbl_escuro] body:has(a[href*="plugins/mreporting"]) canvas, :root[data-glpi-theme=mbl_escuro] body:has(form[action*="plugins/mreporting"]) canvas { background-color: #071512 !important; } /* Highcharts / gráficos */ :root[data-glpi-theme=mbl_escuro] body:has(a[href*="plugins/mreporting"]) .highcharts-background, :root[data-glpi-theme=mbl_escuro] body:has(form[action*="plugins/mreporting"]) .highcharts-background { fill: #071512 !important; } :root[data-glpi-theme=mbl_escuro] body:has(a[href*="plugins/mreporting"]) .highcharts-title, :root[data-glpi-theme=mbl_escuro] body:has(a[href*="plugins/mreporting"]) .highcharts-axis-title, :root[data-glpi-theme=mbl_escuro] body:has(a[href*="plugins/mreporting"]) .highcharts-axis-labels text, :root[data-glpi-theme=mbl_escuro] body:has(a[href*="plugins/mreporting"]) .highcharts-legend text, :root[data-glpi-theme=mbl_escuro] body:has(form[action*="plugins/mreporting"]) .highcharts-title, :root[data-glpi-theme=mbl_escuro] body:has(form[action*="plugins/mreporting"]) .highcharts-axis-title, :root[data-glpi-theme=mbl_escuro] body:has(form[action*="plugins/mreporting"]) .highcharts-axis-labels text, :root[data-glpi-theme=mbl_escuro] body:has(form[action*="plugins/mreporting"]) .highcharts-legend text { fill: #e8f6f1 !important; color: #e8f6f1 !important; } /* Botão/select flutuante do rodapé */ :root[data-glpi-theme=mbl_escuro] body:has(a[href*="plugins/mreporting"]) .fixed-bottom, :root[data-glpi-theme=mbl_escuro] body:has(form[action*="plugins/mreporting"]) .fixed-bottom, :root[data-glpi-theme=mbl_escuro] body:has(a[href*="plugins/mreporting"]) .dropdown-menu, :root[data-glpi-theme=mbl_escuro] body:has(form[action*="plugins/mreporting"]) .dropdown-menu { background-color: #06291f !important; border-color: #00a878 !important; color: #eafff7 !important; } /* ========================================================== MBL Escuro - Botões semáforo na tela de Plug-ins / Marketplace Verde = ativo | Vermelho = desativado | Laranja = atualização ========================================================== */ /* Base dos botões laterais dos plugins */ :root[data-glpi-theme=mbl_escuro] .marketplace .plugin .btn, :root[data-glpi-theme=mbl_escuro] .marketplace .card .btn, :root[data-glpi-theme=mbl_escuro] .marketplace button, :root[data-glpi-theme=mbl_escuro] .marketplace a.btn { min-width: 30px; min-height: 30px; border-radius: 6px !important; border-width: 1px !important; color: #ffffff !important; opacity: 1 !important; box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04), 0 0 8px rgba(0, 0, 0, 0.35); } /* Ícones sempre bem visíveis */ :root[data-glpi-theme=mbl_escuro] .marketplace .plugin .btn i, :root[data-glpi-theme=mbl_escuro] .marketplace .plugin .btn svg, :root[data-glpi-theme=mbl_escuro] .marketplace .card .btn i, :root[data-glpi-theme=mbl_escuro] .marketplace .card .btn svg { color: #ffffff !important; opacity: 1 !important; } /* Plugin ativo: normalmente o botão aparece como ação de desativar/desabilitar */ :root[data-glpi-theme=mbl_escuro] .marketplace .btn[title*=Desativar i], :root[data-glpi-theme=mbl_escuro] .marketplace .btn[title*=Desabilitar i], :root[data-glpi-theme=mbl_escuro] .marketplace .btn[title*=Disable i], :root[data-glpi-theme=mbl_escuro] .marketplace .btn[title*=Deactivate i], :root[data-glpi-theme=mbl_escuro] .marketplace .btn[aria-label*=Desativar i], :root[data-glpi-theme=mbl_escuro] .marketplace .btn[aria-label*=Desabilitar i], :root[data-glpi-theme=mbl_escuro] .marketplace .btn[data-bs-original-title*=Desativar i], :root[data-glpi-theme=mbl_escuro] .marketplace .btn[data-bs-original-title*=Desabilitar i] { background-color: #008f5d !important; border-color: #00d084 !important; color: #ffffff !important; box-shadow: 0 0 8px rgba(0, 208, 132, 0.65) !important; } /* Plugin desativado: normalmente o botão aparece como ação de ativar/habilitar */ :root[data-glpi-theme=mbl_escuro] .marketplace .btn[title*=Ativar i], :root[data-glpi-theme=mbl_escuro] .marketplace .btn[title*=Habilitar i], :root[data-glpi-theme=mbl_escuro] .marketplace .btn[title*=Enable i], :root[data-glpi-theme=mbl_escuro] .marketplace .btn[title*=Activate i], :root[data-glpi-theme=mbl_escuro] .marketplace .btn[aria-label*=Ativar i], :root[data-glpi-theme=mbl_escuro] .marketplace .btn[aria-label*=Habilitar i], :root[data-glpi-theme=mbl_escuro] .marketplace .btn[data-bs-original-title*=Ativar i], :root[data-glpi-theme=mbl_escuro] .marketplace .btn[data-bs-original-title*=Habilitar i] { background-color: #b4232b !important; border-color: #ff4d5e !important; color: #ffffff !important; box-shadow: 0 0 8px rgba(255, 77, 94, 0.55) !important; } /* Atualização disponível: botão da nuvem / atualizar */ :root[data-glpi-theme=mbl_escuro] .marketplace .btn[title*=Atualizar i], :root[data-glpi-theme=mbl_escuro] .marketplace .btn[title*=Update i], :root[data-glpi-theme=mbl_escuro] .marketplace .btn[aria-label*=Atualizar i], :root[data-glpi-theme=mbl_escuro] .marketplace .btn[aria-label*=Update i], :root[data-glpi-theme=mbl_escuro] .marketplace .btn[data-bs-original-title*=Atualizar i], :root[data-glpi-theme=mbl_escuro] .marketplace .btn[data-bs-original-title*=Update i], :root[data-glpi-theme=mbl_escuro] .marketplace .btn:has(.ti-cloud-download), :root[data-glpi-theme=mbl_escuro] .marketplace .btn:has(.ti-cloud-upload), :root[data-glpi-theme=mbl_escuro] .marketplace .btn:has(.ti-cloud-down), :root[data-glpi-theme=mbl_escuro] .marketplace .btn:has(.fa-cloud-download), :root[data-glpi-theme=mbl_escuro] .marketplace .btn:has(.fa-cloud-download-alt) { background-color: #d98200 !important; border-color: #ffb02e !important; color: #ffffff !important; box-shadow: 0 0 10px rgba(255, 176, 46, 0.75) !important; } /* Instalar / baixar plugin */ :root[data-glpi-theme=mbl_escuro] .marketplace .btn[title*=Instalar i], :root[data-glpi-theme=mbl_escuro] .marketplace .btn[title*=Install i], :root[data-glpi-theme=mbl_escuro] .marketplace .btn[title*=Baixar i], :root[data-glpi-theme=mbl_escuro] .marketplace .btn[title*=Download i], :root[data-glpi-theme=mbl_escuro] .marketplace .btn[data-bs-original-title*=Instalar i], :root[data-glpi-theme=mbl_escuro] .marketplace .btn[data-bs-original-title*=Download i] { background-color: #1466c3 !important; border-color: #4dabf7 !important; color: #ffffff !important; box-shadow: 0 0 8px rgba(77, 171, 247, 0.55) !important; } /* Desinstalar / remover */ :root[data-glpi-theme=mbl_escuro] .marketplace .btn[title*=Desinstalar i], :root[data-glpi-theme=mbl_escuro] .marketplace .btn[title*=Remover i], :root[data-glpi-theme=mbl_escuro] .marketplace .btn[title*=Excluir i], :root[data-glpi-theme=mbl_escuro] .marketplace .btn[title*=Uninstall i], :root[data-glpi-theme=mbl_escuro] .marketplace .btn[title*=Remove i], :root[data-glpi-theme=mbl_escuro] .marketplace .btn[data-bs-original-title*=Desinstalar i], :root[data-glpi-theme=mbl_escuro] .marketplace .btn[data-bs-original-title*=Remover i], :root[data-glpi-theme=mbl_escuro] .marketplace .btn[data-bs-original-title*=Uninstall i] { background-color: #8f1d24 !important; border-color: #ff4d5e !important; color: #ffffff !important; } /* Configurar / ferramenta */ :root[data-glpi-theme=mbl_escuro] .marketplace .btn[title*=Configurar i], :root[data-glpi-theme=mbl_escuro] .marketplace .btn[title*=Configuração i], :root[data-glpi-theme=mbl_escuro] .marketplace .btn[title*=Configure i], :root[data-glpi-theme=mbl_escuro] .marketplace .btn[data-bs-original-title*=Configurar i], :root[data-glpi-theme=mbl_escuro] .marketplace .btn[data-bs-original-title*=Configuração i], :root[data-glpi-theme=mbl_escuro] .marketplace .btn:has(.ti-tool), :root[data-glpi-theme=mbl_escuro] .marketplace .btn:has(.ti-settings), :root[data-glpi-theme=mbl_escuro] .marketplace .btn:has(.fa-wrench), :root[data-glpi-theme=mbl_escuro] .marketplace .btn:has(.fa-cog) { background-color: #174b65 !important; border-color: #5cc8ff !important; color: #ffffff !important; } /* Hover geral para dar sensação de botão clicável */ :root[data-glpi-theme=mbl_escuro] .marketplace .plugin .btn:hover, :root[data-glpi-theme=mbl_escuro] .marketplace .card .btn:hover, :root[data-glpi-theme=mbl_escuro] .marketplace a.btn:hover, :root[data-glpi-theme=mbl_escuro] .marketplace button:hover { filter: brightness(1.2); transform: scale(1.04); } /* Destaque leve nos cards que possuem atualização disponível */ :root[data-glpi-theme=mbl_escuro] .marketplace .plugin:has(.btn[title*=Atualizar i]), :root[data-glpi-theme=mbl_escuro] .marketplace .plugin:has(.btn[data-bs-original-title*=Atualizar i]), :root[data-glpi-theme=mbl_escuro] .marketplace .plugin:has(.ti-cloud-download), :root[data-glpi-theme=mbl_escuro] .marketplace .card:has(.btn[title*=Atualizar i]), :root[data-glpi-theme=mbl_escuro] .marketplace .card:has(.btn[data-bs-original-title*=Atualizar i]), :root[data-glpi-theme=mbl_escuro] .marketplace .card:has(.ti-cloud-download) { border-color: #d98200 !important; box-shadow: inset 0 0 0 1px rgba(255, 176, 46, 0.35), 0 0 10px rgba(255, 176, 46, 0.18) !important; } /* Animação suave só para atualização, para chamar atenção sem incomodar */ :root[data-glpi-theme=mbl_escuro] .marketplace .btn[title*=Atualizar i], :root[data-glpi-theme=mbl_escuro] .marketplace .btn[data-bs-original-title*=Atualizar i], :root[data-glpi-theme=mbl_escuro] .marketplace .btn:has(.ti-cloud-download) { animation: mbl-plugin-update-pulse 1.8s ease-in-out infinite; } @keyframes mbl-plugin-update-pulse { 0% { box-shadow: 0 0 5px rgba(255, 176, 46, 0.35); } 50% { box-shadow: 0 0 14px rgba(255, 176, 46, 0.85); } 100% { box-shadow: 0 0 5px rgba(255, 176, 46, 0.35); } } /* ========================================================== MBL Escuro - Botões Plug-ins por ícone Versão mais forte: eye / eye-off / cloud / wrench / gear ========================================================== */ /* Base dos botões pequenos da tela de plug-ins */ :root[data-glpi-theme=mbl_escuro] .marketplace .plugin a, :root[data-glpi-theme=mbl_escuro] .marketplace .plugin button, :root[data-glpi-theme=mbl_escuro] .marketplace .plugin .btn, :root[data-glpi-theme=mbl_escuro] .marketplace .card a, :root[data-glpi-theme=mbl_escuro] .marketplace .card button, :root[data-glpi-theme=mbl_escuro] .marketplace .card .btn { border-radius: 6px !important; } /* Botão/ícone de plugin ATIVO: olho */ :root[data-glpi-theme=mbl_escuro] .marketplace a:has(.ti-eye), :root[data-glpi-theme=mbl_escuro] .marketplace button:has(.ti-eye), :root[data-glpi-theme=mbl_escuro] .marketplace .btn:has(.ti-eye), :root[data-glpi-theme=mbl_escuro] .marketplace a:has(.fa-eye), :root[data-glpi-theme=mbl_escuro] .marketplace button:has(.fa-eye), :root[data-glpi-theme=mbl_escuro] .marketplace .btn:has(.fa-eye), :root[data-glpi-theme=mbl_escuro] .marketplace a:has(.bi-eye), :root[data-glpi-theme=mbl_escuro] .marketplace button:has(.bi-eye), :root[data-glpi-theme=mbl_escuro] .marketplace .btn:has(.bi-eye), :root[data-glpi-theme=mbl_escuro] .marketplace a:has(use[href*=eye]), :root[data-glpi-theme=mbl_escuro] .marketplace button:has(use[href*=eye]), :root[data-glpi-theme=mbl_escuro] .marketplace .btn:has(use[href*=eye]) { background-color: #009e60 !important; border-color: #00e083 !important; color: #ffffff !important; box-shadow: 0 0 10px rgba(0, 224, 131, 0.65) !important; } /* Botão/ícone de plugin DESATIVADO: olho cortado, toggle off, play/enable */ :root[data-glpi-theme=mbl_escuro] .marketplace a:has(.ti-eye-off), :root[data-glpi-theme=mbl_escuro] .marketplace button:has(.ti-eye-off), :root[data-glpi-theme=mbl_escuro] .marketplace .btn:has(.ti-eye-off), :root[data-glpi-theme=mbl_escuro] .marketplace a:has(.fa-eye-slash), :root[data-glpi-theme=mbl_escuro] .marketplace button:has(.fa-eye-slash), :root[data-glpi-theme=mbl_escuro] .marketplace .btn:has(.fa-eye-slash), :root[data-glpi-theme=mbl_escuro] .marketplace a:has(.bi-eye-slash), :root[data-glpi-theme=mbl_escuro] .marketplace button:has(.bi-eye-slash), :root[data-glpi-theme=mbl_escuro] .marketplace .btn:has(.bi-eye-slash), :root[data-glpi-theme=mbl_escuro] .marketplace a:has(use[href*=eye-off]), :root[data-glpi-theme=mbl_escuro] .marketplace button:has(use[href*=eye-off]), :root[data-glpi-theme=mbl_escuro] .marketplace .btn:has(use[href*=eye-off]), :root[data-glpi-theme=mbl_escuro] .marketplace a:has(use[href*=eye-slash]), :root[data-glpi-theme=mbl_escuro] .marketplace button:has(use[href*=eye-slash]), :root[data-glpi-theme=mbl_escuro] .marketplace .btn:has(use[href*=eye-slash]), :root[data-glpi-theme=mbl_escuro] .marketplace a:has(.ti-player-play), :root[data-glpi-theme=mbl_escuro] .marketplace button:has(.ti-player-play), :root[data-glpi-theme=mbl_escuro] .marketplace .btn:has(.ti-player-play) { background-color: #b4232b !important; border-color: #ff4d5e !important; color: #ffffff !important; box-shadow: 0 0 10px rgba(255, 77, 94, 0.65) !important; } /* Botão de ATUALIZAÇÃO: nuvem */ :root[data-glpi-theme=mbl_escuro] .marketplace a:has(.ti-cloud), :root[data-glpi-theme=mbl_escuro] .marketplace button:has(.ti-cloud), :root[data-glpi-theme=mbl_escuro] .marketplace .btn:has(.ti-cloud), :root[data-glpi-theme=mbl_escuro] .marketplace a:has(.fa-cloud), :root[data-glpi-theme=mbl_escuro] .marketplace button:has(.fa-cloud), :root[data-glpi-theme=mbl_escuro] .marketplace .btn:has(.fa-cloud), :root[data-glpi-theme=mbl_escuro] .marketplace a:has(.bi-cloud), :root[data-glpi-theme=mbl_escuro] .marketplace button:has(.bi-cloud), :root[data-glpi-theme=mbl_escuro] .marketplace .btn:has(.bi-cloud), :root[data-glpi-theme=mbl_escuro] .marketplace a:has(use[href*=cloud]), :root[data-glpi-theme=mbl_escuro] .marketplace button:has(use[href*=cloud]), :root[data-glpi-theme=mbl_escuro] .marketplace .btn:has(use[href*=cloud]) { background-color: #d98200 !important; border-color: #ffb02e !important; color: #ffffff !important; box-shadow: 0 0 12px rgba(255, 176, 46, 0.8) !important; animation: mbl-plugin-update-pulse 1.8s ease-in-out infinite; } /* Botão de configuração: chave, ferramenta, engrenagem */ :root[data-glpi-theme=mbl_escuro] .marketplace a:has(.ti-tool), :root[data-glpi-theme=mbl_escuro] .marketplace button:has(.ti-tool), :root[data-glpi-theme=mbl_escuro] .marketplace .btn:has(.ti-tool), :root[data-glpi-theme=mbl_escuro] .marketplace a:has(.ti-settings), :root[data-glpi-theme=mbl_escuro] .marketplace button:has(.ti-settings), :root[data-glpi-theme=mbl_escuro] .marketplace .btn:has(.ti-settings), :root[data-glpi-theme=mbl_escuro] .marketplace a:has(.fa-wrench), :root[data-glpi-theme=mbl_escuro] .marketplace button:has(.fa-wrench), :root[data-glpi-theme=mbl_escuro] .marketplace .btn:has(.fa-wrench), :root[data-glpi-theme=mbl_escuro] .marketplace a:has(.fa-cog), :root[data-glpi-theme=mbl_escuro] .marketplace button:has(.fa-cog), :root[data-glpi-theme=mbl_escuro] .marketplace .btn:has(.fa-cog), :root[data-glpi-theme=mbl_escuro] .marketplace a:has(use[href*=tool]), :root[data-glpi-theme=mbl_escuro] .marketplace button:has(use[href*=tool]), :root[data-glpi-theme=mbl_escuro] .marketplace .btn:has(use[href*=tool]), :root[data-glpi-theme=mbl_escuro] .marketplace a:has(use[href*=wrench]), :root[data-glpi-theme=mbl_escuro] .marketplace button:has(use[href*=wrench]), :root[data-glpi-theme=mbl_escuro] .marketplace .btn:has(use[href*=wrench]), :root[data-glpi-theme=mbl_escuro] .marketplace a:has(use[href*=gear]), :root[data-glpi-theme=mbl_escuro] .marketplace button:has(use[href*=gear]), :root[data-glpi-theme=mbl_escuro] .marketplace .btn:has(use[href*=gear]) { background-color: #174b65 !important; border-color: #5cc8ff !important; color: #ffffff !important; box-shadow: 0 0 8px rgba(92, 200, 255, 0.55) !important; } /* Ícones brancos dentro dos botões coloridos */ :root[data-glpi-theme=mbl_escuro] .marketplace a:has(.ti-eye) i, :root[data-glpi-theme=mbl_escuro] .marketplace button:has(.ti-eye) i, :root[data-glpi-theme=mbl_escuro] .marketplace a:has(.ti-cloud) i, :root[data-glpi-theme=mbl_escuro] .marketplace button:has(.ti-cloud) i, :root[data-glpi-theme=mbl_escuro] .marketplace a:has(.ti-tool) i, :root[data-glpi-theme=mbl_escuro] .marketplace button:has(.ti-tool) i, :root[data-glpi-theme=mbl_escuro] .marketplace a svg, :root[data-glpi-theme=mbl_escuro] .marketplace button svg, :root[data-glpi-theme=mbl_escuro] .marketplace .btn svg { color: #ffffff !important; fill: none !important; stroke: #ffffff !important; opacity: 1 !important; } /* Hover */ :root[data-glpi-theme=mbl_escuro] .marketplace a:hover, :root[data-glpi-theme=mbl_escuro] .marketplace button:hover, :root[data-glpi-theme=mbl_escuro] .marketplace .btn:hover { filter: brightness(1.18); } /* Pulso da atualização */ @keyframes mbl-plugin-update-pulse { 0% { box-shadow: 0 0 5px rgba(255, 176, 46, 0.35); } 50% { box-shadow: 0 0 15px rgba(255, 176, 46, 0.9); } 100% { box-shadow: 0 0 5px rgba(255, 176, 46, 0.35); } } /* ========================================================== MBL Escuro - Botões laterais dos plug-ins por posição 1º verde | 2º vermelho/laranja | 3º azul configuração ========================================================== */ /* Botões pequenos na lateral direita dos cards de plug-ins */ :root[data-glpi-theme=mbl_escuro] .marketplace .plugin > div:last-child a, :root[data-glpi-theme=mbl_escuro] .marketplace .plugin > div:last-child button, :root[data-glpi-theme=mbl_escuro] .marketplace .card > div:last-child a, :root[data-glpi-theme=mbl_escuro] .marketplace .card > div:last-child button { border-radius: 7px !important; color: #ffffff !important; opacity: 1 !important; } /* 1º botão lateral: status/ativo */ :root[data-glpi-theme=mbl_escuro] .marketplace .plugin > div:last-child a:nth-of-type(1), :root[data-glpi-theme=mbl_escuro] .marketplace .plugin > div:last-child button:nth-of-type(1), :root[data-glpi-theme=mbl_escuro] .marketplace .card > div:last-child a:nth-of-type(1), :root[data-glpi-theme=mbl_escuro] .marketplace .card > div:last-child button:nth-of-type(1) { background-color: #008f5d !important; border-color: #00e083 !important; color: #ffffff !important; box-shadow: 0 0 9px rgba(0, 224, 131, 0.65) !important; } /* 2º botão lateral: ação crítica / desabilitar / remover */ :root[data-glpi-theme=mbl_escuro] .marketplace .plugin > div:last-child a:nth-of-type(2), :root[data-glpi-theme=mbl_escuro] .marketplace .plugin > div:last-child button:nth-of-type(2), :root[data-glpi-theme=mbl_escuro] .marketplace .card > div:last-child a:nth-of-type(2), :root[data-glpi-theme=mbl_escuro] .marketplace .card > div:last-child button:nth-of-type(2) { background-color: #b4232b !important; border-color: #ff4d5e !important; color: #ffffff !important; box-shadow: 0 0 9px rgba(255, 77, 94, 0.6) !important; } /* 3º botão lateral: configuração */ :root[data-glpi-theme=mbl_escuro] .marketplace .plugin > div:last-child a:nth-of-type(3), :root[data-glpi-theme=mbl_escuro] .marketplace .plugin > div:last-child button:nth-of-type(3), :root[data-glpi-theme=mbl_escuro] .marketplace .card > div:last-child a:nth-of-type(3), :root[data-glpi-theme=mbl_escuro] .marketplace .card > div:last-child button:nth-of-type(3) { background-color: #174b65 !important; border-color: #5cc8ff !important; color: #ffffff !important; box-shadow: 0 0 9px rgba(92, 200, 255, 0.6) !important; } /* Ícones internos */ :root[data-glpi-theme=mbl_escuro] .marketplace .plugin > div:last-child a *, :root[data-glpi-theme=mbl_escuro] .marketplace .plugin > div:last-child button *, :root[data-glpi-theme=mbl_escuro] .marketplace .card > div:last-child a *, :root[data-glpi-theme=mbl_escuro] .marketplace .card > div:last-child button * { color: #ffffff !important; stroke: #ffffff !important; fill: none !important; opacity: 1 !important; } /* Hover dos botões */ :root[data-glpi-theme=mbl_escuro] .marketplace .plugin > div:last-child a:hover, :root[data-glpi-theme=mbl_escuro] .marketplace .plugin > div:last-child button:hover, :root[data-glpi-theme=mbl_escuro] .marketplace .card > div:last-child a:hover, :root[data-glpi-theme=mbl_escuro] .marketplace .card > div:last-child button:hover { filter: brightness(1.22); transform: scale(1.04); } /* Atualização disponível: qualquer botão com nuvem fica laranja */ :root[data-glpi-theme=mbl_escuro] .marketplace a:has(svg[class*=cloud]), :root[data-glpi-theme=mbl_escuro] .marketplace button:has(svg[class*=cloud]), :root[data-glpi-theme=mbl_escuro] .marketplace a:has(use[href*=cloud]), :root[data-glpi-theme=mbl_escuro] .marketplace button:has(use[href*=cloud]), :root[data-glpi-theme=mbl_escuro] .marketplace a:has(i[class*=cloud]), :root[data-glpi-theme=mbl_escuro] .marketplace button:has(i[class*=cloud]) { background-color: #d98200 !important; border-color: #ffb02e !important; color: #ffffff !important; box-shadow: 0 0 12px rgba(255, 176, 46, 0.85) !important; } /* ========================================================== MBL Escuro - Botões exatos da tela Plug-ins / Marketplace Baseado no HTML real do GLPI 11 Verde = ativo/desabilitar | Vermelho = desativado/habilitar Vermelho escuro = desinstalar | Azul = configurar | Laranja = atualizar ========================================================== */ /* Base visual dos botões dos cards de plug-ins */ :root[data-glpi-theme=mbl_escuro] .marketplace button.modify_plugin, :root[data-glpi-theme=mbl_escuro] .marketplace button.add_tooltip, :root[data-glpi-theme=mbl_escuro] .marketplace button[data-bs-toggle=modal], :root[data-glpi-theme=mbl_escuro] .marketplace a[href*="/plugins/"] > button { min-width: 29px !important; min-height: 29px !important; border-radius: 7px !important; border-width: 1px !important; opacity: 1 !important; color: #ffffff !important; } /* Ícones internos sempre brancos */ :root[data-glpi-theme=mbl_escuro] .marketplace button.modify_plugin i, :root[data-glpi-theme=mbl_escuro] .marketplace button.add_tooltip i, :root[data-glpi-theme=mbl_escuro] .marketplace button[data-bs-toggle=modal] i, :root[data-glpi-theme=mbl_escuro] .marketplace a[href*="/plugins/"] > button i { color: #ffffff !important; opacity: 1 !important; } /* Plugin habilitado: botão mostra ação "Desabilitar" */ :root[data-glpi-theme=mbl_escuro] .marketplace button.modify_plugin[data-action=disable_plugin], :root[data-glpi-theme=mbl_escuro] .marketplace button.modify_plugin[oldtitle=Desabilitar], :root[data-glpi-theme=mbl_escuro] .marketplace button:has(.ti-toggle-right-filled) { background-color: #008f5d !important; border-color: #00e083 !important; color: #ffffff !important; box-shadow: 0 0 10px rgba(0, 224, 131, 0.7) !important; } /* Plugin desabilitado: botão mostra ação "Habilitar" */ :root[data-glpi-theme=mbl_escuro] .marketplace button.modify_plugin[data-action=enable_plugin], :root[data-glpi-theme=mbl_escuro] .marketplace button.modify_plugin[oldtitle=Habilitar], :root[data-glpi-theme=mbl_escuro] .marketplace button:has(.ti-toggle-left-filled) { background-color: #b4232b !important; border-color: #ff4d5e !important; color: #ffffff !important; box-shadow: 0 0 10px rgba(255, 77, 94, 0.7) !important; } /* Desinstalar */ :root[data-glpi-theme=mbl_escuro] .marketplace button[title=Desinstalar], :root[data-glpi-theme=mbl_escuro] .marketplace button:has(.ti-folder-x), :root[data-glpi-theme=mbl_escuro] .marketplace .modify_plugin[data-action=uninstall_plugin] { background-color: #7f1d1d !important; border-color: #ef4444 !important; color: #ffffff !important; box-shadow: 0 0 9px rgba(239, 68, 68, 0.65) !important; } /* Configurar */ :root[data-glpi-theme=mbl_escuro] .marketplace button.add_tooltip[oldtitle=Configurar], :root[data-glpi-theme=mbl_escuro] .marketplace button:has(.ti-tool), :root[data-glpi-theme=mbl_escuro] .marketplace a[href*="/plugins/"] > button:has(.ti-tool) { background-color: #174b65 !important; border-color: #5cc8ff !important; color: #ffffff !important; box-shadow: 0 0 9px rgba(92, 200, 255, 0.65) !important; } /* Atualizar / baixar / instalar via Marketplace */ :root[data-glpi-theme=mbl_escuro] .marketplace button.modify_plugin[data-action=update_plugin], :root[data-glpi-theme=mbl_escuro] .marketplace button.modify_plugin[data-action=upgrade_plugin], :root[data-glpi-theme=mbl_escuro] .marketplace button.modify_plugin[data-action=download_plugin], :root[data-glpi-theme=mbl_escuro] .marketplace button.modify_plugin[data-action=install_plugin], :root[data-glpi-theme=mbl_escuro] .marketplace button[oldtitle*=Atualizar], :root[data-glpi-theme=mbl_escuro] .marketplace button[oldtitle*=Baixar], :root[data-glpi-theme=mbl_escuro] .marketplace button[oldtitle*=Instalar], :root[data-glpi-theme=mbl_escuro] .marketplace button:has(.ti-cloud), :root[data-glpi-theme=mbl_escuro] .marketplace button:has(.ti-cloud-download), :root[data-glpi-theme=mbl_escuro] .marketplace button:has(.ti-download) { background-color: #d98200 !important; border-color: #ffb02e !important; color: #ffffff !important; box-shadow: 0 0 12px rgba(255, 176, 46, 0.85) !important; animation: mbl-plugin-update-pulse 1.8s ease-in-out infinite; } /* Hover geral */ :root[data-glpi-theme=mbl_escuro] .marketplace button.modify_plugin:hover, :root[data-glpi-theme=mbl_escuro] .marketplace button.add_tooltip:hover, :root[data-glpi-theme=mbl_escuro] .marketplace button[data-bs-toggle=modal]:hover, :root[data-glpi-theme=mbl_escuro] .marketplace a[href*="/plugins/"] > button:hover { filter: brightness(1.2); transform: scale(1.04); } /* Cards com plugin desabilitado recebem borda vermelha discreta */ :root[data-glpi-theme=mbl_escuro] .marketplace .plugin:has(button.modify_plugin[data-action=enable_plugin]), :root[data-glpi-theme=mbl_escuro] .marketplace .card:has(button.modify_plugin[data-action=enable_plugin]) { border-color: #b4232b !important; box-shadow: inset 0 0 0 1px rgba(255, 77, 94, 0.25) !important; } /* Cards com atualização recebem borda laranja */ :root[data-glpi-theme=mbl_escuro] .marketplace .plugin:has(button.modify_plugin[data-action=update_plugin]), :root[data-glpi-theme=mbl_escuro] .marketplace .plugin:has(button.modify_plugin[data-action=upgrade_plugin]), :root[data-glpi-theme=mbl_escuro] .marketplace .plugin:has(button:has(.ti-cloud)), :root[data-glpi-theme=mbl_escuro] .marketplace .card:has(button.modify_plugin[data-action=update_plugin]), :root[data-glpi-theme=mbl_escuro] .marketplace .card:has(button.modify_plugin[data-action=upgrade_plugin]), :root[data-glpi-theme=mbl_escuro] .marketplace .card:has(button:has(.ti-cloud)) { border-color: #d98200 !important; box-shadow: inset 0 0 0 1px rgba(255, 176, 46, 0.35), 0 0 10px rgba(255, 176, 46, 0.18) !important; } /* Pulso da atualização */ @keyframes mbl-plugin-update-pulse { 0% { box-shadow: 0 0 5px rgba(255, 176, 46, 0.35); } 50% { box-shadow: 0 0 15px rgba(255, 176, 46, 0.9); } 100% { box-shadow: 0 0 5px rgba(255, 176, 46, 0.35); } } /* ========================================================== CHECKPOINT VISUAL OK Tema MBL Escuro validado visualmente em: - Tela Plug-ins / Marketplace - Botões semáforo dos plug-ins - More Reporting - Alertas e cards de atualização ========================================================== */ /* ========================================================== MBL Escuro - Refinamento da barra lateral Sidebar mais elegante e integrada ao tema ========================================================== */ /* Fundo principal da barra lateral */ :root[data-glpi-theme=mbl_escuro] .navbar-vertical, :root[data-glpi-theme=mbl_escuro] aside.navbar-vertical { background: linear-gradient(180deg, #061f1a 0%, #082d24 55%, #063821 100%) !important; border-right: 1px solid #0fa37a !important; box-shadow: 6px 0 18px rgba(0, 0, 0, 0.28) !important; } /* Remove aparência verde chapada em áreas internas */ :root[data-glpi-theme=mbl_escuro] .navbar-vertical .navbar-collapse, :root[data-glpi-theme=mbl_escuro] .navbar-vertical .navbar-nav, :root[data-glpi-theme=mbl_escuro] .navbar-vertical .navbar-brand, :root[data-glpi-theme=mbl_escuro] .navbar-vertical .container-fluid { background: transparent !important; } /* Logo mais destacado */ :root[data-glpi-theme=mbl_escuro] .navbar-vertical .navbar-brand { padding-top: 14px !important; padding-bottom: 14px !important; border-bottom: 1px solid rgba(0, 200, 150, 0.22) !important; } /* Itens principais do menu */ :root[data-glpi-theme=mbl_escuro] .navbar-vertical .nav-link { color: #c9eee3 !important; border-radius: 10px !important; margin: 2px 8px !important; padding: 9px 12px !important; transition: all 0.16s ease-in-out !important; border: 1px solid transparent !important; } /* Ícones dos itens */ :root[data-glpi-theme=mbl_escuro] .navbar-vertical .nav-link .nav-link-icon, :root[data-glpi-theme=mbl_escuro] .navbar-vertical .nav-link i, :root[data-glpi-theme=mbl_escuro] .navbar-vertical .nav-link svg { color: #7ee7c6 !important; opacity: 0.95 !important; } /* Hover dos itens */ :root[data-glpi-theme=mbl_escuro] .navbar-vertical .nav-link:hover { background: rgba(0, 200, 150, 0.13) !important; border-color: rgba(0, 200, 150, 0.3) !important; color: #ffffff !important; transform: translateX(2px); } /* Item ativo/selecionado */ :root[data-glpi-theme=mbl_escuro] .navbar-vertical .nav-link.active, :root[data-glpi-theme=mbl_escuro] .navbar-vertical .nav-item.active > .nav-link, :root[data-glpi-theme=mbl_escuro] .navbar-vertical .nav-item.show > .nav-link { background: linear-gradient(90deg, #00a878 0%, #08785e 100%) !important; border-color: #00d69a !important; color: #ffffff !important; font-weight: 700 !important; box-shadow: 0 0 12px rgba(0, 200, 150, 0.35) !important; } /* Ícones do item ativo */ :root[data-glpi-theme=mbl_escuro] .navbar-vertical .nav-link.active i, :root[data-glpi-theme=mbl_escuro] .navbar-vertical .nav-link.active svg, :root[data-glpi-theme=mbl_escuro] .navbar-vertical .nav-item.active > .nav-link i, :root[data-glpi-theme=mbl_escuro] .navbar-vertical .nav-item.active > .nav-link svg, :root[data-glpi-theme=mbl_escuro] .navbar-vertical .nav-item.show > .nav-link i, :root[data-glpi-theme=mbl_escuro] .navbar-vertical .nav-item.show > .nav-link svg { color: #ffffff !important; opacity: 1 !important; } /* Submenu/dropdown dentro da barra lateral */ :root[data-glpi-theme=mbl_escuro] .navbar-vertical .dropdown-menu, :root[data-glpi-theme=mbl_escuro] .navbar-vertical .nav-item .dropdown-menu { background: rgba(3, 28, 23, 0.92) !important; border: 1px solid rgba(0, 200, 150, 0.3) !important; border-radius: 12px !important; margin: 4px 8px 8px 8px !important; padding: 6px !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02), 0 8px 18px rgba(0, 0, 0, 0.25) !important; } /* Links do submenu */ :root[data-glpi-theme=mbl_escuro] .navbar-vertical .dropdown-menu .dropdown-item, :root[data-glpi-theme=mbl_escuro] .navbar-vertical .dropdown-menu .nav-link { color: #c9eee3 !important; border-radius: 8px !important; margin: 1px 0 !important; padding: 8px 10px !important; background: transparent !important; } /* Hover submenu */ :root[data-glpi-theme=mbl_escuro] .navbar-vertical .dropdown-menu .dropdown-item:hover, :root[data-glpi-theme=mbl_escuro] .navbar-vertical .dropdown-menu .nav-link:hover { background: rgba(0, 200, 150, 0.14) !important; color: #ffffff !important; } /* Item ativo no submenu */ :root[data-glpi-theme=mbl_escuro] .navbar-vertical .dropdown-menu .dropdown-item.active, :root[data-glpi-theme=mbl_escuro] .navbar-vertical .dropdown-menu .nav-link.active { background: rgba(0, 168, 120, 0.32) !important; color: #ffffff !important; font-weight: 700 !important; border-left: 3px solid #00d69a !important; } /* Botão Encontrar um menu */ :root[data-glpi-theme=mbl_escuro] .navbar-vertical a[href*="helpdesk.public"], :root[data-glpi-theme=mbl_escuro] .navbar-vertical .btn, :root[data-glpi-theme=mbl_escuro] .navbar-vertical button { border-radius: 999px !important; } /* Botão recolher menu */ :root[data-glpi-theme=mbl_escuro] .navbar-vertical .navbar-toggler, :root[data-glpi-theme=mbl_escuro] .navbar-vertical .btn-outline, :root[data-glpi-theme=mbl_escuro] .navbar-vertical [class*=collapse] button { background: rgba(0, 168, 120, 0.32) !important; border-color: rgba(0, 214, 154, 0.65) !important; color: #ffffff !important; } /* Scrollbar da lateral mais discreta */ :root[data-glpi-theme=mbl_escuro] .navbar-vertical ::-webkit-scrollbar { width: 7px; } :root[data-glpi-theme=mbl_escuro] .navbar-vertical ::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.18); } :root[data-glpi-theme=mbl_escuro] .navbar-vertical ::-webkit-scrollbar-thumb { background: rgba(0, 200, 150, 0.45); border-radius: 999px; } /* Pequena separação entre grupos de menu */ :root[data-glpi-theme=mbl_escuro] .navbar-vertical .nav-item { margin-bottom: 1px !important; } /* Seta dos menus expansíveis */ :root[data-glpi-theme=mbl_escuro] .navbar-vertical .dropdown-toggle:after { border-color: #7ee7c6 !important; opacity: 0.8 !important; } /* ========================================================== MBL Escuro - Refinamento de botões Deixa botões mais elegantes e coerentes com o tema ========================================================== */ :root[data-glpi-theme=mbl_escuro] { --mbl-btn-primary-bg: linear-gradient(180deg, #22c98b 0%, #12a56f 100%); --mbl-btn-primary-border: #39d89a; --mbl-btn-primary-text: #ffffff; --mbl-btn-primary-shadow: 0 6px 14px rgba(18, 165, 111, .28); --mbl-btn-secondary-bg: rgba(34, 201, 139, .10); --mbl-btn-secondary-border: rgba(102, 235, 182, .34); --mbl-btn-secondary-text: #c8f7e5; --mbl-btn-ghost-bg: rgba(255,255,255,.04); --mbl-btn-ghost-border: rgba(130, 220, 186, .18); --mbl-btn-ghost-text: #d7f7ea; --mbl-btn-danger-bg: linear-gradient(180deg, #d44b58 0%, #b73443 100%); --mbl-btn-danger-border: #f06f7b; --mbl-btn-danger-text: #ffffff; --mbl-btn-danger-shadow: 0 6px 14px rgba(212, 75, 88, .22); --mbl-btn-radius: 10px; --mbl-btn-radius-sm: 8px; } /* Base geral */ :root[data-glpi-theme=mbl_escuro] .btn { border-radius: var(--mbl-btn-radius) !important; font-weight: 700 !important; letter-spacing: 0.01em !important; transition: all 0.18s ease-in-out !important; box-shadow: none !important; } /* Botão primário */ :root[data-glpi-theme=mbl_escuro] .btn-primary, :root[data-glpi-theme=mbl_escuro] .btn-outline-primary:hover, :root[data-glpi-theme=mbl_escuro] .btn-success { background: var(--mbl-btn-primary-bg) !important; border-color: var(--mbl-btn-primary-border) !important; color: var(--mbl-btn-primary-text) !important; box-shadow: var(--mbl-btn-primary-shadow) !important; } /* Hover do primário */ :root[data-glpi-theme=mbl_escuro] .btn-primary:hover, :root[data-glpi-theme=mbl_escuro] .btn-success:hover, :root[data-glpi-theme=mbl_escuro] .btn-outline-primary:hover { filter: brightness(1.06) !important; transform: translateY(-1px) !important; box-shadow: 0 8px 18px rgba(18, 165, 111, 0.34) !important; } /* Focus */ :root[data-glpi-theme=mbl_escuro] .btn:focus, :root[data-glpi-theme=mbl_escuro] .btn:active:focus { box-shadow: 0 0 0 3px rgba(64, 220, 160, 0.18) !important; } /* Botões secundários / outline */ :root[data-glpi-theme=mbl_escuro] .btn-outline-secondary, :root[data-glpi-theme=mbl_escuro] .btn-secondary, :root[data-glpi-theme=mbl_escuro] .btn-light { background: var(--mbl-btn-secondary-bg) !important; border-color: var(--mbl-btn-secondary-border) !important; color: var(--mbl-btn-secondary-text) !important; } :root[data-glpi-theme=mbl_escuro] .btn-outline-secondary:hover, :root[data-glpi-theme=mbl_escuro] .btn-secondary:hover, :root[data-glpi-theme=mbl_escuro] .btn-light:hover { background: rgba(34, 201, 139, 0.18) !important; border-color: rgba(102, 235, 182, 0.5) !important; color: #ffffff !important; transform: translateY(-1px) !important; } /* Botões danger */ :root[data-glpi-theme=mbl_escuro] .btn-danger, :root[data-glpi-theme=mbl_escuro] .btn-outline-danger:hover { background: var(--mbl-btn-danger-bg) !important; border-color: var(--mbl-btn-danger-border) !important; color: var(--mbl-btn-danger-text) !important; box-shadow: var(--mbl-btn-danger-shadow) !important; } :root[data-glpi-theme=mbl_escuro] .btn-danger:hover, :root[data-glpi-theme=mbl_escuro] .btn-outline-danger:hover { filter: brightness(1.05) !important; transform: translateY(-1px) !important; } /* Botões outline primário sem ficar gritante */ :root[data-glpi-theme=mbl_escuro] .btn-outline-primary { background: rgba(34, 201, 139, 0.06) !important; border-color: rgba(102, 235, 182, 0.32) !important; color: #bff4de !important; } /* Botões pequenos */ :root[data-glpi-theme=mbl_escuro] .btn-sm, :root[data-glpi-theme=mbl_escuro] .btn-group-sm > .btn { border-radius: var(--mbl-btn-radius-sm) !important; padding-top: 0.28rem !important; padding-bottom: 0.28rem !important; } /* Split button / dropdown button */ :root[data-glpi-theme=mbl_escuro] .btn-group > .btn, :root[data-glpi-theme=mbl_escuro] .input-group .btn { border-radius: var(--mbl-btn-radius-sm) !important; } /* Botões de ícone redondos/quadrados pequenos */ :root[data-glpi-theme=mbl_escuro] .btn-icon, :root[data-glpi-theme=mbl_escuro] .btn-ghost, :root[data-glpi-theme=mbl_escuro] button[class*=btn-icon], :root[data-glpi-theme=mbl_escuro] a[class*=btn-icon] { background: var(--mbl-btn-ghost-bg) !important; border: 1px solid var(--mbl-btn-ghost-border) !important; color: var(--mbl-btn-ghost-text) !important; border-radius: 9px !important; } :root[data-glpi-theme=mbl_escuro] .btn-icon:hover, :root[data-glpi-theme=mbl_escuro] .btn-ghost:hover, :root[data-glpi-theme=mbl_escuro] button[class*=btn-icon]:hover, :root[data-glpi-theme=mbl_escuro] a[class*=btn-icon]:hover { background: rgba(34, 201, 139, 0.12) !important; border-color: rgba(102, 235, 182, 0.3) !important; color: #ffffff !important; } /* Botões do rodapé do chamado: Responder / Salvar */ :root[data-glpi-theme=mbl_escuro] .itil-footer .btn, :root[data-glpi-theme=mbl_escuro] .timeline .btn, :root[data-glpi-theme=mbl_escuro] .sticky-footer .btn, :root[data-glpi-theme=mbl_escuro] .fixed-bottom .btn { border-radius: 11px !important; min-height: 38px !important; } /* Botão responder mais bonito */ :root[data-glpi-theme=mbl_escuro] .btn:has(.ti-corner-down-left), :root[data-glpi-theme=mbl_escuro] .btn:has(.fa-reply), :root[data-glpi-theme=mbl_escuro] .btn[title*=Responder], :root[data-glpi-theme=mbl_escuro] .btn[aria-label*=Responder] { background: linear-gradient(180deg, #1fc184 0%, #129a68 100%) !important; border-color: #44d89c !important; color: #ffffff !important; box-shadow: 0 6px 14px rgba(18, 154, 104, 0.28) !important; } /* Botão salvar */ :root[data-glpi-theme=mbl_escuro] .btn:has(.ti-device-floppy), :root[data-glpi-theme=mbl_escuro] .btn:has(.fa-save), :root[data-glpi-theme=mbl_escuro] .btn[title*=Salvar], :root[data-glpi-theme=mbl_escuro] .btn[aria-label*=Salvar] { background: linear-gradient(180deg, #26c58b 0%, #169f6d 100%) !important; border-color: #52ddb0 !important; color: #ffffff !important; box-shadow: 0 6px 14px rgba(22, 159, 109, 0.28) !important; } /* Botões de paginação e navegação ao lado do chamado */ :root[data-glpi-theme=mbl_escuro] .pagination .page-link, :root[data-glpi-theme=mbl_escuro] .pager .btn, :root[data-glpi-theme=mbl_escuro] .btn-toolbar .btn { background: rgba(255, 255, 255, 0.04) !important; border-color: rgba(102, 235, 182, 0.18) !important; color: #d7f7ea !important; border-radius: 8px !important; } :root[data-glpi-theme=mbl_escuro] .pagination .page-link:hover, :root[data-glpi-theme=mbl_escuro] .pager .btn:hover, :root[data-glpi-theme=mbl_escuro] .btn-toolbar .btn:hover { background: rgba(34, 201, 139, 0.12) !important; color: #ffffff !important; border-color: rgba(102, 235, 182, 0.3) !important; } /* Dropdown menus ligados aos botões */ :root[data-glpi-theme=mbl_escuro] .dropdown-menu { background: #0b211c !important; border: 1px solid #1d5b48 !important; border-radius: 12px !important; box-shadow: 0 12px 26px rgba(0, 0, 0, 0.28) !important; } :root[data-glpi-theme=mbl_escuro] .dropdown-item { color: #d9f4eb !important; border-radius: 8px !important; } :root[data-glpi-theme=mbl_escuro] .dropdown-item:hover { background: rgba(34, 201, 139, 0.12) !important; color: #ffffff !important; } /* Ícones dentro dos botões */ :root[data-glpi-theme=mbl_escuro] .btn i, :root[data-glpi-theme=mbl_escuro] .btn svg { opacity: 0.96 !important; } /* Desabilitado mais elegante */ :root[data-glpi-theme=mbl_escuro] .btn:disabled, :root[data-glpi-theme=mbl_escuro] .btn.disabled { background: rgba(255, 255, 255, 0.05) !important; border-color: rgba(255, 255, 255, 0.08) !important; color: rgba(220, 245, 236, 0.45) !important; box-shadow: none !important; } /* ========================================================== MBL Escuro - Refinamento da tela de chamado Ajusta lateral direita, campos e botões inferiores ========================================================== */ /* Área direita do chamado mais sóbria */ :root[data-glpi-theme=mbl_escuro] body:has(.timeline-item) .right-sidebar, :root[data-glpi-theme=mbl_escuro] body:has(.timeline-item) .itil-sidebar, :root[data-glpi-theme=mbl_escuro] body:has(.timeline-item) .itil-right-side, :root[data-glpi-theme=mbl_escuro] body:has(.timeline-item) .ticket-sidebar, :root[data-glpi-theme=mbl_escuro] body:has(.timeline-item) .page-aside, :root[data-glpi-theme=mbl_escuro] body:has(.timeline-item) aside { background-color: #061a16 !important; border-color: #123d32 !important; color: #e8f6f1 !important; } /* Cabeçalhos da lateral: Chamado, Atores, Itens */ :root[data-glpi-theme=mbl_escuro] body:has(.timeline-item) .right-sidebar .card-header, :root[data-glpi-theme=mbl_escuro] body:has(.timeline-item) .itil-sidebar .card-header, :root[data-glpi-theme=mbl_escuro] body:has(.timeline-item) .itil-right-side .card-header, :root[data-glpi-theme=mbl_escuro] body:has(.timeline-item) .ticket-sidebar .card-header, :root[data-glpi-theme=mbl_escuro] body:has(.timeline-item) .page-aside .card-header, :root[data-glpi-theme=mbl_escuro] body:has(.timeline-item) aside .card-header, :root[data-glpi-theme=mbl_escuro] body:has(.timeline-item) .accordion-header, :root[data-glpi-theme=mbl_escuro] body:has(.timeline-item) .accordion-button { background: linear-gradient(90deg, #0d3a2f 0%, #115844 100%) !important; border-color: #1a6b54 !important; color: #dffff2 !important; font-weight: 700 !important; box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.04) !important; } /* Corpo das seções da lateral */ :root[data-glpi-theme=mbl_escuro] body:has(.timeline-item) .right-sidebar .card-body, :root[data-glpi-theme=mbl_escuro] body:has(.timeline-item) .itil-sidebar .card-body, :root[data-glpi-theme=mbl_escuro] body:has(.timeline-item) .itil-right-side .card-body, :root[data-glpi-theme=mbl_escuro] body:has(.timeline-item) .ticket-sidebar .card-body, :root[data-glpi-theme=mbl_escuro] body:has(.timeline-item) .page-aside .card-body, :root[data-glpi-theme=mbl_escuro] body:has(.timeline-item) aside .card-body { background-color: #061a16 !important; color: #e8f6f1 !important; } /* Labels da lateral */ :root[data-glpi-theme=mbl_escuro] body:has(.timeline-item) .right-sidebar label, :root[data-glpi-theme=mbl_escuro] body:has(.timeline-item) .itil-sidebar label, :root[data-glpi-theme=mbl_escuro] body:has(.timeline-item) .itil-right-side label, :root[data-glpi-theme=mbl_escuro] body:has(.timeline-item) .ticket-sidebar label, :root[data-glpi-theme=mbl_escuro] body:has(.timeline-item) .page-aside label, :root[data-glpi-theme=mbl_escuro] body:has(.timeline-item) aside label, :root[data-glpi-theme=mbl_escuro] body:has(.timeline-item) .form-label { color: #c6e9dd !important; font-weight: 600 !important; } /* Campos da lateral direita mais elegantes */ :root[data-glpi-theme=mbl_escuro] body:has(.timeline-item) .right-sidebar input, :root[data-glpi-theme=mbl_escuro] body:has(.timeline-item) .right-sidebar select, :root[data-glpi-theme=mbl_escuro] body:has(.timeline-item) .right-sidebar textarea, :root[data-glpi-theme=mbl_escuro] body:has(.timeline-item) .itil-sidebar input, :root[data-glpi-theme=mbl_escuro] body:has(.timeline-item) .itil-sidebar select, :root[data-glpi-theme=mbl_escuro] body:has(.timeline-item) .itil-sidebar textarea, :root[data-glpi-theme=mbl_escuro] body:has(.timeline-item) .itil-right-side input, :root[data-glpi-theme=mbl_escuro] body:has(.timeline-item) .itil-right-side select, :root[data-glpi-theme=mbl_escuro] body:has(.timeline-item) .itil-right-side textarea, :root[data-glpi-theme=mbl_escuro] body:has(.timeline-item) .page-aside input, :root[data-glpi-theme=mbl_escuro] body:has(.timeline-item) .page-aside select, :root[data-glpi-theme=mbl_escuro] body:has(.timeline-item) .page-aside textarea, :root[data-glpi-theme=mbl_escuro] body:has(.timeline-item) aside input, :root[data-glpi-theme=mbl_escuro] body:has(.timeline-item) aside select, :root[data-glpi-theme=mbl_escuro] body:has(.timeline-item) aside textarea, :root[data-glpi-theme=mbl_escuro] body:has(.timeline-item) .select2-selection { background-color: #09251f !important; border-color: #1b5b49 !important; color: #eafff7 !important; border-radius: 8px !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.02) !important; } /* Foco dos campos sem neon exagerado */ :root[data-glpi-theme=mbl_escuro] body:has(.timeline-item) input:focus, :root[data-glpi-theme=mbl_escuro] body:has(.timeline-item) select:focus, :root[data-glpi-theme=mbl_escuro] body:has(.timeline-item) textarea:focus, :root[data-glpi-theme=mbl_escuro] body:has(.timeline-item) .select2-selection:focus { border-color: #33d399 !important; box-shadow: 0 0 0 3px rgba(51, 211, 153, 0.14) !important; } /* Chips de usuários/atores */ :root[data-glpi-theme=mbl_escuro] body:has(.timeline-item) .right-sidebar .badge, :root[data-glpi-theme=mbl_escuro] body:has(.timeline-item) .right-sidebar .tag, :root[data-glpi-theme=mbl_escuro] body:has(.timeline-item) .itil-sidebar .badge, :root[data-glpi-theme=mbl_escuro] body:has(.timeline-item) .itil-sidebar .tag, :root[data-glpi-theme=mbl_escuro] body:has(.timeline-item) .page-aside .badge, :root[data-glpi-theme=mbl_escuro] body:has(.timeline-item) .page-aside .tag { background-color: #0f3a30 !important; color: #dffff2 !important; border: 1px solid #246b58 !important; } /* Botões pequenos de ação da lateral: info, adicionar, calendário, usuário */ :root[data-glpi-theme=mbl_escuro] body:has(.timeline-item) .right-sidebar button, :root[data-glpi-theme=mbl_escuro] body:has(.timeline-item) .itil-sidebar button, :root[data-glpi-theme=mbl_escuro] body:has(.timeline-item) .page-aside button, :root[data-glpi-theme=mbl_escuro] body:has(.timeline-item) aside button { background: linear-gradient(180deg, #17825f 0%, #0f654d 100%) !important; border-color: #2dbb8b !important; color: #ffffff !important; border-radius: 8px !important; box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2) !important; } /* Hover dos botões pequenos */ :root[data-glpi-theme=mbl_escuro] body:has(.timeline-item) .right-sidebar button:hover, :root[data-glpi-theme=mbl_escuro] body:has(.timeline-item) .itil-sidebar button:hover, :root[data-glpi-theme=mbl_escuro] body:has(.timeline-item) .page-aside button:hover, :root[data-glpi-theme=mbl_escuro] body:has(.timeline-item) aside button:hover { background: linear-gradient(180deg, #22a777 0%, #15805f 100%) !important; border-color: #45d9a5 !important; } /* Botão lixeira */ :root[data-glpi-theme=mbl_escuro] body:has(.timeline-item) button:has(.ti-trash), :root[data-glpi-theme=mbl_escuro] body:has(.timeline-item) button:has(.fa-trash), :root[data-glpi-theme=mbl_escuro] body:has(.timeline-item) .btn-danger { background: linear-gradient(180deg, #b83a47 0%, #8f2632 100%) !important; border-color: #e65d6a !important; color: #ffffff !important; } /* Botão salvar */ :root[data-glpi-theme=mbl_escuro] body:has(.timeline-item) button:has(.ti-device-floppy), :root[data-glpi-theme=mbl_escuro] body:has(.timeline-item) button:has(.fa-save), :root[data-glpi-theme=mbl_escuro] body:has(.timeline-item) .btn[title*=Salvar], :root[data-glpi-theme=mbl_escuro] body:has(.timeline-item) .btn[aria-label*=Salvar] { background: linear-gradient(180deg, #20bd83 0%, #129868 100%) !important; border-color: #4de0a9 !important; color: #ffffff !important; border-radius: 10px !important; box-shadow: 0 6px 14px rgba(18, 152, 104, 0.28) !important; } /* Botões inferiores de navegação, filtro e lista */ :root[data-glpi-theme=mbl_escuro] body:has(.timeline-item) .fixed-bottom .btn, :root[data-glpi-theme=mbl_escuro] body:has(.timeline-item) .sticky-footer .btn, :root[data-glpi-theme=mbl_escuro] body:has(.timeline-item) .itil-footer .btn, :root[data-glpi-theme=mbl_escuro] body:has(.timeline-item) .timeline-buttons .btn, :root[data-glpi-theme=mbl_escuro] body:has(.timeline-item) .btn-toolbar .btn { background: linear-gradient(180deg, #13785a 0%, #0f5f49 100%) !important; border-color: #2aa87d !important; color: #ffffff !important; border-radius: 10px !important; min-width: 36px !important; min-height: 36px !important; box-shadow: 0 5px 12px rgba(0, 0, 0, 0.25) !important; } /* Hover dos botões inferiores */ :root[data-glpi-theme=mbl_escuro] body:has(.timeline-item) .fixed-bottom .btn:hover, :root[data-glpi-theme=mbl_escuro] body:has(.timeline-item) .sticky-footer .btn:hover, :root[data-glpi-theme=mbl_escuro] body:has(.timeline-item) .itil-footer .btn:hover, :root[data-glpi-theme=mbl_escuro] body:has(.timeline-item) .timeline-buttons .btn:hover, :root[data-glpi-theme=mbl_escuro] body:has(.timeline-item) .btn-toolbar .btn:hover { background: linear-gradient(180deg, #1fa97a 0%, #168060 100%) !important; border-color: #50e0ad !important; transform: translateY(-1px); } /* Botão Responder */ :root[data-glpi-theme=mbl_escuro] body:has(.timeline-item) .btn:has(.ti-message), :root[data-glpi-theme=mbl_escuro] body:has(.timeline-item) .btn:has(.ti-corner-down-left), :root[data-glpi-theme=mbl_escuro] body:has(.timeline-item) .btn[title*=Responder], :root[data-glpi-theme=mbl_escuro] body:has(.timeline-item) .btn[aria-label*=Responder] { background: linear-gradient(180deg, #20bd83 0%, #129868 100%) !important; border-color: #4de0a9 !important; color: #ffffff !important; border-radius: 10px !important; box-shadow: 0 6px 14px rgba(18, 152, 104, 0.28) !important; } /* Evita cabeçalho verde claro demais caso alguma regra antiga force */ :root[data-glpi-theme=mbl_escuro] body:has(.timeline-item) .bg-primary, :root[data-glpi-theme=mbl_escuro] body:has(.timeline-item) .bg-success { background-color: #115844 !important; color: #eafff7 !important; } /* ========================================================== MBL Escuro - Padronização final dos botões Visual mais elegante, consistente e sem neon exagerado ========================================================== */ :root[data-glpi-theme=mbl_escuro] { --mbl-action-bg: linear-gradient(180deg, #2ec58d 0%, #159866 100%); --mbl-action-bg-hover: linear-gradient(180deg, #43dca3 0%, #1eaa76 100%); --mbl-action-border: #56ddb0; --mbl-action-text: #ffffff; --mbl-soft-bg: linear-gradient(180deg, #0f3a30 0%, #0a2c25 100%); --mbl-soft-bg-hover: linear-gradient(180deg, #155544 0%, #0d3a30 100%); --mbl-soft-border: #23745d; --mbl-soft-text: #dffff2; --mbl-danger-bg: linear-gradient(180deg, #c34a55 0%, #9d2f3b 100%); --mbl-danger-bg-hover: linear-gradient(180deg, #dc5d69 0%, #b83a47 100%); --mbl-danger-border: #ef7b86; --mbl-button-radius: 10px; --mbl-button-radius-sm: 8px; } /* Base geral dos botões Bootstrap */ :root[data-glpi-theme=mbl_escuro] .btn { border-radius: var(--mbl-button-radius) !important; font-weight: 700 !important; letter-spacing: 0.01em !important; transition: all 0.16s ease-in-out !important; border-width: 1px !important; } /* Botões principais: Adicionar, Salvar, Responder, ações positivas */ :root[data-glpi-theme=mbl_escuro] .btn-primary, :root[data-glpi-theme=mbl_escuro] .btn-success, :root[data-glpi-theme=mbl_escuro] .btn-outline-primary:hover, :root[data-glpi-theme=mbl_escuro] .btn-outline-success:hover, :root[data-glpi-theme=mbl_escuro] button[type=submit].btn, :root[data-glpi-theme=mbl_escuro] input[type=submit].btn { background: var(--mbl-action-bg) !important; border-color: var(--mbl-action-border) !important; color: var(--mbl-action-text) !important; box-shadow: 0 5px 13px rgba(21, 152, 102, 0.26) !important; } :root[data-glpi-theme=mbl_escuro] .btn-primary:hover, :root[data-glpi-theme=mbl_escuro] .btn-success:hover, :root[data-glpi-theme=mbl_escuro] button[type=submit].btn:hover, :root[data-glpi-theme=mbl_escuro] input[type=submit].btn:hover { background: var(--mbl-action-bg-hover) !important; border-color: #72edc2 !important; color: #ffffff !important; transform: translateY(-1px); box-shadow: 0 7px 17px rgba(21, 152, 102, 0.34) !important; } /* Botões secundários: Modelos, Kanban, navegação e ações neutras */ :root[data-glpi-theme=mbl_escuro] .btn-secondary, :root[data-glpi-theme=mbl_escuro] .btn-outline-secondary, :root[data-glpi-theme=mbl_escuro] .btn-light, :root[data-glpi-theme=mbl_escuro] .btn-outline-light, :root[data-glpi-theme=mbl_escuro] .btn-default { background: var(--mbl-soft-bg) !important; border-color: var(--mbl-soft-border) !important; color: var(--mbl-soft-text) !important; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18) !important; } :root[data-glpi-theme=mbl_escuro] .btn-secondary:hover, :root[data-glpi-theme=mbl_escuro] .btn-outline-secondary:hover, :root[data-glpi-theme=mbl_escuro] .btn-light:hover, :root[data-glpi-theme=mbl_escuro] .btn-outline-light:hover, :root[data-glpi-theme=mbl_escuro] .btn-default:hover { background: var(--mbl-soft-bg-hover) !important; border-color: #39b58a !important; color: #ffffff !important; transform: translateY(-1px); } /* Botões de perigo: excluir, remover, lixeira */ :root[data-glpi-theme=mbl_escuro] .btn-danger, :root[data-glpi-theme=mbl_escuro] .btn-outline-danger:hover, :root[data-glpi-theme=mbl_escuro] button:has(.ti-trash), :root[data-glpi-theme=mbl_escuro] button:has(.fa-trash), :root[data-glpi-theme=mbl_escuro] .btn:has(.ti-trash), :root[data-glpi-theme=mbl_escuro] .btn:has(.fa-trash) { background: var(--mbl-danger-bg) !important; border-color: var(--mbl-danger-border) !important; color: #ffffff !important; box-shadow: 0 5px 13px rgba(195, 74, 85, 0.24) !important; } :root[data-glpi-theme=mbl_escuro] .btn-danger:hover, :root[data-glpi-theme=mbl_escuro] button:has(.ti-trash):hover, :root[data-glpi-theme=mbl_escuro] button:has(.fa-trash):hover, :root[data-glpi-theme=mbl_escuro] .btn:has(.ti-trash):hover, :root[data-glpi-theme=mbl_escuro] .btn:has(.fa-trash):hover { background: var(--mbl-danger-bg-hover) !important; border-color: #ff9aa3 !important; transform: translateY(-1px); } /* Botões pequenos */ :root[data-glpi-theme=mbl_escuro] .btn-sm, :root[data-glpi-theme=mbl_escuro] .btn-group-sm > .btn { border-radius: var(--mbl-button-radius-sm) !important; min-height: 30px !important; } /* Botões de ícone, paginação, filtros e setas */ :root[data-glpi-theme=mbl_escuro] .btn-icon, :root[data-glpi-theme=mbl_escuro] .btn-ghost, :root[data-glpi-theme=mbl_escuro] .pagination .page-link, :root[data-glpi-theme=mbl_escuro] .pager .btn, :root[data-glpi-theme=mbl_escuro] .btn-toolbar .btn, :root[data-glpi-theme=mbl_escuro] .fixed-bottom .btn, :root[data-glpi-theme=mbl_escuro] .sticky-footer .btn, :root[data-glpi-theme=mbl_escuro] .itil-footer .btn { background: var(--mbl-soft-bg) !important; border-color: var(--mbl-soft-border) !important; color: var(--mbl-soft-text) !important; border-radius: var(--mbl-button-radius-sm) !important; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2) !important; } :root[data-glpi-theme=mbl_escuro] .btn-icon:hover, :root[data-glpi-theme=mbl_escuro] .btn-ghost:hover, :root[data-glpi-theme=mbl_escuro] .pagination .page-link:hover, :root[data-glpi-theme=mbl_escuro] .pager .btn:hover, :root[data-glpi-theme=mbl_escuro] .btn-toolbar .btn:hover, :root[data-glpi-theme=mbl_escuro] .fixed-bottom .btn:hover, :root[data-glpi-theme=mbl_escuro] .sticky-footer .btn:hover, :root[data-glpi-theme=mbl_escuro] .itil-footer .btn:hover { background: var(--mbl-soft-bg-hover) !important; border-color: #39b58a !important; color: #ffffff !important; } /* Botões redondos/pequenos dentro da lateral direita do chamado */ :root[data-glpi-theme=mbl_escuro] body:has(.timeline-item) aside button, :root[data-glpi-theme=mbl_escuro] body:has(.timeline-item) .right-sidebar button, :root[data-glpi-theme=mbl_escuro] body:has(.timeline-item) .itil-sidebar button, :root[data-glpi-theme=mbl_escuro] body:has(.timeline-item) .page-aside button { background: var(--mbl-soft-bg) !important; border-color: var(--mbl-soft-border) !important; color: #dffff2 !important; border-radius: 9px !important; box-shadow: 0 3px 9px rgba(0, 0, 0, 0.22) !important; } :root[data-glpi-theme=mbl_escuro] body:has(.timeline-item) aside button:hover, :root[data-glpi-theme=mbl_escuro] body:has(.timeline-item) .right-sidebar button:hover, :root[data-glpi-theme=mbl_escuro] body:has(.timeline-item) .itil-sidebar button:hover, :root[data-glpi-theme=mbl_escuro] body:has(.timeline-item) .page-aside button:hover { background: var(--mbl-soft-bg-hover) !important; border-color: #3fc191 !important; color: #ffffff !important; } /* Botão Salvar no rodapé */ :root[data-glpi-theme=mbl_escuro] .btn:has(.ti-device-floppy), :root[data-glpi-theme=mbl_escuro] .btn:has(.fa-save), :root[data-glpi-theme=mbl_escuro] .btn[title*=Salvar], :root[data-glpi-theme=mbl_escuro] .btn[aria-label*=Salvar] { background: var(--mbl-action-bg) !important; border-color: var(--mbl-action-border) !important; color: #ffffff !important; box-shadow: 0 5px 13px rgba(21, 152, 102, 0.3) !important; } /* Botão Responder */ :root[data-glpi-theme=mbl_escuro] .btn:has(.ti-message), :root[data-glpi-theme=mbl_escuro] .btn:has(.ti-corner-down-left), :root[data-glpi-theme=mbl_escuro] .btn:has(.fa-reply), :root[data-glpi-theme=mbl_escuro] .btn[title*=Responder], :root[data-glpi-theme=mbl_escuro] .btn[aria-label*=Responder] { background: var(--mbl-action-bg) !important; border-color: var(--mbl-action-border) !important; color: #ffffff !important; box-shadow: 0 5px 13px rgba(21, 152, 102, 0.3) !important; } /* Botões do topo: Adicionar, Modelos, Kanban */ :root[data-glpi-theme=mbl_escuro] header .btn, :root[data-glpi-theme=mbl_escuro] .navbar .btn, :root[data-glpi-theme=mbl_escuro] .breadcrumb + .btn, :root[data-glpi-theme=mbl_escuro] .page-header .btn { border-radius: 9px !important; } /* Botão de busca */ :root[data-glpi-theme=mbl_escuro] button[type=submit]:has(.ti-search), :root[data-glpi-theme=mbl_escuro] .btn:has(.ti-search), :root[data-glpi-theme=mbl_escuro] .btn:has(.fa-search) { background: var(--mbl-action-bg) !important; border-color: var(--mbl-action-border) !important; color: #ffffff !important; } /* Ícones dentro dos botões */ :root[data-glpi-theme=mbl_escuro] .btn i, :root[data-glpi-theme=mbl_escuro] .btn svg, :root[data-glpi-theme=mbl_escuro] button i, :root[data-glpi-theme=mbl_escuro] button svg { color: inherit !important; opacity: 0.98 !important; } /* Estado desabilitado */ :root[data-glpi-theme=mbl_escuro] .btn:disabled, :root[data-glpi-theme=mbl_escuro] .btn.disabled, :root[data-glpi-theme=mbl_escuro] button:disabled { background: rgba(255, 255, 255, 0.05) !important; border-color: rgba(255, 255, 255, 0.08) !important; color: rgba(220, 245, 236, 0.45) !important; box-shadow: none !important; transform: none !important; } /* Preserva botões semáforo dos plugins */ :root[data-glpi-theme=mbl_escuro] .marketplace button.modify_plugin[data-action=disable_plugin] { background-color: #008f5d !important; border-color: #00e083 !important; } :root[data-glpi-theme=mbl_escuro] .marketplace button.modify_plugin[data-action=enable_plugin] { background-color: #b4232b !important; border-color: #ff4d5e !important; } :root[data-glpi-theme=mbl_escuro] .marketplace button[title=Desinstalar], :root[data-glpi-theme=mbl_escuro] .marketplace button:has(.ti-folder-x) { background-color: #7f1d1d !important; border-color: #ef4444 !important; } :root[data-glpi-theme=mbl_escuro] .marketplace button.add_tooltip[oldtitle=Configurar], :root[data-glpi-theme=mbl_escuro] .marketplace button:has(.ti-tool) { background-color: #174b65 !important; border-color: #5cc8ff !important; } /* ========================================================== CHECKPOINT FINAL OK - MBL ESCURO Validado visualmente em: - Lista de chamados - Tela interna de chamado - Barra lateral esquerda - Barra lateral direita do chamado - Botões principais e secundários - Plug-ins / Marketplace - Botões semáforo dos plug-ins - More Reporting ========================================================== */ /*! * Tema MBL Corporativo * Tema profissional claro com identidade Grupo MBL */ :root[data-glpi-theme=mbl_corporativo] { --tblr-primary-rgb: 0, 151, 57; --tblr-secondary: #66736f; --tblr-link-color-rgb: 0, 121, 48; --tblr-badge-bg: #e7f5ee; --tblr-badge-color: #005c2b; --glpi-mainmenu-bg: #006b65; --glpi-mainmenu-fg: #ffffff; --glpi-helpdesk-header: #e8f5ee; --glpi-search-bg: #ffffff; --glpi-search-fg: #263238; --glpi-palette-color-1: #009739; --glpi-palette-color-2: #006b65; --glpi-palette-color-3: #8ed1b2; --glpi-palette-color-4: #f4f7f6; --glpi-illustrations-gradient-1: #f4fbf7; --glpi-illustrations-gradient-2: #dff3e8; --glpi-illustrations-gradient-3: #009739; } /* Base geral */ :root[data-glpi-theme=mbl_corporativo] body, :root[data-glpi-theme=mbl_corporativo] .page, :root[data-glpi-theme=mbl_corporativo] .page-wrapper, :root[data-glpi-theme=mbl_corporativo] .page-body { background: #f3f7f5 !important; color: #1f2d2a !important; } /* Topo */ :root[data-glpi-theme=mbl_corporativo] .navbar, :root[data-glpi-theme=mbl_corporativo] header.navbar { background: #ffffff !important; border-bottom: 1px solid #dfe8e4 !important; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05) !important; } /* Menu lateral */ :root[data-glpi-theme=mbl_corporativo] .navbar-vertical, :root[data-glpi-theme=mbl_corporativo] .sidebar { background: linear-gradient(180deg, #006b65 0%, #007f3d 100%) !important; border-right: none !important; box-shadow: 4px 0 18px rgba(0, 0, 0, 0.1) !important; } :root[data-glpi-theme=mbl_corporativo] .navbar-vertical .nav-link, :root[data-glpi-theme=mbl_corporativo] .sidebar .nav-link { color: #ffffff !important; border-radius: 12px !important; margin: 3px 9px !important; font-weight: 600 !important; } :root[data-glpi-theme=mbl_corporativo] .navbar-vertical .nav-link:hover, :root[data-glpi-theme=mbl_corporativo] .sidebar .nav-link:hover, :root[data-glpi-theme=mbl_corporativo] .navbar-vertical .nav-link.active, :root[data-glpi-theme=mbl_corporativo] .sidebar .nav-link.active { background: rgba(255, 255, 255, 0.18) !important; color: #ffffff !important; } /* Área principal e cards */ :root[data-glpi-theme=mbl_corporativo] .card, :root[data-glpi-theme=mbl_corporativo] .tab-content, :root[data-glpi-theme=mbl_corporativo] .grid-stack-item-content, :root[data-glpi-theme=mbl_corporativo] .dashboard .card { background: #ffffff !important; border: 1px solid #dfe8e4 !important; color: #263238 !important; border-radius: 18px !important; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.055) !important; } /* Cabeçalhos */ :root[data-glpi-theme=mbl_corporativo] .card-header { background: #ffffff !important; border-bottom: 1px solid #edf2ef !important; color: #12352c !important; border-top-left-radius: 18px !important; border-top-right-radius: 18px !important; } /* Textos */ :root[data-glpi-theme=mbl_corporativo] h1, :root[data-glpi-theme=mbl_corporativo] h2, :root[data-glpi-theme=mbl_corporativo] h3, :root[data-glpi-theme=mbl_corporativo] h4, :root[data-glpi-theme=mbl_corporativo] h5, :root[data-glpi-theme=mbl_corporativo] .card-title { color: #12352c !important; } :root[data-glpi-theme=mbl_corporativo] .text-muted, :root[data-glpi-theme=mbl_corporativo] .breadcrumb, :root[data-glpi-theme=mbl_corporativo] .breadcrumb a, :root[data-glpi-theme=mbl_corporativo] label, :root[data-glpi-theme=mbl_corporativo] .form-label { color: #60746e !important; } /* Links */ :root[data-glpi-theme=mbl_corporativo] a { color: #007f3d !important; } :root[data-glpi-theme=mbl_corporativo] a:hover { color: #005f2e !important; } /* Botões */ :root[data-glpi-theme=mbl_corporativo] .btn { border-radius: 12px !important; font-weight: 700 !important; } :root[data-glpi-theme=mbl_corporativo] .btn-primary, :root[data-glpi-theme=mbl_corporativo] .btn-outline-primary:hover { background: linear-gradient(180deg, #00b050 0%, #009739 100%) !important; border-color: #009739 !important; color: #ffffff !important; box-shadow: 0 6px 16px rgba(0, 151, 57, 0.18) !important; } :root[data-glpi-theme=mbl_corporativo] .btn-primary:hover { background: linear-gradient(180deg, #009e49 0%, #008532 100%) !important; border-color: #008532 !important; } /* Inputs e selects */ :root[data-glpi-theme=mbl_corporativo] .form-control, :root[data-glpi-theme=mbl_corporativo] .form-select, :root[data-glpi-theme=mbl_corporativo] select, :root[data-glpi-theme=mbl_corporativo] input[type=text], :root[data-glpi-theme=mbl_corporativo] input[type=password], :root[data-glpi-theme=mbl_corporativo] input[type=search], :root[data-glpi-theme=mbl_corporativo] textarea { background: #ffffff !important; border: 1px solid #d9e5df !important; color: #263238 !important; border-radius: 12px !important; box-shadow: none !important; } :root[data-glpi-theme=mbl_corporativo] .form-control:focus, :root[data-glpi-theme=mbl_corporativo] .form-select:focus, :root[data-glpi-theme=mbl_corporativo] select:focus, :root[data-glpi-theme=mbl_corporativo] input:focus, :root[data-glpi-theme=mbl_corporativo] textarea:focus { border-color: #009739 !important; box-shadow: 0 0 0 3px rgba(0, 151, 57, 0.12) !important; } /* Abas */ :root[data-glpi-theme=mbl_corporativo] .nav-tabs { border-bottom-color: #dfe8e4 !important; } :root[data-glpi-theme=mbl_corporativo] .nav-tabs .nav-link { background: #f7faf8 !important; color: #41524d !important; border: 1px solid #dfe8e4 !important; border-radius: 12px 12px 0 0 !important; } :root[data-glpi-theme=mbl_corporativo] .nav-tabs .nav-link.active { background: #ffffff !important; color: #007f3d !important; font-weight: 700 !important; border-bottom-color: #ffffff !important; } /* Tabelas */ :root[data-glpi-theme=mbl_corporativo] .table-responsive { background: #ffffff !important; border-color: #dfe8e4 !important; } :root[data-glpi-theme=mbl_corporativo] .table { background: #ffffff !important; color: #263238 !important; border-collapse: collapse !important; margin-bottom: 0 !important; } :root[data-glpi-theme=mbl_corporativo] .table thead, :root[data-glpi-theme=mbl_corporativo] .table thead tr, :root[data-glpi-theme=mbl_corporativo] .table thead th { position: static !important; background: #eaf6f0 !important; color: #0c4d34 !important; border-color: #d5e5dd !important; vertical-align: middle !important; } :root[data-glpi-theme=mbl_corporativo] .table tbody tr { background: #ffffff !important; color: #263238 !important; } :root[data-glpi-theme=mbl_corporativo] .table tbody tr:nth-child(even) { background: #f7faf8 !important; } :root[data-glpi-theme=mbl_corporativo] .table tbody tr:hover { background: #eef8f3 !important; } :root[data-glpi-theme=mbl_corporativo] .table td, :root[data-glpi-theme=mbl_corporativo] .table th { border-color: #dfe8e4 !important; } /* Dropdowns */ :root[data-glpi-theme=mbl_corporativo] .dropdown-menu { background: #ffffff !important; border: 1px solid #dfe8e4 !important; border-radius: 14px !important; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12) !important; } :root[data-glpi-theme=mbl_corporativo] .dropdown-item { color: #263238 !important; } :root[data-glpi-theme=mbl_corporativo] .dropdown-item:hover { background: #eef8f3 !important; color: #007f3d !important; } /* Modais */ :root[data-glpi-theme=mbl_corporativo] .modal-content { background: #ffffff !important; color: #263238 !important; border: 1px solid #dfe8e4 !important; border-radius: 18px !important; } /* Badges */ :root[data-glpi-theme=mbl_corporativo] .badge { border-radius: 999px !important; } /* Rodapés */ :root[data-glpi-theme=mbl_corporativo] .card-footer, :root[data-glpi-theme=mbl_corporativo] .search-footer, :root[data-glpi-theme=mbl_corporativo] .footer, :root[data-glpi-theme=mbl_corporativo] footer, :root[data-glpi-theme=mbl_corporativo] .fixed-bottom, :root[data-glpi-theme=mbl_corporativo] .sticky-footer, :root[data-glpi-theme=mbl_corporativo] .sticked-footer, :root[data-glpi-theme=mbl_corporativo] .timeline-buttons, :root[data-glpi-theme=mbl_corporativo] .timeline-footer, :root[data-glpi-theme=mbl_corporativo] .itil-footer, :root[data-glpi-theme=mbl_corporativo] .itil-object-footer { background: #ffffff !important; color: #263238 !important; border-color: #dfe8e4 !important; box-shadow: none !important; } /* Tela do chamado */ :root[data-glpi-theme=mbl_corporativo] .itil-object, :root[data-glpi-theme=mbl_corporativo] .ticket-timeline, :root[data-glpi-theme=mbl_corporativo] .timeline { background: #f3f7f5 !important; border-color: #dfe8e4 !important; } :root[data-glpi-theme=mbl_corporativo] .itil-object *, :root[data-glpi-theme=mbl_corporativo] .ticket-timeline *, :root[data-glpi-theme=mbl_corporativo] .timeline * { border-color: #dfe8e4 !important; } :root[data-glpi-theme=mbl_corporativo] .card-title.card-header.mx-n3.mt-n3, :root[data-glpi-theme=mbl_corporativo] .card-header.mx-n3.mt-n3 { background: #ffffff !important; border-color: #dfe8e4 !important; box-shadow: none !important; } /* Avatar */ :root[data-glpi-theme=mbl_corporativo] .avatar { color: #ffffff !important; border: 1px solid rgba(0, 151, 57, 0.35) !important; font-weight: 700 !important; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; } :root[data-glpi-theme=mbl_corporativo] .avatar:not([style*=background-image]):not([style*="background:"]) { background: linear-gradient(135deg, #00b050 0%, #007f3d 100%) !important; } :root[data-glpi-theme=mbl_corporativo] .avatar img { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: inherit !important; } /* Dashboard */ :root[data-glpi-theme=mbl_corporativo] .dashboard, :root[data-glpi-theme=mbl_corporativo] .grid-stack { background: #f3f7f5 !important; } :root[data-glpi-theme=mbl_corporativo] .grid-stack { padding: 20px !important; } :root[data-glpi-theme=mbl_corporativo] .dashboard .card, :root[data-glpi-theme=mbl_corporativo] .dashboard-card, :root[data-glpi-theme=mbl_corporativo] .grid-stack-item-content, :root[data-glpi-theme=mbl_corporativo] .dashboard-widget { background: #ffffff !important; border: 1px solid #dfe8e4 !important; border-radius: 22px !important; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.075) !important; } :root[data-glpi-theme=mbl_corporativo] .dashboard .card-title, :root[data-glpi-theme=mbl_corporativo] .dashboard-card-title, :root[data-glpi-theme=mbl_corporativo] .grid-stack-item-content h2, :root[data-glpi-theme=mbl_corporativo] .grid-stack-item-content h3, :root[data-glpi-theme=mbl_corporativo] .grid-stack-item-content h4 { color: #12352c !important; font-weight: 800 !important; } /* Scrollbar */ :root[data-glpi-theme=mbl_corporativo] ::-webkit-scrollbar { width: 10px; height: 10px; } :root[data-glpi-theme=mbl_corporativo] ::-webkit-scrollbar-track { background: #edf3f0; } :root[data-glpi-theme=mbl_corporativo] ::-webkit-scrollbar-thumb { background: #b7cbc2; border-radius: 999px; } :root[data-glpi-theme=mbl_corporativo] ::-webkit-scrollbar-thumb:hover { background: #009739; } /* ===================================================== MBL CORPORATIVO - FUNDO VERDE SUAVE Reduz excesso de branco e deixa o tema mais confortável ===================================================== */ :root[data-glpi-theme=mbl_corporativo] body, :root[data-glpi-theme=mbl_corporativo] .page, :root[data-glpi-theme=mbl_corporativo] .page-wrapper, :root[data-glpi-theme=mbl_corporativo] .page-body { background: #eaf4ef !important; color: #1f2d2a !important; } /* Topo um pouco menos branco */ :root[data-glpi-theme=mbl_corporativo] .navbar, :root[data-glpi-theme=mbl_corporativo] header.navbar { background: #f7fbf9 !important; border-bottom: 1px solid #cfe2d8 !important; box-shadow: 0 4px 14px rgba(0, 70, 45, 0.06) !important; } /* Cards com branco mais suave */ :root[data-glpi-theme=mbl_corporativo] .card, :root[data-glpi-theme=mbl_corporativo] .tab-content, :root[data-glpi-theme=mbl_corporativo] .grid-stack-item-content, :root[data-glpi-theme=mbl_corporativo] .dashboard .card { background: #fbfefc !important; border: 1px solid #cfe2d8 !important; color: #263238 !important; box-shadow: 0 8px 22px rgba(0, 70, 45, 0.07) !important; } /* Cabeçalho dos cards */ :root[data-glpi-theme=mbl_corporativo] .card-header { background: #f3faf6 !important; border-bottom: 1px solid #d6e8df !important; color: #12352c !important; } /* Área interna de chamados/timeline */ :root[data-glpi-theme=mbl_corporativo] .itil-object, :root[data-glpi-theme=mbl_corporativo] .ticket-timeline, :root[data-glpi-theme=mbl_corporativo] .timeline { background: #eaf4ef !important; border-color: #cfe2d8 !important; } /* Caixas dentro do chamado */ :root[data-glpi-theme=mbl_corporativo] .itil-object .card, :root[data-glpi-theme=mbl_corporativo] .ticket-timeline .card, :root[data-glpi-theme=mbl_corporativo] .timeline .card { background: #fbfefc !important; border-color: #cfe2d8 !important; } /* Tabelas mais suaves */ :root[data-glpi-theme=mbl_corporativo] .table-responsive { background: #fbfefc !important; border-color: #cfe2d8 !important; } :root[data-glpi-theme=mbl_corporativo] .table { background: #fbfefc !important; color: #263238 !important; } :root[data-glpi-theme=mbl_corporativo] .table thead, :root[data-glpi-theme=mbl_corporativo] .table thead tr, :root[data-glpi-theme=mbl_corporativo] .table thead th { background: #dff1e8 !important; color: #0c4d34 !important; border-color: #c4dbd1 !important; } :root[data-glpi-theme=mbl_corporativo] .table tbody tr { background: #fbfefc !important; } :root[data-glpi-theme=mbl_corporativo] .table tbody tr:nth-child(even) { background: #f0f8f4 !important; } :root[data-glpi-theme=mbl_corporativo] .table tbody tr:hover { background: #e4f4ec !important; } /* Inputs menos brancos */ :root[data-glpi-theme=mbl_corporativo] .form-control, :root[data-glpi-theme=mbl_corporativo] .form-select, :root[data-glpi-theme=mbl_corporativo] select, :root[data-glpi-theme=mbl_corporativo] input[type=text], :root[data-glpi-theme=mbl_corporativo] input[type=password], :root[data-glpi-theme=mbl_corporativo] input[type=search], :root[data-glpi-theme=mbl_corporativo] textarea { background: #fbfefc !important; border: 1px solid #cfe2d8 !important; color: #263238 !important; } /* Rodapés e barras inferiores */ :root[data-glpi-theme=mbl_corporativo] .card-footer, :root[data-glpi-theme=mbl_corporativo] .search-footer, :root[data-glpi-theme=mbl_corporativo] .footer, :root[data-glpi-theme=mbl_corporativo] footer, :root[data-glpi-theme=mbl_corporativo] .fixed-bottom, :root[data-glpi-theme=mbl_corporativo] .sticky-footer, :root[data-glpi-theme=mbl_corporativo] .sticked-footer, :root[data-glpi-theme=mbl_corporativo] .timeline-buttons, :root[data-glpi-theme=mbl_corporativo] .timeline-footer, :root[data-glpi-theme=mbl_corporativo] .itil-footer, :root[data-glpi-theme=mbl_corporativo] .itil-object-footer { background: #f3faf6 !important; color: #263238 !important; border-color: #cfe2d8 !important; } /* Dashboard */ :root[data-glpi-theme=mbl_corporativo] .dashboard, :root[data-glpi-theme=mbl_corporativo] .grid-stack { background: #eaf4ef !important; } :root[data-glpi-theme=mbl_corporativo] .dashboard .card, :root[data-glpi-theme=mbl_corporativo] .dashboard-card, :root[data-glpi-theme=mbl_corporativo] .grid-stack-item-content, :root[data-glpi-theme=mbl_corporativo] .dashboard-widget { background: #fbfefc !important; border: 1px solid #cfe2d8 !important; box-shadow: 0 14px 34px rgba(0, 70, 45, 0.08) !important; } /* Scrollbar combinando */ :root[data-glpi-theme=mbl_corporativo] ::-webkit-scrollbar-track { background: #dfeee6; } :root[data-glpi-theme=mbl_corporativo] ::-webkit-scrollbar-thumb { background: #9fc8b5; } :root[data-glpi-theme=mbl_corporativo] ::-webkit-scrollbar-thumb:hover { background: #009739; } /* ===================================================== MBL CORPORATIVO - MENU E BOTÕES VERDE MBL Ajuste de contraste para menus, botões e navegação ===================================================== */ :root[data-glpi-theme=mbl_corporativo] { --mbl-logo-green: #009739; --mbl-logo-green-dark: #006b2f; --mbl-logo-green-deep: #004d2a; --mbl-logo-green-soft: #e8f5ee; } /* Menu lateral principal mais escuro */ :root[data-glpi-theme=mbl_corporativo] .navbar-vertical, :root[data-glpi-theme=mbl_corporativo] .sidebar { background: linear-gradient(180deg, #003f34 0%, #006b2f 55%, #008a3a 100%) !important; border-right: 1px solid rgba(0, 77, 42, 0.65) !important; box-shadow: 4px 0 22px rgba(0, 55, 35, 0.22) !important; } /* Área do logo */ :root[data-glpi-theme=mbl_corporativo] .navbar-vertical .navbar-brand, :root[data-glpi-theme=mbl_corporativo] .sidebar .navbar-brand { background: rgba(0, 45, 35, 0.28) !important; border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important; } /* Links principais do menu */ :root[data-glpi-theme=mbl_corporativo] .navbar-vertical .nav-link, :root[data-glpi-theme=mbl_corporativo] .sidebar .nav-link { color: #ffffff !important; border-radius: 12px !important; margin: 3px 8px !important; font-weight: 650 !important; opacity: 1 !important; } /* Ícones do menu */ :root[data-glpi-theme=mbl_corporativo] .navbar-vertical .nav-link i, :root[data-glpi-theme=mbl_corporativo] .navbar-vertical .nav-link svg, :root[data-glpi-theme=mbl_corporativo] .sidebar .nav-link i, :root[data-glpi-theme=mbl_corporativo] .sidebar .nav-link svg { color: #ffffff !important; opacity: 1 !important; } /* Hover e item ativo do menu */ :root[data-glpi-theme=mbl_corporativo] .navbar-vertical .nav-link:hover, :root[data-glpi-theme=mbl_corporativo] .sidebar .nav-link:hover { background: rgba(255, 255, 255, 0.15) !important; color: #ffffff !important; } :root[data-glpi-theme=mbl_corporativo] .navbar-vertical .nav-link.active, :root[data-glpi-theme=mbl_corporativo] .sidebar .nav-link.active, :root[data-glpi-theme=mbl_corporativo] .navbar-vertical .nav-item.active > .nav-link, :root[data-glpi-theme=mbl_corporativo] .sidebar .nav-item.active > .nav-link { background: rgba(0, 151, 57, 0.95) !important; color: #ffffff !important; box-shadow: inset 4px 0 0 #ffffff, 0 8px 18px rgba(0, 70, 45, 0.18) !important; } /* Submenus mais escuros e legíveis */ :root[data-glpi-theme=mbl_corporativo] .navbar-vertical .dropdown-menu, :root[data-glpi-theme=mbl_corporativo] .sidebar .dropdown-menu, :root[data-glpi-theme=mbl_corporativo] .navbar-vertical .nav-item .nav, :root[data-glpi-theme=mbl_corporativo] .sidebar .nav-item .nav { background: rgba(0, 45, 35, 0.22) !important; border-radius: 14px !important; } /* Links de submenu */ :root[data-glpi-theme=mbl_corporativo] .navbar-vertical .dropdown-item, :root[data-glpi-theme=mbl_corporativo] .sidebar .dropdown-item, :root[data-glpi-theme=mbl_corporativo] .navbar-vertical .nav .nav-link, :root[data-glpi-theme=mbl_corporativo] .sidebar .nav .nav-link { color: #f4fff9 !important; font-weight: 600 !important; } /* Submenu ativo */ :root[data-glpi-theme=mbl_corporativo] .navbar-vertical .dropdown-item.active, :root[data-glpi-theme=mbl_corporativo] .sidebar .dropdown-item.active, :root[data-glpi-theme=mbl_corporativo] .navbar-vertical .nav .nav-link.active, :root[data-glpi-theme=mbl_corporativo] .sidebar .nav .nav-link.active { background: rgba(0, 151, 57, 0.9) !important; color: #ffffff !important; } /* Botão principal mais parecido com verde do logo */ :root[data-glpi-theme=mbl_corporativo] .btn-primary, :root[data-glpi-theme=mbl_corporativo] .btn-outline-primary:hover { background: linear-gradient(180deg, #00b84f 0%, #009739 100%) !important; border-color: #008a34 !important; color: #ffffff !important; box-shadow: 0 8px 18px rgba(0, 151, 57, 0.24) !important; } /* Hover do botão principal */ :root[data-glpi-theme=mbl_corporativo] .btn-primary:hover { background: linear-gradient(180deg, #009f43 0%, #007f32 100%) !important; border-color: #006b2f !important; color: #ffffff !important; } /* Botões outline verdes */ :root[data-glpi-theme=mbl_corporativo] .btn-outline-primary { border-color: #009739 !important; color: #007f32 !important; background: #f7fbf9 !important; } :root[data-glpi-theme=mbl_corporativo] .btn-outline-primary:hover { color: #ffffff !important; } /* Botões pequenos da barra superior */ :root[data-glpi-theme=mbl_corporativo] header.navbar .btn, :root[data-glpi-theme=mbl_corporativo] .navbar .btn, :root[data-glpi-theme=mbl_corporativo] .main-header .btn { border-radius: 12px !important; } /* Botão Adicionar */ :root[data-glpi-theme=mbl_corporativo] a[href*="form.php"].btn-primary, :root[data-glpi-theme=mbl_corporativo] .btn.btn-primary { background: linear-gradient(180deg, #00b84f 0%, #009739 100%) !important; border-color: #008a34 !important; color: #ffffff !important; } /* Paginação ativa mais forte */ :root[data-glpi-theme=mbl_corporativo] .page-item.active .page-link { background: #009739 !important; border-color: #008a34 !important; color: #ffffff !important; } /* Botões de ação nas listagens */ :root[data-glpi-theme=mbl_corporativo] .search-results .btn, :root[data-glpi-theme=mbl_corporativo] .list-search-container .btn, :root[data-glpi-theme=mbl_corporativo] .table-responsive .btn { border-radius: 10px !important; } /* Ícones de ação do topo da listagem */ :root[data-glpi-theme=mbl_corporativo] .search-results i, :root[data-glpi-theme=mbl_corporativo] .search-results svg, :root[data-glpi-theme=mbl_corporativo] .list-search-container i, :root[data-glpi-theme=mbl_corporativo] .list-search-container svg { color: #007f32 !important; } /* Topbar com leve verde, sem ficar branca demais */ :root[data-glpi-theme=mbl_corporativo] .navbar, :root[data-glpi-theme=mbl_corporativo] header.navbar { background: #f3faf6 !important; border-bottom: 1px solid #c9ded4 !important; } /* Campo de busca do topo */ :root[data-glpi-theme=mbl_corporativo] header.navbar input[type=search], :root[data-glpi-theme=mbl_corporativo] .navbar input[type=search], :root[data-glpi-theme=mbl_corporativo] input[placeholder*=Pesquisar] { background: #ffffff !important; border: 1px solid #bcd8cc !important; color: #12352c !important; } /* Botão da lupa */ :root[data-glpi-theme=mbl_corporativo] header.navbar button, :root[data-glpi-theme=mbl_corporativo] .navbar button { border-color: #009739 !important; } /* Sidebar recolher menu */ :root[data-glpi-theme=mbl_corporativo] .navbar-vertical .btn, :root[data-glpi-theme=mbl_corporativo] .sidebar .btn { background: rgba(0, 77, 42, 0.75) !important; color: #ffffff !important; border-color: rgba(255, 255, 255, 0.18) !important; } /* ===================================================== MBL CORPORATIVO - VERDE MBL MAIS FORTE Remove aspecto acinzentado e reforça identidade visual ===================================================== */ :root[data-glpi-theme=mbl_corporativo] { --mbl-verde: #009739; --mbl-verde-vivo: #00b050; --mbl-verde-escuro: #006b2f; --mbl-verde-profundo: #003f2f; --mbl-verde-menu: #007f3d; --mbl-fundo-suave: #e7f4ec; } /* Fundo geral com verde claro mais perceptível */ :root[data-glpi-theme=mbl_corporativo] body, :root[data-glpi-theme=mbl_corporativo] .page, :root[data-glpi-theme=mbl_corporativo] .page-wrapper, :root[data-glpi-theme=mbl_corporativo] .page-body { background: linear-gradient(180deg, #e2f3e9 0%, #edf8f1 100%) !important; color: #10251e !important; } /* Topo com leve tom verde, não cinza */ :root[data-glpi-theme=mbl_corporativo] .navbar, :root[data-glpi-theme=mbl_corporativo] header.navbar { background: #f2fbf6 !important; border-bottom: 1px solid #a8d8bd !important; box-shadow: 0 4px 14px rgba(0, 151, 57, 0.1) !important; } /* MENU PRINCIPAL - Verde MBL forte */ :root[data-glpi-theme=mbl_corporativo] aside.navbar-vertical, :root[data-glpi-theme=mbl_corporativo] .navbar-vertical, :root[data-glpi-theme=mbl_corporativo] .sidebar { background: linear-gradient(180deg, #004c35 0%, #007f3d 48%, #009739 100%) !important; border-right: 1px solid #006b2f !important; box-shadow: 4px 0 22px rgba(0, 80, 45, 0.28) !important; } /* Fundo atrás da logo */ :root[data-glpi-theme=mbl_corporativo] aside.navbar-vertical .container-fluid, :root[data-glpi-theme=mbl_corporativo] .navbar-vertical .container-fluid { background: transparent !important; } /* Links do menu principal */ :root[data-glpi-theme=mbl_corporativo] .navbar-vertical .nav-link, :root[data-glpi-theme=mbl_corporativo] .sidebar .nav-link { color: #ffffff !important; opacity: 1 !important; font-weight: 700 !important; border-radius: 12px !important; margin: 3px 8px !important; } /* Ícones do menu principal */ :root[data-glpi-theme=mbl_corporativo] .navbar-vertical .nav-link i, :root[data-glpi-theme=mbl_corporativo] .navbar-vertical .nav-link svg, :root[data-glpi-theme=mbl_corporativo] .sidebar .nav-link i, :root[data-glpi-theme=mbl_corporativo] .sidebar .nav-link svg { color: #ffffff !important; opacity: 1 !important; } /* Item principal ativo */ :root[data-glpi-theme=mbl_corporativo] .navbar-vertical .nav-link.active, :root[data-glpi-theme=mbl_corporativo] .sidebar .nav-link.active, :root[data-glpi-theme=mbl_corporativo] .navbar-vertical .nav-item.active > .nav-link, :root[data-glpi-theme=mbl_corporativo] .sidebar .nav-item.active > .nav-link { background: #00a84b !important; color: #ffffff !important; box-shadow: inset 4px 0 0 #ffffff, 0 8px 18px rgba(0, 60, 35, 0.22) !important; } /* Hover do menu */ :root[data-glpi-theme=mbl_corporativo] .navbar-vertical .nav-link:hover, :root[data-glpi-theme=mbl_corporativo] .sidebar .nav-link:hover { background: rgba(255, 255, 255, 0.18) !important; color: #ffffff !important; } /* Submenu expandido mais verde, menos cinza */ :root[data-glpi-theme=mbl_corporativo] .navbar-vertical .navbar-collapse, :root[data-glpi-theme=mbl_corporativo] .navbar-vertical .nav-item .nav, :root[data-glpi-theme=mbl_corporativo] .sidebar .nav-item .nav, :root[data-glpi-theme=mbl_corporativo] .navbar-vertical .dropdown-menu, :root[data-glpi-theme=mbl_corporativo] .sidebar .dropdown-menu { background: rgba(0, 80, 48, 0.28) !important; border-radius: 14px !important; } /* Submenus */ :root[data-glpi-theme=mbl_corporativo] .navbar-vertical .nav .nav-link, :root[data-glpi-theme=mbl_corporativo] .sidebar .nav .nav-link, :root[data-glpi-theme=mbl_corporativo] .navbar-vertical .dropdown-item, :root[data-glpi-theme=mbl_corporativo] .sidebar .dropdown-item { color: #ffffff !important; opacity: 1 !important; font-weight: 650 !important; } /* Submenu ativo: verde vivo */ :root[data-glpi-theme=mbl_corporativo] .navbar-vertical .nav .nav-link.active, :root[data-glpi-theme=mbl_corporativo] .sidebar .nav .nav-link.active, :root[data-glpi-theme=mbl_corporativo] .navbar-vertical .dropdown-item.active, :root[data-glpi-theme=mbl_corporativo] .sidebar .dropdown-item.active { background: #009739 !important; color: #ffffff !important; } /* Corrige itens que ficaram esbranquiçados/desabilitados demais */ :root[data-glpi-theme=mbl_corporativo] .navbar-vertical .nav-link.disabled, :root[data-glpi-theme=mbl_corporativo] .sidebar .nav-link.disabled, :root[data-glpi-theme=mbl_corporativo] .navbar-vertical .nav-item.disabled .nav-link { color: rgba(255, 255, 255, 0.55) !important; opacity: 1 !important; } /* Botões principais no verde MBL */ :root[data-glpi-theme=mbl_corporativo] .btn-primary, :root[data-glpi-theme=mbl_corporativo] .btn-outline-primary:hover, :root[data-glpi-theme=mbl_corporativo] .btn.btn-primary, :root[data-glpi-theme=mbl_corporativo] a.btn-primary { background: linear-gradient(180deg, #00bd55 0%, #009739 100%) !important; border-color: #008a34 !important; color: #ffffff !important; box-shadow: 0 8px 18px rgba(0, 151, 57, 0.28) !important; } /* Hover dos botões */ :root[data-glpi-theme=mbl_corporativo] .btn-primary:hover, :root[data-glpi-theme=mbl_corporativo] .btn.btn-primary:hover, :root[data-glpi-theme=mbl_corporativo] a.btn-primary:hover { background: linear-gradient(180deg, #00a84b 0%, #007f32 100%) !important; border-color: #006b2f !important; color: #ffffff !important; } /* Botões outline */ :root[data-glpi-theme=mbl_corporativo] .btn-outline-primary { background: #ffffff !important; border-color: #009739 !important; color: #007f32 !important; } /* Ícones/botões de ação superiores */ :root[data-glpi-theme=mbl_corporativo] .btn-icon, :root[data-glpi-theme=mbl_corporativo] .search-results .btn, :root[data-glpi-theme=mbl_corporativo] .list-search-container .btn { border-color: #a8d8bd !important; } /* Cards com borda verde suave */ :root[data-glpi-theme=mbl_corporativo] .card, :root[data-glpi-theme=mbl_corporativo] .tab-content, :root[data-glpi-theme=mbl_corporativo] .grid-stack-item-content, :root[data-glpi-theme=mbl_corporativo] .dashboard .card { background: #fbfffc !important; border: 1px solid #b9ddc8 !important; box-shadow: 0 8px 22px rgba(0, 90, 50, 0.08) !important; } /* Cabeçalho de tabela mais verde */ :root[data-glpi-theme=mbl_corporativo] .table thead, :root[data-glpi-theme=mbl_corporativo] .table thead tr, :root[data-glpi-theme=mbl_corporativo] .table thead th { background: #d5eee0 !important; color: #064a2d !important; border-color: #b7dac6 !important; } /* Linha selecionada/hover da tabela */ :root[data-glpi-theme=mbl_corporativo] .table tbody tr:hover { background: #e1f5e9 !important; } /* Paginação */ :root[data-glpi-theme=mbl_corporativo] .page-item.active .page-link { background: #009739 !important; border-color: #008a34 !important; color: #ffffff !important; } /* Botão recolher menu */ :root[data-glpi-theme=mbl_corporativo] .navbar-vertical .btn, :root[data-glpi-theme=mbl_corporativo] .sidebar .btn { background: rgba(0, 77, 42, 0.9) !important; color: #ffffff !important; border-color: rgba(255, 255, 255, 0.22) !important; } /* Remove aparência acinzentada do menu interno quando aberto */ :root[data-glpi-theme=mbl_corporativo] .navbar-vertical .nav-item.show, :root[data-glpi-theme=mbl_corporativo] .sidebar .nav-item.show, :root[data-glpi-theme=mbl_corporativo] .navbar-vertical .dropdown.show { background: rgba(0, 80, 48, 0.18) !important; border-radius: 14px !important; } /* ===================================================== MBL CORPORATIVO - REFINO MENU LATERAL Corrige hover branco apagando texto e suaviza animações ===================================================== */ /* Suaviza animações do menu */ :root[data-glpi-theme=mbl_corporativo] .navbar-vertical .nav-link, :root[data-glpi-theme=mbl_corporativo] .sidebar .nav-link, :root[data-glpi-theme=mbl_corporativo] .navbar-vertical .dropdown-item, :root[data-glpi-theme=mbl_corporativo] .sidebar .dropdown-item { transition: background-color 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease !important; } /* Estado normal dos itens */ :root[data-glpi-theme=mbl_corporativo] .navbar-vertical .nav-link, :root[data-glpi-theme=mbl_corporativo] .sidebar .nav-link { color: #ffffff !important; background: transparent !important; text-shadow: 0 1px 2px rgba(0, 45, 25, 0.25); } /* Hover: não usar branco sólido */ :root[data-glpi-theme=mbl_corporativo] .navbar-vertical .nav-link:hover, :root[data-glpi-theme=mbl_corporativo] .sidebar .nav-link:hover { background: #e8fff0 !important; color: #004d2a !important; text-shadow: none !important; transform: translateX(2px); box-shadow: inset 4px 0 0 #00b050, 0 6px 14px rgba(0, 70, 45, 0.18) !important; } /* Ícones também mudam no hover */ :root[data-glpi-theme=mbl_corporativo] .navbar-vertical .nav-link:hover i, :root[data-glpi-theme=mbl_corporativo] .navbar-vertical .nav-link:hover svg, :root[data-glpi-theme=mbl_corporativo] .sidebar .nav-link:hover i, :root[data-glpi-theme=mbl_corporativo] .sidebar .nav-link:hover svg { color: #004d2a !important; opacity: 1 !important; } /* Item ativo: verde vivo com texto branco */ :root[data-glpi-theme=mbl_corporativo] .navbar-vertical .nav-link.active, :root[data-glpi-theme=mbl_corporativo] .sidebar .nav-link.active, :root[data-glpi-theme=mbl_corporativo] .navbar-vertical .nav-item.active > .nav-link, :root[data-glpi-theme=mbl_corporativo] .sidebar .nav-item.active > .nav-link { background: #00a84b !important; color: #ffffff !important; text-shadow: 0 1px 2px rgba(0, 45, 25, 0.28) !important; box-shadow: inset 4px 0 0 #ffffff, 0 8px 18px rgba(0, 60, 35, 0.22) !important; } /* Item ativo quando passa mouse: mantém legível */ :root[data-glpi-theme=mbl_corporativo] .navbar-vertical .nav-link.active:hover, :root[data-glpi-theme=mbl_corporativo] .sidebar .nav-link.active:hover, :root[data-glpi-theme=mbl_corporativo] .navbar-vertical .nav-item.active > .nav-link:hover, :root[data-glpi-theme=mbl_corporativo] .sidebar .nav-item.active > .nav-link:hover { background: #00bd55 !important; color: #ffffff !important; transform: translateX(2px); } /* Ícones do item ativo */ :root[data-glpi-theme=mbl_corporativo] .navbar-vertical .nav-link.active i, :root[data-glpi-theme=mbl_corporativo] .navbar-vertical .nav-link.active svg, :root[data-glpi-theme=mbl_corporativo] .sidebar .nav-link.active i, :root[data-glpi-theme=mbl_corporativo] .sidebar .nav-link.active svg { color: #ffffff !important; } /* Corrige estados focus/active que podem ficar brancos */ :root[data-glpi-theme=mbl_corporativo] .navbar-vertical .nav-link:focus, :root[data-glpi-theme=mbl_corporativo] .navbar-vertical .nav-link:active, :root[data-glpi-theme=mbl_corporativo] .sidebar .nav-link:focus, :root[data-glpi-theme=mbl_corporativo] .sidebar .nav-link:active { background: #e8fff0 !important; color: #004d2a !important; text-shadow: none !important; } /* Submenus abertos com fundo verde escuro, não cinza */ :root[data-glpi-theme=mbl_corporativo] .navbar-vertical .nav-item.show, :root[data-glpi-theme=mbl_corporativo] .sidebar .nav-item.show, :root[data-glpi-theme=mbl_corporativo] .navbar-vertical .dropdown.show, :root[data-glpi-theme=mbl_corporativo] .navbar-vertical .collapse.show, :root[data-glpi-theme=mbl_corporativo] .sidebar .collapse.show { background: rgba(0, 64, 42, 0.28) !important; border-radius: 16px !important; } /* Submenu normal */ :root[data-glpi-theme=mbl_corporativo] .navbar-vertical .nav .nav-link, :root[data-glpi-theme=mbl_corporativo] .sidebar .nav .nav-link, :root[data-glpi-theme=mbl_corporativo] .navbar-vertical .dropdown-item, :root[data-glpi-theme=mbl_corporativo] .sidebar .dropdown-item { color: #f7fff9 !important; background: transparent !important; font-weight: 650 !important; } /* Hover do submenu: verde claro com texto escuro */ :root[data-glpi-theme=mbl_corporativo] .navbar-vertical .nav .nav-link:hover, :root[data-glpi-theme=mbl_corporativo] .sidebar .nav .nav-link:hover, :root[data-glpi-theme=mbl_corporativo] .navbar-vertical .dropdown-item:hover, :root[data-glpi-theme=mbl_corporativo] .sidebar .dropdown-item:hover { background: #e8fff0 !important; color: #004d2a !important; text-shadow: none !important; } /* Submenu selecionado */ :root[data-glpi-theme=mbl_corporativo] .navbar-vertical .nav .nav-link.active, :root[data-glpi-theme=mbl_corporativo] .sidebar .nav .nav-link.active, :root[data-glpi-theme=mbl_corporativo] .navbar-vertical .dropdown-item.active, :root[data-glpi-theme=mbl_corporativo] .sidebar .dropdown-item.active { background: #007f3d !important; color: #ffffff !important; box-shadow: inset 4px 0 0 #ffffff !important; } /* Corrige especificamente qualquer item que esteja ficando branco apagado */ :root[data-glpi-theme=mbl_corporativo] .navbar-vertical .nav-link[aria-expanded=true], :root[data-glpi-theme=mbl_corporativo] .sidebar .nav-link[aria-expanded=true] { background: #00a84b !important; color: #ffffff !important; } /* Hover no item expandido */ :root[data-glpi-theme=mbl_corporativo] .navbar-vertical .nav-link[aria-expanded=true]:hover, :root[data-glpi-theme=mbl_corporativo] .sidebar .nav-link[aria-expanded=true]:hover { background: #e8fff0 !important; color: #004d2a !important; } /* Garante contraste em textos e spans internos */ :root[data-glpi-theme=mbl_corporativo] .navbar-vertical .nav-link:hover span, :root[data-glpi-theme=mbl_corporativo] .sidebar .nav-link:hover span, :root[data-glpi-theme=mbl_corporativo] .navbar-vertical .dropdown-item:hover span, :root[data-glpi-theme=mbl_corporativo] .sidebar .dropdown-item:hover span { color: #004d2a !important; } /* Mantém texto branco quando ativo */ :root[data-glpi-theme=mbl_corporativo] .navbar-vertical .nav-link.active span, :root[data-glpi-theme=mbl_corporativo] .sidebar .nav-link.active span, :root[data-glpi-theme=mbl_corporativo] .navbar-vertical .nav-link[aria-expanded=true] span, :root[data-glpi-theme=mbl_corporativo] .sidebar .nav-link[aria-expanded=true] span { color: #ffffff !important; } /* Separador suave entre grupos */ :root[data-glpi-theme=mbl_corporativo] .navbar-vertical .nav-item, :root[data-glpi-theme=mbl_corporativo] .sidebar .nav-item { border-radius: 12px !important; } /* Remove aquele branco estourado em hover de item desabilitado */ :root[data-glpi-theme=mbl_corporativo] .navbar-vertical .nav-link.disabled:hover, :root[data-glpi-theme=mbl_corporativo] .sidebar .nav-link.disabled:hover, :root[data-glpi-theme=mbl_corporativo] .navbar-vertical .nav-item.disabled .nav-link:hover { background: rgba(255, 255, 255, 0.08) !important; color: rgba(255, 255, 255, 0.6) !important; transform: none !important; box-shadow: none !important; } /* ========================================================== MBL_PATCH_COMPARTILHADO_PLUGINS_MREPORTING_SIDEBAR_V1 Correções compartilhadas MBL Tema: mbl_corporativo Modo: claro ========================================================== */ :root[data-glpi-theme=mbl_corporativo] { --mbl-fix-bg: #f5faf8; --mbl-fix-card: #ffffff; --mbl-fix-card-hover: #f7fffb; --mbl-fix-text: #173b32; --mbl-fix-muted: #527269; --mbl-fix-border: #b8ded1; --mbl-fix-primary: #008f5d; --mbl-fix-primary-strong: #006b48; --mbl-fix-primary-soft: #e8f8f1; --mbl-fix-danger: #c92a2a; --mbl-fix-danger-border: #fa5252; --mbl-fix-danger-soft: #fff1f1; --mbl-fix-warning: #d98200; --mbl-fix-warning-border: #f59f00; --mbl-fix-warning-soft: #fff7e6; --mbl-fix-info: #1971c2; --mbl-fix-info-border: #4dabf7; --mbl-fix-sidebar-bg: linear-gradient(180deg, #ffffff 0%, #f0faf6 52%, #dff5ec 100%); --mbl-fix-sidebar-submenu: rgba(255, 255, 255, .96); --mbl-fix-shadow: rgba(0, 80, 55, .10); } /* ========================================================== Marketplace / Plug-ins ========================================================== */ :root[data-glpi-theme=mbl_corporativo] .marketplace, :root[data-glpi-theme=mbl_corporativo] .marketplace .plugin, :root[data-glpi-theme=mbl_corporativo] .marketplace .plugin-card, :root[data-glpi-theme=mbl_corporativo] .marketplace .card { background-color: var(--mbl-fix-card) !important; border-color: var(--mbl-fix-border) !important; color: var(--mbl-fix-text) !important; } :root[data-glpi-theme=mbl_corporativo] .marketplace .plugin, :root[data-glpi-theme=mbl_corporativo] .marketplace .card { border-radius: 10px !important; box-shadow: 0 2px 8px var(--mbl-fix-shadow) !important; } :root[data-glpi-theme=mbl_corporativo] .marketplace .plugin:hover, :root[data-glpi-theme=mbl_corporativo] .marketplace .card:hover { background-color: var(--mbl-fix-card-hover) !important; border-color: var(--mbl-fix-primary) !important; } :root[data-glpi-theme=mbl_corporativo] .marketplace .plugin h3, :root[data-glpi-theme=mbl_corporativo] .marketplace .plugin h4, :root[data-glpi-theme=mbl_corporativo] .marketplace .plugin .plugin-name, :root[data-glpi-theme=mbl_corporativo] .marketplace .card-title, :root[data-glpi-theme=mbl_corporativo] .marketplace a:not(.btn) { color: var(--mbl-fix-primary-strong) !important; } :root[data-glpi-theme=mbl_corporativo] .marketplace .text-muted, :root[data-glpi-theme=mbl_corporativo] .marketplace .plugin-version, :root[data-glpi-theme=mbl_corporativo] .marketplace .plugin-description, :root[data-glpi-theme=mbl_corporativo] .marketplace small, :root[data-glpi-theme=mbl_corporativo] .marketplace .small { color: var(--mbl-fix-muted) !important; } :root[data-glpi-theme=mbl_corporativo] input[placeholder*="Filtrar lista de plug-ins"] { background-color: var(--mbl-fix-card) !important; border-color: var(--mbl-fix-primary) !important; color: var(--mbl-fix-text) !important; } /* ========================================================== Botões semáforo dos plug-ins ========================================================== */ :root[data-glpi-theme=mbl_corporativo] .marketplace button.modify_plugin, :root[data-glpi-theme=mbl_corporativo] .marketplace button.add_tooltip, :root[data-glpi-theme=mbl_corporativo] .marketplace button[data-bs-toggle=modal], :root[data-glpi-theme=mbl_corporativo] .marketplace a[href*="/plugins/"] > button { min-width: 29px !important; min-height: 29px !important; border-radius: 7px !important; border-width: 1px !important; opacity: 1 !important; color: #ffffff !important; } :root[data-glpi-theme=mbl_corporativo] .marketplace button.modify_plugin i, :root[data-glpi-theme=mbl_corporativo] .marketplace button.add_tooltip i, :root[data-glpi-theme=mbl_corporativo] .marketplace button[data-bs-toggle=modal] i, :root[data-glpi-theme=mbl_corporativo] .marketplace a[href*="/plugins/"] > button i { color: #ffffff !important; opacity: 1 !important; } /* Habilitado */ :root[data-glpi-theme=mbl_corporativo] .marketplace button.modify_plugin[data-action=disable_plugin], :root[data-glpi-theme=mbl_corporativo] .marketplace button.modify_plugin[oldtitle=Desabilitar], :root[data-glpi-theme=mbl_corporativo] .marketplace button:has(.ti-toggle-right-filled) { background-color: var(--mbl-fix-primary) !important; border-color: var(--mbl-fix-primary-strong) !important; box-shadow: 0 0 10px rgba(0, 168, 120, 0.45) !important; } /* Desabilitado */ :root[data-glpi-theme=mbl_corporativo] .marketplace button.modify_plugin[data-action=enable_plugin], :root[data-glpi-theme=mbl_corporativo] .marketplace button.modify_plugin[oldtitle=Habilitar], :root[data-glpi-theme=mbl_corporativo] .marketplace button:has(.ti-toggle-left-filled) { background-color: var(--mbl-fix-danger) !important; border-color: var(--mbl-fix-danger-border) !important; box-shadow: 0 0 10px rgba(255, 77, 94, 0.45) !important; } /* Desinstalar */ :root[data-glpi-theme=mbl_corporativo] .marketplace button[title=Desinstalar], :root[data-glpi-theme=mbl_corporativo] .marketplace button:has(.ti-folder-x), :root[data-glpi-theme=mbl_corporativo] .marketplace .modify_plugin[data-action=uninstall_plugin] { background-color: #7f1d1d !important; border-color: #ef4444 !important; box-shadow: 0 0 9px rgba(239, 68, 68, 0.45) !important; } /* Configurar */ :root[data-glpi-theme=mbl_corporativo] .marketplace button.add_tooltip[oldtitle=Configurar], :root[data-glpi-theme=mbl_corporativo] .marketplace button:has(.ti-tool), :root[data-glpi-theme=mbl_corporativo] .marketplace a[href*="/plugins/"] > button:has(.ti-tool) { background-color: var(--mbl-fix-info) !important; border-color: var(--mbl-fix-info-border) !important; box-shadow: 0 0 9px rgba(92, 200, 255, 0.45) !important; } /* Atualizar / baixar / instalar */ :root[data-glpi-theme=mbl_corporativo] .marketplace button.modify_plugin[data-action=update_plugin], :root[data-glpi-theme=mbl_corporativo] .marketplace button.modify_plugin[data-action=upgrade_plugin], :root[data-glpi-theme=mbl_corporativo] .marketplace button.modify_plugin[data-action=download_plugin], :root[data-glpi-theme=mbl_corporativo] .marketplace button.modify_plugin[data-action=install_plugin], :root[data-glpi-theme=mbl_corporativo] .marketplace button[oldtitle*=Atualizar], :root[data-glpi-theme=mbl_corporativo] .marketplace button[oldtitle*=Baixar], :root[data-glpi-theme=mbl_corporativo] .marketplace button[oldtitle*=Instalar], :root[data-glpi-theme=mbl_corporativo] .marketplace button:has(.ti-cloud), :root[data-glpi-theme=mbl_corporativo] .marketplace button:has(.ti-cloud-download), :root[data-glpi-theme=mbl_corporativo] .marketplace button:has(.ti-download) { background-color: var(--mbl-fix-warning) !important; border-color: var(--mbl-fix-warning-border) !important; box-shadow: 0 0 12px rgba(255, 176, 46, 0.65) !important; animation: mbl-plugin-update-pulse-shared 1.8s ease-in-out infinite; } :root[data-glpi-theme=mbl_corporativo] .marketplace button.modify_plugin:hover, :root[data-glpi-theme=mbl_corporativo] .marketplace button.add_tooltip:hover, :root[data-glpi-theme=mbl_corporativo] .marketplace button[data-bs-toggle=modal]:hover, :root[data-glpi-theme=mbl_corporativo] .marketplace a[href*="/plugins/"] > button:hover { filter: brightness(1.15); transform: scale(1.04); } /* Card desabilitado */ :root[data-glpi-theme=mbl_corporativo] .marketplace .plugin:has(button.modify_plugin[data-action=enable_plugin]), :root[data-glpi-theme=mbl_corporativo] .marketplace .card:has(button.modify_plugin[data-action=enable_plugin]) { border-color: var(--mbl-fix-danger) !important; background-color: var(--mbl-fix-danger-soft) !important; box-shadow: inset 0 0 0 1px rgba(255, 77, 94, 0.2) !important; } /* Card com atualização */ :root[data-glpi-theme=mbl_corporativo] .marketplace .plugin:has(button.modify_plugin[data-action=update_plugin]), :root[data-glpi-theme=mbl_corporativo] .marketplace .plugin:has(button.modify_plugin[data-action=upgrade_plugin]), :root[data-glpi-theme=mbl_corporativo] .marketplace .plugin:has(button:has(.ti-cloud)), :root[data-glpi-theme=mbl_corporativo] .marketplace .card:has(button.modify_plugin[data-action=update_plugin]), :root[data-glpi-theme=mbl_corporativo] .marketplace .card:has(button.modify_plugin[data-action=upgrade_plugin]), :root[data-glpi-theme=mbl_corporativo] .marketplace .card:has(button:has(.ti-cloud)) { border-color: var(--mbl-fix-warning) !important; background-color: var(--mbl-fix-warning-soft) !important; box-shadow: inset 0 0 0 1px rgba(255, 176, 46, 0.25), 0 0 10px rgba(255, 176, 46, 0.12) !important; } /* ========================================================== Alertas warning ========================================================== */ :root[data-glpi-theme=mbl_corporativo] .alert-warning, :root[data-glpi-theme=mbl_corporativo] .alert.alert-warning, :root[data-glpi-theme=mbl_corporativo] .bg-warning, :root[data-glpi-theme=mbl_corporativo] .bg-warning-subtle, :root[data-glpi-theme=mbl_corporativo] .table-warning, :root[data-glpi-theme=mbl_corporativo] .list-group-item-warning { background-color: var(--mbl-fix-warning-soft) !important; border-color: var(--mbl-fix-warning) !important; color: var(--mbl-fix-text) !important; } /* ========================================================== More Reporting legado ========================================================== */ :root[data-glpi-theme=mbl_corporativo] body:has(a[href*="plugins/mreporting"]), :root[data-glpi-theme=mbl_corporativo] body:has(form[action*="plugins/mreporting"]) { background-color: var(--mbl-fix-bg) !important; color: var(--mbl-fix-text) !important; } :root[data-glpi-theme=mbl_corporativo] body:has(a[href*="plugins/mreporting"]) .page-body, :root[data-glpi-theme=mbl_corporativo] body:has(form[action*="plugins/mreporting"]) .page-body, :root[data-glpi-theme=mbl_corporativo] body:has(a[href*="plugins/mreporting"]) .tab_cadre, :root[data-glpi-theme=mbl_corporativo] body:has(form[action*="plugins/mreporting"]) .tab_cadre, :root[data-glpi-theme=mbl_corporativo] body:has(a[href*="plugins/mreporting"]) table, :root[data-glpi-theme=mbl_corporativo] body:has(form[action*="plugins/mreporting"]) table, :root[data-glpi-theme=mbl_corporativo] body:has(a[href*="plugins/mreporting"]) tr, :root[data-glpi-theme=mbl_corporativo] body:has(form[action*="plugins/mreporting"]) tr, :root[data-glpi-theme=mbl_corporativo] body:has(a[href*="plugins/mreporting"]) td, :root[data-glpi-theme=mbl_corporativo] body:has(form[action*="plugins/mreporting"]) td, :root[data-glpi-theme=mbl_corporativo] body:has(a[href*="plugins/mreporting"]) div, :root[data-glpi-theme=mbl_corporativo] body:has(form[action*="plugins/mreporting"]) div { background-color: var(--mbl-fix-card) !important; color: var(--mbl-fix-text) !important; border-color: var(--mbl-fix-border) !important; } :root[data-glpi-theme=mbl_corporativo] body:has(a[href*="plugins/mreporting"]) th, :root[data-glpi-theme=mbl_corporativo] body:has(form[action*="plugins/mreporting"]) th, :root[data-glpi-theme=mbl_corporativo] body:has(a[href*="plugins/mreporting"]) .tab_bg_1, :root[data-glpi-theme=mbl_corporativo] body:has(form[action*="plugins/mreporting"]) .tab_bg_1, :root[data-glpi-theme=mbl_corporativo] body:has(a[href*="plugins/mreporting"]) .tab_bg_2, :root[data-glpi-theme=mbl_corporativo] body:has(form[action*="plugins/mreporting"]) .tab_bg_2 { background-color: var(--mbl-fix-primary-soft) !important; color: var(--mbl-fix-text) !important; border-color: var(--mbl-fix-border) !important; } :root[data-glpi-theme=mbl_corporativo] body:has(a[href*="plugins/mreporting"]) input, :root[data-glpi-theme=mbl_corporativo] body:has(a[href*="plugins/mreporting"]) select, :root[data-glpi-theme=mbl_corporativo] body:has(a[href*="plugins/mreporting"]) textarea, :root[data-glpi-theme=mbl_corporativo] body:has(form[action*="plugins/mreporting"]) input, :root[data-glpi-theme=mbl_corporativo] body:has(form[action*="plugins/mreporting"]) select, :root[data-glpi-theme=mbl_corporativo] body:has(form[action*="plugins/mreporting"]) textarea { background-color: var(--mbl-fix-card) !important; border-color: var(--mbl-fix-primary) !important; color: var(--mbl-fix-text) !important; } :root[data-glpi-theme=mbl_corporativo] body:has(a[href*="plugins/mreporting"]) button, :root[data-glpi-theme=mbl_corporativo] body:has(form[action*="plugins/mreporting"]) button, :root[data-glpi-theme=mbl_corporativo] body:has(a[href*="plugins/mreporting"]) input[type=submit], :root[data-glpi-theme=mbl_corporativo] body:has(form[action*="plugins/mreporting"]) input[type=submit] { background-color: var(--mbl-fix-primary) !important; border-color: var(--mbl-fix-primary-strong) !important; color: #ffffff !important; } /* ========================================================== Sidebar ========================================================== */ :root[data-glpi-theme=mbl_corporativo] .navbar-vertical, :root[data-glpi-theme=mbl_corporativo] aside.navbar-vertical { background: var(--mbl-fix-sidebar-bg) !important; border-right: 1px solid var(--mbl-fix-border) !important; box-shadow: 6px 0 18px var(--mbl-fix-shadow) !important; } :root[data-glpi-theme=mbl_corporativo] .navbar-vertical .navbar-collapse, :root[data-glpi-theme=mbl_corporativo] .navbar-vertical .navbar-nav, :root[data-glpi-theme=mbl_corporativo] .navbar-vertical .navbar-brand, :root[data-glpi-theme=mbl_corporativo] .navbar-vertical .container-fluid { background: transparent !important; } :root[data-glpi-theme=mbl_corporativo] .navbar-vertical .navbar-brand { padding-top: 14px !important; padding-bottom: 14px !important; border-bottom: 1px solid rgba(0, 143, 93, 0.2) !important; } :root[data-glpi-theme=mbl_corporativo] .navbar-vertical .nav-link { color: var(--mbl-fix-text) !important; border-radius: 10px !important; margin: 2px 8px !important; padding: 9px 12px !important; transition: all 0.16s ease-in-out !important; border: 1px solid transparent !important; } :root[data-glpi-theme=mbl_corporativo] .navbar-vertical .nav-link i, :root[data-glpi-theme=mbl_corporativo] .navbar-vertical .nav-link svg, :root[data-glpi-theme=mbl_corporativo] .navbar-vertical .nav-link .nav-link-icon { color: var(--mbl-fix-primary) !important; opacity: 0.95 !important; } :root[data-glpi-theme=mbl_corporativo] .navbar-vertical .nav-link:hover { background: rgba(0, 168, 120, 0.12) !important; border-color: rgba(0, 168, 120, 0.28) !important; color: var(--mbl-fix-primary-strong) !important; transform: translateX(2px); } :root[data-glpi-theme=mbl_corporativo] .navbar-vertical .nav-link.active, :root[data-glpi-theme=mbl_corporativo] .navbar-vertical .nav-item.active > .nav-link, :root[data-glpi-theme=mbl_corporativo] .navbar-vertical .nav-item.show > .nav-link { background: linear-gradient(90deg, var(--mbl-fix-primary) 0%, var(--mbl-fix-primary-strong) 100%) !important; border-color: var(--mbl-fix-primary-strong) !important; color: #ffffff !important; font-weight: 700 !important; box-shadow: 0 0 12px rgba(0, 168, 120, 0.28) !important; } :root[data-glpi-theme=mbl_corporativo] .navbar-vertical .nav-link.active i, :root[data-glpi-theme=mbl_corporativo] .navbar-vertical .nav-link.active svg, :root[data-glpi-theme=mbl_corporativo] .navbar-vertical .nav-item.active > .nav-link i, :root[data-glpi-theme=mbl_corporativo] .navbar-vertical .nav-item.active > .nav-link svg, :root[data-glpi-theme=mbl_corporativo] .navbar-vertical .nav-item.show > .nav-link i, :root[data-glpi-theme=mbl_corporativo] .navbar-vertical .nav-item.show > .nav-link svg { color: #ffffff !important; } :root[data-glpi-theme=mbl_corporativo] .navbar-vertical .dropdown-menu, :root[data-glpi-theme=mbl_corporativo] .navbar-vertical .nav-item .dropdown-menu { background: var(--mbl-fix-sidebar-submenu) !important; border: 1px solid var(--mbl-fix-border) !important; border-radius: 12px !important; margin: 4px 8px 8px 8px !important; padding: 6px !important; box-shadow: 0 8px 18px var(--mbl-fix-shadow) !important; } :root[data-glpi-theme=mbl_corporativo] .navbar-vertical .dropdown-menu .dropdown-item, :root[data-glpi-theme=mbl_corporativo] .navbar-vertical .dropdown-menu .nav-link { color: var(--mbl-fix-text) !important; border-radius: 8px !important; margin: 1px 0 !important; padding: 8px 10px !important; background: transparent !important; } :root[data-glpi-theme=mbl_corporativo] .navbar-vertical .dropdown-menu .dropdown-item:hover, :root[data-glpi-theme=mbl_corporativo] .navbar-vertical .dropdown-menu .nav-link:hover { background: rgba(0, 168, 120, 0.12) !important; color: var(--mbl-fix-primary-strong) !important; } :root[data-glpi-theme=mbl_corporativo] .navbar-vertical .dropdown-menu .dropdown-item.active, :root[data-glpi-theme=mbl_corporativo] .navbar-vertical .dropdown-menu .nav-link.active { background: rgba(0, 168, 120, 0.18) !important; color: var(--mbl-fix-primary-strong) !important; font-weight: 700 !important; border-left: 3px solid var(--mbl-fix-primary) !important; } @keyframes mbl-plugin-update-pulse-shared { 0% { box-shadow: 0 0 5px rgba(255, 176, 46, 0.3); } 50% { box-shadow: 0 0 15px rgba(255, 176, 46, 0.85); } 100% { box-shadow: 0 0 5px rgba(255, 176, 46, 0.3); } } /* ========================================================== MBL Corporativo - Correção de legibilidade em chamados / timeline Corrige textos claros sobre fundo claro ========================================================== */ :root[data-glpi-theme=mbl_corporativo] .timeline-item, :root[data-glpi-theme=mbl_corporativo] .timeline-content, :root[data-glpi-theme=mbl_corporativo] .timeline-item .content, :root[data-glpi-theme=mbl_corporativo] .timeline-item .rich_text_container, :root[data-glpi-theme=mbl_corporativo] .timeline-item .rich_text_container *, :root[data-glpi-theme=mbl_corporativo] .rich_text_container, :root[data-glpi-theme=mbl_corporativo] .rich_text_container *, :root[data-glpi-theme=mbl_corporativo] .itil-object, :root[data-glpi-theme=mbl_corporativo] .itil-object *, :root[data-glpi-theme=mbl_corporativo] .itil-content, :root[data-glpi-theme=mbl_corporativo] .itil-content *, :root[data-glpi-theme=mbl_corporativo] .item-content, :root[data-glpi-theme=mbl_corporativo] .item-content * { color: #173b32 !important; } :root[data-glpi-theme=mbl_corporativo] .timeline-item .text-muted, :root[data-glpi-theme=mbl_corporativo] .timeline-content .text-muted, :root[data-glpi-theme=mbl_corporativo] .itil-object .text-muted, :root[data-glpi-theme=mbl_corporativo] .rich_text_container .text-muted { color: #527269 !important; } :root[data-glpi-theme=mbl_corporativo] .timeline-item .card, :root[data-glpi-theme=mbl_corporativo] .timeline-content .card, :root[data-glpi-theme=mbl_corporativo] .itil-object .card { background-color: #ffffff !important; border-color: #cfe5dc !important; color: #173b32 !important; } :root[data-glpi-theme=mbl_corporativo] .timeline-item h1, :root[data-glpi-theme=mbl_corporativo] .timeline-item h2, :root[data-glpi-theme=mbl_corporativo] .timeline-item h3, :root[data-glpi-theme=mbl_corporativo] .timeline-item h4, :root[data-glpi-theme=mbl_corporativo] .timeline-item h5, :root[data-glpi-theme=mbl_corporativo] .timeline-item strong, :root[data-glpi-theme=mbl_corporativo] .timeline-item b { color: #006b48 !important; } :root[data-glpi-theme=mbl_corporativo] .timeline-item a, :root[data-glpi-theme=mbl_corporativo] .rich_text_container a, :root[data-glpi-theme=mbl_corporativo] .itil-object a { color: #008f5d !important; } :root[data-glpi-theme=mbl_corporativo] .timeline-item a:hover, :root[data-glpi-theme=mbl_corporativo] .rich_text_container a:hover, :root[data-glpi-theme=mbl_corporativo] .itil-object a:hover { color: #004f35 !important; } :root[data-glpi-theme=mbl_corporativo] .rich_text_container img, :root[data-glpi-theme=mbl_corporativo] .timeline-item img { opacity: 1 !important; filter: none !important; } :root[data-glpi-theme=mbl_corporativo] .itil-sidebar, :root[data-glpi-theme=mbl_corporativo] .itil-sidebar *, :root[data-glpi-theme=mbl_corporativo] .right-sidebar, :root[data-glpi-theme=mbl_corporativo] .right-sidebar *, :root[data-glpi-theme=mbl_corporativo] .page-aside, :root[data-glpi-theme=mbl_corporativo] .page-aside * { color: #173b32 !important; } :root[data-glpi-theme=mbl_corporativo] .itil-sidebar label, :root[data-glpi-theme=mbl_corporativo] .right-sidebar label, :root[data-glpi-theme=mbl_corporativo] .page-aside label, :root[data-glpi-theme=mbl_corporativo] .form-label { color: #406158 !important; } :root[data-glpi-theme=mbl_corporativo] .itil-sidebar input, :root[data-glpi-theme=mbl_corporativo] .itil-sidebar select, :root[data-glpi-theme=mbl_corporativo] .itil-sidebar textarea, :root[data-glpi-theme=mbl_corporativo] .right-sidebar input, :root[data-glpi-theme=mbl_corporativo] .right-sidebar select, :root[data-glpi-theme=mbl_corporativo] .right-sidebar textarea, :root[data-glpi-theme=mbl_corporativo] .page-aside input, :root[data-glpi-theme=mbl_corporativo] .page-aside select, :root[data-glpi-theme=mbl_corporativo] .page-aside textarea { background-color: #ffffff !important; color: #173b32 !important; border-color: #cfe5dc !important; } /*! * Tema MBL Pro Dark * Tema profissional escuro para GLPI */ :root[data-glpi-theme=mbl_pro] { --tblr-primary-rgb: 0, 214, 118; --tblr-secondary: #8fa8a1; --tblr-link-color-rgb: 0, 214, 118; --tblr-badge-bg: #073d2d; --tblr-badge-color: #8ff0c2; --glpi-mainmenu-bg: #00362f; --glpi-mainmenu-fg: #ffffff; --glpi-helpdesk-header: #06231e; --glpi-search-bg: #071c18; --glpi-search-fg: #dff8ef; --glpi-palette-color-1: #00d67a; --glpi-palette-color-2: #009739; --glpi-palette-color-3: #006b65; --glpi-palette-color-4: #071512; --glpi-illustrations-gradient-1: #071512; --glpi-illustrations-gradient-2: #003d32; --glpi-illustrations-gradient-3: #00d67a; } /* Base */ :root[data-glpi-theme=mbl_pro] body, :root[data-glpi-theme=mbl_pro] .page, :root[data-glpi-theme=mbl_pro] .page-wrapper, :root[data-glpi-theme=mbl_pro] .page-body { background: #071512 !important; color: #e8f6f1 !important; } /* Topo */ :root[data-glpi-theme=mbl_pro] .navbar, :root[data-glpi-theme=mbl_pro] header.navbar { background: #06110f !important; border-bottom: 1px solid #123d34 !important; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.35) !important; } /* Menu lateral */ :root[data-glpi-theme=mbl_pro] .navbar-vertical, :root[data-glpi-theme=mbl_pro] .sidebar { background: linear-gradient(180deg, #002f28 0%, #006b3f 60%, #008b44 100%) !important; border-right: 1px solid #16483d !important; } :root[data-glpi-theme=mbl_pro] .navbar-vertical .nav-link, :root[data-glpi-theme=mbl_pro] .sidebar .nav-link { color: #f4fff9 !important; border-radius: 14px !important; margin: 4px 10px !important; } :root[data-glpi-theme=mbl_pro] .navbar-vertical .nav-link:hover, :root[data-glpi-theme=mbl_pro] .sidebar .nav-link:hover, :root[data-glpi-theme=mbl_pro] .navbar-vertical .nav-link.active, :root[data-glpi-theme=mbl_pro] .sidebar .nav-link.active { background: rgba(0, 214, 118, 0.2) !important; color: #ffffff !important; } /* Cards e containers */ :root[data-glpi-theme=mbl_pro] .card, :root[data-glpi-theme=mbl_pro] .tab-content, :root[data-glpi-theme=mbl_pro] .grid-stack-item-content, :root[data-glpi-theme=mbl_pro] .dashboard .card { background: #0b211c !important; border: 1px solid #16483d !important; color: #e8f6f1 !important; border-radius: 20px !important; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.3) !important; } /* Cabeçalhos de cards */ :root[data-glpi-theme=mbl_pro] .card-header { background: #0d2a23 !important; border-bottom: 1px solid #16483d !important; color: #f4fff9 !important; border-top-left-radius: 20px !important; border-top-right-radius: 20px !important; } /* Textos */ :root[data-glpi-theme=mbl_pro] h1, :root[data-glpi-theme=mbl_pro] h2, :root[data-glpi-theme=mbl_pro] h3, :root[data-glpi-theme=mbl_pro] h4, :root[data-glpi-theme=mbl_pro] h5, :root[data-glpi-theme=mbl_pro] .card-title { color: #f4fff9 !important; } :root[data-glpi-theme=mbl_pro] label, :root[data-glpi-theme=mbl_pro] .form-label, :root[data-glpi-theme=mbl_pro] .text-muted, :root[data-glpi-theme=mbl_pro] .breadcrumb, :root[data-glpi-theme=mbl_pro] .breadcrumb a { color: #b8d6cd !important; } /* Botões */ :root[data-glpi-theme=mbl_pro] .btn { border-radius: 14px !important; font-weight: 700 !important; } :root[data-glpi-theme=mbl_pro] .btn-primary, :root[data-glpi-theme=mbl_pro] .btn-outline-primary:hover { background: linear-gradient(180deg, #00d67a 0%, #009739 100%) !important; border-color: #00c46a !important; color: #ffffff !important; box-shadow: 0 8px 20px rgba(0, 214, 118, 0.24) !important; } :root[data-glpi-theme=mbl_pro] .btn-primary:hover { background: linear-gradient(180deg, #00ef86 0%, #00a84b 100%) !important; border-color: #00ef86 !important; } /* Inputs */ :root[data-glpi-theme=mbl_pro] .form-control, :root[data-glpi-theme=mbl_pro] .form-select, :root[data-glpi-theme=mbl_pro] select, :root[data-glpi-theme=mbl_pro] input[type=text], :root[data-glpi-theme=mbl_pro] input[type=password], :root[data-glpi-theme=mbl_pro] input[type=search], :root[data-glpi-theme=mbl_pro] textarea { background: #071c18 !important; border: 1px solid #1b5a4c !important; color: #f4fff9 !important; border-radius: 14px !important; box-shadow: none !important; } :root[data-glpi-theme=mbl_pro] .form-control:focus, :root[data-glpi-theme=mbl_pro] .form-select:focus, :root[data-glpi-theme=mbl_pro] select:focus, :root[data-glpi-theme=mbl_pro] input:focus, :root[data-glpi-theme=mbl_pro] textarea:focus { border-color: #00d67a !important; box-shadow: 0 0 0 3px rgba(0, 214, 118, 0.18) !important; } :root[data-glpi-theme=mbl_pro] input::placeholder, :root[data-glpi-theme=mbl_pro] textarea::placeholder { color: #8fb5aa !important; } /* Abas */ :root[data-glpi-theme=mbl_pro] .nav-tabs { border-bottom-color: #16483d !important; } :root[data-glpi-theme=mbl_pro] .nav-tabs .nav-link { background: #0a1e1a !important; color: #b8d6cd !important; border: 1px solid #16483d !important; border-radius: 14px 14px 0 0 !important; } :root[data-glpi-theme=mbl_pro] .nav-tabs .nav-link.active { background: #0b211c !important; color: #00d67a !important; border-bottom-color: #0b211c !important; } /* Tabelas */ :root[data-glpi-theme=mbl_pro] .table-responsive { background: #0b211c !important; border-color: #16483d !important; } :root[data-glpi-theme=mbl_pro] .table { background: #0b211c !important; color: #e8f6f1 !important; border-collapse: collapse !important; margin-bottom: 0 !important; } :root[data-glpi-theme=mbl_pro] .table thead, :root[data-glpi-theme=mbl_pro] .table thead tr, :root[data-glpi-theme=mbl_pro] .table thead th { position: static !important; background: #10372f !important; color: #c7f7e2 !important; border-color: #1d5c4d !important; vertical-align: middle !important; } :root[data-glpi-theme=mbl_pro] .table tbody tr { background: #0b211c !important; color: #e8f6f1 !important; } :root[data-glpi-theme=mbl_pro] .table tbody tr:hover { background: #12382f !important; } :root[data-glpi-theme=mbl_pro] .table td, :root[data-glpi-theme=mbl_pro] .table th { border-color: #16483d !important; } /* Dropdown */ :root[data-glpi-theme=mbl_pro] .dropdown-menu { background: #0b211c !important; border: 1px solid #16483d !important; border-radius: 16px !important; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.42) !important; } :root[data-glpi-theme=mbl_pro] .dropdown-item { color: #e8f6f1 !important; } :root[data-glpi-theme=mbl_pro] .dropdown-item:hover { background: #12382f !important; color: #ffffff !important; } /* Modais */ :root[data-glpi-theme=mbl_pro] .modal-content { background: #0b211c !important; color: #e8f6f1 !important; border: 1px solid #16483d !important; border-radius: 20px !important; } /* Badges */ :root[data-glpi-theme=mbl_pro] .badge { border-radius: 999px !important; } /* Avatar */ :root[data-glpi-theme=mbl_pro] .avatar { color: #ffffff !important; border: 1px solid rgba(0, 214, 118, 0.45) !important; font-weight: 700 !important; background-size: cover !important; background-position: center !important; background-repeat: no-repeat !important; } :root[data-glpi-theme=mbl_pro] .avatar:not([style*=background-image]):not([style*="background:"]) { background: linear-gradient(135deg, #00c46a 0%, #007f3d 100%) !important; } :root[data-glpi-theme=mbl_pro] .avatar img { display: block !important; width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: inherit !important; } /* Dashboard */ :root[data-glpi-theme=mbl_pro] .dashboard, :root[data-glpi-theme=mbl_pro] .grid-stack { background: radial-gradient(circle at top left, rgba(0, 151, 57, 0.08), transparent 28%), linear-gradient(180deg, #06110f 0%, #050b0a 100%) !important; } :root[data-glpi-theme=mbl_pro] .grid-stack { padding: 20px !important; } :root[data-glpi-theme=mbl_pro] .dashboard .card, :root[data-glpi-theme=mbl_pro] .dashboard-card, :root[data-glpi-theme=mbl_pro] .grid-stack-item-content, :root[data-glpi-theme=mbl_pro] .dashboard-widget { background: linear-gradient(145deg, #111820 0%, #0b1118 100%) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 26px !important; box-shadow: 0 18px 42px rgba(0, 0, 0, 0.34) !important; } :root[data-glpi-theme=mbl_pro] .dashboard .card-title, :root[data-glpi-theme=mbl_pro] .dashboard-card-title, :root[data-glpi-theme=mbl_pro] .grid-stack-item-content h2, :root[data-glpi-theme=mbl_pro] .grid-stack-item-content h3, :root[data-glpi-theme=mbl_pro] .grid-stack-item-content h4 { color: #ffffff !important; font-weight: 800 !important; } /* Rodapés e barras inferiores */ :root[data-glpi-theme=mbl_pro] .card-footer, :root[data-glpi-theme=mbl_pro] .search-footer, :root[data-glpi-theme=mbl_pro] .footer, :root[data-glpi-theme=mbl_pro] footer, :root[data-glpi-theme=mbl_pro] .fixed-bottom, :root[data-glpi-theme=mbl_pro] .sticky-footer, :root[data-glpi-theme=mbl_pro] .sticked-footer, :root[data-glpi-theme=mbl_pro] .timeline-buttons, :root[data-glpi-theme=mbl_pro] .timeline-footer, :root[data-glpi-theme=mbl_pro] .itil-footer, :root[data-glpi-theme=mbl_pro] .itil-object-footer { background: #071512 !important; color: #e8f6f1 !important; border-color: #16483d !important; box-shadow: none !important; } /* Tela do chamado: evita vazamento de branco */ :root[data-glpi-theme=mbl_pro] .itil-object, :root[data-glpi-theme=mbl_pro] .itil-object *, :root[data-glpi-theme=mbl_pro] .ticket-timeline, :root[data-glpi-theme=mbl_pro] .ticket-timeline *, :root[data-glpi-theme=mbl_pro] .timeline, :root[data-glpi-theme=mbl_pro] .timeline * { border-color: #16483d !important; } :root[data-glpi-theme=mbl_pro] .itil-object .bg-white, :root[data-glpi-theme=mbl_pro] .itil-object .bg-light, :root[data-glpi-theme=mbl_pro] .ticket-timeline .bg-white, :root[data-glpi-theme=mbl_pro] .ticket-timeline .bg-light, :root[data-glpi-theme=mbl_pro] .timeline .bg-white, :root[data-glpi-theme=mbl_pro] .timeline .bg-light { background: #071512 !important; } :root[data-glpi-theme=mbl_pro] .card-title.card-header.mx-n3.mt-n3, :root[data-glpi-theme=mbl_pro] .card-header.mx-n3.mt-n3 { background: #071512 !important; border-color: #16483d !important; box-shadow: none !important; } /* Scrollbar */ :root[data-glpi-theme=mbl_pro] ::-webkit-scrollbar { width: 10px; height: 10px; } :root[data-glpi-theme=mbl_pro] ::-webkit-scrollbar-track { background: #071512; } :root[data-glpi-theme=mbl_pro] ::-webkit-scrollbar-thumb { background: #1e5c4e; border-radius: 999px; } :root[data-glpi-theme=mbl_pro] ::-webkit-scrollbar-thumb:hover { background: #00c46a; } /* ========================================================== MBL_PATCH_COMPARTILHADO_PLUGINS_MREPORTING_SIDEBAR_V1 Correções compartilhadas MBL Tema: mbl_pro Modo: escuro/pro ========================================================== */ :root[data-glpi-theme=mbl_pro] { --mbl-fix-bg: #071512; --mbl-fix-card: #0b211c; --mbl-fix-card-hover: #10352c; --mbl-fix-text: #e8f6f1; --mbl-fix-muted: #b8d6cd; --mbl-fix-border: #164d3d; --mbl-fix-primary: #00a878; --mbl-fix-primary-strong: #00d69a; --mbl-fix-primary-soft: #102820; --mbl-fix-danger: #b4232b; --mbl-fix-danger-border: #ff4d5e; --mbl-fix-danger-soft: #2a1013; --mbl-fix-warning: #d98200; --mbl-fix-warning-border: #ffb02e; --mbl-fix-warning-soft: #2c210f; --mbl-fix-info: #174b65; --mbl-fix-info-border: #5cc8ff; --mbl-fix-sidebar-bg: linear-gradient(180deg, #061f1a 0%, #082d24 55%, #063821 100%); --mbl-fix-sidebar-submenu: rgba(3, 28, 23, .92); --mbl-fix-shadow: rgba(0, 0, 0, .28); } /* ========================================================== Marketplace / Plug-ins ========================================================== */ :root[data-glpi-theme=mbl_pro] .marketplace, :root[data-glpi-theme=mbl_pro] .marketplace .plugin, :root[data-glpi-theme=mbl_pro] .marketplace .plugin-card, :root[data-glpi-theme=mbl_pro] .marketplace .card { background-color: var(--mbl-fix-card) !important; border-color: var(--mbl-fix-border) !important; color: var(--mbl-fix-text) !important; } :root[data-glpi-theme=mbl_pro] .marketplace .plugin, :root[data-glpi-theme=mbl_pro] .marketplace .card { border-radius: 10px !important; box-shadow: 0 2px 8px var(--mbl-fix-shadow) !important; } :root[data-glpi-theme=mbl_pro] .marketplace .plugin:hover, :root[data-glpi-theme=mbl_pro] .marketplace .card:hover { background-color: var(--mbl-fix-card-hover) !important; border-color: var(--mbl-fix-primary) !important; } :root[data-glpi-theme=mbl_pro] .marketplace .plugin h3, :root[data-glpi-theme=mbl_pro] .marketplace .plugin h4, :root[data-glpi-theme=mbl_pro] .marketplace .plugin .plugin-name, :root[data-glpi-theme=mbl_pro] .marketplace .card-title, :root[data-glpi-theme=mbl_pro] .marketplace a:not(.btn) { color: var(--mbl-fix-primary-strong) !important; } :root[data-glpi-theme=mbl_pro] .marketplace .text-muted, :root[data-glpi-theme=mbl_pro] .marketplace .plugin-version, :root[data-glpi-theme=mbl_pro] .marketplace .plugin-description, :root[data-glpi-theme=mbl_pro] .marketplace small, :root[data-glpi-theme=mbl_pro] .marketplace .small { color: var(--mbl-fix-muted) !important; } :root[data-glpi-theme=mbl_pro] input[placeholder*="Filtrar lista de plug-ins"] { background-color: var(--mbl-fix-card) !important; border-color: var(--mbl-fix-primary) !important; color: var(--mbl-fix-text) !important; } /* ========================================================== Botões semáforo dos plug-ins ========================================================== */ :root[data-glpi-theme=mbl_pro] .marketplace button.modify_plugin, :root[data-glpi-theme=mbl_pro] .marketplace button.add_tooltip, :root[data-glpi-theme=mbl_pro] .marketplace button[data-bs-toggle=modal], :root[data-glpi-theme=mbl_pro] .marketplace a[href*="/plugins/"] > button { min-width: 29px !important; min-height: 29px !important; border-radius: 7px !important; border-width: 1px !important; opacity: 1 !important; color: #ffffff !important; } :root[data-glpi-theme=mbl_pro] .marketplace button.modify_plugin i, :root[data-glpi-theme=mbl_pro] .marketplace button.add_tooltip i, :root[data-glpi-theme=mbl_pro] .marketplace button[data-bs-toggle=modal] i, :root[data-glpi-theme=mbl_pro] .marketplace a[href*="/plugins/"] > button i { color: #ffffff !important; opacity: 1 !important; } /* Habilitado */ :root[data-glpi-theme=mbl_pro] .marketplace button.modify_plugin[data-action=disable_plugin], :root[data-glpi-theme=mbl_pro] .marketplace button.modify_plugin[oldtitle=Desabilitar], :root[data-glpi-theme=mbl_pro] .marketplace button:has(.ti-toggle-right-filled) { background-color: var(--mbl-fix-primary) !important; border-color: var(--mbl-fix-primary-strong) !important; box-shadow: 0 0 10px rgba(0, 168, 120, 0.45) !important; } /* Desabilitado */ :root[data-glpi-theme=mbl_pro] .marketplace button.modify_plugin[data-action=enable_plugin], :root[data-glpi-theme=mbl_pro] .marketplace button.modify_plugin[oldtitle=Habilitar], :root[data-glpi-theme=mbl_pro] .marketplace button:has(.ti-toggle-left-filled) { background-color: var(--mbl-fix-danger) !important; border-color: var(--mbl-fix-danger-border) !important; box-shadow: 0 0 10px rgba(255, 77, 94, 0.45) !important; } /* Desinstalar */ :root[data-glpi-theme=mbl_pro] .marketplace button[title=Desinstalar], :root[data-glpi-theme=mbl_pro] .marketplace button:has(.ti-folder-x), :root[data-glpi-theme=mbl_pro] .marketplace .modify_plugin[data-action=uninstall_plugin] { background-color: #7f1d1d !important; border-color: #ef4444 !important; box-shadow: 0 0 9px rgba(239, 68, 68, 0.45) !important; } /* Configurar */ :root[data-glpi-theme=mbl_pro] .marketplace button.add_tooltip[oldtitle=Configurar], :root[data-glpi-theme=mbl_pro] .marketplace button:has(.ti-tool), :root[data-glpi-theme=mbl_pro] .marketplace a[href*="/plugins/"] > button:has(.ti-tool) { background-color: var(--mbl-fix-info) !important; border-color: var(--mbl-fix-info-border) !important; box-shadow: 0 0 9px rgba(92, 200, 255, 0.45) !important; } /* Atualizar / baixar / instalar */ :root[data-glpi-theme=mbl_pro] .marketplace button.modify_plugin[data-action=update_plugin], :root[data-glpi-theme=mbl_pro] .marketplace button.modify_plugin[data-action=upgrade_plugin], :root[data-glpi-theme=mbl_pro] .marketplace button.modify_plugin[data-action=download_plugin], :root[data-glpi-theme=mbl_pro] .marketplace button.modify_plugin[data-action=install_plugin], :root[data-glpi-theme=mbl_pro] .marketplace button[oldtitle*=Atualizar], :root[data-glpi-theme=mbl_pro] .marketplace button[oldtitle*=Baixar], :root[data-glpi-theme=mbl_pro] .marketplace button[oldtitle*=Instalar], :root[data-glpi-theme=mbl_pro] .marketplace button:has(.ti-cloud), :root[data-glpi-theme=mbl_pro] .marketplace button:has(.ti-cloud-download), :root[data-glpi-theme=mbl_pro] .marketplace button:has(.ti-download) { background-color: var(--mbl-fix-warning) !important; border-color: var(--mbl-fix-warning-border) !important; box-shadow: 0 0 12px rgba(255, 176, 46, 0.65) !important; animation: mbl-plugin-update-pulse-shared 1.8s ease-in-out infinite; } :root[data-glpi-theme=mbl_pro] .marketplace button.modify_plugin:hover, :root[data-glpi-theme=mbl_pro] .marketplace button.add_tooltip:hover, :root[data-glpi-theme=mbl_pro] .marketplace button[data-bs-toggle=modal]:hover, :root[data-glpi-theme=mbl_pro] .marketplace a[href*="/plugins/"] > button:hover { filter: brightness(1.15); transform: scale(1.04); } /* Card desabilitado */ :root[data-glpi-theme=mbl_pro] .marketplace .plugin:has(button.modify_plugin[data-action=enable_plugin]), :root[data-glpi-theme=mbl_pro] .marketplace .card:has(button.modify_plugin[data-action=enable_plugin]) { border-color: var(--mbl-fix-danger) !important; background-color: var(--mbl-fix-danger-soft) !important; box-shadow: inset 0 0 0 1px rgba(255, 77, 94, 0.2) !important; } /* Card com atualização */ :root[data-glpi-theme=mbl_pro] .marketplace .plugin:has(button.modify_plugin[data-action=update_plugin]), :root[data-glpi-theme=mbl_pro] .marketplace .plugin:has(button.modify_plugin[data-action=upgrade_plugin]), :root[data-glpi-theme=mbl_pro] .marketplace .plugin:has(button:has(.ti-cloud)), :root[data-glpi-theme=mbl_pro] .marketplace .card:has(button.modify_plugin[data-action=update_plugin]), :root[data-glpi-theme=mbl_pro] .marketplace .card:has(button.modify_plugin[data-action=upgrade_plugin]), :root[data-glpi-theme=mbl_pro] .marketplace .card:has(button:has(.ti-cloud)) { border-color: var(--mbl-fix-warning) !important; background-color: var(--mbl-fix-warning-soft) !important; box-shadow: inset 0 0 0 1px rgba(255, 176, 46, 0.25), 0 0 10px rgba(255, 176, 46, 0.12) !important; } /* ========================================================== Alertas warning ========================================================== */ :root[data-glpi-theme=mbl_pro] .alert-warning, :root[data-glpi-theme=mbl_pro] .alert.alert-warning, :root[data-glpi-theme=mbl_pro] .bg-warning, :root[data-glpi-theme=mbl_pro] .bg-warning-subtle, :root[data-glpi-theme=mbl_pro] .table-warning, :root[data-glpi-theme=mbl_pro] .list-group-item-warning { background-color: var(--mbl-fix-warning-soft) !important; border-color: var(--mbl-fix-warning) !important; color: var(--mbl-fix-text) !important; } /* ========================================================== More Reporting legado ========================================================== */ :root[data-glpi-theme=mbl_pro] body:has(a[href*="plugins/mreporting"]), :root[data-glpi-theme=mbl_pro] body:has(form[action*="plugins/mreporting"]) { background-color: var(--mbl-fix-bg) !important; color: var(--mbl-fix-text) !important; } :root[data-glpi-theme=mbl_pro] body:has(a[href*="plugins/mreporting"]) .page-body, :root[data-glpi-theme=mbl_pro] body:has(form[action*="plugins/mreporting"]) .page-body, :root[data-glpi-theme=mbl_pro] body:has(a[href*="plugins/mreporting"]) .tab_cadre, :root[data-glpi-theme=mbl_pro] body:has(form[action*="plugins/mreporting"]) .tab_cadre, :root[data-glpi-theme=mbl_pro] body:has(a[href*="plugins/mreporting"]) table, :root[data-glpi-theme=mbl_pro] body:has(form[action*="plugins/mreporting"]) table, :root[data-glpi-theme=mbl_pro] body:has(a[href*="plugins/mreporting"]) tr, :root[data-glpi-theme=mbl_pro] body:has(form[action*="plugins/mreporting"]) tr, :root[data-glpi-theme=mbl_pro] body:has(a[href*="plugins/mreporting"]) td, :root[data-glpi-theme=mbl_pro] body:has(form[action*="plugins/mreporting"]) td, :root[data-glpi-theme=mbl_pro] body:has(a[href*="plugins/mreporting"]) div, :root[data-glpi-theme=mbl_pro] body:has(form[action*="plugins/mreporting"]) div { background-color: var(--mbl-fix-card) !important; color: var(--mbl-fix-text) !important; border-color: var(--mbl-fix-border) !important; } :root[data-glpi-theme=mbl_pro] body:has(a[href*="plugins/mreporting"]) th, :root[data-glpi-theme=mbl_pro] body:has(form[action*="plugins/mreporting"]) th, :root[data-glpi-theme=mbl_pro] body:has(a[href*="plugins/mreporting"]) .tab_bg_1, :root[data-glpi-theme=mbl_pro] body:has(form[action*="plugins/mreporting"]) .tab_bg_1, :root[data-glpi-theme=mbl_pro] body:has(a[href*="plugins/mreporting"]) .tab_bg_2, :root[data-glpi-theme=mbl_pro] body:has(form[action*="plugins/mreporting"]) .tab_bg_2 { background-color: var(--mbl-fix-primary-soft) !important; color: var(--mbl-fix-text) !important; border-color: var(--mbl-fix-border) !important; } :root[data-glpi-theme=mbl_pro] body:has(a[href*="plugins/mreporting"]) input, :root[data-glpi-theme=mbl_pro] body:has(a[href*="plugins/mreporting"]) select, :root[data-glpi-theme=mbl_pro] body:has(a[href*="plugins/mreporting"]) textarea, :root[data-glpi-theme=mbl_pro] body:has(form[action*="plugins/mreporting"]) input, :root[data-glpi-theme=mbl_pro] body:has(form[action*="plugins/mreporting"]) select, :root[data-glpi-theme=mbl_pro] body:has(form[action*="plugins/mreporting"]) textarea { background-color: var(--mbl-fix-card) !important; border-color: var(--mbl-fix-primary) !important; color: var(--mbl-fix-text) !important; } :root[data-glpi-theme=mbl_pro] body:has(a[href*="plugins/mreporting"]) button, :root[data-glpi-theme=mbl_pro] body:has(form[action*="plugins/mreporting"]) button, :root[data-glpi-theme=mbl_pro] body:has(a[href*="plugins/mreporting"]) input[type=submit], :root[data-glpi-theme=mbl_pro] body:has(form[action*="plugins/mreporting"]) input[type=submit] { background-color: var(--mbl-fix-primary) !important; border-color: var(--mbl-fix-primary-strong) !important; color: #ffffff !important; } /* ========================================================== Sidebar ========================================================== */ :root[data-glpi-theme=mbl_pro] .navbar-vertical, :root[data-glpi-theme=mbl_pro] aside.navbar-vertical { background: var(--mbl-fix-sidebar-bg) !important; border-right: 1px solid var(--mbl-fix-border) !important; box-shadow: 6px 0 18px var(--mbl-fix-shadow) !important; } :root[data-glpi-theme=mbl_pro] .navbar-vertical .navbar-collapse, :root[data-glpi-theme=mbl_pro] .navbar-vertical .navbar-nav, :root[data-glpi-theme=mbl_pro] .navbar-vertical .navbar-brand, :root[data-glpi-theme=mbl_pro] .navbar-vertical .container-fluid { background: transparent !important; } :root[data-glpi-theme=mbl_pro] .navbar-vertical .navbar-brand { padding-top: 14px !important; padding-bottom: 14px !important; border-bottom: 1px solid rgba(0, 143, 93, 0.2) !important; } :root[data-glpi-theme=mbl_pro] .navbar-vertical .nav-link { color: var(--mbl-fix-text) !important; border-radius: 10px !important; margin: 2px 8px !important; padding: 9px 12px !important; transition: all 0.16s ease-in-out !important; border: 1px solid transparent !important; } :root[data-glpi-theme=mbl_pro] .navbar-vertical .nav-link i, :root[data-glpi-theme=mbl_pro] .navbar-vertical .nav-link svg, :root[data-glpi-theme=mbl_pro] .navbar-vertical .nav-link .nav-link-icon { color: var(--mbl-fix-primary) !important; opacity: 0.95 !important; } :root[data-glpi-theme=mbl_pro] .navbar-vertical .nav-link:hover { background: rgba(0, 168, 120, 0.12) !important; border-color: rgba(0, 168, 120, 0.28) !important; color: var(--mbl-fix-primary-strong) !important; transform: translateX(2px); } :root[data-glpi-theme=mbl_pro] .navbar-vertical .nav-link.active, :root[data-glpi-theme=mbl_pro] .navbar-vertical .nav-item.active > .nav-link, :root[data-glpi-theme=mbl_pro] .navbar-vertical .nav-item.show > .nav-link { background: linear-gradient(90deg, var(--mbl-fix-primary) 0%, var(--mbl-fix-primary-strong) 100%) !important; border-color: var(--mbl-fix-primary-strong) !important; color: #ffffff !important; font-weight: 700 !important; box-shadow: 0 0 12px rgba(0, 168, 120, 0.28) !important; } :root[data-glpi-theme=mbl_pro] .navbar-vertical .nav-link.active i, :root[data-glpi-theme=mbl_pro] .navbar-vertical .nav-link.active svg, :root[data-glpi-theme=mbl_pro] .navbar-vertical .nav-item.active > .nav-link i, :root[data-glpi-theme=mbl_pro] .navbar-vertical .nav-item.active > .nav-link svg, :root[data-glpi-theme=mbl_pro] .navbar-vertical .nav-item.show > .nav-link i, :root[data-glpi-theme=mbl_pro] .navbar-vertical .nav-item.show > .nav-link svg { color: #ffffff !important; } :root[data-glpi-theme=mbl_pro] .navbar-vertical .dropdown-menu, :root[data-glpi-theme=mbl_pro] .navbar-vertical .nav-item .dropdown-menu { background: var(--mbl-fix-sidebar-submenu) !important; border: 1px solid var(--mbl-fix-border) !important; border-radius: 12px !important; margin: 4px 8px 8px 8px !important; padding: 6px !important; box-shadow: 0 8px 18px var(--mbl-fix-shadow) !important; } :root[data-glpi-theme=mbl_pro] .navbar-vertical .dropdown-menu .dropdown-item, :root[data-glpi-theme=mbl_pro] .navbar-vertical .dropdown-menu .nav-link { color: var(--mbl-fix-text) !important; border-radius: 8px !important; margin: 1px 0 !important; padding: 8px 10px !important; background: transparent !important; } :root[data-glpi-theme=mbl_pro] .navbar-vertical .dropdown-menu .dropdown-item:hover, :root[data-glpi-theme=mbl_pro] .navbar-vertical .dropdown-menu .nav-link:hover { background: rgba(0, 168, 120, 0.12) !important; color: var(--mbl-fix-primary-strong) !important; } :root[data-glpi-theme=mbl_pro] .navbar-vertical .dropdown-menu .dropdown-item.active, :root[data-glpi-theme=mbl_pro] .navbar-vertical .dropdown-menu .nav-link.active { background: rgba(0, 168, 120, 0.18) !important; color: var(--mbl-fix-primary-strong) !important; font-weight: 700 !important; border-left: 3px solid var(--mbl-fix-primary) !important; } @keyframes mbl-plugin-update-pulse-shared { 0% { box-shadow: 0 0 5px rgba(255, 176, 46, 0.3); } 50% { box-shadow: 0 0 15px rgba(255, 176, 46, 0.85); } 100% { box-shadow: 0 0 5px rgba(255, 176, 46, 0.3); } }