/* ============================================================================ theme.css -- Hosts Green -- Fase 1 da modernizacao visual ---------------------------------------------------------------------------- Carregar SEMPRE depois de bootstrap.min.css. Regras deste arquivo: - Nao renomeia nenhuma classe do Bootstrap 4. Nada de markup muda. - Nao toca em #infoaccount, #infodns, #viewmode, #viewstatusproject nem #deletehosts. Esses quatro sao posicionados por porcentagem em cinco breakpoints no fim do bootstrap.min.css; mexer aqui os desloca. - Todos os pares de cor abaixo foram medidos: minimo 4.5:1 para texto. Paleta: mantida a da marca, extraida do logo oficial. azul #0058AD (logo: #0070C8) -- 7.00:1 em branco verde #21CE99 (logo: #18C088) -- so como preenchimento, nunca texto verde de texto #158562 -- 4.60:1 em branco ========================================================================== */ :root{ /* marca */ --hg-blue:#0058AD; --hg-green:#21CE99; --hg-green-ink:#158562; /* verde legivel para texto e link */ /* estado: preenchimento */ --hg-ok-bg:#21CE99; --hg-warn-bg:#FFA733; --hg-crit-bg:#C4243D; /* era #E9425E: 3.88:1 com branco, falhava */ --hg-info-bg:#8B47B0; /* era #AA6ECE: 3.60:1 com branco, falhava */ /* estado: texto sobre o preenchimento */ --hg-ok-on:#053D2B; --hg-warn-on:#4A2E00; --hg-crit-on:#FFFFFF; --hg-info-on:#FFFFFF; /* estado: chips (fundo suave + texto escuro) */ --hg-ok-soft:#E6F7F0; --hg-ok-ink:#0B6B4F; --hg-warn-soft:#FFF4E3; --hg-warn-ink:#8A5200; --hg-crit-soft:#FDECEE; --hg-crit-ink:#A81F35; --hg-neutral-soft:#F1F3F2; --hg-neutral-ink:#5B6A65; /* superficie e tinta */ --hg-ink:#2B3330; --hg-muted:#6B7772; --hg-line:#E3E8E6; --hg-surface:#FFFFFF; /* forma */ --hg-r:8px; --hg-r-sm:6px; --hg-shadow:0 1px 2px rgba(20,32,28,.06), 0 6px 18px -10px rgba(20,32,28,.14); --hg-focus:0 0 0 3px rgba(0,88,173,.35); } /* --------------------------------------------------------------------------- 1. TIPOGRAFIA O bootstrap.min.css customizado define body em 0.8125rem (13px), pequeno para leitura. Subimos apenas o body -- o continua em 16px, entao todo o espacamento em rem do Bootstrap fica intacto. --------------------------------------------------------------------------- */ body{ font-size:15px; line-height:1.6; color:var(--hg-ink); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; } h1,h2,h3,h4,h5,h6{ letter-spacing:-.015em; line-height:1.25; color:var(--hg-ink); } h1,h2,h3{text-wrap:balance} .text-muted{color:var(--hg-muted) !important} small,.small{font-size:87%} /* numeros em coluna alinham */ td,th,.badge,.tag{font-variant-numeric:tabular-nums} /* --------------------------------------------------------------------------- 2. CONTRASTE DOS ESTADOS -- a correcao mais importante desta fase O bloco no fim do bootstrap.min.css faz `.alert{color:#fff}` e deixa os alerts solidos. Resultado medido: alert-warning 1.94:1, alert-success 2.03:1, alert-info 3.60:1, alert-danger 3.88:1. Todos falhavam. --------------------------------------------------------------------------- */ .alert{ border:0; border-radius:var(--hg-r); font-weight:500; } .alert-warning, .alert-warning h1,.alert-warning h2,.alert-warning h3, .alert-warning h4,.alert-warning h5,.alert-warning h6{ background-color:var(--hg-warn-bg); color:var(--hg-warn-on); /* 6.44:1 */ } .alert-warning a:not(.btn), .alert-warning .alert-link, .alert-warning .close{color:var(--hg-warn-on)} .alert-success, .alert-success h1,.alert-success h2,.alert-success h3, .alert-success h4,.alert-success h5,.alert-success h6{ background-color:var(--hg-ok-bg); color:var(--hg-ok-on); /* 6.06:1 */ } .alert-success a:not(.btn), .alert-success .alert-link, .alert-success .close{color:var(--hg-ok-on)} .alert-danger{ background-color:var(--hg-crit-bg); color:var(--hg-crit-on); /* 5.73:1 */ } .alert-info{ background-color:var(--hg-info-bg); color:var(--hg-info-on); /* 5.79:1 */ } /* Chips de status. Antes: texto colorido sobre #f9f9f9 -- 1.84:1 a 3.69:1. Agora: fundo suave por estado e texto escuro da mesma familia. */ .badge{ background-color:var(--hg-neutral-soft); color:var(--hg-neutral-ink); border-radius:20px; padding:.34em .7em; font-weight:600; letter-spacing:.01em; } .badge-success{background-color:var(--hg-ok-soft); color:var(--hg-ok-ink)} /* 5.86:1 */ .badge-warning{background-color:var(--hg-warn-soft); color:var(--hg-warn-ink)} /* 5.87:1 */ .badge-danger {background-color:var(--hg-crit-soft); color:var(--hg-crit-ink)} /* 6.32:1 */ .badge-black, .badge-secondary{background-color:var(--hg-neutral-soft); color:var(--hg-neutral-ink)} .badge-primary{background-color:#E4EEF8; color:var(--hg-blue)} /* --------------------------------------------------------------------------- 3. RODAPE -- corrige a sobreposicao sem tocar no HTML footer.html traz style="position:fixed;bottom:-2vh" inline, e o JS remove o d-none depois de carregar (library.js:43). O resultado e o "© hosts.green v1.2" caindo por cima do conteudo. Neutralizado aqui. --------------------------------------------------------------------------- */ footer.text-muted{ position:static !important; bottom:auto !important; width:auto !important; margin-top:40px; padding:20px 0 28px; border-top:1px solid var(--hg-line); } #hgversion{ background-color:transparent !important; width:auto !important; color:var(--hg-muted); font-size:12.5px; } /* --------------------------------------------------------------------------- 4. FOCO VISIVEL -- o Bootstrap 4 nao marca foco de teclado com clareza --------------------------------------------------------------------------- */ /* Um anel de foco, nunca dois. Campos usam box-shadow (acompanha o raio da borda); os demais elementos usam outline. */ a:focus-visible, button:focus-visible, .btn:focus-visible, [tabindex]:focus-visible{ outline:2px solid var(--hg-blue); outline-offset:2px; } .form-control:focus, .form-control:focus-visible{ outline:none; border-color:var(--hg-blue); box-shadow:var(--hg-focus); } .btn:focus,.btn.focus{box-shadow:none} .btn:focus-visible{box-shadow:none} /* --------------------------------------------------------------------------- 5. FORMA -- cantos, sombras e campos Reescreve tambem a regra que estava anulada por typo no fim do bootstrap.min.css: `box-shadow: none !importante` (com "e" no fim). --------------------------------------------------------------------------- */ .card{ border-radius:var(--hg-r) !important; border-color:var(--hg-line) !important; box-shadow:var(--hg-shadow) !important; } .modal-content{ border:0; border-radius:var(--hg-r); box-shadow:0 12px 48px -12px rgba(20,32,28,.32); } .list-group-item:first-child{border-top-left-radius:var(--hg-r); border-top-right-radius:var(--hg-r)} .list-group-item:last-child {border-bottom-left-radius:var(--hg-r); border-bottom-right-radius:var(--hg-r)} .form-control{ border-radius:var(--hg-r-sm); border-color:#D6DDDA; min-height:40px; font-size:15px; transition:border-color .15s ease, box-shadow .15s ease; } .form-control::placeholder{color:#9AA6A2; opacity:1} /* O signin.css cola os dois campos do login zerando cantos. Mantemos o par colado, mas com borda visivel nos dois e raio nas pontas externas. */ .form-signin .form-control{border:1px solid #D6DDDA} .form-signin input[type="email"]{ border-radius:var(--hg-r-sm) var(--hg-r-sm) 0 0; margin-bottom:-1px; } .form-signin input[type="password"]{ border-radius:0 0 var(--hg-r-sm) var(--hg-r-sm); margin-bottom:14px; } .form-signin .form-control:focus{position:relative; z-index:2} .btn{ border-radius:var(--hg-r-sm); font-weight:600; letter-spacing:.005em; transition:background-color .15s ease, border-color .15s ease, transform .12s ease; } .btn-lg{min-height:46px} .btn-success{color:var(--hg-ok-on); background-color:var(--hg-ok-bg); border-color:var(--hg-ok-bg)} .btn-success:hover{color:var(--hg-ok-on); background-color:#1CB587; border-color:#1CB587} .btn-danger{background-color:var(--hg-crit-bg); border-color:var(--hg-crit-bg)} /* link verde legivel, quando o verde e usado como cor de texto */ a.text-success,.text-success{color:var(--hg-green-ink) !important} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms !important; transition-duration:.01ms !important} } /* --------------------------------------------------------------------------- FASE 2a -- devolver os elementos flutuantes ao fluxo Cinco elementos eram arrancados do fluxo e reposicionados por porcentagem em cinco breakpoints. A investigacao mostrou que todos ja estao no lugar certo do DOM: #infoaccount -> injetado em #headerusage, dentro do flex do header #viewmode -> inserido com .before() antes do .navbar-toggler #infodns -> topo da lista, em #listdns #viewstatusproject / #deletehosts ->
no topo do
Ou seja, o posicionamento absoluto era contorno para nao lidar com o flex. Aqui devolvemos todos ao fluxo e apagamos a dependencia de porcentagem. Nada de markup muda. As regras antigas continuam no bootstrap.min.css e sao apenas sobrescritas -- para reverter, basta remover esta secao. --------------------------------------------------------------------------- */ /* --------------------------------------------------------------------------- FASE 2b -- header de duas barras barra 1 identidade + conta barra 2 navegacao de secao + controles da pagina (#headerusage, #viewmode) Trocamos o `fixed-top` por `sticky`. O original usava position:fixed e compensava com `margin-bottom:60px` no
-- um numero magico que nunca casava com a altura real. Sticky ocupa espaco no fluxo, entao a compensacao deixa de existir. --------------------------------------------------------------------------- */ #hgheader{ position:sticky; top:0; z-index:1030; margin-bottom:24px !important; background:var(--hg-surface); } #hgbar1{ position:static !important; /* neutraliza o fixed-top, se ainda vier */ border-bottom:1px solid var(--hg-line); padding:.5rem 0; margin:0; } #hgbar1 > .container, #pagebar > .container{ display:flex; align-items:center; gap:16px; flex-wrap:nowrap; } header .navbar-brand{flex:none; margin-right:0; padding:0} header .navbar-brand small{font-size:14px; font-weight:500; color:var(--hg-muted)} /* navegacao horizontal: e o achado no.2, a razao de existir esta fase */ #hgnav-conta, #hgnav-secao{ display:flex; align-items:center; gap:2px; min-width:0; } #hgnav-conta{margin-left:auto} #hgnav-conta a, #hgnav-secao a{ display:inline-block; padding:7px 11px; border-radius:var(--hg-r-sm); font-size:14px; font-weight:500; color:var(--hg-muted); text-decoration:none; white-space:nowrap; transition:color .12s ease, background-color .12s ease; } #hgnav-conta a:hover, #hgnav-secao a:hover{color:var(--hg-ink); background:var(--hg-neutral-soft)} #hgnav-conta a:focus-visible, #hgnav-secao a:focus-visible{outline:2px solid var(--hg-blue); outline-offset:1px} #hgnav-conta .hgsair{color:var(--hg-crit-ink)} /* secao atual: marcada pelo marcarSecaoAtiva() do include.js */ #hgnav-secao a.hgativo{ color:var(--hg-blue); background:var(--hg-surface); font-weight:650; box-shadow:inset 0 -2px 0 var(--hg-blue); } #hgnav-conta a.hgativo{color:var(--hg-ink); font-weight:650} .hgmenu a.hgativo{color:var(--hg-blue); font-weight:650} #pagebar{ background:var(--hg-neutral-soft); border-bottom:1px solid var(--hg-line); padding:6px 0; } #pagebar #hgnav-secao a{font-size:14.5px} #headerusage{ margin-left:auto; flex:0 1 auto; min-width:0; display:flex; align-items:center; justify-content:flex-end; gap:12px; } /* o hamburguer vinha com style="background:#21ce99" inline no header antigo; agora vive aqui, com estado de foco e area de toque adequada */ header .navbar-toggler{ flex:none; margin-left:auto; background:var(--hg-green); border:0; border-radius:var(--hg-r-sm); width:42px; height:38px; display:inline-flex; align-items:center; justify-content:center; transition:background-color .12s ease; } header .navbar-toggler:hover{background:#1CB587} header .navbar-toggler:focus-visible{outline:2px solid var(--hg-blue); outline-offset:2px} header .navbar-toggler .navbar-toggler-icon{ background-image:none; width:auto; height:auto; color:#fff; font-size:17px; line-height:1; } /* painel do hamburguer */ #navbarHeader{border-bottom:1px solid var(--hg-line)} #navbarHeader .container{padding:20px 15px 26px} .hgmenu-titulo{ font-size:11px; font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--hg-muted); margin:18px 0 6px; } .hgmenu-titulo:first-child{margin-top:0} .hgmenu{list-style:none; margin:0; padding:0} .hgmenu li{margin:0} .hgmenu a{ display:block; padding:9px 0; font-size:16px; color:var(--hg-ink); text-decoration:none; border-bottom:1px solid var(--hg-line); } .hgmenu a:hover{color:var(--hg-blue)} /* quem aparece em qual largura: ate 991px a navegacao vive no hamburguer; a partir dai fica horizontal */ @media (max-width:991px){ #hgnav-conta,#hgnav-secao{display:none} #pagebar > .container{justify-content:flex-end} /* abaixo de 992px a navegacao vive no hamburguer, entao a barra 2 so tem motivo de existir se o JS injetou algo em #headerusage (contador de uso, filtro, alternador lista/mapa). Sem isso ela seria uma faixa vazia. */ #pagebar{display:none} #pagebar:has(#headerusage > *){display:block} } @media (min-width:992px){ header .navbar-toggler{display:none !important} #navbarHeader{display:none !important} } /* --------------------------------------------------------------------------- FASE 3 -- densidade das listas Cada projeto / registro de DNS vinha como .row > .col-sm-12 > .card > .card-body > .form-group.row > 2x .col-sm-6 ou seja, um card de largura total por item. Em 1440px isso dava ~30px de conteudo ocupando 1.110px de largura, e quatro projetos empurravam a acao principal para fora da primeira tela. Aqui os itens passam a ocupar uma grade. O `display:contents` no .row faz o .col-sm-12 virar item da grade sem tocar no markup -- e tambem descarta o `padding-bottom:15px` inline, que passa a ser o gap da grade. --------------------------------------------------------------------------- */ #listproject, #sharedlistproject, #listdns{ display:grid; grid-template-columns:repeat(auto-fill, minmax(min(100%,340px), 1fr)); gap:12px; align-items:start; } #listproject > .row, #sharedlistproject > .row, #listdns > .row{display:contents} /* o que nao e item da lista atravessa a grade inteira: contadores de uso e o bloco de download do agente */ #listproject > #infoaccount, #listdns > #infodns, #listdns > center, #listproject > center, #sharedlistproject > center{grid-column:1 / -1} #listproject .card-body, #sharedlistproject .card-body, #listdns .card-body{padding:14px 16px !important} /* nome em cima, acoes embaixo: em duas ou tres colunas nao ha largura para manter os dois col-sm-6 lado a lado sem truncar */ #listproject .form-group.row, #sharedlistproject .form-group.row, #listdns .form-group.row{ display:flex !important; flex-direction:column; gap:12px; margin:0 !important; } #listproject .col-form-label, #sharedlistproject .col-form-label, #listdns .col-form-label{ width:100%; max-width:100%; flex:none; padding:0 !important; } #listproject .col-form-label.text-right, #sharedlistproject .col-form-label.text-right, #listdns .col-form-label.text-right{ display:flex; gap:8px; align-items:center; padding-top:10px !important; border-top:1px solid var(--hg-line); } #listproject .form-control-plaintext, #sharedlistproject .form-control-plaintext, #listdns .form-control-plaintext{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:15.5px; font-weight:600; color:var(--hg-ink); padding:0; height:auto; min-height:0; } #listproject .form-control-plaintext small, #listdns .form-control-plaintext small{ font-weight:500; color:var(--hg-muted); font-size:13px; } /* O avatar de cada projeto era o logo da Hosts Green repetido, porque o fallback de "sem logo proprio" aponta para view/img/logo.png. Repetido em cada linha ele nao informa nada e polui. Esconde so o padrao -- logo customizado de projeto continua aparecendo. */ #listproject img[src*="view/img/logo.png"], #sharedlistproject img[src*="view/img/logo.png"]{display:none} #listproject .form-control-plaintext img, #sharedlistproject .form-control-plaintext img{ height:22px !important; width:auto !important; max-width:76px; object-fit:contain; border-radius:4px; flex:none; } /* cadeado de projeto publico/privado: de glifo solto para marcador discreto */ #listproject .fa-lock, #listproject .fa-unlock, #sharedlistproject .fa-lock, #sharedlistproject .fa-unlock{ font-size:12px; color:var(--hg-muted); flex:none; width:22px; height:22px; border-radius:50%; background:var(--hg-neutral-soft); display:inline-flex; align-items:center; justify-content:center; } #listproject .fa-lock{color:var(--hg-warn-ink); background:var(--hg-warn-soft)} /* Tres acoes de peso diferente vinham em tres cores diferentes (info roxo, success verde, danger vermelho). Agora "Ver Status" e a acao principal, "Editar" e neutra e excluir e um botao quieto de icone. */ #listproject .btn-outline-info, #sharedlistproject .btn-outline-info{ background:var(--hg-blue) !important; border-color:var(--hg-blue) !important; color:#fff !important; font-size:13px; padding:6px 13px; } #listproject .btn-outline-success, #sharedlistproject .btn-outline-success, #listdns .btn-outline-success{ background:var(--hg-surface) !important; color:var(--hg-ink) !important; border-color:var(--hg-line-2,#CFDBD6) !important; font-size:13px; padding:6px 13px; } #listproject .btn-outline-danger, #sharedlistproject .btn-outline-danger, #listdns .btn-outline-danger{ margin-left:auto; border:0 !important; background:transparent !important; color:var(--hg-muted) !important; padding:6px 9px; } #listproject .btn-outline-danger:hover, #sharedlistproject .btn-outline-danger:hover, #listdns .btn-outline-danger:hover{ background:var(--hg-crit-soft) !important; color:var(--hg-crit-ink) !important; } #listproject .btn-outline-danger .fa, #listdns .btn-outline-danger .fa{font-size:14px !important} /* o hvr-grow escalava o botao inteiro no hover, o que empurrava os vizinhos */ #listproject .hvr-grow, #sharedlistproject .hvr-grow, #listdns .hvr-grow{transform:none !important} /* --------------------------------------------------------------------------- FASE 3 -- historico de incidentes O loop antigo imprimia 30 linhas de data + "Nenhum incidente relatado.", o que deixava a pagina publica com 3.336 px e a interna com 3.764 px, sendo ~85% disso repeticao. Agora dias limpos consecutivos vao para um
e apenas dias com incidente aparecem por extenso. --------------------------------------------------------------------------- */ #pastIncidents{max-width:70ch} .hgsem-incidente{ margin:0; padding:16px 18px; border:1px solid var(--hg-line); border-radius:var(--hg-r); background:var(--hg-ok-soft); color:var(--hg-ok-ink); font-size:14.5px; font-weight:500; } .hgdia{margin:0 0 22px} .hgdia h5{ font-size:15px; font-weight:650; margin:0 0 10px; padding-bottom:7px; border-bottom:1px solid var(--hg-line); letter-spacing:-.005em; } .hgincidente{ display:grid; grid-template-columns:auto auto 1fr; gap:4px 12px; align-items:baseline; padding:9px 0; font-size:14px; } .hgincidente + .hgincidente{border-top:1px dashed var(--hg-line)} .hgincidente time{ font-family:var(--mono,ui-monospace,SFMono-Regular,Menlo,monospace); font-size:12.5px; color:var(--hg-muted); white-space:nowrap; font-variant-numeric:tabular-nums; } .hgincidente-host{ font-weight:600; color:var(--hg-ink); white-space:nowrap; max-width:22ch; overflow:hidden; text-overflow:ellipsis; } .hgincidente-msg{color:var(--hg-ink); min-width:0} @media (max-width:575px){ .hgincidente{grid-template-columns:1fr; gap:2px} .hgincidente-host{max-width:none} } /* sequencia de dias limpos, colapsada */ .hglimpos{margin:0 0 18px} .hglimpos > summary{ cursor:pointer; list-style:none; display:inline-flex; align-items:center; gap:8px; padding:7px 13px; border-radius:20px; border:1px solid var(--hg-line); background:var(--hg-neutral-soft); color:var(--hg-muted); font-size:13px; font-weight:500; transition:color .12s ease, border-color .12s ease; } .hglimpos > summary::-webkit-details-marker{display:none} .hglimpos > summary::before{ content:''; width:7px; height:7px; border-radius:50%; background:var(--hg-ok-bg); flex:none; } .hglimpos > summary::after{ content:'▾'; font-size:11px; opacity:.7; } .hglimpos[open] > summary::after{content:'▴'} .hglimpos > summary:hover{color:var(--hg-ink); border-color:var(--hg-line-2,var(--hg-line))} .hglimpos > summary:focus-visible{outline:2px solid var(--hg-blue); outline-offset:2px} .hglimpos ul{ list-style:none; margin:10px 0 0; padding:0 0 0 15px; border-left:2px solid var(--hg-line); columns:2; column-gap:24px; } .hglimpos li{ font-size:13px; color:var(--hg-muted); padding:3px 0; break-inside:avoid; margin:0; } @media (max-width:575px){ .hglimpos ul{columns:1} } /* contadores de uso: de absolutos para conteudo normal do header */ #infoaccount, #infodns{ position:static !important; right:auto !important; left:auto !important; top:auto !important; margin:0 !important; z-index:auto !important; text-align:right; font-size:13px; line-height:1.35; color:var(--hg-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } #infodns{text-align:left; margin-bottom:16px !important} /* O contador vem como "You have 16/30 hosts
End of trial ...". Escondendo o
as duas partes colavam; o seletor de irmao adjacente continua valendo mesmo com o
em display:none, porque e estrutural. */ #infoaccount br{display:none} #infoaccount br + span{ margin-left:12px; padding-left:12px; border-left:1px solid var(--hg-line-2, var(--hg-line)); } #infoaccount a{font-weight:600; text-decoration:underline} #infoaccount,#infodns{gap:0} /* filtro + alternador lista/mapa: idem, mas ele tem inline style, por isso o !important e necessario */ #viewmode{ position:static !important; right:auto !important; left:auto !important; flex:none; display:flex; align-items:center; gap:8px; } #viewmode .form-control{width:auto !important; min-width:150px; margin-right:0 !important} /* Alternador lista/mapa. Vinha como btn-dark (preto) + btn-primary (azul), dois estilos diferentes para duas opcoes de mesmo peso -- lia como se o azul fosse a acao principal. Agora e um controle segmentado, com o selecionado marcado por preenchimento e aria-pressed implicito pela classe .active. */ #viewmode .btn-group{border-radius:var(--hg-r-sm); overflow:hidden; border:1px solid var(--hg-line-2,var(--hg-line))} #viewmode #viewlistmode, #viewmode #viewmapmode, #viewlistmode,#viewmapmode{ background:var(--hg-surface) !important; border:1px solid var(--hg-line-2,#CFDBD6) !important; color:var(--hg-muted) !important; font-size:13px; font-weight:600; letter-spacing:.02em; padding:7px 14px; box-shadow:none !important; } #viewlistmode{border-radius:var(--hg-r-sm) 0 0 var(--hg-r-sm) !important; border-right-width:0 !important} #viewmapmode {border-radius:0 var(--hg-r-sm) var(--hg-r-sm) 0 !important} #viewlistmode:hover,#viewmapmode:hover{color:var(--hg-ink) !important; background:var(--hg-neutral-soft) !important} #viewlistmode.active,#viewmapmode.active{ background:var(--hg-blue) !important; border-color:var(--hg-blue) !important; color:#fff !important; } /* botoes de acao do editor de projeto: viram uma barra normal no topo do conteudo, que e onde eles estao no HTML */ #viewstatusproject, #deletehosts{ position:static !important; top:auto !important; left:auto !important; z-index:auto !important; } main > center:has(#viewstatusproject){ display:flex !important; justify-content:flex-end; gap:10px; padding:20px 15px 4px !important; max-width:1140px; margin:0 auto; } /* os 13 avisos de "Please wait..." usavam left:40% com largura fixa, o que descentraliza em tela larga e transborda em mobile */ main > center[style*="position:fixed"], center[style*="left:40%"][style*="position:fixed"]{ left:50% !important; transform:translateX(-50%); width:auto !important; max-width:min(92vw,320px) !important; } /* as regras antigas de porcentagem ficam neutralizadas em todos os breakpoints onde eram declaradas */ @media (min-width:684px){ #infoaccount,#infodns{position:static !important; right:auto !important; left:auto !important; margin-top:0 !important} #viewmode{right:auto !important} #viewstatusproject,#deletehosts{position:static !important; top:auto !important; left:auto !important} } @media (min-width:1200px){ #viewmode{right:auto !important} } @media (min-width:1400px){ #viewmode{right:auto !important} #viewstatusproject,#deletehosts{position:static !important; top:auto !important; left:auto !important} } @media (min-width:1450px){ #infoaccount{right:auto !important; margin-top:0 !important} } @media (min-width:1730px){ #viewmode{right:auto !important} } @media (min-width:1890px){ #infoaccount{right:auto !important} } /* em telas estreitas o contador sai do header e vira linha propria */ @media (max-width:575px){ #headerusage{display:none} } /* --------------------------------------------------------------------------- 6. TEMA ESCURO Ja existe um bloco prefers-color-scheme no fim do bootstrap.min.css, com body/.card em #17202a. Aqui so estendemos o que faltava: os estados, que herdavam as mesmas falhas de contraste do tema claro. --------------------------------------------------------------------------- */ @media (prefers-color-scheme:dark){ :root{ --hg-ink:#DEE3E6; --hg-muted:#94A19D; --hg-line:#3A4650; --hg-surface:#17202A; --hg-neutral-soft:#313131; --hg-neutral-ink:#B9C2C0; --hg-shadow:0 1px 2px rgba(0,0,0,.5), 0 6px 18px -10px rgba(0,0,0,.7); --hg-focus:0 0 0 3px rgba(0,180,255,.4); } /* badges sobre o #313131 que o bloco existente aplica */ .badge{background-color:#313131 !important; color:#B9C2C0} .badge-success{color:#4FE0AE} /* 7.81:1 */ .badge-warning{color:#FFBE5C} /* 7.91:1 */ .badge-danger {color:#FF8A8A} /* 5.73:1 */ .badge-black,.badge-secondary{color:#B9C2C0} .badge-primary{color:#7FC0FF} /* alerts mantem o preenchimento solido, entao o texto escuro continua valendo */ .alert-warning{background-color:#F5A227; color:#3A2400} .alert-success{background-color:#1FBE8D; color:#04301F} .form-control{ background-color:#1E2A35; border-color:#3A4650; color:#DEE3E6; } .form-control:focus{border-color:#00B4FF; background-color:#1E2A35; color:#DEE3E6} .form-control::placeholder{color:#7C8A93} footer.text-muted{border-top-color:#3A4650} a:focus-visible,button:focus-visible,.btn:focus-visible{outline-color:#00B4FF} /* o bloco existente pinta o fundo do modal com #dee3e650, que clareia demais o overlay; devolvemos um overlay escuro */ .modal{background-color:rgba(0,0,0,.55) !important} } /* --------------------------------------------------------------------------- 7. HEADER DAS PAGINAS PUBLICAS -- public.html e readonly.html Visitante anonimo nao tem conta nem secoes, entao aqui nao existe barra 2 nem hamburguer: so a identidade do projeto e as acoes da propria pagina. Por isso o header publico e outro, e nao o mesmo do app com itens escondidos. Reaproveita #hgheader e #hgbar1 para herdar sticky, espacamento e a linha inferior, em vez de repetir os valores em outro lugar e deixar os dois headers divergirem com o tempo. O que era antes: `
` com `.navbar.fixed-top`. O fixed tira a barra do fluxo, e o margin-bottom:60px era o numero magico que tentava compensar a altura -- sem nunca casar com ela. Sticky ocupa espaco no fluxo e a compensacao deixa de existir. Mesma troca que a fase 2b fez no header do app. --------------------------------------------------------------------------- */ #hgheader.hgpublico #hgbar1{ border-bottom:1px solid var(--hg-line); } /* O nome do projeto e a informacao principal desta barra, e chega pelo JS em `.navbar-brand small`. No app esse mesmo elemento e secundario, cinza; aqui ele e o titulo da pagina. */ #hgheader.hgpublico .navbar-brand small{ font-size:15px; font-weight:600; color:var(--hg-ink); } #hgpublico-acoes{ margin-left:auto; display:flex; align-items:center; gap:8px; min-width:0; } /* O alternador Lista/Mapa e injetado pelo JS da propria pagina com `style="position:absolute;z-index:1031;right:12%"` inline. Estilo inline vence folha de estilo, entao devolver o botao ao fluxo exige !important. Mesmo tratamento que a fase 2a deu aos 5 elementos posicionados por porcentagem em cinco breakpoints. */ #hgpublico-acoes .btn-group{ position:static !important; right:auto !important; top:auto !important; z-index:auto !important; } #hgpublico-acoes .btn-group .btn{ font-size:13px; padding:6px 13px; } /* Abaixo de 560px o nome do projeto e o alternador nao cabem na mesma linha. Deixa quebrar, em vez de comprimir o nome ate ficar ilegivel. */ @media (max-width:560px){ #hgheader.hgpublico #hgbar1 > .container{flex-wrap:wrap; gap:8px} #hgpublico-acoes{margin-left:0} } /* --------------------------------------------------------------------------- 8. DIAS COM INCIDENTE RECOLHIDOS A fase 3 recolheu os dias VAZIOS num
e mediu 3.753 px -> 900 px. Aquela medicao usou 3 incidentes. Medido depois, com carga: a altura voltava a crescer linearmente, porque dia COM incidente renderizava tudo aberto. 600 incidentes em 30 dias davam 27.278 px. Agora os 3 dias mais recentes ficam abertos e os demais viram
, com a data e a contagem no resumo. Segue a mesma forma de .hglimpos, para o visitante reconhecer o padrao: pilula clicavel. --------------------------------------------------------------------------- */ details.hgdia-recolhido{margin:0 0 12px} details.hgdia-recolhido > summary{ cursor:pointer; list-style:none; display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--hg-line); font-size:15px; font-weight:650; color:var(--hg-ink); letter-spacing:-.005em; transition:color .12s ease; } details.hgdia-recolhido > summary::-webkit-details-marker{display:none} /* triangulo proprio, que gira ao abrir: o marcador nativo varia entre navegadores e nao aceita cor do tema */ details.hgdia-recolhido > summary::before{ content:''; flex:none; width:0; height:0; border-left:5px solid var(--hg-muted); border-top:4px solid transparent; border-bottom:4px solid transparent; transition:transform .12s ease; } details.hgdia-recolhido[open] > summary::before{transform:rotate(90deg)} details.hgdia-recolhido > summary:hover{color:var(--hg-blue)} details.hgdia-recolhido > summary:focus-visible{ outline:none; box-shadow:var(--hg-focus); border-radius:var(--hg-r-sm); } /* a contagem e informacao secundaria: empurrada para a direita e em cinza */ .hgdia-conta{ margin-left:auto; font-size:12.5px; font-weight:500; color:var(--hg-muted); background:var(--hg-neutral-soft); border-radius:20px; padding:3px 10px; } details.hgdia-recolhido[open] > .hgincidente:first-of-type{padding-top:12px}