Mudanças entre as edições de "Widget:MainPageMenu"
Ir para navegação
Ir para pesquisar
(Criou página com '<div class="home-button-container"> <!-- 1. Personagens --> <div class="home-button-item"> <a href="/index.php/Personagens"> <div class="home-button-image"> <img src="https://...') |
|||
| Linha 93: | Linha 93: | ||
position: relative; | position: relative; | ||
overflow: hidden; | overflow: hidden; | ||
border: | border: 2px solid; | ||
border-radius: | border-image: linear-gradient(to bottom, #d8d8d8, #d0e3ff) 1; | ||
background: # | border-radius: 10px; | ||
transition: | background: #ffffff; | ||
transition: box-shadow 0.2s ease, transform 0.2s ease; | |||
box-shadow: 0 2px 5px rgba(0,0,0,0.05); | |||
box-sizing: border-box; | box-sizing: border-box; | ||
} | } | ||
.home-button-item:hover { | .home-button-item:hover { | ||
transform: translateY(-2px); | |||
box-shadow: 0 4px 10px rgba(0,0,0,0.1); | |||
} | } | ||
| Linha 108: | Linha 111: | ||
text-decoration: none; | text-decoration: none; | ||
color: inherit; | color: inherit; | ||
position: relative; | |||
z-index: 2; | |||
} | } | ||
| Linha 123: | Linha 128: | ||
object-fit: cover; | object-fit: cover; | ||
display: block; | display: block; | ||
border-top-left-radius: 10px; | |||
border-top-right-radius: 10px; | |||
transition: filter 0.2s ease; | transition: filter 0.2s ease; | ||
} | } | ||
| Linha 130: | Linha 137: | ||
font-weight: 600; | font-weight: 600; | ||
font-size: 1.05em; | font-size: 1.05em; | ||
background: # | background: #f5f5f5; | ||
color: # | color: #333; | ||
margin: 0; | margin: 0; | ||
padding: 8px 4px; | padding: 8px 4px; | ||
text-align: center; | text-align: center; | ||
text-transform: uppercase; | text-transform: uppercase; | ||
border-top: 1px solid #e0e0e0; | |||
transition: background-color 0.2s ease; | transition: background-color 0.2s ease; | ||
} | } | ||
.home-button-item.disabled { | .home-button-item.disabled { | ||
opacity: 0. | opacity: 0.4; | ||
pointer-events: none; | pointer-events: none; | ||
filter: grayscale(100%); | filter: grayscale(100%); | ||
| Linha 148: | Linha 154: | ||
.home-button-item.disabled .home-button-title { | .home-button-item.disabled .home-button-title { | ||
color: # | color: #999; | ||
} | } | ||
Edição das 14h22min de 6 de maio 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: 2px solid; border-image: linear-gradient(to bottom, #d8d8d8, #d0e3ff) 1; border-radius: 10px; background: #ffffff; transition: box-shadow 0.2s ease, transform 0.2s ease; box-shadow: 0 2px 5px rgba(0,0,0,0.05); box-sizing: border-box;
}
.home-button-item:hover {
transform: translateY(-2px); box-shadow: 0 4px 10px rgba(0,0,0,0.1);
}
.home-button-item a {
display: block; text-decoration: none; color: inherit; position: relative; z-index: 2;
}
.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; border-top-left-radius: 10px; border-top-right-radius: 10px; transition: filter 0.2s ease;
}
.home-button-title {
font-family: 'Inter', sans-serif; font-weight: 600; font-size: 1.05em; background: #f5f5f5; color: #333; margin: 0; padding: 8px 4px; text-align: center; text-transform: uppercase; border-top: 1px solid #e0e0e0; transition: background-color 0.2s ease;
}
.home-button-item.disabled {
opacity: 0.4; pointer-events: none; filter: grayscale(100%);
}
.home-button-item.disabled .home-button-title {
color: #999;
}
@media (max-width: 1280px) {
.home-button-container {
grid-template-columns: repeat(2, 1fr);
}
} </style>