* { box-sizing: border-box; margin: 0; padding: 0; } /* * Cores do sistema, por tema. * * As telas usam `var(--nome)` em vez de hex fixo. O escuro e o visual que o * sistema sempre teve, valor por valor; o claro escurece as cores de destaque * para o texto continuar legivel sobre fundo branco. * * Os valores ficam em hex de 6 digitos de proposito: os graficos em canvas * leem a variavel e acrescentam a transparencia no fim (ver `corCanvas`). * * Quem troca o tema e `utils/tema.ts`, pelo atributo `data-tema` do . */ :root { color-scheme: dark; /* Fundos e superficies */ --fundo: #0D0F17; --fundo-2: #0E1017; --fundo-3: #0F1219; --superficie: #13161F; --superficie-2: #13151F; --campo: #1A1D2A; /* Bordas */ --borda: #252836; --borda-2: #2A2D3E; --borda-3: #353849; --borda-forte: #333750; /* Texto, do mais forte ao mais apagado */ --texto: #E8EAF0; --texto-alt: #E4E7F0; --texto-suave: #A0A8C0; --texto-2: #7B82A0; --texto-4: #5A6080; --texto-3: #4A5070; /* Destaques */ --azul: #4F8EF7; --azul-claro: #38BDF8; /* Ano mais antigo dos graficos de evolucao: presente, mas sem competir. */ --azul-marinho: #3B5BA5; --ciano: #22D3EE; --verde: #34D399; --vermelho: #F87171; --vermelho-claro: #FCA5A5; --amarelo: #FBBF24; --laranja: #FB923C; --laranja-2: #F97316; --roxo: #A78BFA; --roxo-2: #9333EA; --rosa: #F472B6; /* Fundos tingidos pelos destaques (avisos, etiquetas, item ativo) */ --azul-fundo: #1C2E52; --azul-fundo-2: #1A2A4A; --azul-fundo-3: #1A3A6A; --azul-fundo-4: #2A4A8A; --verde-fundo: #0D3326; --verde-fundo-2: #1A3A2A; --verde-fundo-3: #1A4A2A; --verde-fundo-4: #134D38; --vermelho-fundo: #3B1010; --vermelho-fundo-2: #2D1B1B; --amarelo-fundo: #2E1F06; --amarelo-fundo-2: #3A2A0B; --roxo-fundo: #2A1A52; /* Linhas de grade dos graficos */ --grade-forte: rgba(255,255,255,0.2); --grade: rgba(255,255,255,0.07); --grade-fraca: rgba(255,255,255,0.06); } :root[data-tema="claro"] { color-scheme: light; --fundo: #F3F4F8; --fundo-2: #ECEEF3; --fundo-3: #EEF0F5; --superficie: #FFFFFF; --superficie-2: #FFFFFF; --campo: #F1F3F8; --borda: #DDE1EA; --borda-2: #D5DAE4; --borda-3: #CDD2DD; --borda-forte: #C5CBD8; --texto: #171A26; --texto-alt: #1F2330; --texto-suave: #4A5070; --texto-2: #5A6180; --texto-4: #6E7592; --texto-3: #858BA3; --azul: #2563EB; --azul-claro: #0284C7; --azul-marinho: #1E3A8A; --ciano: #0891B2; --verde: #059669; --vermelho: #DC2626; --vermelho-claro: #B91C1C; --amarelo: #B45309; --laranja: #EA580C; --laranja-2: #C2410C; --roxo: #7C3AED; --roxo-2: #9333EA; --rosa: #DB2777; --azul-fundo: #DBEAFE; --azul-fundo-2: #E0ECFF; --azul-fundo-3: #BFDBFE; --azul-fundo-4: #BFDBFE; --verde-fundo: #D1FAE5; --verde-fundo-2: #DCFCE7; --verde-fundo-3: #BBF7D0; --verde-fundo-4: #A7F3D0; --vermelho-fundo: #FEE2E2; --vermelho-fundo-2: #FDECEC; --amarelo-fundo: #FEF3C7; --amarelo-fundo-2: #FEF3C7; --roxo-fundo: #EDE9FE; --grade-forte: rgba(15,20,40,0.2); --grade: rgba(15,20,40,0.08); --grade-fraca: rgba(15,20,40,0.06); } body { font-family: 'Inter', sans-serif; background: var(--fundo); color: var(--texto); min-height: 100vh; } /* * Preenchimento automatico do navegador, sem o fundo amarelado. * * Quando o navegador ou o gerenciador de senhas preenche e-mail, senha ou o * codigo do segundo fator, ele pinta o campo de um amarelo-alaranjado * proprio. Em tema escuro fica gritante e destoa do resto da tela. * * Esse fundo NAO cede a `background-color` — o navegador o desenha por cima. * O que funciona e recortar o fundo do autofill ao contorno do texto * (`background-clip: text`), o que na pratica o faz sumir e deixa aparecer o * fundo que cada campo ja tem. Assim vale para qualquer tela, sem fixar cor * aqui nem precisar saber qual campo usa qual tom. * * `text-fill-color` vem junto porque, sem ela, o texto preenchido herdaria a * cor que o navegador escolheu para contrastar com o amarelo. */ input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active { -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: var(--texto); caret-color: var(--texto); /* O amarelo ainda pisca no instante do preenchimento: a transicao absurda * empurra esse quadro para um futuro que nao chega. */ transition: background-color 600000s 0s; } /* Firefox usa um filtro em vez de fundo, e tem o seletor padronizado. */ input:autofill { filter: none; } /* Campo numerico sem as setinhas de aumentar/diminuir: digita-se o numero direto. */ .sem-setas::-webkit-outer-spin-button, .sem-setas::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .sem-setas { -moz-appearance: textfield; appearance: textfield; }