/* ========================================================================== Financeiro Familiar — sistema de design -------------------------------------------------------------------------- Estratégia: usar a API nativa de temas do Bootstrap 5.3 (`data-bs-theme` no ) e REDEFINIR variáveis `--bs-*`. Nada aqui deve "brigar" com o Bootstrap: não sobrescrevemos regras dele com !important, só trocamos os tokens que ele mesmo consome. Sumário: 1. Tokens neutros (independem de tema) 2. Tema claro 3. Tema escuro 4. Superfícies e componentes que precisam de token próprio 5. Classes semânticas de dinheiro 6. Densidade e legibilidade de tabela 7. Navbar 8. Utilitários do projeto (swatch, honeypot, cards de tela pública) ========================================================================== */ /* ========================================================================== 1. Tokens neutros (independem de tema) ========================================================================== */ :root { --fin-radius: .625rem; --fin-radius-sm: .375rem; --fin-table-cell-y: .5rem; /* Raio padrão de TODO o Bootstrap (botão, card, input, modal, alerta...). */ --bs-border-radius: var(--fin-radius); --bs-border-radius-sm: var(--fin-radius-sm); --bs-border-radius-lg: .875rem; /* Altura de linha um pouco mais generosa que o padrão do Bootstrap. */ --bs-body-line-height: 1.55; } /* ========================================================================== 2. Tema claro -------------------------------------------------------------------------- Escrito também em `:root` (sem seletor de tema) porque, com JavaScript desligado, o snippet anti-FOUC não roda e o fica SEM `data-bs-theme`. Nesse caso o Bootstrap já se comporta como claro — e os tokens `--fin-*` precisam existir do mesmo jeito, senão `.fin-in` / `.fin-out` ficariam sem cor nenhuma. ========================================================================== */ :root, [data-bs-theme="light"] { color-scheme: light; /* Marca */ --bs-primary: #2f6fed; --bs-primary-rgb: 47, 111, 237; --bs-primary-text-emphasis: #1c4bab; --bs-primary-bg-subtle: #e6eeff; --bs-primary-border-subtle: #b9cdfa; --fin-primary-hover: #2457c2; --fin-primary-active: #1e49a3; --fin-primary-contrast: #ffffff; /* Base */ --bs-body-bg: #f7f7fb; --bs-body-bg-rgb: 247, 247, 251; --bs-body-color: #1f2430; --bs-body-color-rgb: 31, 36, 48; --bs-emphasis-color: #0d1017; --bs-emphasis-color-rgb: 13, 16, 23; --bs-secondary-color: rgba(31, 36, 48, .66); --bs-secondary-bg: #e6e9f0; --bs-secondary-bg-rgb: 230, 233, 240; --bs-tertiary-bg: #eef0f6; --bs-tertiary-bg-rgb: 238, 240, 246; --bs-border-color: #dde1ea; --bs-border-color-translucent: rgba(13, 16, 23, .1); /* Links */ --bs-link-color: #2f6fed; --bs-link-color-rgb: 47, 111, 237; --bs-link-hover-color: #1e49a3; --bs-link-hover-color-rgb: 30, 73, 163; /* Código inline (token público do lançamento rápido, no painel) */ --bs-code-color: #b5197a; /* Superfícies */ --fin-surface: #ffffff; --fin-surface-border: #e3e6ee; --fin-input-bg: #ffffff; --fin-shadow-card: 0 1px 2px rgba(13, 16, 23, .05), 0 1px 3px rgba(13, 16, 23, .06); /* Dinheiro */ --fin-income: #15803d; --fin-expense: #b91c1c; --fin-neutral: var(--bs-body-color); /* Paleta categórica de gráficos (Fase 5 lê via getComputedStyle). 8 matizes diferentes — azul, laranja, verde, roxo, carmim, ciano, mostarda, chumbo — todas escuras o bastante para o fundo claro. */ --fin-chart-1: #2f6fed; --fin-chart-2: #c2410c; --fin-chart-3: #12805c; --fin-chart-4: #7048e8; --fin-chart-5: #c2255c; --fin-chart-6: #0b7285; --fin-chart-7: #8f6a00; --fin-chart-8: #495057; } /* ========================================================================== 3. Tema escuro -------------------------------------------------------------------------- Vem DEPOIS do bloco claro de propósito: `[data-bs-theme="dark"]` e `[data-bs-theme="light"]` têm a mesma especificidade, então quem vence é o último declarado. Isso também sobrescreve o tema escuro nativo do Bootstrap, que está definido antes (bootstrap.min.css é carregado primeiro). ========================================================================== */ [data-bs-theme="dark"] { color-scheme: dark; /* Marca — clareada para manter contraste sobre fundo escuro. */ --bs-primary: #6f9bff; --bs-primary-rgb: 111, 155, 255; --bs-primary-text-emphasis: #a8c2ff; --bs-primary-bg-subtle: #16233f; --bs-primary-border-subtle: #2c4a86; --fin-primary-hover: #8db1ff; --fin-primary-active: #a3c0ff; /* Primária clara pede texto escuro por cima (contraste ~8:1). */ --fin-primary-contrast: #10131a; /* Base */ --bs-body-bg: #14161c; --bs-body-bg-rgb: 20, 22, 28; --bs-body-color: #e3e6ed; --bs-body-color-rgb: 227, 230, 237; --bs-emphasis-color: #ffffff; --bs-emphasis-color-rgb: 255, 255, 255; --bs-secondary-color: rgba(227, 230, 237, .68); --bs-secondary-bg: #232733; --bs-secondary-bg-rgb: 35, 39, 51; --bs-tertiary-bg: #1b1e26; --bs-tertiary-bg-rgb: 27, 30, 38; --bs-border-color: #2e3341; --bs-border-color-translucent: rgba(255, 255, 255, .12); /* Links */ --bs-link-color: #8db1ff; --bs-link-color-rgb: 141, 177, 255; --bs-link-hover-color: #b3caff; --bs-link-hover-color-rgb: 179, 202, 255; /* Código inline — o #d63384 padrão do Bootstrap não alcança 4,5:1 aqui. */ --bs-code-color: #ff9ec9; /* Superfícies */ --fin-surface: #1b1e26; --fin-surface-border: #2b3040; --fin-input-bg: #10131a; --fin-shadow-card: 0 1px 2px rgba(0, 0, 0, .5), 0 1px 3px rgba(0, 0, 0, .35); /* Dinheiro — os tons #15803d / #b91c1c do claro somem no fundo escuro. */ --fin-income: #4ade80; --fin-expense: #f87171; --fin-neutral: var(--bs-body-color); /* Paleta categórica — mesmos 8 matizes, com luminosidade elevada. */ --fin-chart-1: #6f9bff; --fin-chart-2: #ff9f45; --fin-chart-3: #4ecfa0; --fin-chart-4: #b197fc; --fin-chart-5: #ff8fab; --fin-chart-6: #4dd0e1; --fin-chart-7: #e8c468; --fin-chart-8: #b0b8c4; } /* ========================================================================== 4. Superfícies e componentes que precisam de token próprio -------------------------------------------------------------------------- O Bootstrap faz `--bs-card-bg: var(--bs-body-bg)`. No tema escuro isso deixa o card exatamente da cor do fundo, ou seja, invisível. Por isso existe `--fin-surface`: um degrau acima do fundo, nos dois temas. ========================================================================== */ body { background-color: var(--bs-body-bg); } .card { --bs-card-bg: var(--fin-surface); --bs-card-border-color: var(--fin-surface-border); box-shadow: var(--fin-shadow-card); } .modal-content, .dropdown-menu { --bs-modal-bg: var(--fin-surface); --bs-modal-border-color: var(--fin-surface-border); --bs-dropdown-bg: var(--fin-surface); --bs-dropdown-border-color: var(--fin-surface-border); --bs-dropdown-link-hover-bg: var(--bs-tertiary-bg); } .form-control, .form-select { background-color: var(--fin-input-bg); } .form-control:focus, .form-select:focus { border-color: rgba(var(--bs-primary-rgb), .6); box-shadow: 0 0 0 .2rem rgba(var(--bs-primary-rgb), .25); } /* O Bootstrap fixa as cores de `.btn-primary` no CSS compilado (#0d6efd), sem passar por `--bs-primary`. Reamarramos as variáveis do próprio componente. */ .btn-primary { --bs-btn-bg: var(--bs-primary); --bs-btn-border-color: var(--bs-primary); --bs-btn-color: var(--fin-primary-contrast); --bs-btn-hover-bg: var(--fin-primary-hover); --bs-btn-hover-border-color: var(--fin-primary-hover); --bs-btn-hover-color: var(--fin-primary-contrast); --bs-btn-active-bg: var(--fin-primary-active); --bs-btn-active-border-color: var(--fin-primary-active); --bs-btn-active-color: var(--fin-primary-contrast); --bs-btn-disabled-bg: var(--bs-primary); --bs-btn-disabled-border-color: var(--bs-primary); --bs-btn-disabled-color: var(--fin-primary-contrast); --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb); } .btn-outline-primary { --bs-btn-color: var(--bs-primary); --bs-btn-border-color: var(--bs-primary); --bs-btn-hover-bg: var(--bs-primary); --bs-btn-hover-border-color: var(--bs-primary); --bs-btn-hover-color: var(--fin-primary-contrast); --bs-btn-active-bg: var(--bs-primary); --bs-btn-active-border-color: var(--bs-primary); --bs-btn-active-color: var(--fin-primary-contrast); --bs-btn-disabled-color: var(--bs-primary); --bs-btn-disabled-border-color: var(--bs-primary); --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb); } /* `.btn-outline-secondary` do Bootstrap usa #6c757d fixo: ilegível no escuro. */ .btn-outline-secondary { --bs-btn-color: var(--bs-body-color); --bs-btn-border-color: var(--bs-border-color); --bs-btn-hover-bg: var(--bs-tertiary-bg); --bs-btn-hover-border-color: var(--bs-border-color); --bs-btn-hover-color: var(--bs-emphasis-color); --bs-btn-active-bg: var(--bs-secondary-bg); --bs-btn-active-border-color: var(--bs-border-color); --bs-btn-active-color: var(--bs-emphasis-color); --bs-btn-disabled-color: var(--bs-secondary-color); --bs-btn-disabled-border-color: var(--bs-border-color); } .btn-outline-danger { --bs-btn-color: var(--fin-expense); --bs-btn-border-color: rgba(220, 53, 69, .55); --bs-btn-hover-color: #ffffff; } /* Rótulo estático dentro de um `.btn-group` (ex.: "2026-08" entre as setas). */ .fin-btn-label { background-color: var(--bs-tertiary-bg); color: var(--bs-body-color); border-color: var(--bs-border-color); } /* ========================================================================== 5. Classes semânticas de dinheiro ========================================================================== */ /* * As classes de dinheiro precisam vencer o Bootstrap dentro de uma tabela. * `.table > :not(caption) > * > *` (especificidade 0,1,1) pinta cada célula com * `var(--bs-table-color-state, var(--bs-table-color-type, var(--bs-table-color)))` * e ganharia de um simples `.fin-in` (0,1,0) — foi por isso que as utilitárias * `.text-success`/`.text-danger` funcionavam: utilitário do Bootstrap carrega * `!important`. * * Em vez de subir especificidade ou usar `!important`, redefinimos na PRÓPRIA * célula as variáveis que aquela regra consome. Assim a cor certa aparece no * estado normal e também no hover de `.table-hover`. */ .fin-in { color: var(--fin-income); --bs-table-color: var(--fin-income); --bs-table-color-type: var(--fin-income); --bs-table-hover-color: var(--fin-income); } .fin-out { color: var(--fin-expense); --bs-table-color: var(--fin-expense); --bs-table-color-type: var(--fin-expense); --bs-table-hover-color: var(--fin-expense); } .fin-num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; text-align: right; white-space: nowrap; } /* Em input a numeração tabular ajuda a máscara a não "dançar" ao digitar. */ input.fin-num, input[data-mask="money"] { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } /* ========================================================================== 6. Densidade e legibilidade de tabela ========================================================================== */ .table-fin { --bs-table-cell-padding-y: var(--fin-table-cell-y); --bs-table-bg: transparent; --bs-table-color: var(--bs-body-color); --bs-table-border-color: var(--bs-border-color); --bs-table-hover-bg: rgba(var(--bs-emphasis-color-rgb), .04); --bs-table-hover-color: var(--bs-emphasis-color); margin-bottom: 0; } .table-fin thead th { font-size: .8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; color: var(--bs-secondary-color); white-space: nowrap; border-bottom-color: var(--bs-border-color); } /* A listagem inteira vive dentro de um `.table-responsive`; a moldura dá ao conjunto a mesma superfície de um card, sem precisar de `bg-white`. */ .table-responsive { background-color: var(--fin-surface); border: 1px solid var(--fin-surface-border); border-radius: var(--fin-radius); box-shadow: var(--fin-shadow-card); } /* ========================================================================== 7. Navbar -------------------------------------------------------------------------- Sai o `navbar-dark bg-primary-brand` fixo: a barra agora herda o tema. A marca fica no `.navbar-brand` e nos botões primários. ========================================================================== */ .navbar { --bs-navbar-color: var(--bs-body-color); /* `--bs-primary` puro sobre `bg-body-tertiary` dá 3,99:1 no tema claro — abaixo do mínimo para texto normal. O tom *-text-emphasis* de cada tema resolve sem perder a leitura de "cor da marca". */ --bs-navbar-hover-color: var(--bs-primary-text-emphasis); --bs-navbar-active-color: var(--bs-primary-text-emphasis); --bs-navbar-disabled-color: var(--bs-secondary-color); --bs-navbar-brand-color: var(--bs-primary-text-emphasis); --bs-navbar-brand-hover-color: var(--bs-primary); --bs-navbar-toggler-border-color: var(--bs-border-color); --bs-navbar-toggler-icon-bg: none; } .navbar .nav-link { font-weight: 500; } .navbar .nav-link.active, .navbar .dropdown-item.active { font-weight: 600; } .navbar .dropdown-item.active { background-color: rgba(var(--bs-primary-rgb), .12); color: var(--bs-primary-text-emphasis); } /* O ícone do toggler do Bootstrap é um SVG embutido de cor fixa; trocamos por três barras desenhadas em CSS, que seguem `currentColor` nos dois temas. */ .navbar-toggler-icon { position: relative; display: inline-block; width: 1.25em; height: 1.25em; } .navbar-toggler-icon::before, .navbar-toggler-icon::after, .navbar-toggler-icon > span { content: ""; position: absolute; left: 0; right: 0; height: 2px; border-radius: 2px; background-color: currentColor; } .navbar-toggler-icon::before { top: .25em; } .navbar-toggler-icon::after { bottom: .25em; } .navbar-toggler-icon > span { top: calc(50% - 1px); } .fin-theme-toggle { line-height: 1; display: inline-flex; align-items: center; justify-content: center; } .fin-theme-toggle svg { width: 1.05rem; height: 1.05rem; } /* ========================================================================== 8. Gráficos (Fase 5) -------------------------------------------------------------------------- O Chart.js roda com `maintainAspectRatio: false`: ele dimensiona o canvas pelo ELEMENTO PAI, não pelo atributo `height`. Sem uma altura definida aqui, o pai teria altura zero e o gráfico sumiria — daí a moldura `.fin-chart`. `position: relative` é exigência do modo responsivo do Chart.js. ========================================================================== */ .fin-chart { position: relative; width: 100%; height: 260px; } .fin-chart-tall { height: 320px; } @media (max-width: 575.98px) { .fin-chart, .fin-chart-tall { height: 220px; } } /* Barra empilhada única (fixos x flexíveis): altura de gráfico normal deixaria a barra perdida no meio de um vazio. Depois do media query de propósito — mesma especificidade, então quem vence é a última regra declarada, e a barra continua baixa também no celular. */ .fin-chart-short { height: 150px; } /* Estado vazio dos cards de gráfico: ocupa o mesmo espaço que o canvas ocuparia, para o painel não "pular" quando um mês não tem lançamento. */ .fin-chart-empty { display: flex; align-items: center; justify-content: center; text-align: center; height: 260px; padding: 1rem; color: var(--bs-secondary-color); } /* ========================================================================== 9. Utilitários do projeto ========================================================================== */ .swatch { display: inline-block; width: 14px; height: 14px; border-radius: 4px; border: 1px solid rgba(var(--bs-emphasis-color-rgb), .25); vertical-align: middle; } /* Honeypot do lançamento rápido: precisa ficar invisível para gente e visível para robô. NÃO usar `display:none` nem `visibility:hidden`. */ .hp-field { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } .quick-entry-card { max-width: 440px; margin: 8vh auto; } .auth-card { max-width: 380px; margin: 12vh auto; } code { word-break: break-all; }