/* * Sistema visual do Analytics. * * DO MONITORING VEM SÓ A PALETA * ----------------------------- * Os dois blocos de token abaixo (`:root` e `[data-theme="dark"]`) são os do monitoring, sem * uma linha mudada — é a identidade do railstools, e ela tem de ser a mesma nos dois produtos. * * **Todo o resto é escrito aqui.** A primeira versão portou a folha inteira do monitoring, e o * preço apareceu rápido: junto com as cores vieram os COMPONENTES dele, com outro vocabulário * e outro peso visual. `.stat` lá é um cartão com fundo, borda e canto arredondado; aqui * `.stat` era um número da régua. As duas regras valiam ao mesmo tempo, e o que esta folha não * redeclarava continuava vindo de lá — a régua nascia com seis caixinhas emolduradas, e a * correção parecia ser "tirar a borda" quando era "não reusar o nome". * * A lição, e é a terceira vez neste projeto (`Ingest::Event` e o módulo `Rack` da gem foram as * outras duas): herdar um vocabulário inteiro para aproveitar uma parte dele custa mais do que * escrever a parte. * * COMO O TEMA FUNCIONA * -------------------- * Toda cor é token. O bloco escuro 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ê. Há teste travando as duas coisas. * * Quem escreve `data-theme` no é um script inline no , antes da primeira pintura * — depois seria um flash branco a cada navegação. * * O DESENHO * --------- * Linha e espaço, nunca moldura. Cartão tem borda fina e nada mais; o que separa por dentro é * um traço de 1px. É o que mantém a tela leve com muita informação junta, que é o problema de * um painel de audiência. * * Escrito à mão: Propshaft, sem build de node. * Ordem: tokens -> reset -> tipografia -> layout -> componentes -> utilidades. * As telas específicas (painel, quebras, gráfico) 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; } [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); } /* ----------------------------------------------------------------- reset -- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--text); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; } h1, h2, h3, p, ul, ol, figure { margin: 0; } ul, ol { padding: 0; list-style: none; } img, svg { display: block; max-width: 100%; } button { font: inherit; color: inherit; } a { color: inherit; text-decoration: none; } a:hover { color: var(--text); } /* O foco só aparece para quem navega por teclado. Removê-lo de todo mundo deixa a tela inutilizável sem mouse; deixá-lo no clique polui cada botão apertado. */ :focus-visible { outline: 2px solid var(--accent-line); outline-offset: 2px; border-radius: 4px; } /* O atributo `hidden` do navegador PERDE para qualquer `display` de folha de autor, e há componentes aqui que são `flex`. Sem o `!important`, o que o JavaScript esconde nasce visível — sem erro em lugar nenhum. */ [hidden] { display: none !important; } /* ------------------------------------------------------------ tipografia -- */ h1 { font-size: 20px; font-weight: 600; letter-spacing: -0.015em; } h2 { font-size: 15px; font-weight: 600; } h3 { font-size: 13px; font-weight: 600; } .text-sm { font-size: 13px; } .text-xs { font-size: 12px; } .strong { font-weight: 600; } .muted { color: var(--text-muted); } .faint { color: var(--text-faint); } .grow { flex: 1; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } /* ---------------------------------------------------------------- layout -- */ .app-shell { min-height: 100vh; display: flex; flex-direction: column; } .topbar { display: flex; align-items: center; gap: 14px; height: var(--topbar-height); padding: 0 20px; border-bottom: 1px solid var(--line); background: var(--bg-elevated); position: sticky; top: 0; z-index: 30; } .brand { display: flex; align-items: center; gap: 8px; font-weight: 600; letter-spacing: -0.01em; } .brand-mark { display: grid; place-items: center; color: var(--accent); } .brand-name span { color: var(--accent); } .app-body { flex: 1; display: flex; align-items: flex-start; } .sidebar { width: var(--sidebar-width); flex: none; padding: 18px 12px; position: sticky; top: var(--topbar-height); } .sidebar-link { display: flex; align-items: center; gap: 10px; padding: 8px 11px; border-radius: 7px; font-size: 13px; color: var(--text-muted); transition: color var(--ease), background var(--ease); } .sidebar-link:hover { color: var(--text); background: var(--surface-hover); } .sidebar-link.is-current { color: var(--accent); } .app-main { flex: 1; min-width: 0; padding: 24px 24px 56px; } .app-main-narrow { max-width: 1180px; margin: 0 auto; } /* Sem barra lateral no celular: ela come metade da largura de uma tela que já é estreita, e o painel é justamente o que precisa de largura. */ @media (max-width: 860px) { .sidebar { display: none; } .app-main { padding: 18px 14px 44px; } .topbar { padding: 0 14px; } } /* ------------------------------------------------------------ componentes -- */ .card { border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-panel); box-shadow: var(--shadow-card); } .card-head { padding: 13px 16px; border-bottom: 1px solid var(--line); font-size: 14px; font-weight: 600; } .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 14px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text-soft); font-size: 13px; font-weight: 500; cursor: pointer; transition: color var(--ease), border-color var(--ease), background var(--ease); } .btn:hover { color: var(--text); border-color: var(--line-strong); } .btn-primary { background: var(--accent); border-color: var(--accent); color: #fff; } .btn-primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; } .btn-ghost { border-color: transparent; background: transparent; } .btn-ghost:hover { background: var(--surface-hover); border-color: transparent; } .btn-block { width: 100%; } /* O formulário. Rótulo em cima do campo, sempre: ao lado ele obriga a uma largura fixa que quebra no celular, e dentro (placeholder como rótulo) some quando a pessoa começa a digitar — justo quando ela ainda precisa saber o que está preenchendo. */ .form { max-width: 460px; } .field { margin-bottom: 15px; } .field label { display: block; margin-bottom: 5px; font-size: 12px; font-weight: 500; color: var(--text-soft); } .field input[type="text"], .field input[type="email"], .field input[type="password"], .field input[type="number"], .field select, .field textarea, .select { width: 100%; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-elevated); color: var(--text); font: inherit; font-size: 14px; } .field input:focus, .field select:focus, .select:focus { outline: none; border-color: var(--accent-line); box-shadow: 0 0 0 3px var(--accent-soft); } .empty { padding: 44px 24px; text-align: center; border: 1px dashed var(--line-strong); border-radius: var(--radius); background: var(--surface); } .empty h2 { margin-bottom: 6px; } .empty p { color: var(--text-muted); margin-bottom: 16px; } .avatar { display: grid; place-items: center; width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--accent-soft); color: var(--accent); font-size: 11px; font-weight: 600; } /* O menu do usuário é `
`: abre e fecha sem JavaScript, e teclado e leitor de tela vêm de graça. O controlador só fecha ao clicar fora. */ .usermenu { position: relative; margin-left: auto; } .usermenu > summary { display: flex; align-items: center; gap: 8px; padding: 5px 9px 5px 5px; border-radius: 8px; cursor: pointer; list-style: none; font-size: 13px; color: var(--text-soft); } .usermenu > summary::-webkit-details-marker { display: none; } .usermenu > summary:hover { background: var(--surface-hover); color: var(--text); } .usermenu-name { max-width: 150px; } .usermenu-panel { position: absolute; top: calc(100% + 6px); right: 0; min-width: 230px; z-index: 40; padding: 5px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-elevated); box-shadow: var(--shadow-lg); } .usermenu-head { padding: 9px 11px 11px; border-bottom: 1px solid var(--line); margin-bottom: 5px; } .usermenu-panel a, .usermenu-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 11px; border: 0; border-radius: 7px; background: transparent; color: var(--text-soft); font-size: 13px; text-align: left; cursor: pointer; } .usermenu-panel a:hover, .usermenu-item:hover { background: var(--surface-hover); color: var(--text); } .usermenu-panel form { margin: 0; } /* ------------------------------------------------------- telas de acesso -- */ /* Fundo com brilho e grade, como no resto do railstools — é a única tela do produto que a pessoa vê antes de entrar, e é onde a identidade aparece. */ .auth-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; position: relative; overflow: hidden; } .auth-glow { position: absolute; inset: -30% 20% auto; height: 60vh; background: radial-gradient(circle at 50% 0, var(--accent-soft), transparent 70%); pointer-events: none; } .auth-grid { position: absolute; inset: 0; background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(circle at 50% 30%, #000, transparent 70%); pointer-events: none; opacity: 0.6; } .auth-container { position: relative; width: 100%; max-width: 380px; } .auth-brand { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 20px; font-size: 16px; font-weight: 600; } .auth-card { padding: 26px; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-panel); box-shadow: var(--shadow-lg); } .auth-card h1 { margin-bottom: 18px; font-size: 18px; } .auth-card .form { max-width: none; } /* ---------------------------------------------------------------- avisos -- */ .flashes { position: fixed; right: 18px; bottom: 18px; z-index: 60; display: grid; gap: 8px; } .flashes .alert { display: flex; align-items: center; gap: 10px; min-width: 260px; box-shadow: var(--shadow-lg); background: var(--bg-elevated); margin: 0; } .flash-aviso .flash-icon { color: var(--success); } .flash-alerta { border-color: var(--danger); } .flash-alerta .flash-icon { color: var(--danger); } .flash-icon { display: grid; place-items: center; flex: none; } .flash-close { border: 0; background: transparent; color: var(--text-faint); cursor: pointer; padding: 0; } .flash-close:hover { color: var(--text); } .is-leaving { opacity: 0; transition: opacity 0.2s ease; } .is-copied { color: var(--success); } /* ------------------------------------------------------- avisos em linha -- */ .alert { padding: 11px 14px; border-radius: 9px; border: 1px solid var(--line); margin-bottom: 16px; font-size: 13px; } .alert ul { padding-left: 18px; list-style: disc; } .alert-danger { border-color: var(--danger); background: var(--danger-soft); } /* -------------------------------------------------------- troca de site -- */ .switcher { position: relative; } .switcher-trigger { display: inline-flex; align-items: center; gap: 7px; padding: 6px 11px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--text-soft); font-size: 13px; cursor: pointer; } .switcher-trigger:hover { color: var(--text); border-color: var(--line-strong); } /* A lista FLUTUA. Ocupando espaço, ela empurraria a página inteira para baixo a cada abertura — e o que está logo abaixo é justamente o que a pessoa veio ler. */ .switcher-menu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 220px; z-index: 40; padding: 5px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg-elevated); box-shadow: var(--shadow-lg); } .switcher-item { display: block; padding: 7px 10px; border-radius: 6px; font-size: 13px; color: var(--text-soft); } .switcher-item:hover { background: var(--surface-hover); color: var(--text); } .switcher-item.is-current { color: var(--accent); } .switcher-item-action { border-top: 1px solid var(--line); margin-top: 5px; padding-top: 9px; } /* ------------------------------------------------------------- listagem -- */ .card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; } .card-link { display: block; padding: 16px; transition: border-color var(--ease), transform var(--ease); } .card-link:hover { border-color: var(--accent-line); transform: translateY(-1px); } .card-link h2 { margin-bottom: 3px; } /* ----------------------------------------------------------- utilidades -- */ /* A classe que o JavaScript alterna. Sem esta regra, todo trecho "escondido" nasce ABERTO — e não há erro em lugar nenhum, só um menu que já vem aberto na carga da página. */ .is-hidden { display: none; } .hint { font-size: 12px; color: var(--text-muted); margin-top: 6px; } .auth-alt { margin-top: 18px; text-align: center; font-size: 13px; color: var(--text-muted); } .auth-alt a { color: var(--accent); }