/* * Sistema visual do Railstools ID. * * DA CASA VEM SÓ A PALETA * ----------------------- * Os dois blocos de token abaixo (`:root` e `[data-theme="dark"]`) são os do monitoring e do * analytics, sem uma linha mudada — é a identidade do railstools, e ela tem de ser a mesma em * todos os produtos. Este é o app onde isso mais pesa: quem entra aqui vai para os outros três, * e uma troca de cor no meio do caminho se lê como ter saído do lugar. * * **Todo o resto é escrito aqui.** O analytics documenta o preço de portar a folha inteira do * monitoring: junto com as cores vieram os COMPONENTES dele, com outro vocabulário, e o que esta * folha não redeclarava continuava valendo — `.stat` lá é um cartão, aqui era um número. 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: 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. São duas famílias de tela e elas dividem os mesmos tokens: * a VITRINE (pública, respiro grande, texto grande) e o PAINEL (dentro da conta, denso). * * Escrito à mão: Propshaft, sem build de node. * Ordem: tokens -> reset -> tipografia -> layout -> componentes -> utilidades. * A vitrine está 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: var(--font); 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; } /* 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` — o menu da pessoa e os avisos. Sem o `!important`, o que o JavaScript esconde nasce visível, sem erro em lugar nenhum. */ [hidden] { display: none !important; } /* ------------------------------------------------------------ tipografia -- */ h1 { font-size: 22px; font-weight: 600; letter-spacing: -0.02em; } h2 { font-size: 16px; font-weight: 600; letter-spacing: -0.01em; } h3 { font-size: 14px; font-weight: 600; } .lead { font-size: 15px; color: var(--text-soft); } .muted { color: var(--text-muted); } .faint { color: var(--text-faint); } .mono { font-family: var(--font-mono); font-size: 12px; } /* ---------------------------------------------------------------- layout -- */ /* A casca de TODA tela: barra no topo, conteúdo embaixo. A vitrine usa a mesma, com a barra em outro estado — não há duas cascas, porque duas divergiriam no primeiro ajuste. */ .shell { min-height: 100vh; display: flex; flex-direction: column; } .main { flex: 1; width: 100%; max-width: 960px; margin: 0 auto; padding: 32px 20px 64px; } .main-wide { max-width: 1120px; } .main-narrow { max-width: 420px; padding-top: 56px; } .stack { display: flex; flex-direction: column; gap: 16px; } .stack-lg { display: flex; flex-direction: column; gap: 28px; } .stack-sm { display: flex; flex-direction: column; gap: 8px; } .row { display: flex; align-items: center; gap: 12px; } .row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .row-wrap { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .grow { flex: 1; min-width: 0; } /* ---------------------------------------------------------------- topbar -- */ .topbar { position: sticky; top: 0; z-index: 20; 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: 9px; font-weight: 600; letter-spacing: -0.01em; } .brand-mark { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 7px; background: var(--accent); color: #fff; font-size: 13px; font-weight: 700; } .brand-name span { color: var(--accent); } .topbar-nav { display: flex; align-items: center; gap: 4px; margin-left: 8px; } .topbar-link { padding: 6px 10px; border-radius: var(--radius-sm); color: var(--text-muted); font-size: 13px; transition: background var(--ease), color var(--ease); } .topbar-link:hover { background: var(--surface-hover); color: var(--text); } .topbar-link-on { background: var(--surface-solid); color: var(--text); } /* -------------------------------------------------------- menu da pessoa -- */ /* `
` e não JavaScript: nasce fechado sozinho, e teclado e leitor de tela vêm de graça. É o mesmo caminho que o automation_hub usa no menu do cabeçalho. */ .menu { position: relative; } .menu > summary { list-style: none; cursor: pointer; } .menu > summary::-webkit-details-marker { display: none; } .avatar { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--surface-solid); border: 1px solid var(--line); font-size: 11px; font-weight: 600; color: var(--text-soft); } .menu-pop { position: absolute; right: 0; top: calc(100% + 8px); min-width: 216px; padding: 6px; background: var(--bg-elevated); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-lg); } .menu-head { padding: 8px 10px 10px; border-bottom: 1px solid var(--line); margin-bottom: 6px; } .menu-item { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 10px; border: 0; border-radius: var(--radius-sm); background: none; text-align: left; font-size: 13px; color: var(--text-soft); cursor: pointer; } .menu-item:hover { background: var(--surface-hover); color: var(--text); } .menu-form { margin: 0; } /* --------------------------------------------------------------- cartões -- */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); } .card-pad { padding: 20px; } .card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--line); } /* A lista de itens dentro de um cartão: o que separa é um traço, nunca outra moldura. */ .list > li { display: flex; align-items: center; gap: 14px; padding: 14px 20px; border-top: 1px solid var(--line); } .list > li:first-child { border-top: 0; } .item-mark { display: grid; place-items: center; flex: none; width: 34px; height: 34px; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent); font-size: 13px; font-weight: 700; } .item-title { font-weight: 600; } .item-sub { font-size: 13px; color: var(--text-muted); } .empty { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 36px 20px; text-align: center; color: var(--text-muted); } /* --------------------------------------------------------------- botões -- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 8px 14px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); font-size: 13px; font-weight: 500; cursor: pointer; transition: background var(--ease), border-color var(--ease), color var(--ease); } .btn:hover { background: var(--surface-hover); } .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-quiet { border-color: transparent; background: none; color: var(--text-muted); } .btn-quiet:hover { background: var(--surface-hover); color: var(--text); } .btn-lg { padding: 11px 20px; font-size: 14px; border-radius: var(--radius); } .btn-block { width: 100%; } .btn-form { display: inline; margin: 0; } /* ------------------------------------------------------------ formulário -- */ .field { display: flex; flex-direction: column; gap: 6px; } .field label { font-size: 13px; font-weight: 500; color: var(--text-soft); } .field input { width: 100%; padding: 9px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--field-bg); color: var(--text); font: inherit; transition: border-color var(--ease), background var(--ease); } .field input:focus { outline: none; border-color: var(--accent-line); background: var(--field-bg-focus); } .field-hint { font-size: 12px; color: var(--text-muted); } .errors { padding: 12px 14px; border: 1px solid var(--danger); border-radius: var(--radius-sm); background: var(--danger-soft); color: var(--text); font-size: 13px; } .errors li + li { margin-top: 4px; } /* -------------------------------------------------------- tela de acesso -- */ /* Entrar e criar conta: coluna estreita, centrada, sem barra de navegação em volta — quem está aqui tem uma decisão só a tomar. */ .access { display: flex; flex-direction: column; align-items: center; gap: 24px; } .access-card { width: 100%; padding: 24px; } .access-title { text-align: center; margin-bottom: 4px; } .access-sub { text-align: center; font-size: 13px; color: var(--text-muted); } .access-foot { font-size: 13px; color: var(--text-muted); text-align: center; } .access-foot a { color: var(--accent); font-weight: 500; } /* ---------------------------------------------------------------- avisos -- */ .flashes { position: fixed; right: 16px; bottom: 16px; z-index: 60; display: flex; flex-direction: column; gap: 8px; } .alert { display: flex; align-items: center; gap: 10px; max-width: 400px; padding: 11px 14px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--bg-elevated); box-shadow: var(--shadow-lg); font-size: 13px; } .flash-aviso { border-left: 3px solid var(--success); } .flash-alerta { border-left: 3px solid var(--danger); } .flash-close { border: 0; background: none; color: var(--text-faint); cursor: pointer; padding: 0 2px; } .flash-close:hover { color: var(--text); } /* ------------------------------------------------------------ utilidades -- */ .tag { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; background: var(--surface-solid); font-size: 11px; font-weight: 500; color: var(--text-muted); } .tag-on { background: var(--success-soft); color: var(--success); } .sep { height: 1px; background: var(--line); border: 0; margin: 0; } .center { text-align: center; } @media (max-width: 640px) { .main { padding: 20px 14px 48px; } .topbar { padding: 0 14px; gap: 10px; } .topbar-nav { display: none; } .flashes { left: 14px; right: 14px; } .alert { max-width: none; } }