Mudanças entre as edições de "Widget:Conquistas"
Ir para navegação
Ir para pesquisar
m (ret) |
m |
||
| Linha 695: | Linha 695: | ||
.gla-conquistas-root[data-reveal-mode="veil"] .gla-item[data-hidden="true"]:not(.is-revealed) { | .gla-conquistas-root[data-reveal-mode="veil"] .gla-item[data-hidden="true"]:not(.is-revealed) { | ||
cursor: pointer; | cursor: pointer; | ||
} | |||
/* Censura ABSOLUTA: enquanto não revelado, todo o conteúdo do card | |||
fica click-through (pointer-events:none na .gla-item-main) E é | |||
coberto por um overlay transparente (::after no .gla-item) que | |||
absorve hover/click e tira do alcance os tooltips nativos do | |||
browser (title/alt) — sem o overlay, alguns navegadores ainda | |||
exibem o tooltip de elementos com pointer-events:none. | |||
O ::after fica logo acima do conteúdo (z-index 6) e abaixo do | |||
ribbon/stamp (z-index 2). Como não tem title/alt nem children, | |||
hover sobre ele não gera tooltip nenhum. Click bubbla pro | |||
.gla-item e o listener global revela. */ | |||
.gla-conquistas-root[data-reveal-mode="blur"] .gla-item[data-hidden="true"]:not(.is-revealed) .gla-item-main, | |||
.gla-conquistas-root[data-reveal-mode="redacted"] .gla-item[data-hidden="true"]:not(.is-revealed) .gla-item-main, | |||
.gla-conquistas-root[data-reveal-mode="placeholder"] .gla-item[data-hidden="true"]:not(.is-revealed) .gla-item-main, | |||
.gla-conquistas-root[data-reveal-mode="veil"] .gla-item[data-hidden="true"]:not(.is-revealed) .gla-item-main { | |||
pointer-events: none; | |||
} | |||
.gla-conquistas-root[data-reveal-mode="blur"] .gla-item[data-hidden="true"]:not(.is-revealed), | |||
.gla-conquistas-root[data-reveal-mode="redacted"] .gla-item[data-hidden="true"]:not(.is-revealed), | |||
.gla-conquistas-root[data-reveal-mode="placeholder"] .gla-item[data-hidden="true"]:not(.is-revealed), | |||
.gla-conquistas-root[data-reveal-mode="veil"] .gla-item[data-hidden="true"]:not(.is-revealed) { | |||
pointer-events: auto; | |||
position: relative; | |||
} | |||
/* Overlay transparente que captura hover/click — apenas em blur, | |||
redacted e placeholder. (Veil tem o seu próprio ::after estilizado | |||
logo abaixo, e o seletor mais específico de baixo sobrescreve.) */ | |||
.gla-conquistas-root[data-reveal-mode="blur"] .gla-item[data-hidden="true"]:not(.is-revealed)::after, | |||
.gla-conquistas-root[data-reveal-mode="redacted"] .gla-item[data-hidden="true"]:not(.is-revealed)::after, | |||
.gla-conquistas-root[data-reveal-mode="placeholder"] .gla-item[data-hidden="true"]:not(.is-revealed)::after { | |||
content: ""; | |||
position: absolute; | |||
inset: 0; | |||
background: transparent; | |||
pointer-events: auto; | |||
z-index: 6; | |||
} | |||
/* Anula QUALQUER interação dentro do card censurado: tooltip dos | |||
rewards (JS do Widget:Item), tooltip nativo de alt/title em imagens, | |||
seleção de texto, hover de links na descrição. pointer-events:none | |||
torna os filhos "transparentes" pra eventos do mouse — o click sobe | |||
pro .gla-item pai, que dispara o reveal. */ | |||
.gla-conquistas-root[data-reveal-mode="blur"] .gla-item[data-hidden="true"]:not(.is-revealed) .gla-item-main, | |||
.gla-conquistas-root[data-reveal-mode="redacted"] .gla-item[data-hidden="true"]:not(.is-revealed) .gla-item-main, | |||
.gla-conquistas-root[data-reveal-mode="placeholder"] .gla-item[data-hidden="true"]:not(.is-revealed) .gla-item-main, | |||
.gla-conquistas-root[data-reveal-mode="veil"] .gla-item[data-hidden="true"]:not(.is-revealed) .gla-item-main { | |||
pointer-events: none; | |||
user-select: none; | |||
-webkit-user-select: none; | |||
} | } | ||
| Linha 777: | Linha 830: | ||
backdrop-filter: blur(4px); | backdrop-filter: blur(4px); | ||
-webkit-backdrop-filter: blur(4px); | -webkit-backdrop-filter: blur(4px); | ||
z-index: | z-index: 6; | ||
pointer-events: | /* auto — overlay captura hover/click. Sem isso, mesmo coberto | ||
visualmente, os items embaixo ainda recebiam hover e o browser | |||
mostrava tooltip nativo (title/alt). */ | |||
pointer-events: auto; | |||
transition: opacity 0.25s ease; | transition: opacity 0.25s ease; | ||
} | } | ||
| Linha 1 379: | Linha 1 435: | ||
// Click — revela e persiste. Só ativa se data-reveal-mode no root | // Click — revela e persiste. Só ativa se data-reveal-mode no root | ||
// estiver definido como blur/redacted/placeholder/veil. | // estiver definido como blur/redacted/placeholder/veil. | ||
// | // | ||
// | // O CSS aplica `pointer-events: none` no .gla-item-main enquanto | ||
// a censura está ativa — então click em qualquer ponto interno | |||
// (icon/title/desc/items/spoiler/chip+N) cai direto no .gla-item. | |||
// Aqui não precisamos mais filtrar interativos: enquanto censurado, | |||
// tudo é "click pra revelar"; depois que revela, os filtros internos | |||
// voltam ao normal porque o seletor :not(.is-revealed) deixa de bater. | |||
root.addEventListener("click", function (e) { | root.addEventListener("click", function (e) { | ||
var mode = root.getAttribute("data-reveal-mode") || "none"; | var mode = root.getAttribute("data-reveal-mode") || "none"; | ||
| Linha 1 388: | Linha 1 449: | ||
if (!card) return; | if (!card) return; | ||
if (card.classList.contains("is-revealed")) return; | if (card.classList.contains("is-revealed")) return; | ||
card.classList.add("is-revealed"); | card.classList.add("is-revealed"); | ||