/* ==========================================================================
Aceite — assets/css/sino.css
O sino de notificacoes do nav: o botao, o badge de nao lidas e o painel.
Arquivo separado de app.css de proposito (app.css e' grande e compartilhado;
ninguem mais edita aqui). Depende so' dos tokens de tokens.css — nenhuma cor
ou espaco literal, para o tema claro continuar funcionando.
Estrutura (o HTML do botao vive em cada .html, dentro de .nav__meta; o
painel e' criado pelo assets/js/sino.js e pendurado no , de
position:fixed, para escapar do drawer do celular — que tem transform e
viraria o "containing block" de qualquer filho posicionado):
…
========================================================================== */
/* --- o botao do nav ------------------------------------------------------ */
.sino__botao {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.5rem;
height: 2.5rem;
min-height: 2.5rem;
padding: 0;
border-radius: 999px;
flex: 0 0 auto;
}
.sino__icone {
width: 1.125rem;
height: 1.125rem;
display: block;
pointer-events: none;
}
/* Sino aberto: o mesmo realce do link ativo da nav. */
.sino__botao[aria-expanded="true"] {
border-color: var(--brand);
color: var(--brand);
}
/* --- o badge ------------------------------------------------------------- */
.sino__badge {
position: absolute;
top: -2px;
right: -2px;
min-width: 1.125rem;
height: 1.125rem;
padding: 0 0.25rem;
border-radius: 999px;
background: var(--brand);
color: var(--brand-ink);
font-size: 0.6875rem;
font-weight: 700;
line-height: 1.125rem;
text-align: center;
/* Anel da cor do fundo: separa o badge do botao sem borda de verdade. */
box-shadow: 0 0 0 2px var(--bg);
pointer-events: none;
}
.sino__badge[hidden] {
display: none;
}
/* --- o painel ------------------------------------------------------------ */
.sino__painel {
position: fixed;
z-index: 200; /* acima do drawer (50) e do hamburguer (60) */
display: flex;
flex-direction: column;
max-width: calc(100vw - 1.5rem);
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow);
overflow: hidden;
}
.sino__painel--oculto {
display: none;
}
.sino__cabecalho {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
padding: var(--space-3) var(--space-4);
border-bottom: 1px solid var(--border);
}
.sino__titulo {
font-size: var(--fs-md);
font-weight: 700;
margin: 0;
/* Cede espaco para o botao "Marcar todas como lidas" caber numa linha
quando o painel estreita (menu aberto a 360px). */
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.sino__marcar {
background: none;
border: 0;
padding: 0;
color: var(--brand);
font: inherit;
font-size: var(--fs-sm);
cursor: pointer;
text-align: right;
/* Com o menu aberto a 360px o painel cai para 278px e o rotulo
"Marcar todas como lidas" quebrava em duas linhas. nowrap mantem o botao
numa linha so; o cabecalho pode encolher o titulo se precisar. */
white-space: nowrap;
flex: 0 0 auto;
}
.sino__marcar:hover {
text-decoration: underline;
}
.sino__marcar[hidden] {
display: none;
}
/* --- a lista ------------------------------------------------------------- */
.sino__lista {
display: flex;
flex-direction: column;
overflow-y: auto;
overscroll-behavior: contain;
/* A lista e' quem ROLA quando o painel nao cabe inteiro (o teto de altura
vem do JS). Sem `min-height:0` o minimo automatico do item de flex e' o
tamanho do conteudo: a lista nao encolhia, o painel ficava cortado pelo
`overflow:hidden` e nenhum aviso aparecia na tela. */
flex: 1 1 auto;
min-height: 0;
}
.sino__item {
display: block;
width: 100%;
text-align: left;
background: none;
border: 0;
border-bottom: 1px solid var(--border);
padding: var(--space-3) var(--space-4);
color: var(--text);
font: inherit;
cursor: pointer;
}
.sino__item:last-child {
border-bottom: 0;
}
.sino__item:hover {
background: var(--surface-2);
}
/* Nao lida: barra na lateral + fundo levemente mais claro. O ponto da barra e'
o que sobra quando a cor de fundo some no tema claro. */
.sino__item--nova {
background: color-mix(in oklch, var(--surface-2) 70%, transparent);
border-left: 3px solid var(--brand);
}
.sino__item-titulo {
display: block;
font-weight: 600;
font-size: var(--fs-md);
}
.sino__item-texto {
display: block;
margin-top: var(--space-1);
color: var(--text-muted);
font-size: var(--fs-sm);
line-height: 1.5;
/* O motivo da recusa pode ser longo: quebra em vez de esticar o painel. */
overflow-wrap: anywhere;
}
.sino__item-quando {
display: block;
margin-top: var(--space-1);
color: var(--text-muted);
font-size: var(--fs-sm);
opacity: 0.75;
}
.sino__vazio {
padding: var(--space-5) var(--space-4);
margin: 0;
color: var(--text-muted);
font-size: var(--fs-sm);
text-align: center;
line-height: 1.6;
}
.sino__vazio[hidden] {
display: none;
}
/* --- dedo no fone: alvo de 44px, como o resto da nav --------------------- */
@media (max-width: 40rem), (pointer: coarse) {
.sino__botao {
width: 2.75rem;
height: 2.75rem;
min-height: 2.75rem;
}
.sino__item {
padding: var(--space-3) var(--space-4);
}
/* No fone o sino vive no RODAPE do drawer, colado no fim da tela: o pe' do
painel encosta no rodape do menu e, no Safari, na faixa que a barra do
navegador cobre. Este respiro (rodape do menu + area segura do aparelho)
mantem a ULTIMA notificacao visivel acima do rodape, em vez de atras. */
.sino__lista {
padding-bottom: calc(3rem + env(safe-area-inset-bottom, 0px));
}
}