@charset "UTF-8"; /* theme-name: Elinsa Blue */ /* ========================================================= * ELINSA BLUE — PALETA CLARA DO GLPI AUTENTICADO * * Irmã clara de `elinsa_dark.scss`. Vale tudo que está explicado * no cabeçalho daquele arquivo (e no de `elinsa.scss`): 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_blue']. * * O nome do tema vem do NOME DO ARQUIVO: `elinsa_blue.scss` vira * `data-glpi-theme='elinsa_blue'`. Renomear o arquivo sem renomear * o seletor abaixo faz a paleta aparecer em Preferências > Paleta * e não pintar absolutamente nada. * * A tela de LOGIN não está aqui de propósito, pelo mesmo motivo * do `elinsa_dark.scss`: ela não passa pelo sistema de paletas e * continua sendo responsabilidade de `body.welcome-anonymous` em * `elinsa.scss`. * * --------------------------------------------------------- * DE ONDE VÊM AS CORES * --------------------------------------------------------- * Estrutura de variáveis idêntica à do `elinsa_dark.scss` (mesmos * nomes `--elinsa-*`, mesmo mapeamento pra `--tblr-*`/`--glpi-*`), * só que ancorada na escala **Neutral** clara do shadcn/ui em vez * da escura, e usando `_lightblue.scss` — o tema claro nativo do * GLPI — como referência de "como um tema claro se comporta" (o * gradiente do cabeçalho do helpdesk, por exemplo, é montado do * mesmo jeito que lá: mesmo matiz da marca, luminosidade em * degraus de 92% → 72% → 40%). * * Superfícies (escala Neutral clara do Tailwind/shadcn): * #ffffff fundo da página * #fafafa card / popover / sidebar * #e5e5e5 accent / hover / painel elevado do menu * #d4d4d4 divisórias que precisam aparecer * * Textos: * #171717 foreground * #737373 muted-foreground * * Cor de destaque: a mesma azul da logo da Elinsa, **#24A3DD** — * é a MESMA cor exata do `elinsa_dark.scss`, a marca não muda * entre claro e escuro. O que muda é só onde ela pode ser usada * como TEXTO: sobre fundo escuro (#0a0a0a) o #24A3DD sozinho já * passa em AA; sobre fundo claro (#ffffff) ele dá só 2.85:1 e * reprova. Por isso a rampa aqui tem um degrau que o arquivo * escuro não precisava — `--elinsa-brand-700` — mais escuro que a * cor da logo, reservado pra texto/link sobre superfície clara. * `--elinsa-brand-400`, que no escuro servia de texto sobre fundo * escuro, aqui vira só decorativo (gradiente do helpdesk), porque * sobre branco ele seria claro demais pra ler. * * Todos os pares abaixo foram conferidos em contraste WCAG e * passam AA (mínimo 4.5:1 pra texto normal): * * #171717 sobre #ffffff → 17.93:1 texto do corpo * #737373 sobre #fafafa → 4.54:1 texto secundário em cards * #737373 sobre #ffffff → 4.74:1 texto secundário no corpo * #0077a3 sobre #ffffff → 5.04:1 links / texto de destaque * #0a3246 sobre #24a3dd → 4.72:1 texto do botão primário * * #24a3dd sobre #ffffff → 2.85:1 ⚠ reprova — por isso NÃO é * usado como texto aqui, só como preenchimento/ícone/borda. * ========================================================= */ /* * Ao contrário do `elinsa_dark.scss`, este arquivo NÃO declara * `$is-dark: true` — é o sinal que o núcleo do GLPI usa pra puxar * as variantes escuras dos parciais compartilhados. Sem a * declaração, o padrão claro se aplica, exatamente como * `_lightblue.scss` (o tema claro nativo) também não a declara. */ :root[data-glpi-theme=elinsa_blue] { /* * ======================================================= * 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: #ffffff; /* --background : fundo da página */ --elinsa-surface: #fafafa; /* --card : cards, painéis, sidebar */ --elinsa-surface-raised: #e5e5e5; /* --accent : hover, aba ativa, dropdown */ --elinsa-surface-hairline: #d4d4d4; /* --chart-4 : divisórias que precisam aparecer */ /* Textos */ --elinsa-fg: #171717; /* --foreground */ --elinsa-fg-muted: #737373; /* --muted-foreground */ /* * Bordas translúcidas — a assinatura visual do shadcn, versão * clara. Preto com alfa baixo em vez de um cinza fixo: a mesma * variável funciona tanto sobre #ffffff quanto sobre #e5e5e5, * escurecendo junto com a superfície embaixo. Um hex fixo * sumiria numa e gritaria na outra — mesmo raciocínio do * `elinsa_dark.scss`, só que com preto no lugar de branco. */ --elinsa-border: rgb(0 0 0 / 0.1); /* --border */ --elinsa-border-strong: rgb(0 0 0 / 0.15); /* --input */ --elinsa-ring: #a3a3a3; /* --ring */ /* * Rampa da marca — matiz fixo (o do #24A3DD), com degraus de * luminosidade pensados pro contexto claro. O -500 é a cor * literal da logo, igual no escuro e no claro; os vizinhos * existem pra hover, texto sobre fundo claro e preenchimento * de fundo. */ --elinsa-brand-400: #61c3f8; /* tinta clara — só decorativo (gradiente), claro demais pra texto sobre branco */ --elinsa-brand-500: #24a3dd; /* A LOGO — mesma cor do elinsa_dark.scss */ --elinsa-brand-600: #0084b8; /* hover/pressed em preenchimentos (não em texto: 4.21:1, abaixo de AA) */ --elinsa-brand-700: #0077a3; /* texto de destaque / links sobre fundo claro — 5.04:1 */ --elinsa-brand-950: #0a3246; /* texto sobre marca cheia (dentro do botão primário) — 4.72:1 */ /* 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 `elinsa_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` são duas cores nomeadas do * Tabler (as classes .bg-dark/.text-dark e .bg-light/.text-light). * No `elinsa_dark.scss` esses papéis precisavam ser trocados * pra fazer sentido dentro de uma paleta inteira escura; aqui, * num tema claro, o significado literal já bate com o nome: * "dark" é a cor escura de verdade (o texto) e "light" é a cor * clara de verdade (um cinza claro de fundo). */ --tblr-dark: var(--elinsa-fg); --tblr-light: var(--elinsa-surface-raised); --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 — o * mesmo cálculo do `elinsa_dark.scss`, porque o botão em si tem * a mesma cor de fundo em ambos os temas. */ --tblr-primary-fg: var(--elinsa-brand-950); /* * Diferente do `elinsa_dark.scss` — lá `--tblr-secondary` tinha * que receber o cinza claro porque a classe `.text-secondary` * precisava ler sobre fundo escuro. Aqui o cinza médio já lê * direto sobre fundo claro (4.74:1), então não há necessidade * de inverter nada: `--tblr-secondary` volta a ser o texto * secundário de verdade, e `--tblr-secondary-fg` o fundo que o * acompanha quando ele vira pílula/botão. */ --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: 0, 119, 163; /* Badges: pílula clara com texto escuro — mesmo padrão do `_lightblue.scss` nativo */ --tblr-badge-bg: var(--tblr-light); --tblr-badge-color: var(--tblr-dark); /* * Bordas globais. 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 — mesmo raciocínio do border acima, alfa em preto */ --tblr-input-bg: rgb(0 0 0 / 0.02); --tblr-input-disabled-bg: rgb(0 0 0 / 0.01); /* * `--radius: 0.625rem` é a identidade do shadcn e não depende * de claro/escuro — mesmo valor do `elinsa_dark.scss`. */ --tblr-border-radius: 0.625rem; /* * ======================================================= * MAPEAMENTO — VARIÁVEIS PRÓPRIAS DO GLPI * ======================================================= */ --glpi-form-header-fg: var(--elinsa-brand-700); --glpi-form-header-border-color: transparent; /* Menu lateral (a estrutura visual dele está no bloco seguinte) */ /* * Sidebar em azul da marca, não em superfície neutra — ao * contrário do resto do tema (cards, badges, tabs), que fica * cinza claro. É a mesma escolha do `_lightblue.scss` nativo * (fundo #1a7ab2 + texto quase-branco): um bloco de cor sólida * dá contraste visual real contra o conteúdo branco ao lado, * o que a superfície #fafafa não conseguia. Detalhes de como o * acordeão de menu se adapta a esse fundo escuro-saturado (em * vez de claro-neutro) estão na seção "MENU LATERAL" mais abaixo. */ --glpi-mainmenu-bg: var(--elinsa-brand-700); /* #0077a3 — 4.66:1 com o texto quase-branco abaixo */ --glpi-mainmenu-fg: #f4f6fa; /* * Portal de autoatendimento. Degraus sutis de cinza a partir do * branco, espelhando os degraus que o `elinsa_dark.scss` faz a * partir do preto. */ --glpi-helpdesk-header: #f0f0f0; --glpi-helpdesk-tiles-section-bg: #f7f7f7; --glpi-helpdesk-tabs-section-bg: var(--elinsa-surface); /* Abas */ --glpi-tabs-bg: #f5f5f5; --glpi-tabs-fg: var(--elinsa-fg-muted); --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: #f5f5f5; --glpi-timeline-fup-fg: var(--elinsa-fg-muted); --glpi-timeline-fup-border: #e0e0e0; /* * 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. Montado * do mesmo jeito que `_lightblue.scss` monta o dele: o matiz da * marca em HSL (~199deg, 73% de saturação — a conversão de * #24A3DD), em degraus de luminosidade 92% → 72% → 40%, igual * ao tema claro nativo do GLPI. */ --glpi-illustrations-gradient-1: hsl(199deg, 73%, 92%); --glpi-illustrations-gradient-2: hsl(199deg, 73%, 72%); --glpi-illustrations-gradient-3: hsl(199deg, 73%, 40%); } /* ========================================================= * TIMELINE — CORPO DE MENSAGEM VINDO DE E-MAIL * * O `elinsa_dark.scss` precisa de uma camada extra aqui porque * texto de e-mail com `style="color:#000"` inline fica ilegível * sobre o fundo escuro do tema (preto sobre preto). Neste tema * claro esse problema não existe: o fundo da timeline já é claro, * então o preto inline do remetente lê normalmente, do mesmo jeito * que já lia no GLPI sem nenhum tema customizado. Por isso este * bloco foi deixado de fora de propósito — nada a corrigir aqui. * ========================================================= */ /* ========================================================= * MENU LATERAL — ACORDEÕES COMO BOTÕES * * Mesma estrutura do `elinsa_dark.scss` (ver o cabeçalho longo * daquele arquivo pra densidade, zonas da coluna etc. — nada * disso muda entre claro e escuro). O que muda aqui é o fundo da * sidebar em si: como `--glpi-mainmenu-bg` agora é o azul da * marca (não mais a superfície neutra #fafafa), os tokens locais * deste bloco (botão fechado, bordas, divisórias, foco, item * ativo) usam alfa em BRANCO — o mesmo raciocínio de contraste * que o `elinsa_dark.scss` usa contra o seu fundo escuro, só que * aqui o "escuro que precisa de luz por cima" é o azul saturado * da marca, não um neutro. O painel flutuante do dropdown, por * sua vez, continua branco puro com texto escuro — vira uma * segunda superfície de propósito, pro submenu ler como lista de * itens (como Notion/GitHub fazem: trilho colorido, submenu * neutro), em vez de competir com o azul da sidebar. * * Tudo está preso a `:root[data-glpi-theme='elinsa_blue']`, então * nenhuma outra paleta é afetada. * ========================================================= */ :root[data-glpi-theme=elinsa_blue] #mainmenu, :root[data-glpi-theme=elinsa_blue] .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-fg-muted: rgb(244 246 250 / 0.68); --elinsa-menu-divider: rgb(255 255 255 / 0.16); --elinsa-menu-btn-bg: rgb(255 255 255 / 0.08); --elinsa-menu-btn-bg-hover: rgb(255 255 255 / 0.16); --elinsa-menu-btn-border: rgb(255 255 255 / 0.16); --elinsa-menu-btn-border-hover: rgb(255 255 255 / 0.3); --elinsa-menu-active-bg: rgb(255 255 255 / 0.2); --elinsa-menu-active-border: rgb(255 255 255 / 0.4); --elinsa-menu-panel-bg: #ffffff; 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_blue] #mainmenu > .container-fluid, :root[data-glpi-theme=elinsa_blue] #mainmenu > .container-fluid > .navbar-collapse, :root[data-glpi-theme=elinsa_blue] #mainmenu > .navbar-collapse, :root[data-glpi-theme=elinsa_blue] .navbar-vertical > .container-fluid, :root[data-glpi-theme=elinsa_blue] .navbar-vertical > .container-fluid > .navbar-collapse, :root[data-glpi-theme=elinsa_blue] .navbar-vertical > .navbar-collapse { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; } :root[data-glpi-theme=elinsa_blue] #mainmenu .navbar-brand, :root[data-glpi-theme=elinsa_blue] .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-menu-divider); } :root[data-glpi-theme=elinsa_blue] #mainmenu *:has(> .btn-primary), :root[data-glpi-theme=elinsa_blue] .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_blue] #mainmenu .btn-primary, :root[data-glpi-theme=elinsa_blue] .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; color: var(--tblr-primary-fg) !important; border-radius: var(--elinsa-menu-radius); } :root[data-glpi-theme=elinsa_blue] #mainmenu .navbar-nav, :root[data-glpi-theme=elinsa_blue] .navbar-vertical .navbar-nav { flex: 1 1 auto; padding-block: var(--elinsa-zone-pad); border-top: 1px solid var(--elinsa-menu-divider); } :root[data-glpi-theme=elinsa_blue] #mainmenu .navbar-nav > .nav-item, :root[data-glpi-theme=elinsa_blue] .navbar-vertical .navbar-nav > .nav-item { margin-block: var(--elinsa-menu-gap); padding-inline: var(--elinsa-menu-inset); } :root[data-glpi-theme=elinsa_blue] #mainmenu .navbar-nav > .nav-item > .nav-link, :root[data-glpi-theme=elinsa_blue] .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_blue] #mainmenu .navbar-nav > .nav-item > .nav-link .nav-link-icon, :root[data-glpi-theme=elinsa_blue] .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-menu-fg-muted); font-size: 1rem; transition: color 150ms ease; } :root[data-glpi-theme=elinsa_blue] #mainmenu .navbar-nav > .nav-item > .nav-link .nav-link-icon > svg, :root[data-glpi-theme=elinsa_blue] .navbar-vertical .navbar-nav > .nav-item > .nav-link .nav-link-icon > svg { width: 1rem; height: 1rem; } :root[data-glpi-theme=elinsa_blue] #mainmenu .navbar-nav > .nav-item > .nav-link .nav-link-title, :root[data-glpi-theme=elinsa_blue] .navbar-vertical .navbar-nav > .nav-item > .nav-link .nav-link-title { flex: 1 1 auto; } :root[data-glpi-theme=elinsa_blue] #mainmenu .navbar-nav > .nav-item > .nav-link:hover, :root[data-glpi-theme=elinsa_blue] #mainmenu .navbar-nav > .nav-item > .nav-link:focus-visible, :root[data-glpi-theme=elinsa_blue] .navbar-vertical .navbar-nav > .nav-item > .nav-link:hover, :root[data-glpi-theme=elinsa_blue] .navbar-vertical .navbar-nav > .nav-item > .nav-link:focus-visible { color: var(--glpi-mainmenu-fg) !important; background-color: var(--elinsa-menu-btn-bg-hover) !important; border-color: var(--elinsa-menu-btn-border-hover) !important; } :root[data-glpi-theme=elinsa_blue] #mainmenu .navbar-nav > .nav-item > .nav-link:hover .nav-link-icon, :root[data-glpi-theme=elinsa_blue] #mainmenu .navbar-nav > .nav-item > .nav-link:focus-visible .nav-link-icon, :root[data-glpi-theme=elinsa_blue] .navbar-vertical .navbar-nav > .nav-item > .nav-link:hover .nav-link-icon, :root[data-glpi-theme=elinsa_blue] .navbar-vertical .navbar-nav > .nav-item > .nav-link:focus-visible .nav-link-icon { color: var(--glpi-mainmenu-fg) !important; } :root[data-glpi-theme=elinsa_blue] #mainmenu .navbar-nav > .nav-item > .nav-link:focus-visible, :root[data-glpi-theme=elinsa_blue] .navbar-vertical .navbar-nav > .nav-item > .nav-link:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.75); outline-offset: 2px; } :root[data-glpi-theme=elinsa_blue] #mainmenu .navbar-nav > .nav-item.show > .nav-link, :root[data-glpi-theme=elinsa_blue] #mainmenu .navbar-nav > .nav-item > .nav-link[aria-expanded=true], :root[data-glpi-theme=elinsa_blue] #mainmenu .navbar-nav > .nav-item > .nav-link.active, :root[data-glpi-theme=elinsa_blue] #mainmenu .navbar-nav > .nav-item.active > .nav-link, :root[data-glpi-theme=elinsa_blue] .navbar-vertical .navbar-nav > .nav-item.show > .nav-link, :root[data-glpi-theme=elinsa_blue] .navbar-vertical .navbar-nav > .nav-item > .nav-link[aria-expanded=true], :root[data-glpi-theme=elinsa_blue] .navbar-vertical .navbar-nav > .nav-item > .nav-link.active, :root[data-glpi-theme=elinsa_blue] .navbar-vertical .navbar-nav > .nav-item.active > .nav-link { color: var(--glpi-mainmenu-fg) !important; background-color: var(--elinsa-menu-active-bg) !important; border-color: var(--elinsa-menu-active-border) !important; } :root[data-glpi-theme=elinsa_blue] #mainmenu .navbar-nav > .nav-item.show > .nav-link .nav-link-icon, :root[data-glpi-theme=elinsa_blue] #mainmenu .navbar-nav > .nav-item > .nav-link[aria-expanded=true] .nav-link-icon, :root[data-glpi-theme=elinsa_blue] #mainmenu .navbar-nav > .nav-item > .nav-link.active .nav-link-icon, :root[data-glpi-theme=elinsa_blue] #mainmenu .navbar-nav > .nav-item.active > .nav-link .nav-link-icon, :root[data-glpi-theme=elinsa_blue] .navbar-vertical .navbar-nav > .nav-item.show > .nav-link .nav-link-icon, :root[data-glpi-theme=elinsa_blue] .navbar-vertical .navbar-nav > .nav-item > .nav-link[aria-expanded=true] .nav-link-icon, :root[data-glpi-theme=elinsa_blue] .navbar-vertical .navbar-nav > .nav-item > .nav-link.active .nav-link-icon, :root[data-glpi-theme=elinsa_blue] .navbar-vertical .navbar-nav > .nav-item.active > .nav-link .nav-link-icon { color: var(--glpi-mainmenu-fg) !important; } :root[data-glpi-theme=elinsa_blue] #mainmenu .nav-link.dropdown-toggle::after, :root[data-glpi-theme=elinsa_blue] .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_blue] #mainmenu .nav-link.dropdown-toggle:hover::after, :root[data-glpi-theme=elinsa_blue] .navbar-vertical .nav-link.dropdown-toggle:hover::after { opacity: 1; } :root[data-glpi-theme=elinsa_blue] #mainmenu .nav-link.dropdown-toggle[aria-expanded=true]::after, :root[data-glpi-theme=elinsa_blue] #mainmenu .nav-item.show > .nav-link.dropdown-toggle::after, :root[data-glpi-theme=elinsa_blue] .navbar-vertical .nav-link.dropdown-toggle[aria-expanded=true]::after, :root[data-glpi-theme=elinsa_blue] .navbar-vertical .nav-item.show > .nav-link.dropdown-toggle::after { opacity: 1; transform: rotate(180deg); } :root[data-glpi-theme=elinsa_blue] #mainmenu .dropdown-menu, :root[data-glpi-theme=elinsa_blue] .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.12), 0 0 0 1px rgba(0, 0, 0, 0.05); } :root[data-glpi-theme=elinsa_blue] #mainmenu .dropdown-item, :root[data-glpi-theme=elinsa_blue] .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_blue] #mainmenu .dropdown-item:hover, :root[data-glpi-theme=elinsa_blue] #mainmenu .dropdown-item:focus, :root[data-glpi-theme=elinsa_blue] .navbar-vertical .dropdown-item:hover, :root[data-glpi-theme=elinsa_blue] .navbar-vertical .dropdown-item:focus { color: var(--elinsa-fg); background-color: rgba(0, 0, 0, 0.05); } :root[data-glpi-theme=elinsa_blue] #mainmenu .dropdown-item.active, :root[data-glpi-theme=elinsa_blue] #mainmenu .dropdown-item:active, :root[data-glpi-theme=elinsa_blue] .navbar-vertical .dropdown-item.active, :root[data-glpi-theme=elinsa_blue] .navbar-vertical .dropdown-item:active { color: var(--elinsa-brand-700); background-color: rgb(var(--elinsa-brand-rgb)/0.12); } :root[data-glpi-theme=elinsa_blue] #mainmenu .dropdown-header, :root[data-glpi-theme=elinsa_blue] .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_blue] #mainmenu .dropdown-divider, :root[data-glpi-theme=elinsa_blue] .navbar-vertical .dropdown-divider { border-top-color: var(--elinsa-border); } :root[data-glpi-theme=elinsa_blue] #mainmenu > .container-fluid > :last-child:not(.navbar-nav):not(.navbar-collapse), :root[data-glpi-theme=elinsa_blue] #mainmenu > .container-fluid > .navbar-collapse > :last-child:not(.navbar-nav), :root[data-glpi-theme=elinsa_blue] #mainmenu > .navbar-collapse > :last-child:not(.navbar-nav), :root[data-glpi-theme=elinsa_blue] .navbar-vertical > .container-fluid > :last-child:not(.navbar-nav):not(.navbar-collapse), :root[data-glpi-theme=elinsa_blue] .navbar-vertical > .container-fluid > .navbar-collapse > :last-child:not(.navbar-nav), :root[data-glpi-theme=elinsa_blue] .navbar-vertical > .navbar-collapse > :last-child:not(.navbar-nav) { margin-top: auto; padding: var(--elinsa-zone-pad); border-top: 1px solid var(--elinsa-menu-divider); } :root[data-glpi-theme=elinsa_blue] #mainmenu > .container-fluid > :last-child:not(.navbar-nav):not(.navbar-collapse) a, :root[data-glpi-theme=elinsa_blue] #mainmenu > .container-fluid > :last-child:not(.navbar-nav):not(.navbar-collapse) button, :root[data-glpi-theme=elinsa_blue] #mainmenu > .container-fluid > .navbar-collapse > :last-child:not(.navbar-nav) a, :root[data-glpi-theme=elinsa_blue] #mainmenu > .container-fluid > .navbar-collapse > :last-child:not(.navbar-nav) button, :root[data-glpi-theme=elinsa_blue] #mainmenu > .navbar-collapse > :last-child:not(.navbar-nav) a, :root[data-glpi-theme=elinsa_blue] #mainmenu > .navbar-collapse > :last-child:not(.navbar-nav) button, :root[data-glpi-theme=elinsa_blue] .navbar-vertical > .container-fluid > :last-child:not(.navbar-nav):not(.navbar-collapse) a, :root[data-glpi-theme=elinsa_blue] .navbar-vertical > .container-fluid > :last-child:not(.navbar-nav):not(.navbar-collapse) button, :root[data-glpi-theme=elinsa_blue] .navbar-vertical > .container-fluid > .navbar-collapse > :last-child:not(.navbar-nav) a, :root[data-glpi-theme=elinsa_blue] .navbar-vertical > .container-fluid > .navbar-collapse > :last-child:not(.navbar-nav) button, :root[data-glpi-theme=elinsa_blue] .navbar-vertical > .navbar-collapse > :last-child:not(.navbar-nav) a, :root[data-glpi-theme=elinsa_blue] .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-menu-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_blue] #mainmenu > .container-fluid > :last-child:not(.navbar-nav):not(.navbar-collapse) a:hover, :root[data-glpi-theme=elinsa_blue] #mainmenu > .container-fluid > :last-child:not(.navbar-nav):not(.navbar-collapse) a:focus-visible, :root[data-glpi-theme=elinsa_blue] #mainmenu > .container-fluid > :last-child:not(.navbar-nav):not(.navbar-collapse) button:hover, :root[data-glpi-theme=elinsa_blue] #mainmenu > .container-fluid > :last-child:not(.navbar-nav):not(.navbar-collapse) button:focus-visible, :root[data-glpi-theme=elinsa_blue] #mainmenu > .container-fluid > .navbar-collapse > :last-child:not(.navbar-nav) a:hover, :root[data-glpi-theme=elinsa_blue] #mainmenu > .container-fluid > .navbar-collapse > :last-child:not(.navbar-nav) a:focus-visible, :root[data-glpi-theme=elinsa_blue] #mainmenu > .container-fluid > .navbar-collapse > :last-child:not(.navbar-nav) button:hover, :root[data-glpi-theme=elinsa_blue] #mainmenu > .container-fluid > .navbar-collapse > :last-child:not(.navbar-nav) button:focus-visible, :root[data-glpi-theme=elinsa_blue] #mainmenu > .navbar-collapse > :last-child:not(.navbar-nav) a:hover, :root[data-glpi-theme=elinsa_blue] #mainmenu > .navbar-collapse > :last-child:not(.navbar-nav) a:focus-visible, :root[data-glpi-theme=elinsa_blue] #mainmenu > .navbar-collapse > :last-child:not(.navbar-nav) button:hover, :root[data-glpi-theme=elinsa_blue] #mainmenu > .navbar-collapse > :last-child:not(.navbar-nav) button:focus-visible, :root[data-glpi-theme=elinsa_blue] .navbar-vertical > .container-fluid > :last-child:not(.navbar-nav):not(.navbar-collapse) a:hover, :root[data-glpi-theme=elinsa_blue] .navbar-vertical > .container-fluid > :last-child:not(.navbar-nav):not(.navbar-collapse) a:focus-visible, :root[data-glpi-theme=elinsa_blue] .navbar-vertical > .container-fluid > :last-child:not(.navbar-nav):not(.navbar-collapse) button:hover, :root[data-glpi-theme=elinsa_blue] .navbar-vertical > .container-fluid > :last-child:not(.navbar-nav):not(.navbar-collapse) button:focus-visible, :root[data-glpi-theme=elinsa_blue] .navbar-vertical > .container-fluid > .navbar-collapse > :last-child:not(.navbar-nav) a:hover, :root[data-glpi-theme=elinsa_blue] .navbar-vertical > .container-fluid > .navbar-collapse > :last-child:not(.navbar-nav) a:focus-visible, :root[data-glpi-theme=elinsa_blue] .navbar-vertical > .container-fluid > .navbar-collapse > :last-child:not(.navbar-nav) button:hover, :root[data-glpi-theme=elinsa_blue] .navbar-vertical > .container-fluid > .navbar-collapse > :last-child:not(.navbar-nav) button:focus-visible, :root[data-glpi-theme=elinsa_blue] .navbar-vertical > .navbar-collapse > :last-child:not(.navbar-nav) a:hover, :root[data-glpi-theme=elinsa_blue] .navbar-vertical > .navbar-collapse > :last-child:not(.navbar-nav) a:focus-visible, :root[data-glpi-theme=elinsa_blue] .navbar-vertical > .navbar-collapse > :last-child:not(.navbar-nav) button:hover, :root[data-glpi-theme=elinsa_blue] .navbar-vertical > .navbar-collapse > :last-child:not(.navbar-nav) button:focus-visible { color: var(--glpi-mainmenu-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_blue] #mainmenu *, :root[data-glpi-theme=elinsa_blue] #mainmenu *::before, :root[data-glpi-theme=elinsa_blue] #mainmenu *::after, :root[data-glpi-theme=elinsa_blue] .navbar-vertical *, :root[data-glpi-theme=elinsa_blue] .navbar-vertical *::before, :root[data-glpi-theme=elinsa_blue] .navbar-vertical *::after { transition-duration: 0.01ms !important; } }