Mudanças entre as edições de "Widget:Teste"
Ir para navegação
Ir para pesquisar
m |
m |
||
| Linha 1: | Linha 1: | ||
<style> | <style> | ||
.island-grid { | .island-grid { | ||
display: flex; | |||
flex-wrap: wrap; | |||
gap: 16px; | |||
padding: 16px 0; | |||
} | } | ||
.island-card { | .island-card { | ||
background: #eeeded; | |||
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 10px; | |||
border-radius: 8px; | |||
text-align: center; | |||
padding: 20px 16px; | |||
width: calc(25% - 12px); | |||
box-sizing: border-box; | |||
text-decoration: none; | |||
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 { | .island-card:hover { | ||
transform: translateY(-3px); | |||
box-shadow: rgba(0, 0, 0, 0.35) 0px 6px 16px; | |||
} | } | ||
.island-card:visited { color: inherit; } | .island-card:visited { | ||
color: inherit; | |||
} | |||
.island-card .island-img img { | .island-card .island-img img { | ||
width: 150px; | |||
height: 150px; | |||
object-fit: contain; | |||
pointer-events: none; | |||
} | } | ||
.island-card .island-name { | .island-card .island-name { | ||
font-size: 1.05em; | |||
font-weight: bold; | |||
color: #000; | |||
pointer-events: none; | |||
} | } | ||
.island-card .island-chests { | .island-card .island-chests { | ||
display: flex; | |||
align-items: center; | |||
gap: 4px; | |||
font-weight: bold; | |||
font-size: 1em; | |||
color: #000; | |||
pointer-events: none; | |||
} | } | ||
@media (max-width: 900px) { | @media (max-width: 900px) { | ||
.island-card { | |||
} | width: calc(33.333% - 11px); | ||
@media (max-width: 600px) { | } | ||
} | |||
} | @media (max-width: 600px) { | ||
@media (max-width: 360px) { | .island-card { | ||
width: calc(50% - 8px); | |||
} | } | ||
.island-card .island-img img { | |||
width: 100px; | |||
height: 100px; | |||
} | |||
} | |||
@media (max-width: 360px) { | |||
.island-card { | |||
width: 100%; | |||
} | |||
} | |||
</style> | </style> | ||
<script> | |||
(function () { | |||
document.querySelectorAll('.island-card[data-href]').forEach(function (el) { | |||
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; | |||
} | |||
}); | |||
}); | |||
})(); | |||
</script> | |||
Edição das 22h31min de 12 de março de 2026
<style>
.island-grid {
display: flex;
flex-wrap: wrap;
gap: 16px;
padding: 16px 0;
}
.island-card {
background: #eeeded;
box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 10px;
border-radius: 8px;
text-align: center;
padding: 20px 16px;
width: calc(25% - 12px);
box-sizing: border-box;
text-decoration: none;
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(-3px);
box-shadow: rgba(0, 0, 0, 0.35) 0px 6px 16px;
}
.island-card:visited {
color: inherit;
}
.island-card .island-img img {
width: 150px;
height: 150px;
object-fit: contain;
pointer-events: none;
}
.island-card .island-name {
font-size: 1.05em;
font-weight: bold;
color: #000;
pointer-events: none;
}
.island-card .island-chests {
display: flex;
align-items: center;
gap: 4px;
font-weight: bold;
font-size: 1em;
color: #000;
pointer-events: none;
}
@media (max-width: 900px) {
.island-card {
width: calc(33.333% - 11px);
}
}
@media (max-width: 600px) {
.island-card {
width: calc(50% - 8px);
}
.island-card .island-img img {
width: 100px;
height: 100px;
}
}
@media (max-width: 360px) {
.island-card {
width: 100%;
}
}
</style> <script>
(function () {
document.querySelectorAll('.island-card[data-href]').forEach(function (el) {
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;
}
});
});
})();
</script>