diff --git a/CLAUDE.md b/CLAUDE.md index ab2eb7d..0a784d8 100644 --- a/CLAUDE.md +++ b/CLAUDE.md @@ -630,7 +630,7 @@ Terceiro checkbox de "Tipo de importação" (ao lado de Mensalidade/Coparticipa | `perfis-acesso.css` | `.pa-*` (tela de Perfis de Acesso), incluindo as seções (`.ua-section*`) e campos específicos (`.ua-inline-add`/`.ua-departamento-item`/`.ua-active-toggle`/`.ua-liderados-field`) do formulário de edição de `usuarios.html`. | | `calendario.css` | Só `.calendar-*` (grade mensal, células de dia, nav do mês) — os campos do modal de compromisso usam as classes genéricas `.modal-field`/`.modal-checkbox`/`.modal-error`/`.modal-actions` de `components.css`. | | `widgets.css` | `.widgets-*`, `.widget-card*`, `.widget-picker-*` — só usado em `portal.html`. O topbar da tela inicial não tem mais título/slogan nenhum (`

` — chegou a existir brevemente com o slogan "Grandes aplicações de todos os tamanhos" em fonte "Pinyon Script"/dourado, removido a pedido do usuário na mesma rodada; ver `login.css` abaixo pra onde o slogan acabou indo) — o `` do Google Fonts em `portal.html` também foi removido junto, já que não sobrou nenhum uso de fonte customizada nessa página. | -| `login.css` | Só usado em `index.html`; `.login-card__title` ("Portal Interno da De Paula") usa a fonte "Bree Serif" (importada só nesta página). O slogan da marca ("Grandes aplicações de todos os tamanhos.", `pid-marca-leiame.md` tem esse e um segundo, "Ainda funciona. Agora pensa.", não usado em lugar nenhum) mora aqui, não no topbar de `portal.html` (onde chegou a existir e foi removido, ver `widgets.css` acima) — passou primeiro pelo rodapé do card (abaixo de "Esqueceu sua senha?...") antes de subir pra logo abaixo do título, posição atual (pedido explícito do usuário). `.login-heading` (`display:flex; flex-direction:column; gap:var(--space-1)`) agrupa `.login-card__title` e `.login-slogan`, com um espaçamento bem menor entre os dois (`--space-1`) do que o `gap:var(--space-5)` que `.login-card` usa entre seus próprios filhos diretos — sem esse agrupamento, o slogan ficaria longe demais do título pra parecer uma assinatura. `.login-slogan` usa a fonte script "Pinyon Script" (mesmo `` do Google Fonts de `.login-card__title`, agora com as duas famílias), `font-size:1.2rem` (menor que o `1.3rem` do título do card, pedido explícito do usuário) e cor dourada fixa `#c6a24a` (cor da marca, não um token de tema/`--accent`). O card do login é **congelado escuro nos dois temas** (`--login-card-bg`/`--login-field-bg`/`--login-border`/`--login-text-*`, definidos só em `:root` de `tokens.css`, nunca redefinidos em `:root[data-theme="light"]` — mesmo padrão de `--sidebar-*`, ver comentário ao lado deles em `tokens.css`) — pedido explícito do usuário; só o fundo da própria página ao redor do card (`.login-page`, via `--bg-canvas`/`--overlay-scrim`/`--accent-rgb`) continua acompanhando o tema claro/escuro. A logo, porém, continua alternando por `data-theme` (`pid-icone.svg` no claro/`pid-icone-escuro.svg` no escuro, ver "Marca nova P.I.D." acima) via `pidSyncLoginLogo()`/`data-logo-dark`/`data-logo-light` em `theme.js` — pedido explícito do usuário, mesmo o card ficando sempre com o mesmo fundo escuro por baixo dela. | +| `login.css` | Só usado em `index.html`; `.login-card__title` ("Portal Interno da De Paula") usa a fonte "Bree Serif" (importada só nesta página). O slogan da marca ("Grandes aplicações de todos os tamanhos.", `pid-marca-leiame.md` tem esse e um segundo, "Ainda funciona. Agora pensa.", não usado em lugar nenhum) mora aqui, não no topbar de `portal.html` (onde chegou a existir e foi removido, ver `widgets.css` acima) — passou primeiro pelo rodapé do card (abaixo de "Esqueceu sua senha?...") antes de subir pra logo abaixo do título, posição atual (pedido explícito do usuário). `.login-heading` (`display:flex; flex-direction:column; gap:var(--space-1)`) agrupa `.login-card__title` e `.login-slogan`, com um espaçamento bem menor entre os dois (`--space-1`) do que o `gap:var(--space-5)` que `.login-card` usa entre seus próprios filhos diretos — sem esse agrupamento, o slogan ficaria longe demais do título pra parecer uma assinatura. `.login-slogan` usa a fonte script "Pinyon Script" (mesmo `` do Google Fonts de `.login-card__title`, agora com as duas famílias), `font-size:1.2rem` (menor que o `1.3rem` do título do card, pedido explícito do usuário) e cor dourada fixa `#c6a24a` (cor da marca, não um token de tema/`--accent`). O card do login é **congelado escuro nos dois temas** (`--login-card-bg`/`--login-field-bg`/`--login-border`/`--login-text-*`, definidos só em `:root` de `tokens.css`, nunca redefinidos em `:root[data-theme="light"]` — mesmo padrão de `--sidebar-*`, ver comentário ao lado deles em `tokens.css`) — pedido explícito do usuário; a logo dentro dele também não alterna mais por tema (ver "Ícone do login e da sidebar são clicáveis" acima — decisão de uma rodada seguinte, revertendo a alternância que existia antes). Só o fundo da própria página ao redor do card (`.login-page`) continua acompanhando o tema claro/escuro, mas de formas diferentes em cada um: no **escuro** (padrão), `background: linear-gradient(var(--overlay-scrim), var(--overlay-scrim)), radial-gradient(circle at 20% 20%, rgba(var(--accent-rgb), 0.25), transparent 45%), var(--bg-canvas)` — um scrim escuro + um brilho radial na cor do tema sobre o `--bg-canvas` escuro, pensados pra dar profundidade; no **claro**, `:root[data-theme="light"] .login-page` zera isso pra só `background: var(--bg-canvas)` (pedido explícito do usuário, "mesmo tom do fundo da tela principal") — o scrim escuro por cima de um `--bg-canvas` já claro resultava num cinza/marrom acinzentado que não batia com o fundo de verdade de `portal.html` (que é só `var(--bg-canvas)` puro, via `body` em `base.css`); o brilho radial (`rgba(accent, 0.25)`) também sai junto, já que sem o scrim por baixo ele ficaria evidente demais sozinho contra um fundo claro. | | `links-ferramentas.css` | `.lf-*` — só usado em `links-ferramentas.html`. | | `acessos-gerais.css` | `.ag-*` — só usado em `acessos-gerais.html`. | | `ramais.css` | `.ram-*` — só usado em `ramais.html`; a tabela em si reaproveita `.pa-table*`/`.pa-row-actions` de `perfis-acesso.css` (mesmo padrão que `usuarios.html` já usa sem CSS próprio). | @@ -662,7 +662,9 @@ Ao apertar "Entrar" com sucesso, `index.html` toca uma animação de marca em te **Fade de entrada, antes do ícone começar a se desenhar** (pedido explícito do usuário — a primeira versão fazia o overlay aparecer de repente por cima do card ainda visível, "de um modo bruto"; a duração foi ajustada de 350ms pra 500ms numa rodada seguinte, "está muito rápido... só pra ficar mais fluído"): `pidPlayLoginIntro()` aplica `.is-leaving` no `.login-card` (`login.css`, `opacity:0; transform:scale(0.98)`, transição de 500ms) e `.is-visible` no `#login-intro` (`opacity:0→1`, mesmos 500ms, `PID_INTRO_FADE_MS`) ao mesmo tempo — o card se dissolve enquanto o overlay (já na cor final sólida) sobe por cima, um cross-fade real, não uma troca instantânea. Só depois desses 500ms (`setTimeout`) é que o loop de `requestAnimationFrame` do ícone começa (`start = performance.now()` é atribuído só nesse momento, não antes). -**Arquivos**: `static/css/login-intro.css` (só `index.html`) — formas idênticas às já usadas em `pid-icone-escuro.svg`/`pid-logo-horizontal-escuro.svg` (hex hardcoded — `#7b5ba8`/`#c6a24a`/`#f2ede3`, não são tokens de tema, são a paleta fixa da marca, mesmo espírito de `.login-slogan` já hardcodar `#c6a24a`); a **exceção** é o fundo do overlay (`#121017`), que não é um hex da marca — é o valor fixo de `--bg-canvas` no tema escuro (`tokens.css`), usado deliberadamente em vez da cor de fundo original do arquivo fornecido (`#241c33`, roxo-tinto) pra a sequência login → animação → portal ler como uma coisa só se estruturando aos poucos, não uma troca de cenário (pedido explícito do usuário). `static/js/login-intro.js` expõe `pidPlayLoginIntro(onDone)` (global, chamada só por `auth.js`) — monta o loop de `requestAnimationFrame`, calcula cada valor (`bodyDraw`, `eyeL`, `shift`, `fly`, ...) a partir de `T` (segundos decorridos desde o início do loop, via `performance.now()`) e escreve direto nos atributos/estilo dos elementos do overlay (`#login-intro`, já presente e `hidden` no HTML de `index.html`); chama `onDone()` quando `T` atinge `PID_INTRO_TOTAL`. Fontes "Space Grotesk" (peso 700) e "DM Mono" adicionadas ao mesmo `` do Google Fonts de `index.html`, junto de "Bree Serif"/"Pinyon Script" já usadas ali. +**Arquivos**: `static/css/login-intro.css` (só `index.html`) — formas idênticas às já usadas em `pid-icone-escuro.svg`/`pid-logo-horizontal-escuro.svg` (hex hardcoded — `#7b5ba8`/`#c6a24a`/`#f2ede3`, não são tokens de tema, são a paleta fixa da marca, mesmo espírito de `.login-slogan` já hardcodar `#c6a24a`); a **exceção** é o fundo do overlay, que reage ao tema (ver "Tema claro" logo abaixo) em vez de ser um hex fixo da marca. `static/js/login-intro.js` expõe `pidPlayLoginIntro(onDone)` (global, chamada só por `auth.js`) — monta o loop de `requestAnimationFrame`, calcula cada valor (`bodyDraw`, `eyeL`, `shift`, `fly`, ...) a partir de `T` (segundos decorridos desde o início do loop, via `performance.now()`) e escreve direto nos atributos/estilo dos elementos do overlay (`#login-intro`, já presente e `hidden` no HTML de `index.html`); chama `onDone()` quando `T` atinge `PID_INTRO_TOTAL`. Fontes "Space Grotesk" (peso 700) e "DM Mono" adicionadas ao mesmo `` do Google Fonts de `index.html`, junto de "Bree Serif"/"Pinyon Script" já usadas ali. + +**Tema claro**: o fundo do overlay (`#121017`, o valor fixo de `--bg-canvas` no tema escuro) e o texto do wordmark (`.login-intro__letter`/`.login-intro__tagline`, cor clara — pensados pra contrastar com um fundo escuro) só faziam sentido enquanto o overlay era sempre escuro (decisão original, pra login → animação → portal ler como uma coisa só). O usuário pediu que, no tema claro, o fundo da animação também acompanhasse o `--bg-canvas` claro (mesmo raciocínio já aplicado a `.login-page` em `login.css`) — o que por sua vez tornou o texto claro do wordmark ilegível contra um fundo claro. `:root[data-theme="light"]` overrides em `login-intro.css` cobrem os dois: `.login-intro` vira `background: var(--bg-canvas)` e `.login-intro__letter`/`.login-intro__tagline` viram cores escuras (`#241c33`/`rgba(36, 28, 51, 0.62)`, os mesmos tons só invertidos). O **ícone não precisou de override** — o corpo roxo (`#7b5ba8`) tem contraste de sobra contra um fundo claro, e a "tela" do disquete (`#241c33`) já é escura por si só, então os olhos/sorriso continuam legíveis nos dois temas sem mudar nada. Nada disso afeta o tema escuro (padrão), que continua com os valores fixos originais. **Fluxo de navegação**: `auth.js`, no sucesso do `POST /api/auth/login/`, chama `pidPlayLoginIntro(() => { sessionStorage.setItem("pid_reveal_portal", "1"); window.location.href = "portal.html"; })` em vez de navegar direto — a navegação só acontece depois da animação inteira (não há como "pular" a animação hoje, nem foi pedido). diff --git a/plano.md b/plano.md index 68a5ac9..0829e11 100644 --- a/plano.md +++ b/plano.md @@ -1027,6 +1027,18 @@ Pra (1), mesmo problema técnico da rodada 75 (não dá pra animar dentro de um **Refatoração de nomes, pra reaproveitar entre os dois lugares**: como agora dois contextos diferentes (sidebar e login) piscam o mesmo ícone, `.sidebar-icon-eye__lid`/`pidSidebarBlink` (que moravam em `layout.css`, não carregado por `index.html`) foram renomeados pra `.pid-icon-eye`/`pidIconBlink` e movidos pra `base.css` (único CSS comum às duas telas) — `layout.css` e os 10 shells foram atualizados pra usar o nome novo. +### 77. Fundo da tela de login no tema claro batendo com o fundo real do Portal + +Usuário reportou que, no tema claro, o fundo da tela de login (`.login-page`, a área ao redor do card) ficava com um tom acinzentado/amarronzado bem diferente do fundo de verdade da tela Principal nesse tema (um lavanda bem claro, quase branco). Causa: `.login-page` sempre aplicou um scrim escuro + um brilho radial por cima do `--bg-canvas`, pensados pra dar profundidade num fundo escuro — no tema claro, esse mesmo scrim escuro por cima de um `--bg-canvas` já claro produzia esse cinza sujo, nada parecido com o `--bg-canvas` puro que `portal.html` usa (via `body` em `base.css`). + +Corrigido com um override `:root[data-theme="light"] .login-page { background: var(--bg-canvas); }` — no tema claro, zera o scrim/glow e usa só a cor sólida, igual ao resto do Portal; no tema escuro (padrão) nada mudou, o scrim+glow continuam dando a profundidade de antes. + +### 78. Mesmo ajuste na animação de intro: fundo claro no tema claro, texto do wordmark escuro + +Sequência natural da rodada 77 (fundo de `.login-page`): o usuário pediu o mesmo pro fundo da **animação de intro** (`#login-intro`) — no tema claro, também devia usar o `--bg-canvas` claro, não o `#121017` escuro fixo. Só que aqui tinha uma pegadinha que `.login-page` não tinha: o wordmark da animação ("P.I.D." + tagline) usa texto **claro**, pensado pra contrastar contra um fundo escuro — mudar só o fundo pro claro deixaria esse texto ilegível. + +`login-intro.css` ganhou os overrides de tema claro: `.login-intro` vira `background: var(--bg-canvas)`, e `.login-intro__letter`/`.login-intro__tagline` viram cores escuras (`#241c33`/`rgba(36, 28, 51, 0.62)`) só nesse tema. O ícone (corpo roxo + tela escura do disquete) não precisou de nenhum ajuste — já tem contraste de sobra nos dois fundos. Tema escuro (padrão) ficou intocado. + ## Roadmap / próximos passos Nenhuma pendência explícita em aberto no momento, exceto a limitação conhecida diff --git a/static/css/login-intro.css b/static/css/login-intro.css index 42f7370..4c7613e 100644 --- a/static/css/login-intro.css +++ b/static/css/login-intro.css @@ -139,6 +139,28 @@ opacity: 0; } +/* Tema claro: mesmo raciocínio do fundo de `.login-page` (login.css) — o + fundo escuro fixo (#121017, igual ao card/ícone) destoava do resto do + Portal nesse tema, então vira o `--bg-canvas` claro. Só que aqui, ao + contrário do card do login (que continua congelado escuro nos dois + temas), o fundo da própria animação muda — e como o wordmark ("P.I.D." + + tagline) é texto claro pensado pra contrastar com um fundo escuro, essas + duas peças (não o ícone, que continua legível nos dois fundos: o corpo + roxo tem contraste de sobra contra um fundo claro, e a "tela" do disquete + já é escura por si só) precisam virar escuras nesse tema, senão ficam + ilegíveis. Nada disso muda o tema escuro (padrão) — só o claro. */ +:root[data-theme="light"] .login-intro { + background: var(--bg-canvas); +} + +:root[data-theme="light"] .login-intro__letter { + color: #241c33; +} + +:root[data-theme="light"] .login-intro__tagline { + color: rgba(36, 28, 51, 0.62); +} + @media (max-width: 600px) { .login-intro__stage { gap: 20px; diff --git a/static/css/login.css b/static/css/login.css index c70183b..4a7ce20 100644 --- a/static/css/login.css +++ b/static/css/login.css @@ -10,6 +10,15 @@ var(--bg-canvas); } +/* No tema claro, o scrim escuro + o brilho radial (pensados pra dar + profundidade sobre o --bg-canvas escuro do tema padrão) deixavam o fundo + acinzentado/amarronzado, bem diferente do fundo real da tela Principal + nesse tema (--bg-canvas claro, liso) — pedido explícito do usuário pra + usar o mesmo tom. Sem scrim/glow no claro, só a cor sólida. */ +:root[data-theme="light"] .login-page { + background: var(--bg-canvas); +} + .login-card { width: 100%; max-width: 380px;