Mudanças entre as edições de "Widget:Teste"
| Linha 1: | Linha 1: | ||
<div class="home-button-container"> | <div class="home-button-container"> | ||
<!-- 1. Personagens --> | |||
<div class="home-button-item"> | <div class="home-button-item"> | ||
<a href="/index.php/Personagens"> | <a href="/index.php/Personagens"> | ||
| Linha 9: | Linha 10: | ||
</div> | </div> | ||
<!-- 2. Missões --> | |||
<div class="home-button-item"> | <div class="home-button-item"> | ||
<a href="/index.php/ | <a href="/index.php/Missões"> | ||
<div class="home-button-image"> | <div class="home-button-image"> | ||
<img src="https://wiki.gla.com.br/images/ | <img src="https://wiki.gla.com.br/images/0/08/Missoes_card.png"> | ||
</div> | </div> | ||
<div class="home-button-title"> | <div class="home-button-title">Missões</div> | ||
</a> | </a> | ||
</div> | </div> | ||
<div class="home-button-item | <!-- 3. Itens --> | ||
<a href="/index.php/ | <div class="home-button-item"> | ||
<a href="/index.php/Itens"> | |||
<div class="home-button-image"> | <div class="home-button-image"> | ||
<img src="https://wiki.gla.com.br/images/ | <img src="https://wiki.gla.com.br/images/3/39/Itens_card.png"> | ||
</div> | </div> | ||
<div class="home-button-title"> | <div class="home-button-title">Itens</div> | ||
</a> | </a> | ||
</div> | </div> | ||
<!-- 4. Bosses (desativado) --> | |||
<div class="home-button-item disabled"> | <div class="home-button-item disabled"> | ||
<a href="/index.php/World_Boss"> | <a href="/index.php/World_Boss"> | ||
| Linha 32: | Linha 36: | ||
<img src="https://wiki.gla.com.br/images/8/87/Worldboss_card.png"> | <img src="https://wiki.gla.com.br/images/8/87/Worldboss_card.png"> | ||
</div> | </div> | ||
<div class="home-button-title"> | <div class="home-button-title">Bosses</div> | ||
</a> | </a> | ||
</div> | </div> | ||
<!-- 5. Wanted Pirates --> | |||
<div class="home-button-item"> | <div class="home-button-item"> | ||
<a href="/index.php/Wanted_Pirates"> | <a href="/index.php/Wanted_Pirates"> | ||
| Linha 41: | Linha 46: | ||
<img src="https://wiki.gla.com.br/images/9/9d/Wantedpirates_card.png"> | <img src="https://wiki.gla.com.br/images/9/9d/Wantedpirates_card.png"> | ||
</div> | </div> | ||
<div class="home-button-title"> | <div class="home-button-title">Wanted Pirates</div> | ||
</a> | </a> | ||
</div> | </div> | ||
<div class="home-button-item"> | <!-- 6. Conquistas (desativado) --> | ||
<a href="/index.php/ | <div class="home-button-item disabled"> | ||
<a href="/index.php/Conquistas"> | |||
<div class="home-button-image"> | <div class="home-button-image"> | ||
<img src="https://wiki.gla.com.br/images/ | <img src="https://wiki.gla.com.br/images/a/a9/Conquistas_card.png"> | ||
</div> | </div> | ||
<div class="home-button-title"> | <div class="home-button-title">Conquistas</div> | ||
</a> | </a> | ||
</div> | </div> | ||
<!-- 7. Passe de Batalha --> | |||
<div class="home-button-item"> | <div class="home-button-item"> | ||
<a href="/index.php/Passe de Batalha"> | <a href="/index.php/Passe de Batalha"> | ||
| Linha 59: | Linha 66: | ||
<img src="https://wiki.gla.com.br/images/7/7d/Passe_card.png"> | <img src="https://wiki.gla.com.br/images/7/7d/Passe_card.png"> | ||
</div> | </div> | ||
<div class="home-button-title"> | <div class="home-button-title">Passe de Batalha</div> | ||
</a> | </a> | ||
</div> | </div> | ||
<!-- 8. Guia para Iniciantes (desativado) --> | |||
<div class="home-button-item disabled"> | <div class="home-button-item disabled"> | ||
<a href="/index.php/ | <a href="/index.php/Boss_Semanais"> | ||
<div class="home-button-image"> | <div class="home-button-image"> | ||
<img src="https://wiki.gla.com.br/images/ | <img src="https://wiki.gla.com.br/images/6/65/Weeklyboss_card.png"> | ||
</div> | </div> | ||
<div class="home-button-title"> | <div class="home-button-title">Guia para Iniciantes</div> | ||
</a> | </a> | ||
</div> | </div> | ||
| Linha 77: | Linha 85: | ||
display: grid; | display: grid; | ||
grid-template-columns: repeat(4, 1fr); | grid-template-columns: repeat(4, 1fr); | ||
gap: | gap: 20px; | ||
padding: 10px; | padding: 10px; | ||
box-sizing: border-box; | box-sizing: border-box; | ||
} | } | ||
.home-button-item { | .home-button-item { | ||
| Linha 125: | Linha 134: | ||
.home-button-title { | .home-button-title { | ||
font-family: | font-family: sans-serif; | ||
font-weight: bold; | font-weight: bold; | ||
font-size: 1.1em; | font-size: 1.1em; | ||
| Linha 145: | Linha 154: | ||
} | } | ||
/* Botões desativados */ | |||
.home-button-item.disabled { | .home-button-item.disabled { | ||
opacity: 0.5; | opacity: 0.5; | ||
| Linha 157: | Linha 167: | ||
} | } | ||
/* Responsividade: 2 colunas abaixo de 1280px */ | |||
@media (max-width: 1280px) { | @media (max-width: 1280px) { | ||
.home-button-container { | .home-button-container { | ||
Edição das 01h15min de 31 de março de 2025
<style> .home-button-container { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; padding: 10px; box-sizing: border-box; }
.home-button-item {
position: relative;
overflow: hidden;
border: 1px solid #ddd;
border-radius: 8px;
background: #fff;
transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
box-sizing: border-box;
}
.home-button-item:hover { transform: translateY(-5px); border-color: #007bff; box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2); }
.home-button-item a { display: block; text-decoration: none; color: inherit; }
.home-button-image { width: 100%; aspect-ratio: 16/9; display: block; margin: 0; padding: 0; }
.home-button-image img { width: 100%; height: 100%; object-fit: cover; display: block; transition: filter 0.3s ease; }
.home-button-item:hover .home-button-image img { filter: brightness(1.1); }
.home-button-title { font-family: sans-serif; font-weight: bold; font-size: 1.1em; background: #fff; color: #0645AD; margin: 0; padding: 10px 5px; position: relative; text-transform: uppercase; border-top: 1px solid #ddd; text-align: center; text-decoration: none; transition: background-color 0.3s ease; box-shadow: inset 0 2px 2px rgba(0, 0, 0, 0.1); }
.home-button-item:hover .home-button-title { background-color: #f9f9f9; }
/* Botões desativados */ .home-button-item.disabled { opacity: 0.5; pointer-events: none; transform: none; box-shadow: none; border-color: #ddd; }
.home-button-item.disabled .home-button-title { color: #999; }
/* Responsividade: 2 colunas abaixo de 1280px */ @media (max-width: 1280px) { .home-button-container { grid-template-columns: repeat(2, 1fr); } } </style>