/* ============================================================ Nobre Imóveis — Tema para Zammad 7.0.1 (interface desktop) Paleta: azul (base) + cinza (neutro) + amarelo (detalhe) ------------------------------------------------------------ Injetado via nginx sub_filter no zammad-nginx (porta 8080). Override de cores por cima do CSS do Zammad — não substitui o CSS oficial. Seletores validados contra a instância real via DevTools (Playwright) em 2026-06-17. ============================================================ */ :root { --nobre-navy-900: #0E1A33; --nobre-navy-800: #14213D; /* base / marca */ --nobre-navy-700: #1B2D52; --nobre-navy-600: #243A6B; --nobre-blue: #2E5BB8; /* azul de ação / links */ --nobre-blue-100: #E8EFFB; --nobre-gold: #FCA311; /* detalhe / destaque */ --nobre-gold-600: #E08D00; --nobre-gray-50: #F6F8FB; --nobre-gray-100: #EEF1F6; --nobre-gray-200: #E5E5E5; --nobre-gray-500: #7B8696; } /* ================================================================ 0. TELA DE LOADING (.splash) → símbolo Nobre no lugar do passarinho Render-blocking (o CSS está no ), então já vale no 1º frame. Mantém o elemento no layout: só esconde o e põe o mark navy. ================================================================ */ .splash .icon-logo { width: 60px !important; height: 60px !important; background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMDAgMjAwIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgcm9sZT0iaW1nIiBhcmlhLWxhYmVsPSJOb2JyZSI+CiAgPGcgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMTQyMTNEIiBzdHJva2Utd2lkdGg9IjEzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPgogICAgPGNpcmNsZSBjeD0iMTAwIiBjeT0iMTAwIiByPSI4OCIvPgogIDwvZz4KICA8ZyBmaWxsPSJub25lIiBzdHJva2U9IiMxNDIxM0QiIHN0cm9rZS13aWR0aD0iMTkiIHN0cm9rZS1saW5lY2FwPSJidXR0IiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICAgIDxwYXRoIGQ9Ik03MCAxNTAgVjU4Ii8+CiAgICA8cGF0aCBkPSJNMTMwIDE1MCBWNTgiLz4KICAgIDxwYXRoIGQ9Ik03MCA1OCBMMTMwIDE1MCIvPgogIDwvZz4KPC9zdmc+Cg==") !important; background-repeat: no-repeat !important; background-position: center !important; background-size: contain !important; } .splash .icon-logo use { display: none !important; } .splash-title { color: var(--nobre-navy-800) !important; } /* ================================================================ 1. TELA DE LOGIN (validada: .login.fullscreen > .fullscreen-center > .hero-unit[branco] com img.company-logo; rodapé .poweredBy) ================================================================ */ .login, .login.fullscreen, #app > .login { background: radial-gradient(ellipse at 78% 8%, rgba(252,163,17,0.14) 0%, transparent 52%), linear-gradient(160deg, var(--nobre-navy-800) 0%, var(--nobre-navy-900) 100%) !important; } /* card branco — mantém branco (logo navy legível), só refina moldura */ .login .hero-unit { background-color: #ffffff !important; border: 1px solid var(--nobre-gray-200) !important; border-radius: 14px !important; box-shadow: 0 18px 48px rgba(0, 0, 0, 0.35) !important; } /* logo Nobre com bom tamanho e respiro */ .login .hero-unit .company-logo, .login .company-logo { max-height: 104px !important; width: auto !important; margin: 4px auto 10px !important; display: block !important; } /* texto "Faça login em ..." sobre o fundo escuro */ .login .fullscreen-center { color: var(--nobre-blue-100) !important; } /* botão "Logar" → amarelo com texto navy */ .login .btn--primary, .login .js-submit { background-color: var(--nobre-gold) !important; border-color: var(--nobre-gold) !important; color: var(--nobre-navy-900) !important; font-weight: 600 !important; } .login .btn--primary:hover, .login .js-submit:hover { background-color: var(--nobre-gold-600) !important; border-color: var(--nobre-gold-600) !important; } /* links dentro do card branco em azul de ação */ .login .hero-unit a { color: var(--nobre-blue) !important; } /* foco dos campos em azul Nobre */ .login .form-control:focus, .login input:focus { border-color: var(--nobre-blue) !important; box-shadow: 0 0 0 3px rgba(46, 91, 184, 0.18) !important; } /* remove "Desenvolvido por Zammad" (passarinho + texto + links) */ .login .poweredBy, .poweredBy, a[href*="zammad.org"], a[href*="zammad.com"] { display: none !important; visibility: hidden !important; } /* ================================================================ 2. BARRA DE NAVEGAÇÃO LATERAL (Zammad 7.0.1: .navigation / .menu-item) ================================================================ */ .navigation, #navigation, .navigation .tasks { background-color: var(--nobre-navy-800) !important; } /* itens do menu (texto) */ .navigation .menu-item, .navigation .menu-item-name, .navigation .tasks .task a { color: rgba(255, 255, 255, 0.82) !important; } .navigation .menu-item:hover, .navigation .tasks .task:hover a { background-color: rgba(255, 255, 255, 0.06) !important; color: #ffffff !important; } /* item ATIVO → realce amarelo (substitui o azul padrão do Zammad) */ .navigation .menu-item.is-active, .navigation .menu-item.is-active:hover, .navigation .tasks .task.is-active a { background-color: rgba(252, 163, 17, 0.18) !important; box-shadow: inset 3px 0 0 var(--nobre-gold) !important; color: #ffffff !important; } .navigation .menu-item.is-active .menu-item-name { color: #ffffff !important; } /* substitui o passarinho do Zammad (botão de notificações) pelo símbolo Nobre */ .navigation .logo .icon-logo { display: none !important; } .navigation .logo { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyMDAgMjAwIiB3aWR0aD0iMjAwIiBoZWlnaHQ9IjIwMCIgcm9sZT0iaW1nIiBhcmlhLWxhYmVsPSJOb2JyZSI+CiAgPGcgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjRkZGRkZGIiBzdHJva2Utd2lkdGg9IjEzIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiPgogICAgPGNpcmNsZSBjeD0iMTAwIiBjeT0iMTAwIiByPSI4OCIvPgogIDwvZz4KICA8ZyBmaWxsPSJub25lIiBzdHJva2U9IiNGRkZGRkYiIHN0cm9rZS13aWR0aD0iMTkiIHN0cm9rZS1saW5lY2FwPSJidXR0IiBzdHJva2UtbGluZWpvaW49InJvdW5kIj4KICAgIDxwYXRoIGQ9Ik03MCAxNTAgVjU4Ii8+CiAgICA8cGF0aCBkPSJNMTMwIDE1MCBWNTgiLz4KICAgIDxwYXRoIGQ9Ik03MCA1OCBMMTMwIDE1MCIvPgogIDwvZz4KPC9zdmc+Cg==") !important; background-repeat: no-repeat !important; background-position: center !important; background-size: 26px 26px !important; } /* ícones do rodapé da navegação → claros sobre o navy (antes: azul/verde Zammad). Alguns ícones do Zammad usam fill fixo (não currentColor); por isso color E fill. */ .navigation .list-button .icon, .navigation .list-button svg, .navigation .settings .icon, .navigation .settings svg { color: rgba(255, 255, 255, 0.72) !important; fill: rgba(255, 255, 255, 0.72) !important; } .navigation .list-button:hover .icon, .navigation .list-button:hover svg, .navigation .settings:hover .icon, .navigation .settings:hover svg { color: #ffffff !important; fill: #ffffff !important; } /* botão de criar (+) em destaque amarelo */ .navigation .settings.add .icon, .navigation .settings.add svg { color: var(--nobre-gold) !important; fill: var(--nobre-gold) !important; } /* ================================================================ 3. BOTÕES PRIMÁRIOS (app) → navy; ação afirmativa em amarelo ================================================================ */ .btn--primary, button.btn--primary, .js-submit.btn--primary, .sidebar .btn--primary { background-color: var(--nobre-navy-800) !important; border-color: var(--nobre-navy-800) !important; color: #ffffff !important; } .btn--primary:hover, button.btn--primary:hover { background-color: var(--nobre-navy-700) !important; border-color: var(--nobre-navy-700) !important; } .btn--success, .btn.btn--create, .js-submit.btn--success { background-color: var(--nobre-gold) !important; border-color: var(--nobre-gold) !important; color: var(--nobre-navy-900) !important; } .btn--success:hover, .btn.btn--create:hover { background-color: var(--nobre-gold-600) !important; border-color: var(--nobre-gold-600) !important; } /* ================================================================ 4. LINKS, ABAS E ESTADOS ATIVOS → azul de ação / sublinhado gold ================================================================ */ .content a, .sidebar a, .text-muted a { color: var(--nobre-blue) !important; } .content a:hover { color: var(--nobre-navy-700) !important; } .tabsSliderContainer .runtimeTab.active::after, .tabs .tab.active::after, .page-header .tabs .tab.active { border-color: var(--nobre-gold) !important; box-shadow: inset 0 -3px 0 var(--nobre-gold) !important; } .content .form-control:focus, .content input:focus, .content select:focus, .content textarea:focus { border-color: var(--nobre-blue) !important; box-shadow: 0 0 0 3px rgba(46, 91, 184, 0.15) !important; } /* ================================================================ 5. DETALHES → realces pontuais em amarelo ================================================================ */ .label-warning, .priority-2, .flag.flag--important { background-color: var(--nobre-gold) !important; color: var(--nobre-navy-900) !important; } .progressBar .bar, .global-loading .bar { background-color: var(--nobre-gold) !important; }