/* =========================================================================== FLOWSPEC SOC — O LAYOUT DE ABAS, RESTAURADO Este arquivo é a junção de dois arquivos do app antigo: forensics/static/css/style.css (a grade, a barra superior, os cards) forensics/static/css/flowspec-soc.css (o brilho de destaque) As proporções da grade, os nomes das classes e as alturas por aba estão IGUAIS ao original. O que saiu daqui foi só o estilo de coisa que não existe mais nesta superfície: o modal de configurações (que gravava credencial de equipamento), o modal de investigação, a tabela do feed de incidentes e os contadores daquele feed. Estilo de elemento que não existe é estilo que ninguém consegue conferir olhando a tela. DUAS REGRAS QUE NÃO ESTAVAM NO ORIGINAL, E POR QUE ELAS ESTÃO AQUI ------------------------------------------------------------------ `.h-50` e `.flex-1` vinham, no original, do Bootstrap (`h-50`) e de atributo `style=` escrito dentro da tag (`style="flex:1"`). As duas são LOAD-BEARING: sem elas a aba de entrada empilha dois cards de altura inteira e o último card de cada linha perde a largura. Ficam definidas aqui por dois motivos: 1. a política de conteúdo desta página não permite estilo escrito dentro da tag (`style-src` sem `'unsafe-inline'`) — o navegador descartaria o `style="flex:1"` em silêncio, e a linha sairia torta sem erro nenhum; 2. a rede do órgão pode ter saída filtrada. Se o Bootstrap não carregar, a GRADE continua de pé: só o alinhamento da barra superior fica pior. O valor de cada uma é exatamente o que o original produzia. =========================================================================== */ :root { --bg-dark: #050608; --bg-panel: #0f111a; --border: #1f2937; --primary: #3b82f6; --accent: #00f2ff; --accent-purple: #8b5cf6; --text-main: #e2e8f0; --text-muted: #94a3b8; --header-height: 60px; --gap: 12px; } body { background-color: var(--bg-dark); color: var(--text-main); font-family: 'Inter', sans-serif; margin: 0; height: 100vh; display: flex; flex-direction: column; overflow: hidden; } /* HEADER */ .top-bar { background: rgba(15, 17, 26, 0.95); border-bottom: 1px solid var(--border); height: var(--header-height); padding: 0 25px; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; } .logo { font-weight: 800; font-size: 1.1rem; letter-spacing: 1px; color: white; } .nav-link { color: var(--text-muted); font-weight: 600; font-size: 0.82rem; padding: 8px 18px; border-radius: 6px; transition: 0.2s; text-transform: uppercase; border: 1px solid transparent; cursor: pointer; background: transparent; } /* CORES ORIGINAIS DOS BOTÕES. `active-lateral` herda o ciano que era da aba retirada; `active-reputation` usa o cinza-azulado que já existia na paleta. Nenhuma cor nova foi criada. */ .nav-link.active-global { background: var(--primary) !important; color: white !important; box-shadow: 0 0 15px rgba(59, 130, 246, 0.3); } .nav-link.active-inbound { background: #ef4444 !important; color: white !important; box-shadow: 0 0 15px rgba(239, 68, 68, 0.3); } .nav-link.active-outbound { background: #f59e0b !important; color: white !important; box-shadow: 0 0 15px rgba(245, 158, 11, 0.3); } .nav-link.active-lateral { background: var(--accent) !important; color: black !important; box-shadow: 0 0 15px rgba(0, 242, 255, 0.3); } .nav-link.active-forensics { background: var(--accent-purple) !important; color: white !important; box-shadow: 0 0 15px rgba(139, 92, 246, 0.3); } .nav-link.active-reputation { background: #64748b !important; color: white !important; box-shadow: 0 0 15px rgba(100, 116, 139, 0.3); } /* LAYOUT DINÂMICO ORIGINAL */ .dashboard-content { flex-grow: 1; padding: 12px; display: none; opacity: 0; transition: opacity 0.3s; height: calc(100vh - var(--header-height)); flex-direction: column; gap: var(--gap); } .dashboard-content.active { display: flex; opacity: 1; } .row-flex { display: flex; width: 100%; gap: var(--gap); min-height: 0; } .col-flex { display: flex; flex-direction: column; gap: var(--gap); min-width: 0; flex-shrink: 0; } /* LARGURAS RÍGIDAS ORIGINAIS */ .w-25p { width: calc(25% - (var(--gap) * 0.75)); flex-basis: 25%; } .w-33p { width: calc(33.33% - (var(--gap) * 0.66)); flex-basis: 33.33%; } .w-50p { width: calc(50% - (var(--gap) * 0.5)); flex-basis: 50%; } .w-60p { width: calc(60% - (var(--gap) * 0.4)); flex-basis: 60%; } .w-66p { width: calc(66.66% - (var(--gap) * 0.33)); flex-basis: 66.66%; } .w-100p { width: 100%; flex-basis: 100%; } /* O `style="flex:1"` do original, agora como classe (ver o cabeçalho). */ .flex-1 { flex: 1; } /* O `h-50` que vinha do Bootstrap: dois cards empilhados dividem a coluna. */ .h-50 { height: 50%; } /* `h-100p` existia no original sem definição em folha nenhuma. Continua sem efeito, e continua na marcação para que a comparação com o original seja linha a linha. */ /* ALTURAS POR ABA ORIGINAIS */ #view-overview .row-flex:nth-child(1) { flex: 0.35; } #view-overview .row-flex:nth-child(2) { flex: 0.65; } #view-inbound .row-flex { flex: 1; } /* A aba de Reputação ASN é um quadro só, de altura inteira. No original ela dependia de uma classe (`reputation-container-center`) que não existia em folha de estilo nenhuma — o quadro nascia sem altura. Aqui ela usa a mesma linha das outras abas, e ocupa a tela. */ #view-reputation .row-flex { flex: 1; } #view-outbound .row-flex:nth-child(1) { flex: 0.40; } #view-outbound .row-flex:nth-child(2) { flex: 0.60; } #view-forensics .row-flex:nth-child(1) { flex: 0.30; } #view-forensics .row-flex:nth-child(2) { flex: 0.35; } #view-forensics .row-flex:nth-child(3) { flex: 0.35; } /* A ABA NOVA, no mesmo padrão: a matriz (o painel principal) manda na primeira linha, a leitura ao longo do tempo vem no meio, e o resumo fecha embaixo. */ /* As alturas seguem o `h` do gridPos de `leste-oeste.json`: 5 / 11 / 10 sobre 26 dá 0,19 / 0,42 / 0,39. Os dois números grandes e a rosca não precisam de altura — o que precisa é a matriz de zonas, que estava cortada com barra de rolagem, e o painel de pares negados, cujo texto de estado vazio não cabia e vazava por cima da moldura. */ #view-lateral .row-flex:nth-child(1) { flex: 0.19; } #view-lateral .row-flex:nth-child(2) { flex: 0.42; } #view-lateral .row-flex:nth-child(3) { flex: 0.39; } /* COMPONENTES */ .card-box { background: var(--bg-panel); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; display: flex; flex-direction: column; height: 100%; } .card-header-sm { padding: 0 15px; border-bottom: 1px solid var(--border); background: rgba(255,255,255,0.02); font-size: 0.72rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; height: 36px; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; } .iframe-container { flex: 1; position: relative; background: var(--bg-panel); overflow: hidden; } iframe { width: 100%; height: 100%; border: none; display: block; } .time-control-group { display: flex; background: #0a0c14; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; } .time-select-preset { background: #0a0c14; color: #fff; border: none; padding: 5px 12px; font-size: 0.8rem; cursor: pointer; outline: none; } /* LOADER */ #loader-layer { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: var(--bg-dark); z-index: 9999; display: flex; flex-direction: column; align-items: center; justify-content: center; transition: opacity 0.6s ease; } /* --- do flowspec-soc.css: o brilho de destaque ---------------------------- */ .text-accent { color: #00f2ff !important; text-shadow: 0 0 12px rgba(0, 242, 255, 0.7); font-weight: 800; } .uppercase { text-transform: uppercase; letter-spacing: 1px; }