/* Estilos do host — o que a biblioteca de propósito não traz. * * A chocola-ui entrega os elementos e os tokens; layout de página é decisão de * quem hospeda (o README dela diz isso com todas as letras: nada de estilo de * aplicação dentro de chocola-ui/). Este arquivo é compartilhado pelas quatro * páginas: login, home (o shell) e as telas /echo e /usuarios, que abrem * dentro do iframe da home. * * Tudo aqui lê tokens --chocola-*: trocar tema/acento re-tinge estas regras * junto com as dos elementos, sem nenhum valor de cor próprio. */ /* --- login --------------------------------------------------------------- */ /* A tela de login segue a referência: marca, cabeçalho de boas-vindas, os dois campos e um botão primário de largura total, tudo sobre um painel de vidro (o ) que borra o papel de parede de ondas. */ .login-page { display: flex; align-items: center; justify-content: center; min-height: 100vh; padding: var(--chocola-space-5) var(--chocola-space-4); } .login-page__card { width: 100%; max-width: 400px; } /* O painel com o fundo borrado. O blur aqui é opt-in DO HOST: a biblioteca, por padrão, só borra superfície fixa/overlay, porque o papel de parede é estático e nada passa por baixo de um cartão em fluxo -- neste desenho o blur do painel É o pedido, e uma captura de backdrop que não se move custa uma passada só. São duas metades, na ordem em que o navegador as resolve: 1. sem a regra de baixo, o painel fica quase opaco. É o que segura o texto e os campos quando não há backdrop-filter: sem suporte no navegador, com o vidro desligado em , ou com a preferência do sistema por menos transparência. Os elementos não podem depender do que está atrás para continuar legíveis; 2. com blur, o painel troca para a superfície translúcida e lê o token de filtro da biblioteca -- que já vira "none" com o vidro desligado e na preferência do sistema, por isso a mesma condição está no seletor. */ .login-page__card.chocola-card { background: var(--chocola-glass-solid-strong); } @supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) { html:not([data-chocola-glass="off"]) .login-page__card.chocola-card { background: var(--chocola-glass-bg-strong); -webkit-backdrop-filter: var(--chocola-glass-filter); backdrop-filter: var(--chocola-glass-filter); } } /* O corpo do card é quem espaça marca, título e formulário (o
cuida do próprio espaçamento interno). O padding maior é da tela, não do elemento: o host só ajusta a instância. */ .login-page__card .chocola-card__body { display: flex; flex-direction: column; gap: var(--chocola-space-4); padding: var(--chocola-space-5); } /* A marca repete o lockup do (letra no quadrado de destaque + nome) -- o login não tem header, e o nome é o mesmo -- e lê os tokens do acento, então continua na cor de destaque vigente. */ .login-page__brand { display: flex; align-items: center; gap: var(--chocola-space-3); } .login-page__logo { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: var(--chocola-radius-md); background: var(--chocola-glass-gloss), var(--chocola-accent-fill); color: var(--chocola-color-accent-ink); box-shadow: var(--chocola-accent-edge); font-weight: 700; } .login-page__brand-nome { font-weight: 600; color: var(--chocola-color-text); } .login-page__titulo { margin: 0; font-size: var(--chocola-font-size-xl); font-weight: 600; color: var(--chocola-color-text); } /* O é o dono do espaçamento: os viram campos nativos dentro dele, então o POST sem fetch continua valendo. */ .login-page__form { display: flex; flex-direction: column; gap: var(--chocola-space-4); } /* O "[hidden]" da folha do navegador perde para o display dos elementos (a biblioteca usa display:flex/grid), então esconder pelo atributo precisa desta regra -- vale para o iframe também. */ .login-page__form chocola-alert[hidden], .app-page chocola-alert[hidden], .shell__main chocola-alert[hidden], .shell__frame[hidden] { display: none; } /* O botão primário ocupa a largura do painel, como na referência. O raio, a receita de vidro e a cor de destaque do elemento não são tocados. */ .login-page__actions { display: block; } .login-page__actions chocola-button { width: 100%; margin: 0; } /* --- shell (home) -------------------------------------------------------- */ /* O header e a sidebar são fixos e ficam FORA do fluxo, então o conteúdo precisa se posicionar por baixo deles. Os 56px são a largura do rail da sidebar: não existe token para ela (o literal está no CSS da biblioteca e no sample.html dela), então o host repete o mesmo número. O .shell__body é a coluna que empilha a barra de abas e a área de conteúdo: a barra ocupa a própria altura quando existe e sai do fluxo quando não existe ([hidden]), sem o host somar altura nenhuma em JS. O min-height: 0 nos dois níveis é o que deixa o iframe encolher em vez de esticar a coluna. */ .shell__body { position: fixed; top: var(--chocola-header-offset); right: 0; bottom: 0; left: 56px; display: flex; flex-direction: column; min-height: 0; } /* O chocola.js espelha o modo mobile no exatamente para o host usar: em mobile a sidebar vira gaveta, então a área de conteúdo ocupa a largura toda. Usar o espelho evita uma media query própria, que é o que a biblioteca proíbe. */ html[data-chocola-mobile="on"] .shell__body { left: 0; } .shell__main { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: unset; padding: unset; overflow: auto; } .shell__welcome { width: 100%; max-width: 520px; } /* A tela aberta ocupa a sobra de espaço. hidden têm que ganhar do display:flex, senão o iframe aparece vazio antes de alguém escolher um app. */ .shell__frame { flex: 1 1 auto; width: 100%; min-height: 320px; border: unset; border-radius: 0px; background: transparent; } .shell__frame[hidden] { display: none; } /* --- barra de abas (home) ------------------------------------------------ */ /* A barra é o da biblioteca: a superfície, o encolhimento até o mínimo, a rolagem e o desenho de cada aba — rótulo, ícone e o fechar — moram lá, junto com o mínimo e o máximo de largura (que um host pode ajustar pelas custom properties do elemento). Do host fica só o que é layout do shell: */ /* O [hidden] do navegador perde para o display: flex do elemento, e a faixa precisa sair do fluxo (altura zero) quando não há aba: é esta regra que devolve o espaço ao conteúdo. Mesma razão do .shell__frame[hidden] logo acima. */ #abas[hidden] { display: none; } /* --- iframe da home: fundo transparente --------------------------------- */ /* São duas metades: o