@charset "UTF-8"; /* theme-name: Elinsa Dark */ /* ========================================================= * ELINSA DARK — PALETA ESCURA DO GLPI AUTENTICADO * * Irmã escura de `elinsa.scss`. Vale tudo que está explicado * no cabeçalho daquele arquivo (o GLPI carrega TODAS as paletas * o tempo todo e usa o atributo `data-glpi-theme` no pra * decidir qual fica ativa) — por isso tudo aqui está dentro de * :root[data-glpi-theme='elinsa_dark']. * * O nome do tema vem do NOME DO ARQUIVO: `elinsa_dark.scss` * vira `data-glpi-theme='elinsa_dark'`. Renomear o arquivo sem * renomear o seletor abaixo faz a paleta aparecer na lista de * Preferências > Paleta e não pintar absolutamente nada. * * A tela de LOGIN não está aqui de propósito: ela não passa pelo * sistema de paletas (visitante não tem preferência salva), então * continua sendo responsabilidade exclusiva do bloco * `body.welcome-anonymous` em `elinsa.scss`. Os dois arquivos * convivem sem se sobrepor. * * --------------------------------------------------------- * DE ONDE VÊM AS CORES * --------------------------------------------------------- * Superfícies e textos: tema **Neutral** do shadcn/ui (bloco * `.dark` do globals.css), convertidos de oklch() pra hex — * o GLPI/Tabler não trabalha em oklch, e algumas variáveis * (as `-rgb`) exigem o formato "R, G, B" cru. * * oklch(0.145 0 0) → #0a0a0a background * oklch(0.205 0 0) → #171717 card / popover / sidebar * oklch(0.269 0 0) → #262626 muted / accent / sidebar-accent * oklch(0.371 0 0) → #404040 chart-4 * oklch(0.556 0 0) → #737373 ring * oklch(0.708 0 0) → #a1a1a1 muted-foreground * oklch(0.985 0 0) → #fafafa foreground * oklch(0.704 0.191 22.216) → #ff6467 destructive * * Cor de destaque: a azul da logo da Elinsa, **#24A3DD**. * Em oklch ela é `oklch(0.676 0.134 234.74)` — ou seja, cai * exatamente entre o `--primary` (oklch 0.45) e o * `--sidebar-primary` (oklch 0.715) do globals.css. Então em vez * de importar o ciano do shadcn e ter DUAS azuis brigando na * tela, a rampa abaixo mantém a estrutura de luminosidade do * shadcn e só reancora o matiz em 234.74 (o da logo). * * Todos os pares de cor foram conferidos em contraste WCAG e * passam AA (mínimo 4.5:1 pra texto normal): * * #24a3dd sobre #0a0a0a → 6.94:1 links no corpo * #24a3dd sobre #171717 → 6.28:1 links dentro de cards * #24a3dd sobre #262626 → 5.30:1 item ativo do menu * #0a3246 sobre #24a3dd → 4.72:1 texto do botão primário * #fafafa sobre #0a0a0a → 18.97:1 texto do corpo * #a1a1a1 sobre #171717 → 6.94:1 texto secundário * #ff6467 sobre #0a0a0a → 6.85:1 mensagens de erro * ========================================================= */ /* * Sinaliza pro compilador de temas do GLPI que esta paleta é * escura — é o que faz o núcleo puxar as variantes escuras dos * parciais compartilhados (bordas de tabela, sombras, ícones * invertidos etc.). Mesma linha que abre o `_auror_dark.scss`. */ :root[data-glpi-theme=elinsa_dark] { /* * ======================================================= * TOKENS * * Bloco de tradução shadcn → GLPI. Nada aqui pinta nada * sozinho: são só os valores nomeados uma única vez, pra que * o mapeamento lá embaixo seja legível e pra que ajustar um * tom seja mexer em UM lugar, não caçar o mesmo hex em oito * regras diferentes. * ======================================================= */ /* Superfícies — escala Neutral do shadcn, do fundo pro topo */ --elinsa-bg: #0a0a0a; /* --background : fundo da página */ --elinsa-surface: #171717; /* --card : cards, painéis, sidebar */ --elinsa-surface-raised: #262626; /* --accent : hover, aba ativa, dropdown */ --elinsa-surface-hairline: #404040; /* --chart-4 : divisórias que precisam aparecer */ /* Textos */ --elinsa-fg: #fafafa; /* --foreground */ --elinsa-fg-muted: #a1a1a1; /* --muted-foreground */ /* * Bordas translúcidas — a assinatura visual do shadcn no dark. * Branco com alfa baixo em vez de um cinza fixo: a mesma * variável funciona tanto sobre #0a0a0a quanto sobre #262626, * clareando junto com a superfície embaixo. Um hex fixo sumiria * numa e gritaria na outra. */ --elinsa-border: rgb(255 255 255 / 0.1); /* --border */ --elinsa-border-strong: rgb(255 255 255 / 0.15); /* --input */ --elinsa-ring: #737373; /* --ring */ /* * Rampa da marca — matiz fixo em 234.74 (o do #24A3DD), com os * degraus de luminosidade herdados do shadcn. O -500 é a cor * literal da logo; os vizinhos existem pra hover, texto sobre * fundo escuro e preenchimento de fundo. */ --elinsa-brand-400: #61c3f8; /* oklch(0.78 0.119 234.74) — texto de destaque */ --elinsa-brand-500: #24a3dd; /* oklch(0.676 0.134 234.74) — A LOGO */ --elinsa-brand-600: #0084b8; /* oklch(0.58 0.124 234.74) — hover/pressed */ --elinsa-brand-950: #0a3246; /* oklch(0.302 0.056 234.74) — texto sobre marca */ /* A marca em "R G B" cru, pra montar rgb(... / alfa) nos realces */ --elinsa-brand-rgb: 36 163 221; /* * ======================================================= * MAPEAMENTO — TABLER * * Daqui pra baixo são as variáveis que o GLPI/Tabler realmente * lê. Os nomes e a ordem seguem o `_auror_dark.scss`. * ======================================================= */ --tblr-body-bg: var(--elinsa-bg); --tblr-bg-surface: var(--elinsa-surface); --tblr-body-color: var(--elinsa-fg); --tblr-muted: var(--elinsa-fg-muted); /* * `--tblr-dark` e `--tblr-light` não são "o tema escuro" e "o * tema claro" — são duas cores nomeadas do Tabler (as classes * .bg-dark/.text-dark e .bg-light/.text-light). Num tema * escuro elas trocam de papel: "dark" vira a superfície * elevada e "light" vira o cinza de texto. */ --tblr-dark: var(--elinsa-surface); --tblr-light: var(--elinsa-fg-muted); --tblr-primary: var(--elinsa-brand-500); --tblr-primary-rgb: 36, 163, 221; /* * Texto DENTRO do botão primário. Sobre o #24A3DD cheio, branco * dá só 2.8:1 (reprova); este azul quase preto dá 4.72:1. É o * mesmo padrão que o `_auror_dark.scss` usa (fundo claro da * marca + texto escuro) e o mesmo que o shadcn usa no par * --sidebar-primary / --sidebar-primary-foreground. */ --tblr-primary-fg: var(--elinsa-brand-950); /* * ATENÇÃO — aqui o mapeamento inverte de propósito. * * No shadcn, `--secondary` é o FUNDO do botão secundário * (#27272a, quase preto) e `--secondary-foreground` é o texto. * No Tabler, `--tblr-secondary` é uma cor nomeada usada TAMBÉM * como cor de TEXTO (a classe .text-secondary, que o GLPI * espalha por metadados de chamado, rodapés de tabela etc.). * * Copiar o #27272a do shadcn aqui deixaria todo `.text-secondary` * preto-sobre-preto, ilegível. Por isso `--tblr-secondary` recebe * o cinza claro e `--tblr-secondary-fg` recebe a superfície * escura — que é exatamente a inversão que o `_auror_dark.scss` * faz (#b0bbd4 / #262d3d). O par shadcn continua honrado, só * que trocado de lado. */ --tblr-secondary: var(--elinsa-fg-muted); --tblr-secondary-fg: var(--elinsa-surface); /* Links do conteúdo. O Tabler monta a cor final via rgba(), daí o formato cru. */ --tblr-link-color-rgb: 36, 163, 221; /* Badges: pílula clara com texto escuro — 6.94:1 */ --tblr-badge-bg: var(--tblr-light); --tblr-badge-color: var(--tblr-dark); /* * Bordas globais. O `--auror` não declara estas duas (deixa o * padrão escuro do Tabler resolver), mas o visual translúcido * do shadcn depende delas — é o que separa card de fundo sem * desenhar uma linha cinza dura. */ --tblr-border-color: var(--elinsa-border); --tblr-border-color-translucent: var(--elinsa-border); /* Campos de formulário */ --tblr-input-bg: rgb(255 255 255 / 0.04); --tblr-input-disabled-bg: rgb(255 255 255 / 0.02); /* * `--radius: 0.625rem` é do globals.css e é parte forte da * identidade do shadcn — o Tabler vem com 4px, bem mais duro. * Se em algum canto do GLPI isso arredondar demais um elemento * pequeno, esta é a única linha a mexer. */ --tblr-border-radius: 0.625rem; /* * ======================================================= * MAPEAMENTO — VARIÁVEIS PRÓPRIAS DO GLPI * ======================================================= */ --glpi-form-header-fg: var(--elinsa-brand-400); --glpi-form-header-border-color: transparent; /* Menu lateral (a estrutura visual dele está no bloco seguinte) */ --glpi-mainmenu-bg: var(--elinsa-surface); --glpi-mainmenu-fg: var(--elinsa-fg); /* * Portal de autoatendimento. O `_auror_dark.scss` monta estes * três com hsl() do mesmo matiz do corpo, em degraus de claridade * decrescente (30.7% → 25.7% → 20.7%). Como a base Neutral é * cinza puro, aqui os degraus são os próprios passos da escala. */ --glpi-helpdesk-header: #2a2a2a; --glpi-helpdesk-tiles-section-bg: #202020; --glpi-helpdesk-tabs-section-bg: var(--elinsa-surface); /* Abas */ --glpi-tabs-bg: #141414; --glpi-tabs-fg: var(--tblr-light); --glpi-tabs-border-color: transparent; --glpi-tabs-active-bg: var(--elinsa-surface-raised); --glpi-tabs-active-fg: var(--elinsa-fg); --glpi-tabs-active-border-color: transparent; /* Chamados / timeline */ --glpi-itil-secondary-bg: var(--elinsa-surface); --glpi-timeline-fup-bg: #141414; --glpi-timeline-fup-fg: var(--elinsa-fg-muted); --glpi-timeline-fup-border: #2e2e2e; /* * As quatro cores do quadradinho de preview que aparece ao lado * do nome da paleta em Preferências > Paleta. NÃO pintam nada * da interface (ver nota longa em `elinsa.scss`) — é só pra * reconhecer o tema na lista. */ --glpi-palette-color-1: var(--elinsa-brand-500); --glpi-palette-color-2: var(--elinsa-bg); --glpi-palette-color-3: var(--elinsa-surface-raised); --glpi-palette-color-4: var(--elinsa-fg); /* * Gradiente das ilustrações do cabeçalho do helpdesk. É a única * área puramente decorativa do tema, então leva a marca em vez * do cinza — a paleta Neutral do shadcn é cinza até nos gráficos, * e uma ilustração inteira em cinza fica sem identidade nenhuma. * Pra deixar 100% neutro como o resto: #a1a1a1 / #525252 / #262626. */ --glpi-illustrations-gradient-1: var(--elinsa-brand-400); --glpi-illustrations-gradient-2: var(--elinsa-brand-600); --glpi-illustrations-gradient-3: #00364f; } /* ========================================================= * TIMELINE — CORPO DE MENSAGEM VINDO DE E-MAIL * * O corpo de um acompanhamento criado por e-mail é HTML autoral * do remetente, e vem com estilo inline (`style="color:#000"`). * Estilo inline ganha de qualquer regra de folha de estilo, então * `--glpi-timeline-fup-fg` não alcança esse texto: ele fica preto * sobre o #141414 da timeline, ilegível. * * A dificuldade é que nem todo texto escuro ali está errado. Uma * assinatura corporativa típica é texto escuro sobre uma TABELA * BRANCA que o próprio e-mail traz — essa parte já está legível e * inverter a cor dela quebraria o que hoje funciona. * * --------------------------------------------------------- * COMO ISSO É RESOLVIDO AQUI (três camadas, nesta ordem) * --------------------------------------------------------- * 1. O container recebe cor clara própria. Resolve sozinho todo * conteúdo que NÃO traz cor inline — que é a maioria. * * 2. TODA cor inline é achatada pra `inherit`. Achatar tudo é de * propósito, e é mais seguro do que tentar detectar só as cores * escuras: casar `[style*='color:#000']` pegaria junto * `color:#0000ff`, e `rgb(0` pegaria `rgb(0, 120, 200)` — o * filtro "esperto" erra mais do que acerta. * * 3. Quem trouxe fundo próprio volta a mandar na cor, com texto * escuro. É o que salva a assinatura: a tabela branca reafirma * escuro, e os filhos dela — que a camada 2 pôs em `inherit` — * herdam esse escuro. Sem essa camada, a assinatura viraria * texto claro sobre branco. * * A regra da camada 3 vem depois da 2 no arquivo de propósito: * as duas têm a mesma especificidade, então quem vem por último * vence. Não reordene sem trocar por `!important` explícito. * * --------------------------------------------------------- * O QUE SE PERDE * --------------------------------------------------------- * Fora das ilhas com fundo próprio, a cor escolhida pelo remetente * some (vermelho de ênfase, azul de link). É troca consciente: * legibilidade garantida vale mais que fidelidade tipográfica num * e-mail. Pra links não dependerem de cor, eles ganham sublinhado * — que também é a recomendação de acessibilidade, já que cor * sozinha não deve ser o único indicador de que algo é clicável. * * Alternativa, se um dia preferirem fidelidade total: dar ao * `.rich_text_container` um fundo claro fixo (`#fafafa` + texto * `#18181b`), que é o que o Gmail faz no modo escuro. Aí todo o * estilo do remetente funciona como ele escreveu, ao custo de um * bloco branco dentro do tema escuro. * ========================================================= */ :root[data-glpi-theme=elinsa_dark] .rich_text_container, :root[data-glpi-theme=elinsa_dark] .timeline-content, :root[data-glpi-theme=elinsa_dark] .read-only-content, :root[data-glpi-theme=elinsa_dark] .itilobject_content { color: var(--elinsa-fg); } :root[data-glpi-theme=elinsa_dark] .rich_text_container [style*="color:"], :root[data-glpi-theme=elinsa_dark] .timeline-content [style*="color:"], :root[data-glpi-theme=elinsa_dark] .read-only-content [style*="color:"], :root[data-glpi-theme=elinsa_dark] .itilobject_content [style*="color:"] { color: inherit !important; } :root[data-glpi-theme=elinsa_dark] .rich_text_container [style*=background], :root[data-glpi-theme=elinsa_dark] .rich_text_container [bgcolor], :root[data-glpi-theme=elinsa_dark] .timeline-content [style*=background], :root[data-glpi-theme=elinsa_dark] .timeline-content [bgcolor], :root[data-glpi-theme=elinsa_dark] .read-only-content [style*=background], :root[data-glpi-theme=elinsa_dark] .read-only-content [bgcolor], :root[data-glpi-theme=elinsa_dark] .itilobject_content [style*=background], :root[data-glpi-theme=elinsa_dark] .itilobject_content [bgcolor] { color: #18181b !important; } :root[data-glpi-theme=elinsa_dark] .rich_text_container a, :root[data-glpi-theme=elinsa_dark] .timeline-content a, :root[data-glpi-theme=elinsa_dark] .read-only-content a, :root[data-glpi-theme=elinsa_dark] .itilobject_content a { text-decoration: underline; text-underline-offset: 2px; } /* ========================================================= * MENU LATERAL — ACORDEÕES COMO BOTÕES * * As variáveis acima só conseguem pintar o FUNDO e o TEXTO do * menu (`--glpi-mainmenu-bg` / `-fg`). Transformar cada item de * primeiro nível ("Ativos", "Assistência", ...) numa caixa com * borda própria, distribuir as zonas da coluna e deixar o painel * aberto numa superfície mais clara exige regra de verdade — não * tem variável do GLPI pra nada disso. * * Tudo está preso a `:root[data-glpi-theme='elinsa_dark']`, então * nenhuma outra paleta é afetada. * * Os seletores miram classes do Tabler (`.navbar-vertical`, * `.nav-item`, `.nav-link`, `.dropdown-menu`, `.dropdown-item`), * que é o framework por baixo do menu do GLPI, e não ids do GLPI * — classe de framework muda muito menos de versão pra versão. * `#mainmenu` entra junto só como reforço: se o id existir, casa; * se não existir, o `.navbar-vertical` sozinho já resolve. * * --------------------------------------------------------- * DENSIDADE * --------------------------------------------------------- * Os números de altura/espaçamento vêm do componente Sidebar do * shadcn, que é bem mais compacto que o padrão do Tabler: * item de 32px (não 40), gap de 2px entre itens (não 8), raio de * 6px (`rounded-md`) e rótulo em 13px/500. * * A borda de repouso caiu de 10% pra 8% de branco de propósito: * com seis itens empilhados, seis bordas de 10% param de ler como * "botão" e passam a ler como grade/cerca. Os 8% seguram a forma * do botão sem competir com o conteúdo; hover e aberto sobem pra * 16% e pra borda tingida de marca, que é onde a borda realmente * precisa comunicar alguma coisa. * ========================================================= */ /* * Daqui pra baixo os comentários são `//` (silenciosos) em vez de * `/* *\/`: comentário "alto" colocado ENTRE duas regras aninhadas * faz o Sass emitir um bloco de regra vazio só pra carregá-lo no * CSS compilado. O `//` some na compilação e a explicação fica * onde importa, que é aqui no fonte. É o estilo que o próprio * `_auror_dark.scss` usa. */ :root[data-glpi-theme=elinsa_dark] #mainmenu, :root[data-glpi-theme=elinsa_dark] .navbar-vertical { --elinsa-menu-inset: 0.5rem; --elinsa-menu-gap: 0.125rem; --elinsa-menu-h: 2rem; --elinsa-menu-radius: 0.375rem; --elinsa-zone-pad: 0.5rem; --elinsa-menu-btn-bg: rgb(255 255 255 / 0.02); --elinsa-menu-btn-bg-hover: rgb(255 255 255 / 0.06); --elinsa-menu-btn-border: rgb(255 255 255 / 0.08); --elinsa-menu-btn-border-hover: rgb(255 255 255 / 0.16); --elinsa-menu-panel-bg: var(--elinsa-surface-raised); background-color: var(--glpi-mainmenu-bg); border-right: 1px solid var(--elinsa-border); display: flex; flex-direction: column; min-height: 0; } :root[data-glpi-theme=elinsa_dark] #mainmenu > .container-fluid, :root[data-glpi-theme=elinsa_dark] #mainmenu > .container-fluid > .navbar-collapse, :root[data-glpi-theme=elinsa_dark] #mainmenu > .navbar-collapse, :root[data-glpi-theme=elinsa_dark] .navbar-vertical > .container-fluid, :root[data-glpi-theme=elinsa_dark] .navbar-vertical > .container-fluid > .navbar-collapse, :root[data-glpi-theme=elinsa_dark] .navbar-vertical > .navbar-collapse { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; } :root[data-glpi-theme=elinsa_dark] #mainmenu .navbar-brand, :root[data-glpi-theme=elinsa_dark] .navbar-vertical .navbar-brand { display: flex; justify-content: center; width: 100%; margin: 0; padding: calc(var(--elinsa-zone-pad) * 2) var(--elinsa-zone-pad); border-bottom: 1px solid var(--elinsa-border); } :root[data-glpi-theme=elinsa_dark] #mainmenu *:has(> .btn-primary), :root[data-glpi-theme=elinsa_dark] .navbar-vertical *:has(> .btn-primary) { display: flex; box-sizing: border-box; width: 100%; margin: 0; padding: var(--elinsa-zone-pad); } :root[data-glpi-theme=elinsa_dark] #mainmenu .btn-primary, :root[data-glpi-theme=elinsa_dark] .navbar-vertical .btn-primary { display: flex; flex: 1 1 auto; align-items: center; justify-content: center; gap: 0.375rem; width: auto; min-width: 0; min-height: var(--elinsa-menu-h); font-size: 0.8125rem; font-weight: 500; border-radius: var(--elinsa-menu-radius); } :root[data-glpi-theme=elinsa_dark] #mainmenu .navbar-nav, :root[data-glpi-theme=elinsa_dark] .navbar-vertical .navbar-nav { flex: 1 1 auto; padding-block: var(--elinsa-zone-pad); border-top: 1px solid var(--elinsa-border); } :root[data-glpi-theme=elinsa_dark] #mainmenu .navbar-nav > .nav-item, :root[data-glpi-theme=elinsa_dark] .navbar-vertical .navbar-nav > .nav-item { margin-block: var(--elinsa-menu-gap); padding-inline: var(--elinsa-menu-inset); } :root[data-glpi-theme=elinsa_dark] #mainmenu .navbar-nav > .nav-item > .nav-link, :root[data-glpi-theme=elinsa_dark] .navbar-vertical .navbar-nav > .nav-item > .nav-link { display: flex; align-items: center; gap: 0.5rem; min-height: var(--elinsa-menu-h); padding: 0.25rem 0.5rem; color: var(--glpi-mainmenu-fg); font-size: 0.8125rem; font-weight: 500; line-height: 1.2; background-color: var(--elinsa-menu-btn-bg); border: 1px solid var(--elinsa-menu-btn-border); border-radius: var(--elinsa-menu-radius); transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease; } :root[data-glpi-theme=elinsa_dark] #mainmenu .navbar-nav > .nav-item > .nav-link .nav-link-icon, :root[data-glpi-theme=elinsa_dark] .navbar-vertical .navbar-nav > .nav-item > .nav-link .nav-link-icon { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; width: 1rem; height: 1rem; margin: 0; color: var(--elinsa-fg-muted); font-size: 1rem; transition: color 150ms ease; } :root[data-glpi-theme=elinsa_dark] #mainmenu .navbar-nav > .nav-item > .nav-link .nav-link-icon > svg, :root[data-glpi-theme=elinsa_dark] .navbar-vertical .navbar-nav > .nav-item > .nav-link .nav-link-icon > svg { width: 1rem; height: 1rem; } :root[data-glpi-theme=elinsa_dark] #mainmenu .navbar-nav > .nav-item > .nav-link .nav-link-title, :root[data-glpi-theme=elinsa_dark] .navbar-vertical .navbar-nav > .nav-item > .nav-link .nav-link-title { flex: 1 1 auto; } :root[data-glpi-theme=elinsa_dark] #mainmenu .navbar-nav > .nav-item > .nav-link:hover, :root[data-glpi-theme=elinsa_dark] #mainmenu .navbar-nav > .nav-item > .nav-link:focus-visible, :root[data-glpi-theme=elinsa_dark] .navbar-vertical .navbar-nav > .nav-item > .nav-link:hover, :root[data-glpi-theme=elinsa_dark] .navbar-vertical .navbar-nav > .nav-item > .nav-link:focus-visible { color: var(--elinsa-fg); background-color: var(--elinsa-menu-btn-bg-hover); border-color: var(--elinsa-menu-btn-border-hover); } :root[data-glpi-theme=elinsa_dark] #mainmenu .navbar-nav > .nav-item > .nav-link:hover .nav-link-icon, :root[data-glpi-theme=elinsa_dark] #mainmenu .navbar-nav > .nav-item > .nav-link:focus-visible .nav-link-icon, :root[data-glpi-theme=elinsa_dark] .navbar-vertical .navbar-nav > .nav-item > .nav-link:hover .nav-link-icon, :root[data-glpi-theme=elinsa_dark] .navbar-vertical .navbar-nav > .nav-item > .nav-link:focus-visible .nav-link-icon { color: var(--elinsa-fg); } :root[data-glpi-theme=elinsa_dark] #mainmenu .navbar-nav > .nav-item > .nav-link:focus-visible, :root[data-glpi-theme=elinsa_dark] .navbar-vertical .navbar-nav > .nav-item > .nav-link:focus-visible { outline: 2px solid rgb(var(--elinsa-brand-rgb)/0.6); outline-offset: 2px; } :root[data-glpi-theme=elinsa_dark] #mainmenu .navbar-nav > .nav-item.show > .nav-link, :root[data-glpi-theme=elinsa_dark] #mainmenu .navbar-nav > .nav-item > .nav-link[aria-expanded=true], :root[data-glpi-theme=elinsa_dark] #mainmenu .navbar-nav > .nav-item > .nav-link.active, :root[data-glpi-theme=elinsa_dark] #mainmenu .navbar-nav > .nav-item.active > .nav-link, :root[data-glpi-theme=elinsa_dark] .navbar-vertical .navbar-nav > .nav-item.show > .nav-link, :root[data-glpi-theme=elinsa_dark] .navbar-vertical .navbar-nav > .nav-item > .nav-link[aria-expanded=true], :root[data-glpi-theme=elinsa_dark] .navbar-vertical .navbar-nav > .nav-item > .nav-link.active, :root[data-glpi-theme=elinsa_dark] .navbar-vertical .navbar-nav > .nav-item.active > .nav-link { color: var(--elinsa-fg); background-color: var(--elinsa-surface-raised); border-color: rgb(var(--elinsa-brand-rgb)/0.45); } :root[data-glpi-theme=elinsa_dark] #mainmenu .navbar-nav > .nav-item.show > .nav-link .nav-link-icon, :root[data-glpi-theme=elinsa_dark] #mainmenu .navbar-nav > .nav-item > .nav-link[aria-expanded=true] .nav-link-icon, :root[data-glpi-theme=elinsa_dark] #mainmenu .navbar-nav > .nav-item > .nav-link.active .nav-link-icon, :root[data-glpi-theme=elinsa_dark] #mainmenu .navbar-nav > .nav-item.active > .nav-link .nav-link-icon, :root[data-glpi-theme=elinsa_dark] .navbar-vertical .navbar-nav > .nav-item.show > .nav-link .nav-link-icon, :root[data-glpi-theme=elinsa_dark] .navbar-vertical .navbar-nav > .nav-item > .nav-link[aria-expanded=true] .nav-link-icon, :root[data-glpi-theme=elinsa_dark] .navbar-vertical .navbar-nav > .nav-item > .nav-link.active .nav-link-icon, :root[data-glpi-theme=elinsa_dark] .navbar-vertical .navbar-nav > .nav-item.active > .nav-link .nav-link-icon { color: var(--elinsa-brand-500); } :root[data-glpi-theme=elinsa_dark] #mainmenu .nav-link.dropdown-toggle::after, :root[data-glpi-theme=elinsa_dark] .navbar-vertical .nav-link.dropdown-toggle::after { flex: 0 0 auto; margin-left: auto; opacity: 0.5; transition: transform 150ms ease, opacity 150ms ease; } :root[data-glpi-theme=elinsa_dark] #mainmenu .nav-link.dropdown-toggle:hover::after, :root[data-glpi-theme=elinsa_dark] .navbar-vertical .nav-link.dropdown-toggle:hover::after { opacity: 1; } :root[data-glpi-theme=elinsa_dark] #mainmenu .nav-link.dropdown-toggle[aria-expanded=true]::after, :root[data-glpi-theme=elinsa_dark] #mainmenu .nav-item.show > .nav-link.dropdown-toggle::after, :root[data-glpi-theme=elinsa_dark] .navbar-vertical .nav-link.dropdown-toggle[aria-expanded=true]::after, :root[data-glpi-theme=elinsa_dark] .navbar-vertical .nav-item.show > .nav-link.dropdown-toggle::after { opacity: 1; transform: rotate(180deg); } :root[data-glpi-theme=elinsa_dark] #mainmenu .dropdown-menu, :root[data-glpi-theme=elinsa_dark] .navbar-vertical .dropdown-menu { padding: 0.25rem; color: var(--elinsa-fg); font-size: 0.8125rem; background-color: var(--elinsa-menu-panel-bg); border: 1px solid var(--elinsa-border); border-radius: 0.5rem; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.25); } :root[data-glpi-theme=elinsa_dark] #mainmenu .dropdown-item, :root[data-glpi-theme=elinsa_dark] .navbar-vertical .dropdown-item { display: flex; align-items: center; gap: 0.5rem; min-height: 1.75rem; padding: 0.25rem 0.5rem; color: var(--elinsa-fg-muted); border-radius: 0.25rem; transition: background-color 150ms ease, color 150ms ease; } :root[data-glpi-theme=elinsa_dark] #mainmenu .dropdown-item:hover, :root[data-glpi-theme=elinsa_dark] #mainmenu .dropdown-item:focus, :root[data-glpi-theme=elinsa_dark] .navbar-vertical .dropdown-item:hover, :root[data-glpi-theme=elinsa_dark] .navbar-vertical .dropdown-item:focus { color: var(--elinsa-fg); background-color: rgba(255, 255, 255, 0.07); } :root[data-glpi-theme=elinsa_dark] #mainmenu .dropdown-item.active, :root[data-glpi-theme=elinsa_dark] #mainmenu .dropdown-item:active, :root[data-glpi-theme=elinsa_dark] .navbar-vertical .dropdown-item.active, :root[data-glpi-theme=elinsa_dark] .navbar-vertical .dropdown-item:active { color: var(--elinsa-brand-400); background-color: rgb(var(--elinsa-brand-rgb)/0.12); } :root[data-glpi-theme=elinsa_dark] #mainmenu .dropdown-header, :root[data-glpi-theme=elinsa_dark] .navbar-vertical .dropdown-header { color: var(--elinsa-fg-muted); text-transform: uppercase; font-size: 0.6875rem; letter-spacing: 0.04em; } :root[data-glpi-theme=elinsa_dark] #mainmenu .dropdown-divider, :root[data-glpi-theme=elinsa_dark] .navbar-vertical .dropdown-divider { border-top-color: var(--elinsa-border); } :root[data-glpi-theme=elinsa_dark] #mainmenu > .container-fluid > :last-child:not(.navbar-nav):not(.navbar-collapse), :root[data-glpi-theme=elinsa_dark] #mainmenu > .container-fluid > .navbar-collapse > :last-child:not(.navbar-nav), :root[data-glpi-theme=elinsa_dark] #mainmenu > .navbar-collapse > :last-child:not(.navbar-nav), :root[data-glpi-theme=elinsa_dark] .navbar-vertical > .container-fluid > :last-child:not(.navbar-nav):not(.navbar-collapse), :root[data-glpi-theme=elinsa_dark] .navbar-vertical > .container-fluid > .navbar-collapse > :last-child:not(.navbar-nav), :root[data-glpi-theme=elinsa_dark] .navbar-vertical > .navbar-collapse > :last-child:not(.navbar-nav) { margin-top: auto; padding: var(--elinsa-zone-pad); border-top: 1px solid var(--elinsa-border); } :root[data-glpi-theme=elinsa_dark] #mainmenu > .container-fluid > :last-child:not(.navbar-nav):not(.navbar-collapse) a, :root[data-glpi-theme=elinsa_dark] #mainmenu > .container-fluid > :last-child:not(.navbar-nav):not(.navbar-collapse) button, :root[data-glpi-theme=elinsa_dark] #mainmenu > .container-fluid > .navbar-collapse > :last-child:not(.navbar-nav) a, :root[data-glpi-theme=elinsa_dark] #mainmenu > .container-fluid > .navbar-collapse > :last-child:not(.navbar-nav) button, :root[data-glpi-theme=elinsa_dark] #mainmenu > .navbar-collapse > :last-child:not(.navbar-nav) a, :root[data-glpi-theme=elinsa_dark] #mainmenu > .navbar-collapse > :last-child:not(.navbar-nav) button, :root[data-glpi-theme=elinsa_dark] .navbar-vertical > .container-fluid > :last-child:not(.navbar-nav):not(.navbar-collapse) a, :root[data-glpi-theme=elinsa_dark] .navbar-vertical > .container-fluid > :last-child:not(.navbar-nav):not(.navbar-collapse) button, :root[data-glpi-theme=elinsa_dark] .navbar-vertical > .container-fluid > .navbar-collapse > :last-child:not(.navbar-nav) a, :root[data-glpi-theme=elinsa_dark] .navbar-vertical > .container-fluid > .navbar-collapse > :last-child:not(.navbar-nav) button, :root[data-glpi-theme=elinsa_dark] .navbar-vertical > .navbar-collapse > :last-child:not(.navbar-nav) a, :root[data-glpi-theme=elinsa_dark] .navbar-vertical > .navbar-collapse > :last-child:not(.navbar-nav) button { display: flex; align-items: center; gap: 0.5rem; box-sizing: border-box; width: 100%; min-height: var(--elinsa-menu-h); padding: 0.25rem 0.5rem; color: var(--elinsa-fg-muted); font-size: 0.8125rem; font-weight: 500; line-height: 1.2; text-align: left; background-color: var(--elinsa-menu-btn-bg); border: 1px solid var(--elinsa-menu-btn-border); border-radius: var(--elinsa-menu-radius); transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease; } :root[data-glpi-theme=elinsa_dark] #mainmenu > .container-fluid > :last-child:not(.navbar-nav):not(.navbar-collapse) a:hover, :root[data-glpi-theme=elinsa_dark] #mainmenu > .container-fluid > :last-child:not(.navbar-nav):not(.navbar-collapse) a:focus-visible, :root[data-glpi-theme=elinsa_dark] #mainmenu > .container-fluid > :last-child:not(.navbar-nav):not(.navbar-collapse) button:hover, :root[data-glpi-theme=elinsa_dark] #mainmenu > .container-fluid > :last-child:not(.navbar-nav):not(.navbar-collapse) button:focus-visible, :root[data-glpi-theme=elinsa_dark] #mainmenu > .container-fluid > .navbar-collapse > :last-child:not(.navbar-nav) a:hover, :root[data-glpi-theme=elinsa_dark] #mainmenu > .container-fluid > .navbar-collapse > :last-child:not(.navbar-nav) a:focus-visible, :root[data-glpi-theme=elinsa_dark] #mainmenu > .container-fluid > .navbar-collapse > :last-child:not(.navbar-nav) button:hover, :root[data-glpi-theme=elinsa_dark] #mainmenu > .container-fluid > .navbar-collapse > :last-child:not(.navbar-nav) button:focus-visible, :root[data-glpi-theme=elinsa_dark] #mainmenu > .navbar-collapse > :last-child:not(.navbar-nav) a:hover, :root[data-glpi-theme=elinsa_dark] #mainmenu > .navbar-collapse > :last-child:not(.navbar-nav) a:focus-visible, :root[data-glpi-theme=elinsa_dark] #mainmenu > .navbar-collapse > :last-child:not(.navbar-nav) button:hover, :root[data-glpi-theme=elinsa_dark] #mainmenu > .navbar-collapse > :last-child:not(.navbar-nav) button:focus-visible, :root[data-glpi-theme=elinsa_dark] .navbar-vertical > .container-fluid > :last-child:not(.navbar-nav):not(.navbar-collapse) a:hover, :root[data-glpi-theme=elinsa_dark] .navbar-vertical > .container-fluid > :last-child:not(.navbar-nav):not(.navbar-collapse) a:focus-visible, :root[data-glpi-theme=elinsa_dark] .navbar-vertical > .container-fluid > :last-child:not(.navbar-nav):not(.navbar-collapse) button:hover, :root[data-glpi-theme=elinsa_dark] .navbar-vertical > .container-fluid > :last-child:not(.navbar-nav):not(.navbar-collapse) button:focus-visible, :root[data-glpi-theme=elinsa_dark] .navbar-vertical > .container-fluid > .navbar-collapse > :last-child:not(.navbar-nav) a:hover, :root[data-glpi-theme=elinsa_dark] .navbar-vertical > .container-fluid > .navbar-collapse > :last-child:not(.navbar-nav) a:focus-visible, :root[data-glpi-theme=elinsa_dark] .navbar-vertical > .container-fluid > .navbar-collapse > :last-child:not(.navbar-nav) button:hover, :root[data-glpi-theme=elinsa_dark] .navbar-vertical > .container-fluid > .navbar-collapse > :last-child:not(.navbar-nav) button:focus-visible, :root[data-glpi-theme=elinsa_dark] .navbar-vertical > .navbar-collapse > :last-child:not(.navbar-nav) a:hover, :root[data-glpi-theme=elinsa_dark] .navbar-vertical > .navbar-collapse > :last-child:not(.navbar-nav) a:focus-visible, :root[data-glpi-theme=elinsa_dark] .navbar-vertical > .navbar-collapse > :last-child:not(.navbar-nav) button:hover, :root[data-glpi-theme=elinsa_dark] .navbar-vertical > .navbar-collapse > :last-child:not(.navbar-nav) button:focus-visible { color: var(--elinsa-fg); background-color: var(--elinsa-menu-btn-bg-hover); border-color: var(--elinsa-menu-btn-border-hover); } @media (prefers-reduced-motion: reduce) { :root[data-glpi-theme=elinsa_dark] #mainmenu *, :root[data-glpi-theme=elinsa_dark] #mainmenu *::before, :root[data-glpi-theme=elinsa_dark] #mainmenu *::after, :root[data-glpi-theme=elinsa_dark] .navbar-vertical *, :root[data-glpi-theme=elinsa_dark] .navbar-vertical *::before, :root[data-glpi-theme=elinsa_dark] .navbar-vertical *::after { transition-duration: 0.01ms !important; } }