Mudanças entre as edições de "Widget:Conquistas"
Ir para navegação
Ir para pesquisar
m |
m (ret) |
||
| Linha 449: | Linha 449: | ||
.gla-item-reward-label { | .gla-item-reward-label { | ||
font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif; | font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif; | ||
font-size: | font-size: 14px; | ||
font-weight: 700; | font-weight: 700; | ||
letter-spacing: 0. | letter-spacing: 0.14em; | ||
text-transform: uppercase; | text-transform: uppercase; | ||
color: var(--gla-accent); | color: var(--gla-accent); | ||
| Linha 1 013: | Linha 1 013: | ||
/* ─── Chip "+M" (overflow) ─────────────────────────────────────────── */ | /* ─── Chip "+M" (overflow) ─────────────────────────────────────────── */ | ||
/* | /* Botão de overflow com reticências (⋯). Círculo 32×32 sutil — mesma | ||
altura dos sprites pra encaixar na linha, mas borda/fundo accent | |||
pra ler como CTA, não como outro slot de item. margin-top: 5px | |||
alinha com o centro visual do conjunto sprite+badge dos rewards | |||
(o badge .item-count fica em bottom:-10px do .item-wrapper, então | |||
o "centro real" do item fica ~5px abaixo do centro do sprite). */ | |||
.gla-item-reward .reward-more-chip { | .gla-item-reward .reward-more-chip { | ||
display: inline-flex; | display: inline-flex; | ||
| Linha 1 022: | Linha 1 025: | ||
width: 32px; | width: 32px; | ||
height: 32px; | height: 32px; | ||
margin: 0 | margin: 5px 6px 0; | ||
padding: 0; | padding: 0 0 4px; | ||
border: 1px solid var(--gla- | border: 1px solid var(--gla-accent-soft); | ||
border-radius: | border-radius: 999px; | ||
background: var(--gla- | background: var(--gla-accent-bg); | ||
color: var(--gla-accent); | color: var(--gla-accent); | ||
font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif; | font-family: 'Space Grotesk', system-ui, -apple-system, sans-serif; | ||
font-size: | font-size: 22px; | ||
font-weight: 700; | font-weight: 700; | ||
line-height: 1; | line-height: 1; | ||
letter-spacing: | letter-spacing: 0; | ||
cursor: pointer; | cursor: pointer; | ||
flex-shrink: 0; | flex-shrink: 0; | ||
box-sizing: border-box; | box-sizing: border-box; | ||
transition: background 0.15s, border-color 0.15s, color 0.15s; | transition: background 0.15s, border-color 0.15s, color 0.15s; | ||
} | } | ||
| Linha 1 042: | Linha 1 044: | ||
.gla-item-reward .reward-more-chip:hover, | .gla-item-reward .reward-more-chip:hover, | ||
.gla-item-reward .reward-more-chip[aria-expanded="true"] { | .gla-item-reward .reward-more-chip[aria-expanded="true"] { | ||
background: var(--gla-accent | background: var(--gla-accent); | ||
border-color: var(--gla-accent | border-color: var(--gla-accent); | ||
color: #ffffff; | |||
} | } | ||
| Linha 1 503: | Linha 1 506: | ||
chip.setAttribute("aria-expanded", "false"); | chip.setAttribute("aria-expanded", "false"); | ||
chip.setAttribute("aria-label", "Ver mais " + hidden.length + " recompensa(s)"); | chip.setAttribute("aria-label", "Ver mais " + hidden.length + " recompensa(s)"); | ||
chip. | chip.title = "Ver mais " + hidden.length; | ||
// Reticências midline (U+22EF) — sinaliza "tem mais" sem | |||
// poluir visualmente com número. O aria-label e o title | |||
// informam a quantidade exata pra acessibilidade/hover. | |||
chip.textContent = "⋯"; | |||
line.appendChild(chip); | line.appendChild(chip); | ||