Mudanças entre as edições de "Widget:Teste"
Ir para navegação
Ir para pesquisar
m |
m |
||
| Linha 13: | Linha 13: | ||
border-radius: 8px; | border-radius: 8px; | ||
text-align: center; | text-align: center; | ||
padding: | padding: 16px; | ||
width: | width: min-content; | ||
min-width: | min-width: 0; | ||
box-sizing: border-box; | box-sizing: border-box; | ||
display: flex; | display: flex; | ||
flex-direction: column; | flex-direction: column; | ||
align-items: center; | align-items: center; | ||
gap: | gap: 8px; | ||
transition: transform 0.15s, box-shadow 0.15s; | transition: transform 0.15s, box-shadow 0.15s; | ||
color: inherit; | color: inherit; | ||
| Linha 33: | Linha 33: | ||
.island-card:visited { | .island-card:visited { | ||
color: inherit; | color: inherit; | ||
} | |||
.island-card .island-img { | |||
display: block; | |||
line-height: 0; | |||
} | } | ||
.island-card .island-img img { | .island-card .island-img img { | ||
width: | display: block; | ||
height: | width: auto; | ||
height: 150px; | |||
max-width: 100%; | |||
object-fit: contain; | object-fit: contain; | ||
pointer-events: none; | pointer-events: none; | ||
| Linha 61: | Linha 68: | ||
.island-card .island-chest-group { | .island-card .island-chest-group { | ||
position: relative; | position: relative; | ||
display: inline- | display: inline-block; | ||
width: 32px; | |||
height: 32px; | |||
} | } | ||
.island-card .island-chest-group img { | .island-card .island-chest-group img { | ||
display: block; | |||
width: 32px; | width: 32px; | ||
height: 32px; | height: 32px; | ||
object-fit: contain; | object-fit: contain; | ||
} | } | ||
/* | /* Quantidade no canto da imagem do baú (estilo itemdata) */ | ||
.island-card .island-chest-count { | .island-card .island-chest-count { | ||
position: absolute; | position: absolute; | ||
right: 0; | |||
bottom: 0; | |||
font-size: 11px; | |||
font-size: | |||
font-weight: bold; | font-weight: bold; | ||
color: #fff; | color: #fff; | ||
background: rgba(0, 0, 0, 0.75); | background: rgba(0, 0, 0, 0.75); | ||
padding: 1px | padding: 1px 3px; | ||
border-radius: | border-radius: 3px; | ||
line-height: 1; | line-height: 1; | ||
white-space: nowrap; | white-space: nowrap; | ||
| Linha 93: | Linha 99: | ||
@media (max-width: 600px) { | @media (max-width: 600px) { | ||
.island-card { | .island-card { | ||
padding: 12px; | |||
padding: | |||
} | } | ||
.island-card .island-img img { | .island-card .island-img img { | ||
height: 120px; | |||
height: | |||
} | } | ||
.island-card .island-name { | .island-card .island-name { | ||
font-size: 0. | font-size: 0.9em; | ||
} | } | ||
.island-card .island-chest-group, | |||
.island-card .island-chest-group img { | .island-card .island-chest-group img { | ||
width: 28px; | width: 28px; | ||
| Linha 113: | Linha 117: | ||
.island-card .island-chest-count { | .island-card .island-chest-count { | ||
font-size: | font-size: 10px; | ||
padding: 0 2px; | |||
} | } | ||
} | } | ||
Edição das 22h47min de 12 de março de 2026
<style>
.island-grid {
display: flex;
flex-wrap: wrap;
gap: 10px;
padding: 12px 0;
justify-content: center;
}
.island-card {
background: #eeeded;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 10px;
border-radius: 8px;
text-align: center;
padding: 16px;
width: min-content;
min-width: 0;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
transition: transform 0.15s, box-shadow 0.15s;
color: inherit;
cursor: pointer;
}
.island-card:hover {
transform: translateY(-2px);
box-shadow: rgba(0, 0, 0, 0.35) 0px 4px 12px;
}
.island-card:visited {
color: inherit;
}
.island-card .island-img {
display: block;
line-height: 0;
}
.island-card .island-img img {
display: block;
width: auto;
height: 150px;
max-width: 100%;
object-fit: contain;
pointer-events: none;
}
.island-card .island-name {
font-size: 0.9em;
font-weight: bold;
color: #000;
pointer-events: none;
line-height: 1.2;
word-break: break-word;
}
.island-card .island-chests {
display: flex;
align-items: flex-end;
justify-content: center;
gap: 8px;
pointer-events: none;
}
.island-card .island-chest-group {
position: relative;
display: inline-block;
width: 32px;
height: 32px;
}
.island-card .island-chest-group img {
display: block;
width: 32px;
height: 32px;
object-fit: contain;
}
/* Quantidade no canto da imagem do baú (estilo itemdata) */
.island-card .island-chest-count {
position: absolute;
right: 0;
bottom: 0;
font-size: 11px;
font-weight: bold;
color: #fff;
background: rgba(0, 0, 0, 0.75);
padding: 1px 3px;
border-radius: 3px;
line-height: 1;
white-space: nowrap;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
z-index: 10;
}
@media (max-width: 600px) {
.island-card {
padding: 12px;
}
.island-card .island-img img {
height: 120px;
}
.island-card .island-name {
font-size: 0.9em;
}
.island-card .island-chest-group,
.island-card .island-chest-group img {
width: 28px;
height: 28px;
}
.island-card .island-chest-count {
font-size: 10px;
padding: 0 2px;
}
}
</style> <script>
(function () {
function initClickable() {
document.querySelectorAll('.island-card[data-href]').forEach(function (el) {
if (el._icClick) return;
el._icClick = true;
el.addEventListener('click', function () {
var href = el.getAttribute('data-href');
if (href) window.location.href = href;
});
el.addEventListener('keydown', function (e) {
if (e.key === 'Enter' || e.key === ' ') {
e.preventDefault();
var href = el.getAttribute('data-href');
if (href) window.location.href = href;
}
});
});
}
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initClickable);
} else {
initClickable();
}
})();
</script>