/* * Sistema visual do Monitoring — a identidade do railstools (a mesma do automation_hub: * destaque #e44545, cartões de vidro, tipografia do sistema), em **dois temas**. * * Claro é o padrão, e a razão é o produto: esta tela existe para ler gráfico e número. Fundo * escuro dá contraste alto para texto, mas achata a diferença entre séries de um gráfico — em * cima de #0a0a0b, uma linha em azul-claro e outra em verde-claro brigam pelo mesmo brilho, e * área com transparência sobre preto vira tudo cinza. Em fundo claro, a mesma paleta separa * por matiz E por luminosidade, que é o que faz seis linhas serem distinguíveis. * * Escuro continua existindo inteiro, para quem trabalha de madrugada e para quem prefere. * * COMO O TEMA FUNCIONA * -------------------- * Toda cor é token no `:root` (claro). O bloco `[data-theme="dark"]` redefine SÓ os tokens — * nenhuma regra de componente sabe qual tema está valendo, e é isso que impede o rombo * clássico: um componente novo escrito com cor fixa fica errado em um dos dois e ninguém vê. * * Quem escreve `data-theme` no `` é um script curto no `` do layout, antes da * primeira pintura — depois seria um piscar branco a cada carregamento. A escolha fica no * `localStorage`. * * Escrito à mão, como no hub: Propshaft, sem build de node. * Ordem: tokens -> reset -> tipografia -> layout -> componentes. * As telas específicas (gráfico, cascata, backtrace, log, cobrança) estão em screens.css. */ /* ---------------------------------------------------------------- tokens -- */ :root { color-scheme: light; --bg: #f6f7f9; --bg-elevated: #ffffff; --bg-panel: #ffffff; --surface: #ffffff; --surface-hover: rgba(17, 17, 20, 0.035); --surface-solid: rgba(17, 17, 20, 0.055); --line: rgba(17, 17, 20, 0.09); --line-strong: rgba(17, 17, 20, 0.16); --text: #17171a; --text-soft: rgba(23, 23, 26, 0.74); --text-muted: rgba(23, 23, 26, 0.56); --text-faint: rgba(23, 23, 26, 0.40); /* O vermelho da marca é o mesmo; o tom de texto é mais fundo porque #e44545 sobre branco não passa de 3:1 de contraste. */ --accent: #d13232; --accent-hover: #b91c1c; --accent-deep: #991b1b; --accent-soft: rgba(209, 50, 50, 0.09); --accent-line: rgba(209, 50, 50, 0.30); --brand: #e44545; --success: #15803d; --success-soft: rgba(21, 128, 61, 0.10); --warning: #b45309; --warning-soft: rgba(180, 83, 9, 0.10); --info: #1d4ed8; --info-soft: rgba(29, 78, 216, 0.09); --danger: #dc2626; --danger-soft: rgba(220, 38, 38, 0.09); --violet: #6d28d9; --violet-soft: rgba(109, 40, 217, 0.09); --teal: #0f766e; --teal-soft: rgba(15, 118, 110, 0.10); /* A paleta dos gráficos. Ordem fixa: a mesma série tem a mesma cor em toda tela, e mudar a ordem aqui muda a cor de tudo de uma vez. */ --series-1: #d13232; --series-2: #1d4ed8; --series-3: #6d28d9; --series-4: #0f766e; --series-5: #b45309; --series-6: #15803d; --series-7: #be185d; --series-8: #4d7c0f; --chart-grid: rgba(17, 17, 20, 0.08); --chart-area: 0.16; --field-bg: #ffffff; --field-bg-focus: #ffffff; --switch-track: rgba(17, 17, 20, 0.16); --switch-knob: #ffffff; --grid-line: rgba(17, 17, 20, 0.035); --code-bg: #f3f4f6; --code-stripe: rgba(17, 17, 20, 0.02); --radius-sm: 8px; --radius: 12px; --radius-lg: 16px; --radius-xl: 20px; --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", SFMono-Regular, "Roboto Mono", Menlo, Consolas, monospace; --shadow-card: 0 1px 2px rgba(16, 24, 40, 0.04); --shadow-lg: 0 12px 32px rgba(16, 24, 40, 0.12), 0 2px 6px rgba(16, 24, 40, 0.06); --ease: 0.15s ease; --sidebar-width: 216px; --topbar-height: 56px; } /* O tema escuro — a paleta do automation_hub, sem mudar uma regra de componente. */ [data-theme="dark"] { color-scheme: dark; --bg: #0a0a0b; --bg-elevated: #111113; --bg-panel: #161616; --surface: rgba(255, 255, 255, 0.03); --surface-hover: rgba(255, 255, 255, 0.05); --surface-solid: rgba(255, 255, 255, 0.06); --line: rgba(255, 255, 255, 0.07); --line-strong: rgba(255, 255, 255, 0.12); --text: #ffffff; --text-soft: rgba(255, 255, 255, 0.72); --text-muted: rgba(255, 255, 255, 0.45); --text-faint: rgba(255, 255, 255, 0.28); --accent: #e44545; --accent-hover: #d13c3c; --accent-deep: #b91c1c; --accent-soft: rgba(228, 69, 69, 0.12); --accent-line: rgba(228, 69, 69, 0.35); --brand: #e44545; --success: #4ade80; --success-soft: rgba(74, 222, 128, 0.12); --warning: #fbbf24; --warning-soft: rgba(251, 191, 36, 0.12); --info: #60a5fa; --info-soft: rgba(96, 165, 250, 0.12); --danger: #f87171; --danger-soft: rgba(248, 113, 113, 0.12); --violet: #a78bfa; --violet-soft: rgba(167, 139, 250, 0.12); --teal: #2dd4bf; --teal-soft: rgba(45, 212, 191, 0.12); /* Mais claras que as do tema claro: sobre preto, cor escura desaparece. */ --series-1: #f87171; --series-2: #60a5fa; --series-3: #a78bfa; --series-4: #2dd4bf; --series-5: #fbbf24; --series-6: #4ade80; --series-7: #f472b6; --series-8: #a3e635; --chart-grid: rgba(255, 255, 255, 0.06); --chart-area: 0.20; --field-bg: rgba(255, 255, 255, 0.04); --field-bg-focus: rgba(255, 255, 255, 0.06); --switch-track: rgba(255, 255, 255, 0.10); --switch-knob: rgba(255, 255, 255, 0.85); --grid-line: rgba(255, 255, 255, 0.02); --code-bg: rgba(0, 0, 0, 0.40); --code-stripe: rgba(255, 255, 255, 0.015); --shadow-card: none; --shadow-lg: 0 24px 64px rgba(0, 0, 0, 0.5); } /* Uma linha por série de gráfico: a classe define `color`, e as formas do SVG usam * `currentColor`. * * É assim porque atributo de apresentação do SVG (`stroke="..."`) NÃO aceita `var()`. Passar a * cor por `style=` no ajudante funcionaria e espalharia hexadecimal pelo Ruby — no dia da * troca de tema, metade das cores mudaria e a outra metade não. */ .s-1 { color: var(--series-1); } .s-2 { color: var(--series-2); } .s-3 { color: var(--series-3); } .s-4 { color: var(--series-4); } .s-5 { color: var(--series-5); } .s-6 { color: var(--series-6); } .s-7 { color: var(--series-7); } .s-8 { color: var(--series-8); } /* ----------------------------------------------------------------- reset -- */ *, *::before, *::after { box-sizing: border-box; } /* `hidden` precisa vencer qualquer `display` desta folha. O atributo vem do navegador como * `[hidden] { display: none }`, e QUALQUER regra de autor com `display` ganha dele — folha de * autor vence folha do navegador. Sem esta linha, todo elemento que o JavaScript esconde e * mostra continua visível, sem erro no console e sem teste vermelho. */ [hidden] { display: none !important; } /* `color-scheme` vem do bloco de tokens de cada tema, e não daqui: quem desenha o popup do * `select`, as barras de rolagem, o preenchimento automático e o seletor de data é o SISTEMA, * e sem essa declaração ele erra o lado — no tema escuro, um campo escuro abrindo um menu * branco. */ html { -webkit-text-size-adjust: 100%; accent-color: var(--accent); } body { margin: 0; min-height: 100vh; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 14px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4, p, figure, ul, ol, dl, dd { margin: 0; } ul, ol { padding: 0; list-style: none; } a { color: inherit; text-decoration: none; } button, input, select, textarea { font: inherit; color: inherit; } img, svg { display: block; max-width: 100%; } table { border-collapse: collapse; width: 100%; } :focus-visible { outline: 2px solid var(--accent-line); outline-offset: 2px; border-radius: 4px; } /* ------------------------------------------------------------ tipografia -- */ .page-title { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; } .page-subtitle { margin-top: 4px; font-size: 14px; color: var(--text-muted); } .section-title { font-size: 15px; font-weight: 650; letter-spacing: -0.01em; } .eyebrow { font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-faint); } .muted { color: var(--text-muted); } .faint { color: var(--text-faint); } .mono { font-family: var(--font-mono); font-size: 12.5px; } .nums { font-variant-numeric: tabular-nums; } .text-sm { font-size: 13px; } .text-xs { font-size: 12px; } .nowrap { white-space: nowrap; } .strong { font-weight: 650; } .stack { display: flex; flex-direction: column; gap: 20px; } .stack-sm { display: flex; flex-direction: column; gap: 10px; } .stack-xs { display: flex; flex-direction: column; gap: 4px; } .row { display: flex; align-items: center; gap: 10px; } .row-between { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .row-wrap { flex-wrap: wrap; } .row-top { align-items: flex-start; } .grow { flex: 1; min-width: 0; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .right { margin-left: auto; } /* ---------------------------------------------------------------- layout -- */ .app-shell { min-height: 100vh; display: flex; flex-direction: column; } .topbar { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; gap: 16px; height: var(--topbar-height); padding: 0 20px; background: var(--bg-elevated); border-bottom: 1px solid var(--line); } .brand { display: flex; align-items: center; gap: 10px; flex-shrink: 0; } .brand-mark { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(135deg, var(--brand), var(--accent-deep)); box-shadow: 0 0 20px rgba(228, 69, 69, 0.25); color: #fff; } .brand-name { font-size: 15px; font-weight: 700; letter-spacing: -0.02em; } .brand-name span { color: var(--brand); } /* O corpo com barra lateral. A lateral é fixa e o conteúdo rola — trocar de tela dentro de um app não pode mover a navegação de lugar. */ .app-body { flex: 1; display: flex; min-height: 0; } .sidebar { position: sticky; top: var(--topbar-height); align-self: flex-start; flex: none; width: var(--sidebar-width); height: calc(100vh - var(--topbar-height)); overflow-y: auto; padding: 18px 12px 32px; border-right: 1px solid var(--line); background: var(--bg-elevated); scrollbar-width: thin; } .sidebar-group { margin-bottom: 20px; } .sidebar-group > .eyebrow { padding: 0 10px 8px; } .sidebar-link { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm); font-size: 13.5px; font-weight: 500; color: var(--text-muted); transition: background var(--ease), color var(--ease); } .sidebar-link:hover { background: var(--surface-hover); color: var(--text-soft); } .sidebar-link[aria-current="page"] { background: var(--surface-solid); color: var(--text); font-weight: 600; } /* A barrinha de destaque do item ativo. Pseudo-elemento em vez de borda porque borda mudaria a largura do item e faria o texto pular um pixel ao selecionar. */ .sidebar-link[aria-current="page"] { position: relative; } .sidebar-link[aria-current="page"]::before { content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px; width: 2px; border-radius: 2px; background: var(--accent); } .sidebar-link .count { margin-left: auto; padding: 1px 7px; border-radius: 999px; background: var(--surface-solid); font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-muted); } .sidebar-link .count-alert { background: var(--danger-soft); color: var(--danger); } .sidebar-link .count-danger { background: var(--danger-soft); color: var(--danger); } .sidebar-link .count-warning { background: var(--warning-soft); color: var(--warning); } .app-main { flex: 1; min-width: 0; padding: 28px 28px 72px; } .app-main-narrow { max-width: 900px; margin: 0 auto; } .page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin-bottom: 24px; } /* -------------------------------------------------------- troca de app -- */ /* `
` de verdade: abre com teclado, anuncia estado em leitor de tela e fecha ao escolher, tudo sem JavaScript. */ .appswitcher { position: relative; flex: none; min-width: 0; } .appswitcher > summary { display: flex; align-items: center; gap: 9px; max-width: 280px; padding: 6px 10px; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface); cursor: pointer; list-style: none; transition: background var(--ease), border-color var(--ease); } .appswitcher > summary::-webkit-details-marker { display: none; } .appswitcher > summary::marker { content: ""; } .appswitcher > summary:hover { background: var(--surface-hover); border-color: var(--line-strong); } .appswitcher-name { font-size: 13px; font-weight: 600; } .appswitcher-env { font-size: 11px; color: var(--text-faint); } .appswitcher-panel { position: absolute; top: calc(100% + 6px); left: 0; width: 300px; max-height: 70vh; overflow-y: auto; padding: 6px; border-radius: var(--radius); border: 1px solid var(--line-strong); background: var(--bg-panel); box-shadow: var(--shadow-lg); z-index: 130; } .appswitcher-panel a { display: flex; align-items: center; gap: 9px; padding: 8px 10px; border-radius: var(--radius-sm); font-size: 13px; color: var(--text-muted); transition: background var(--ease), color var(--ease); } .appswitcher-panel a:hover { background: var(--surface-hover); color: var(--text); } .appswitcher-panel a[aria-current="page"] { background: var(--surface-solid); color: var(--text); } .appswitcher-foot { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); } /* ------------------------------------------------------------ user menu -- */ .usermenu { position: relative; flex-shrink: 0; margin-left: auto; } .usermenu > summary { display: flex; align-items: center; gap: 9px; padding: 5px 10px 5px 5px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); cursor: pointer; list-style: none; transition: background var(--ease), border-color var(--ease); } .usermenu > summary::-webkit-details-marker { display: none; } .usermenu > summary:hover { background: var(--surface-hover); border-color: var(--line-strong); } .avatar { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: linear-gradient(135deg, var(--brand), var(--accent-deep)); font-size: 10.5px; font-weight: 700; flex-shrink: 0; color: #fff; } .avatar-lg { width: 36px; height: 36px; font-size: 13px; } .usermenu-name { font-size: 13px; font-weight: 550; max-width: 140px; } .usermenu-panel { position: absolute; top: calc(100% + 8px); right: 0; width: 250px; padding: 8px; border-radius: var(--radius); border: 1px solid var(--line-strong); background: var(--bg-panel); box-shadow: var(--shadow-lg); z-index: 130; } .usermenu-head { padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; } .usermenu-foot { margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); } .usermenu-panel a, .usermenu-panel button { display: flex; align-items: center; gap: 9px; width: 100%; padding: 9px 10px; border: 0; border-radius: var(--radius-sm); background: none; font-size: 13px; color: var(--text-muted); text-align: left; cursor: pointer; transition: background var(--ease), color var(--ease); } .usermenu-panel a:hover, .usermenu-panel button:hover { background: var(--surface-hover); color: var(--text); } .usermenu-panel .is-danger:hover { color: var(--danger); } /* ----------------------------------------------------------------- card -- */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px; /* Sombra só no tema claro (no escuro o token é `none`): cartão branco sobre fundo cinza precisa de elevação, cartão de vidro sobre preto precisa de borda. */ box-shadow: var(--shadow-card); } .card-lg { padding: 30px; } .card-sm { padding: 16px; border-radius: var(--radius); } .card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; } .card-flush { padding: 0; overflow: hidden; } .card-flush .card-head { padding: 18px 22px; margin: 0; border-bottom: 1px solid var(--line); } .card-flush .card-foot { padding: 12px 22px; border-top: 1px solid var(--line); } .is-hidden { display: none; } /* Cartão que abre e fecha: `
`/`` de verdade, sem JavaScript. O `summary` leva `card-head` no HTML e herda dali o espaçamento e a linha de baixo. */ .card-collapsible > summary { cursor: pointer; list-style: none; user-select: none; } .card-collapsible > summary::-webkit-details-marker { display: none; } .card-collapsible > summary::marker { content: ""; } .card-collapsible:not([open]) > summary { border-bottom: none; margin-bottom: 0; } .card-collapsible > summary:hover { background: var(--surface-hover); } .card-collapsible > summary:focus-visible { outline: 2px solid var(--accent-line); outline-offset: -3px; } .collapsible-mark { flex: none; margin-top: 2px; color: var(--text-muted); transform: rotate(90deg); transition: transform var(--ease); } .card-collapsible[open] > summary .collapsible-mark { transform: rotate(-90deg); } .grid { display: grid; gap: 14px; } .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid-auto { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } /* ------------------------------------------------------------- stat tile -- */ .stat { display: flex; flex-direction: column; gap: 5px; padding: 16px 18px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); } .stat-label { font-size: 12px; font-weight: 500; color: var(--text-muted); } .stat-value { font-size: 25px; font-weight: 700; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1.15; } .stat-value .unit { font-size: 14px; font-weight: 550; color: var(--text-muted); margin-left: 2px; } .stat-hint { font-size: 12px; color: var(--text-faint); } .stat-accent .stat-value { color: var(--accent); } .stat-danger .stat-value { color: var(--danger); } .stat-warning .stat-value { color: var(--warning); } .stat-success .stat-value { color: var(--success); } /* A comparação com o período anterior. Verde e vermelho não podem ser o único sinal — a seta carrega a direção para quem não distingue as duas cores. */ .delta { display: inline-flex; align-items: center; gap: 3px; font-size: 12px; font-weight: 600; } .delta-worse { color: var(--danger); } .delta-better { color: var(--success); } .delta-flat { color: var(--text-faint); } /* --------------------------------------------------------------- botões -- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 9px 16px; border: 1px solid transparent; border-radius: var(--radius-sm); font-size: 13.5px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: background var(--ease), border-color var(--ease), color var(--ease), opacity var(--ease); } .btn:disabled { opacity: 0.5; cursor: not-allowed; } .btn-primary { background: var(--accent); color: #fff; } .btn-primary:hover:not(:disabled) { background: var(--accent-hover); } .btn-secondary { background: var(--surface-solid); border-color: var(--line-strong); color: var(--text-soft); } .btn-secondary:hover:not(:disabled) { background: var(--surface-hover); color: var(--text); } .btn-ghost { background: none; color: var(--text-muted); } .btn-ghost:hover:not(:disabled) { background: var(--surface-hover); color: var(--text); } .btn-danger { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 28%, transparent); color: var(--danger); } .btn-danger:hover:not(:disabled) { background: color-mix(in srgb, var(--danger) 16%, transparent); } .btn-block { width: 100%; } .btn-sm { padding: 6px 11px; font-size: 12.5px; } .btn-xs { padding: 3px 8px; font-size: 12px; } .btn-lg { padding: 12px 20px; font-size: 14.5px; } .btn.is-copied { background: var(--success-soft); border-color: rgba(74, 222, 128, 0.3); color: var(--success); } /* ------------------------------------------------------------ formulário -- */ .field { display: flex; flex-direction: column; gap: 6px; } .field-label { font-size: 13px; font-weight: 500; color: var(--text-muted); } .field-hint { font-size: 12px; color: var(--text-faint); } .field-error { font-size: 12.5px; color: var(--danger); } .input, .select, .textarea { width: 100%; padding: 10px 13px; background: var(--field-bg); border: 1px solid var(--line-strong); border-radius: var(--radius-sm); color: var(--text); transition: border-color var(--ease), background var(--ease); } .input::placeholder, .textarea::placeholder { color: var(--text-faint); } .input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--accent-line); background: var(--field-bg-focus); box-shadow: 0 0 0 3px var(--accent-soft); } .input.is-invalid, .select.is-invalid { border-color: color-mix(in srgb, var(--danger) 55%, transparent); } .input-mono { font-family: var(--font-mono); font-size: 12.5px; } .select { appearance: none; padding-right: 34px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%23171718' stroke-opacity='0.45' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; } /* A seta é imagem, e `url()` não aceita `var()` — daí a única regra desta folha que sabe qual tema está valendo. */ [data-theme="dark"] .select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%23ffffff' stroke-opacity='0.4' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* Quem escurece o popup do `select` é o `color-scheme` lá em cima — o menu é do sistema. Isto * é o reforço para os navegadores que deixam a página pintar as opções. * * `optgroup` anda junto de `option`, SEMPRE: pintar só as opções faz o navegador desenhar o * menu como "estilizado pela página", e nesse modo o que ficou de fora volta ao padrão claro — * o nome do grupo sai branco no meio de um menu preto. */ .select option, .select optgroup { background: var(--bg-panel); color: var(--text); } .select optgroup { color: var(--text-muted); font-style: normal; font-weight: 600; } .select option:checked, .select option:hover { background: var(--bg-elevated); color: var(--text); } .form-actions { display: flex; align-items: center; gap: 10px; margin-top: 4px; } /* Linha de formulário: campos lado a lado, botão no fim, alinhados pela base. * * É classe, e não `style:` no `form_with`: aquele ajudante aceita `class:` mas DESCARTA * `style:` em silêncio — atributo solto tem de ir em `html: {}`. */ .form-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px; } .form-errors { padding: 12px 14px; border-radius: var(--radius-sm); background: var(--danger-soft); border: 1px solid color-mix(in srgb, var(--danger) 28%, transparent); color: var(--danger); font-size: 13px; } .form-errors ul { display: flex; flex-direction: column; gap: 3px; } /* ---------------------------------------------------------------- toggle -- */ .switch { display: inline-flex; align-items: center; gap: 11px; cursor: pointer; user-select: none; } .switch input { position: absolute; opacity: 0; width: 0; height: 0; } .switch-track { position: relative; width: 42px; height: 24px; border-radius: 999px; background: var(--switch-track); border: 1px solid var(--line-strong); transition: background var(--ease), border-color var(--ease); flex-shrink: 0; } .switch-track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--switch-knob); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.2); transition: transform var(--ease), background var(--ease); } .switch input:checked + .switch-track { background: var(--accent); border-color: var(--accent); } .switch input:checked + .switch-track::after { transform: translateX(18px); background: #fff; } .switch input:focus-visible + .switch-track { outline: 2px solid var(--accent-line); outline-offset: 2px; } .switch-label { font-size: 13.5px; font-weight: 550; } .checks { display: flex; flex-wrap: wrap; gap: 8px 16px; } .check { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; font-size: 13.5px; } .check input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; flex-shrink: 0; } /* ---------------------------------------------------------------- badges -- */ .badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 999px; border: 1px solid transparent; font-size: 11.5px; font-weight: 600; white-space: nowrap; } .badge-on { background: var(--success-soft); border-color: color-mix(in srgb, var(--success) 28%, transparent); color: var(--success); } .badge-off { background: var(--surface-solid); border-color: var(--line-strong); color: var(--text-muted); } .badge-warning { background: var(--warning-soft); border-color: color-mix(in srgb, var(--warning) 28%, transparent); color: var(--warning); } .badge-info { background: var(--info-soft); border-color: color-mix(in srgb, var(--info) 28%, transparent); color: var(--info); } .badge-accent { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); } .badge-danger { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 28%, transparent); color: var(--danger); } .badge-violet { background: var(--violet-soft); border-color: color-mix(in srgb, var(--violet) 28%, transparent); color: var(--violet); } .badge-teal { background: var(--teal-soft); border-color: color-mix(in srgb, var(--teal) 28%, transparent); color: var(--teal); } .badge-mono { font-family: var(--font-mono); font-size: 11px; font-weight: 500; } .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; } .dot-lg { width: 8px; height: 8px; } .dot-pulse { animation: pulse 2s ease-in-out infinite; } @keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } } /* ----------------------------------------------------------------- lista -- */ .list { display: flex; flex-direction: column; } .list-item { display: flex; align-items: center; gap: 14px; padding: 13px 22px; border-bottom: 1px solid var(--line); transition: background var(--ease); } .list-item:last-child { border-bottom: 0; } a.list-item:hover { background: var(--surface-hover); } .list-title { font-size: 13.5px; font-weight: 550; } .list-meta { font-size: 12px; color: var(--text-faint); margin-top: 1px; } /* ---------------------------------------------------------------- tabela -- */ .table th { padding: 10px 22px; border-bottom: 1px solid var(--line); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-faint); text-align: left; white-space: nowrap; } .table td { padding: 12px 22px; border-bottom: 1px solid var(--line); font-size: 13.5px; vertical-align: middle; } .table tbody tr:last-child td { border-bottom: 0; } .table tbody tr:hover { background: var(--surface-hover); } .table .col-right { text-align: right; } .table .col-nums { text-align: right; font-variant-numeric: tabular-nums; } .table-scroll { overflow-x: auto; } .table-compact td { padding-top: 9px; padding-bottom: 9px; } /* Cabeçalho de coluna que ordena. Seta só na coluna ativa: uma seta em cada coluna vira ruído e não diz qual está valendo. */ .table th a { display: inline-flex; align-items: center; gap: 5px; color: inherit; } .table th a:hover { color: var(--text-soft); } .table th[aria-sort] a { color: var(--text-soft); } /* ------------------------------------------------------------- URL box -- */ .urlbox { display: flex; align-items: stretch; gap: 8px; padding: 8px; background: var(--code-bg); border: 1px solid var(--line-strong); border-radius: var(--radius); } .urlbox input { flex: 1; min-width: 0; padding: 6px 8px; border: 0; background: none; font-family: var(--font-mono); font-size: 12.5px; color: var(--text-soft); } .urlbox input:focus { outline: none; color: var(--text); } /* ---------------------------------------------------------------- passos -- */ .steps { display: flex; flex-direction: column; gap: 0; } .step { position: relative; display: flex; gap: 16px; padding-bottom: 24px; } .step:last-child { padding-bottom: 0; } /* A linha que liga um passo ao seguinte, atrás do círculo (que tem fundo sólido). */ .step:not(:last-child)::before { content: ""; position: absolute; top: 28px; left: 13px; bottom: 4px; width: 1px; background: var(--line-strong); } .step-number { position: relative; z-index: 1; display: grid; place-items: center; width: 27px; height: 27px; border-radius: 50%; border: 1.5px solid var(--accent-line); background: var(--bg); color: var(--accent); font-size: 12px; font-weight: 700; flex-shrink: 0; } .step-body { flex: 1; min-width: 0; padding-top: 2px; } .step-title { font-size: 14px; font-weight: 600; margin-bottom: 6px; } .step-text { font-size: 13.5px; color: var(--text-muted); line-height: 1.65; } .step-text code { padding: 1px 5px; border-radius: 4px; background: var(--surface-solid); font-family: var(--font-mono); font-size: 12px; color: var(--text-soft); } .step-extra { margin-top: 12px; } /* ----------------------------------------------------------- empty state -- */ .empty { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 52px 24px; text-align: center; } .empty-icon { display: grid; place-items: center; width: 46px; height: 46px; border-radius: var(--radius); background: var(--surface); border: 1px solid var(--line); color: var(--text-faint); margin-bottom: 4px; } .empty-title { font-size: 14.5px; font-weight: 600; } .empty-text { font-size: 13px; color: var(--text-muted); max-width: 420px; } /* --------------------------------------------------------------- alertas -- */ .flashes { position: fixed; top: 68px; right: 24px; z-index: 200; display: flex; flex-direction: column; gap: 8px; max-width: min(420px, calc(100vw - 48px)); } .flash { display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--radius); border: 1px solid var(--line-strong); background: var(--bg-panel); box-shadow: var(--shadow-lg); font-size: 13.5px; animation: flash-in 0.2s ease; } .flash.is-leaving { opacity: 0; transform: translateX(8px); transition: opacity 0.2s, transform 0.2s; } .flash-notice { border-color: rgba(74, 222, 128, 0.3); } .flash-notice .flash-icon { color: var(--success); } .flash-alert { border-color: rgba(248, 113, 113, 0.3); } .flash-alert .flash-icon { color: var(--danger); } .flash-icon { flex-shrink: 0; margin-top: 1px; } .flash-close { border: 0; background: none; color: var(--text-faint); cursor: pointer; padding: 0 2px; line-height: 1; } .flash-close:hover { color: var(--text); } @keyframes flash-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } /* --------------------------------------------------------------- payload -- */ .payload { margin: 0; padding: 14px 18px; max-height: 460px; overflow: auto; background: var(--code-bg); border-radius: var(--radius); border: 1px solid var(--line); font-family: var(--font-mono); font-size: 12px; line-height: 1.6; color: var(--text-soft); white-space: pre; } .payload-sm { max-height: 220px; font-size: 11.5px; } /* ------------------------------------------------- definições (chave/valor) -- */ .deflist { display: grid; grid-template-columns: minmax(140px, auto) 1fr; gap: 9px 20px; } .deflist dt { font-size: 12.5px; color: var(--text-faint); } .deflist dd { font-size: 13.5px; min-width: 0; overflow-wrap: anywhere; } /* ------------------------------------------------------------- paginação -- */ .pagination { display: flex; align-items: center; justify-content: space-between; gap: 12px; } /* ----------------------------------------------------------- abas (tabs) -- */ .tabs { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--radius-sm); background: var(--surface-solid); border: 1px solid var(--line); } .tabs a { padding: 6px 12px; border-radius: 6px; font-size: 13px; font-weight: 550; color: var(--text-muted); transition: background var(--ease), color var(--ease); } .tabs a:hover { color: var(--text-soft); } .tabs a[aria-current="page"] { background: var(--bg-elevated); color: var(--text); box-shadow: var(--shadow-card); } .tabs-sm a { padding: 4px 10px; font-size: 12.5px; } /* Barra de filtros das listas: seletor de janela, abas de namespace, busca. */ .filterbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 18px; } .filterbar .search { position: relative; min-width: 200px; } .filterbar .search .input { padding-left: 34px; } .filterbar .search svg { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--text-faint); pointer-events: none; } /* -------------------------------------------------------- telas de acesso -- */ .auth-page { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; padding: 48px 0; } /* Brilho e grade: decoração pura, fora do fluxo e sem captura de clique. */ .auth-glow, .auth-grid { position: absolute; inset: 0; pointer-events: none; } .auth-glow { background: radial-gradient(ellipse 60% 40% at 50% 0%, rgba(228, 69, 69, 0.09) 0%, transparent 70%); } .auth-grid { background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 60px 60px; } .auth-container { position: relative; z-index: 10; width: 100%; max-width: 420px; padding: 0 24px; display: flex; flex-direction: column; align-items: center; } .auth-brand { display: flex; align-items: center; gap: 10px; margin-bottom: 30px; } .auth-brand .brand-mark { width: 36px; height: 36px; border-radius: 10px; } .auth-brand .brand-name { font-size: 20px; } .auth-heading { text-align: center; margin-bottom: 26px; } .auth-heading h1 { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; } .auth-heading p { margin-top: 4px; font-size: 14px; color: var(--text-muted); } .auth-card { width: 100%; padding: 28px; border-radius: var(--radius-lg); border: 1px solid var(--line); background: var(--surface); box-shadow: var(--shadow-card); backdrop-filter: blur(12px); } .auth-footer { margin-top: 20px; font-size: 13px; color: var(--text-faint); } .auth-footer a { margin-left: 4px; color: var(--text-soft); text-decoration: underline; } .auth-footer a:hover { color: var(--text); } /* ------------------------------------------------------------ responsivo -- */ @media (max-width: 1100px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 940px) { /* A lateral vira uma faixa que rola na horizontal: em tela estreita ela comeria metade da largura, e o conteúdo é o que importa. */ .app-body { flex-direction: column; } .sidebar { position: static; width: 100%; height: auto; display: flex; gap: 4px; overflow-x: auto; padding: 8px 12px; border-right: 0; border-bottom: 1px solid var(--line); scrollbar-width: none; } .sidebar::-webkit-scrollbar { display: none; } .sidebar-group { margin: 0; display: flex; gap: 4px; } .sidebar-group > .eyebrow { display: none; } .sidebar-link { white-space: nowrap; } .sidebar-link[aria-current="page"]::before { display: none; } .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 720px) { .topbar { gap: 12px; padding: 0 14px; } .brand-name { display: none; } .usermenu-name { display: none; } .app-main { padding: 22px 14px 60px; } .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); } .list-item, .table th, .table td { padding-left: 14px; padding-right: 14px; } .card-flush .card-head, .card-flush .card-foot { padding-left: 14px; padding-right: 14px; } .card { padding: 18px; } .card-lg { padding: 20px; } .flashes { top: auto; bottom: 14px; right: 14px; left: 14px; max-width: none; } .deflist { grid-template-columns: minmax(0, 1fr); gap: 2px 0; } .deflist dd { margin-bottom: 12px; } .appswitcher > summary { max-width: 190px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }