@charset "UTF-8"; /* theme-name: Elinsa */ /* ========================================================= * ELINSA — PALETA DO GLPI AUTENTICADO * * Este bloco só entra em vigor quando o usuário escolhe a * paleta "Elinsa" em Preferências > Paleta (é por isso que * tudo fica dentro de :root[data-glpi-theme='elinsa'] — o * GLPI carrega TODAS as paletas o tempo todo, e usa esse * atributo no pra decidir qual delas fica ativa). * * Isso é independente da tela de LOGIN, que fica mais abaixo, * em `body.welcome-anonymous`: a tela de login não passa pelo * sistema de paletas (o visitante ainda nem tem preferência * salva), então a marca Elinsa é aplicada ali "na unha". * * --------------------------------------------------------- * Variáveis que REALMENTE pintam algo na interface: * --------------------------------------------------------- * --tblr-primary → cor dos botões primários, links * de destaque, checkboxes marcados, * focus ring, badges "info" etc. * --tblr-primary-rgb → a mesma cor acima, mas separada em * "R, G, B" (sem o `rgb(...)` em volta). * O GLPI usa esse formato quando monta * um `rgba(var(--tblr-primary-rgb), X)` * internamente pra aplicar opacidade — * por isso precisa das duas variáveis, * uma não substitui a outra. * --tblr-link-color → cor de todos os links clicáveis do * conteúdo (fora do menu lateral). * --tblr-link-hover-color → estado :hover desses links. Não é * uma variável documentada oficialmente * pelo GLPI, mas o Tabler (framework CSS * por baixo do GLPI) a respeita; mantida * por consistência visual no hover. * * Outras variáveis que o GLPI aceita nesse mesmo :root, caso um * dia queiram ir além (não usadas aqui de propósito, pra manter * a paleta enxuta e fácil de manter): * --tblr-secondary → fundo dos botões secundários * --tblr-secondary-fg → texto dos botões secundários * --tblr-input-bg → fundo de inputs/dropdowns/textareas * --tblr-input-disabled-bg → fundo de campos somente-leitura * --glpi-mainmenu-bg → fundo do menu lateral esquerdo * --glpi-mainmenu-fg → texto/ícones do menu lateral * * --------------------------------------------------------- * IMPORTANTE sobre as 4 variáveis abaixo: * --------------------------------------------------------- * --glpi-palette-color-1 a -4 NÃO pintam nada na interface do * GLPI. Elas só desenham o quadradinho de 4 cores (o "swatch") * que aparece ao lado do nome da paleta na lista de Preferências * > Paleta — é só uma prévia visual pra ajudar a reconhecer a * paleta na lista. Mudar essas 4 cores muda apenas essa prévia, * nunca a cor de um botão, campo ou menu de verdade. * ========================================================= */ :root[data-glpi-theme=elinsa] { --tblr-primary: #21a8e0; --tblr-primary-rgb: 33, 168, 224; --tblr-link-color: #159bd4; --tblr-link-hover-color: #1085b7; /* Swatch de preview no dropdown de paletas (ver nota acima) */ --glpi-palette-color-1: #21a8e0; --glpi-palette-color-2: #0f172a; --glpi-palette-color-3: #bce7f6; --glpi-palette-color-4: #ffffff; } /* ========================================================= * ELINSA — LOGIN * * Estas regras não dependem da paleta selecionada. * Todo visitante não autenticado recebe este visual. * ========================================================= */ body.welcome-anonymous { /* * Cores locais da página de login. São as mesmas do bloco de * paleta lá em cima, mas redeclaradas aqui de propósito: a * tela de login não participa do sistema de paletas do GLPI * (visitante ainda não tem preferência salva), então a marca * Elinsa precisa ser fixada "na unha" neste seletor. */ --tblr-primary: #21a8e0; --tblr-primary-rgb: 33, 168, 224; /* * --------------------------------------------------------- * Variações da cor de marca (hover/active do botão "Entrar"). * Assim como --tblr-link-hover-color lá em cima, não são * variáveis oficiais do GLPI/Tabler — são só nossas, criadas * pra não repetir esses hex em mais de um lugar do arquivo. * --------------------------------------------------------- */ --login-btn-hover: #159fd9; --login-btn-active: #128fc4; /* * --------------------------------------------------------- * Tons de sombra/véu, no formato "R G B" (sem o rgb() em * volta) — mesmo padrão de --tblr-primary-rgb. Usados com * opacidades diferentes em cada lugar via rgb(var(--x) / alfa). * --------------------------------------------------------- */ --login-overlay-rgb: 0 30 45; /* véu sutil sobre o fundo da página inteira */ --login-shadow-rgb: 0 30 50; /* sombra projetada pelo card (bem parecido com o véu acima, mas são dois usos diferentes — deixei separado de propósito, não é engano) */ --login-btn-shadow-rgb: 0 100 160; /* sombra azulada do botão "Entrar" */ /* * --------------------------------------------------------- * Sistema "vidro" (glass): branco translúcido em várias * intensidades. É o que dá o efeito frosted glass nos campos * (.form-control/.form-select) e no card — nomeado pelo PAPEL * que cada tom exerce, não pelo valor em si. Pra ajustar a * intensidade do vidro no futuro (deixar mais ou menos opaco), * mexe só aqui — os campos e o card se atualizam juntos. * --------------------------------------------------------- */ --glass-bg: rgb(255 255 255 / 0.22); /* fundo padrão dos campos */ --glass-bg-hover: rgb(255 255 255 / 0.26); --glass-bg-focus: rgb(255 255 255 / 0.30); --glass-border: rgb(255 255 255 / 0.55); /* borda padrão — campos E card */ --glass-border-soft: rgb(255 255 255 / 0.6); /* levemente mais forte, usada em detalhes pontuais */ --glass-border-hover: rgb(255 255 255 / 0.68); --glass-border-focus: rgb(255 255 255 / 0.95); --glass-outline: rgb(255 255 255 / 0.9); /* anel de foco visível (acessibilidade) */ --glass-focus-ring: rgb(255 255 255 / 0.15); /* anel de foco + fundo do checkbox */ --glass-faint: rgb(255 255 255 / 0.08); /* traço bem sutil — borda do botão, gradiente do card */ --field-inset-highlight: rgb(255 255 255 / 0.12); /* friso interno sutil no topo dos campos de texto */ --glass-text-label: rgb(255 255 255 / 0.92); /* rótulos "Usuário"/"Senha" */ --glass-text-link: rgb(255 255 255 / 0.88); /* links */ --glass-text-check: rgb(255 255 255 / 0.85); /* "Lembrar de mim" */ --glass-text-muted: rgb(255 255 255 / 0.55); /* placeholder dos campos */ --glass-underline: rgb(255 255 255 / 0.4); /* sublinhado dos links */ --glass-blur-field: 10px; /* backdrop-filter dos campos */ --glass-blur-card: 42px; /* backdrop-filter do card (o frosted glass "forte") */ /* * --------------------------------------------------------- * Campos e botão: dimensões/forma compartilhadas. Os três * (.form-control, .form-select, .btn-primary) usam a mesma * altura e o mesmo raio de borda — antes eram três números * "43px"/"8px" soltos que precisavam ser trocados na mão, um * por um, se um dia mudasse o padrão visual. * --------------------------------------------------------- */ --field-height: 43px; --field-radius: 8px; --field-padding: 0.625rem 0.8rem; --field-gap: 12px; /* espaço entre um campo e o próximo (.mb-3) */ --footer-gap-top: 22px; /* espaço entre "Lembrar de mim" e o botão "Entrar" */ --transition-fast: 150ms ease; /* hover/focus dos campos e do botão */ --transition-press: 100ms ease; /* efeito de "afundar" do botão ao clicar */ /* * --------------------------------------------------------- * Card: forma e largura. max-width tem override próprio no * mobile (ver @media lá embaixo), assim como border-radius. * --------------------------------------------------------- */ --card-radius: 20px; --card-max-width: 440px; --card-bg-from: rgb(255 255 255 / 0.20); /* início do gradiente do vidro do card */ --card-inset-highlight: rgb(255 255 255 / 0.45); /* brilho interno sutil no topo */ /* * --------------------------------------------------------- * Assets de imagem — trocar logo ou fundo da página fica só * aqui, sem precisar caçar a URL no meio do arquivo. * --------------------------------------------------------- */ --login-logo-src: url("/pics/elinsa/logo-white.svg"); --login-bg-src: url("/pics/elinsa/login-background.webp"); /* * --------------------------------------------------------- * Caixa da logo do login — únicas medidas que precisam mudar * se um dia trocarem o arquivo do logo. * --------------------------------------------------------- * O GLPI recomenda 220x130px pra logo de login, mas usar esse * tamanho "cheio" deixava a logo pesada demais dentro do card * (empurrando a altura do card pra cima sem o card ficar mais * largo). Aqui usamos ~86% desse tamanho — mesma proporção, * pegada visual mais leve. * * --login-logo-top é a distância do topo do card até o início * da logo; --login-logo-max-height é o teto de altura (a logo * nunca fica mais larga que --login-logo-width, então a altura * real também depende da proporção do arquivo SVG). * * O padding-top do .main-content-card (mais abaixo) é calculado * a partir dessas mesmas variáveis via calc(), então mexendo só * aqui o respiro abaixo da logo se ajusta sozinho — não precisa * caçar o valor certo em dois lugares diferentes. */ --login-logo-width: 150px; --login-logo-top: 64px; --login-logo-max-height: 75px; --login-logo-gap: 18px; /* respiro entre a logo e o campo "Usuário" */ /* * Rodapé do card (abaixo de "Esqueceu sua senha?"). Ficou como * variável própria, separada de --login-logo-top: a gente * tentou fazer o padding-bottom bater com o valor da logo, mas * mesmo confirmado via DevTools que o padding aplica certinho, * o rodapé segue parecendo bem mais vazio que o topo — sinal de * que sobra espaço DENTRO do próprio .card-body do GLPI (depois * do link), fora do nosso controle direto sem ver o DOM inteiro. * Em vez de ficar caçando isso, aumentamos --login-logo-top (a * logo agora começa mais embaixo, com mais respiro ao redor) * pra equilibrar contra esse vazio do rodapé que não estava * respondendo ao ajuste. */ --login-footer-gap: 26px; min-height: 100dvh; margin: 0; color: #ffffff; background: linear-gradient(rgb(var(--login-overlay-rgb)/0.08), rgb(var(--login-overlay-rgb)/0.08)), var(--login-bg-src) center center/cover no-repeat; background-attachment: fixed; /* * ======================================================= * LAYOUT GERAL * ======================================================= */ /* * ======================================================= * LOGO * ======================================================= */ /* * O GLPI (ou o plugin de branding) injeta a própria logo pelo * atributo `src` da tag . Definir apenas * `background-image` não substitui esse conteúdo — a imagem do * `src` continua sendo desenhada por cima/junto do background, * e as duas ficam empilhadas na mesma caixa de 150x75px. É isso * que causa a sobreposição e a largura "espremida" no print. * * `content: url()` troca de fato o que o navegador renderiza, * ocupando o lugar do `src` original — suportado em todos os * browsers evergreen (Chrome/Edge/Firefox), suficiente pra uso * interno via GLPI. */ /* * Rede de segurança: se o plugin de branding renderizar a * própria logo como um separado (irmão, não a própria * .glpi-logo), essa regra garante que ele fique oculto. * Se o problema persistir, inspecione o elemento (F12) na * área da logo e me envie o HTML — aí dá pra mirar a regra * exatamente na classe/id que o plugin usa, sem depender * desse fallback genérico. */ /* * ======================================================= * CARD GLASS * ======================================================= */ /* * Um pequeno highlight no topo do vidro. */ /* * ======================================================= * ESTRUTURA INTERNA DO GLPI * ======================================================= */ /* * O título padrão "Login to your account". * Nosso mockup não possui título. */ /* * ======================================================= * CAMPOS * * `.form-label` = os rótulos "Usuário" / "Senha". * `.form-control` = os inputs de texto e senha (o dropdown * "Origem de login" é `.form-select`, estilizado à parte * logo abaixo, já que é uma classe diferente no Tabler). * ======================================================= */ /* * O