/* ============================================================= GLPI 11 – CSS Corrigido v2 Fix: logo duplicado + background não aplicado ============================================================= */ /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ RESET: remove injeção anterior que causava duplicação ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ /* Cancela o content: url() — principal causa da duplicação */ .navbar-brand img, #header .logo img, .app-logo img, nav .brand img, .glpi-logo img, #topbar-logo img, .navbar-logo img, a.navbar-brand img, .sidebar-logo img { content: normal !important; /* Remove o override de content */ } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ BACKGROUND DA TELA DE LOGIN GLPI 11 usa sem classes especiais — cobrimos tudo ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ /* Abordagem 1: aplica no html + body diretamente */ html { background: url('/custom/bg_login.jpg') center center / cover no-repeat fixed !important; min-height: 100% !important; } body { background: transparent !important; /* deixa o html mostrar o bg */ min-height: 100vh !important; } /* Abordagem 2: cobre o container raiz da app Vue/Twig */ #app, #root, .glpi-app, [id="app"] { background: transparent !important; min-height: 100vh !important; } /* Abordagem 3: container da tela de login */ .login-container, .login-page, .page-login, #login, .container-login { background: transparent !important; min-height: 100vh !important; } /* Overlay escuro para legibilidade */ html::before { content: ''; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.38); z-index: 0; pointer-events: none; } /* Card do formulário flutua acima do overlay */ .login-card, #login .card, .login-form-container, #login-form > .card, form[action*="login"] .card, .card:has(input[name="login_name"]), .card:has(input[name="glpi_login"]) { position: relative; z-index: 1; background: rgba(255, 255, 255, 0.97) !important; border-radius: 14px !important; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45) !important; backdrop-filter: blur(10px); } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ LOGO DA TELA DE LOGIN Estratégia correta: esconde o original, cria via ::after ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ /* Esconde a imagem original do GLPI */ .login-header img, .login-logo img, #login > img, #login > div > img, .card-header img[src*="glpi"], .card-header img[src*="logo"], img.glpi-logo, img[alt="GLPI"], img[alt="glpi"] { opacity: 0 !important; width: 0 !important; height: 0 !important; position: absolute !important; } /* Container do logo no login — posiciona nosso logo */ .login-header, .login-logo, #login .logo-container, #login > .d-flex:first-child { display: flex !important; justify-content: center !important; align-items: center !important; padding: 28px 24px 16px !important; background-image: url('/custom/logo_login.png') !important; background-repeat: no-repeat !important; background-position: center top !important; background-size: contain !important; min-height: 100px !important; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ LOGO DO SISTEMA — TOPO ESQUERDO Fix da duplicação: abordagem com visibilidade, não content:url() ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ /* 1. Esconde a imagem original do GLPI na navbar */ .navbar-brand img[src*="glpi"], .navbar-brand img[src*="logo"], .navbar-brand img[src*="pics"], .navbar-brand img[alt="GLPI"], .navbar-brand img[alt="glpi"], nav img[src*="glpi"], nav img[src*="logo"] { visibility: hidden !important; width: 0 !important; height: 0 !important; padding: 0 !important; margin: 0 !important; } /* 2. Substitui via background no container — sem duplicação */ .navbar-brand, a.navbar-brand { background-image: url('/custom/logo_app.png') !important; background-repeat: no-repeat !important; background-position: left center !important; background-size: contain !important; min-width: 160px !important; min-height: 44px !important; display: flex !important; align-items: center !important; padding-left: 0 !important; } /* Remove qualquer SVG/texto de logo embutido */ .navbar-brand svg, .navbar-brand .glpi-name, .navbar-brand .brand-text, .navbar-brand span:not(.sr-only) { display: none !important; } /* Garante que imgs que NÃO são do logo fiquem visíveis */ .navbar img:not([src*="glpi"]):not([src*="logo"]):not([src*="pics"]) { visibility: visible !important; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ RESPONSIVO ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ @media (max-width: 768px) { .navbar-brand { min-width: 120px !important; min-height: 36px !important; } }