Mudanças entre as edições de "Widget:MainPageMenu"
Ir para navegação
Ir para pesquisar
Etiqueta: Reversão manual |
|||
| Linha 93: | Linha 93: | ||
position: relative; | position: relative; | ||
overflow: hidden; | overflow: hidden; | ||
border: 1px solid | border: 1px solid #bbb; /* borda mais visível */ | ||
border-radius: 12px; | border-radius: 12px; | ||
background: #fff; | background: #fff; | ||
will-change: transform; | will-change: transform; | ||
transition: transform 0.2s ease-out, box-shadow 0.2s ease-out, border-color 0.2s ease-out; | transition: transform 0.2s ease-out, box-shadow 0.2s ease-out, border-color 0.2s ease-out; | ||
box-shadow: 0 1px 3px rgba(0,0,0,0. | box-shadow: 0 1px 3px rgba(0,0,0,0.08); | ||
box-sizing: border-box; | box-sizing: border-box; | ||
} | } | ||
| Linha 150: | Linha 150: | ||
transition: background-color 0.2s ease; | transition: background-color 0.2s ease; | ||
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4); | box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4); | ||
word-break: break-word; /* força quebra caso o título seja gigante */ | |||
} | } | ||
| Linha 161: | Linha 162: | ||
transform: none !important; | transform: none !important; | ||
box-shadow: none !important; | box-shadow: none !important; | ||
border-color: | border-color: #bbb !important; | ||
} | } | ||
| Linha 168: | Linha 169: | ||
} | } | ||
/* RESPONSIVO */ | |||
@media (max-width: 1280px) { | @media (max-width: 1280px) { | ||
.home-button-container { | .home-button-container { | ||
grid-template-columns: repeat(2, 1fr); | grid-template-columns: repeat(2, 1fr); | ||
} | |||
} | |||
@media (max-width: 768px) { | |||
.home-button-container { | |||
grid-template-columns: 1fr; | |||
} | } | ||
} | } | ||
</style> | </style> | ||
Edição das 01h33min de 2 de junho 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 #bbb; /* borda mais visível */ border-radius: 12px; background: #fff; will-change: transform; transition: transform 0.2s ease-out, box-shadow 0.2s ease-out, border-color 0.2s ease-out; box-shadow: 0 1px 3px rgba(0,0,0,0.08); box-sizing: border-box;
}
.home-button-item:hover {
transform: translateY(-3px); border-color: #007bff; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.12);
}
.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; border-top-left-radius: 12px; border-top-right-radius: 12px; 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: clamp(1.2em, 5vw, 1.3em); background: #fff; color: #0645AD; margin: 0; padding: 12px 5px 10px; position: relative; text-transform: uppercase; text-align: center; text-decoration: none; transition: background-color 0.2s ease; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4); word-break: break-word; /* força quebra caso o título seja gigante */
}
.home-button-item:hover .home-button-title {
background-color: #f9f9f9;
}
.home-button-item.disabled {
opacity: 0.4; pointer-events: none; transform: none !important; box-shadow: none !important; border-color: #bbb !important;
}
.home-button-item.disabled .home-button-title {
color: #aaa;
}
/* RESPONSIVO */ @media (max-width: 1280px) {
.home-button-container {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.home-button-container {
grid-template-columns: 1fr;
}
} </style>