Mudanças entre as edições de "Widget:ItemButton"
Ir para navegação
Ir para pesquisar
| Linha 2: | Linha 2: | ||
.item-card-square { | .item-card-square { | ||
<!-- Dimensões e Estilos Básicos --> | |||
width: 100px; | |||
height: 100px; | |||
border-radius: 12px; | |||
margin: 0 auto; | |||
padding-top: 10px; | |||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); | |||
cursor: pointer; | |||
position: relative; | |||
overflow: hidden; | |||
<!-- Layout Interno --> | <!-- Layout Interno --> | ||
| Linha 23: | Linha 23: | ||
transition: transform 0.2s ease-out, box-shadow 0.2s ease-out, background-color 0.2s ease-out; | transition: transform 0.2s ease-out, box-shadow 0.2s ease-out, background-color 0.2s ease-out; | ||
border: 2px solid white; /* Borda branca fixa */ | border: 2px solid white; /* Borda branca fixa */ | ||
} | } | ||
<!-- Estilo para o link de cobertura de 100% (tag <a> nativa) --> | <!-- Estilo para o link de cobertura de 100% (tag <a> nativa) --> | ||
.item-card-square a { | .item-card-square a { | ||
position: absolute; | position: absolute; | ||
top: 0; | top: 0; | ||
| Linha 35: | Linha 35: | ||
text-decoration: none; | text-decoration: none; | ||
display: block; | display: block; | ||
} | } | ||
<!-- Estilo para o Texto Interno --> | <!-- Estilo para o Texto Interno --> | ||
.item-card-square .item-label { | .item-card-square .item-label { | ||
font-size: 14px; | font-size: 14px; | ||
color: white; | color: white; | ||
| Linha 46: | Linha 46: | ||
margin-top: 5px; | margin-top: 5px; | ||
line-height: 1.2; | line-height: 1.2; | ||
} | } | ||
<!-- EFEITO HOVER: Eleva e muda sutilmente a cor --> | <!-- EFEITO HOVER: Eleva e muda sutilmente a cor --> | ||
.item-card-square:hover { | .item-card-square:hover { | ||
transform: translateY(-5px); <!-- Efeito de elevação --> | transform: translateY(-5px); <!-- Efeito de elevação --> | ||
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); <!-- Sombra mais profunda no hover --> | box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2); <!-- Sombra mais profunda no hover --> | ||
} | } | ||
<!-- HOVER: Muda a cor de fundo (para um tom mais escuro) --> | <!-- HOVER: Muda a cor de fundo (para um tom mais escuro) --> | ||
.item-card-square.blue-bg:hover { | .item-card-square.blue-bg:hover { | ||
background-color: #2980b9 !important; | background-color: #2980b9 !important; | ||
} | } | ||
.item-card-square.gold-bg:hover { | .item-card-square.gold-bg:hover { | ||
background-color: #c9951f !important; | background-color: #c9951f !important; | ||
} | } | ||
.item-card-square.green-bg:hover { | .item-card-square.green-bg:hover { | ||
background-color: #229954 !important; | background-color: #229954 !important; | ||
} | } | ||
</style> | </style> | ||
<div class="item-card-square {{color}}-bg" style="background-color: {{color}};"> | <div class="item-card-square {{color}}-bg" style="background-color: {{color}};"> | ||
<a href="/index.php/{{page}}" title="{{label}}"></a> | <a href="/index.php/{{page}}" title="{{label}}"></a> | ||
| Linha 78: | Linha 78: | ||
{{label}} | {{label}} | ||
</div> | </div> | ||
</div> | </div> | ||
Edição das 22h07min de 11 de outubro de 2025
<style>
.item-card-square {
width: 100px;
height: 100px;
border-radius: 12px;
margin: 0 auto;
padding-top: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
cursor: pointer;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
transition: transform 0.2s ease-out, box-shadow 0.2s ease-out, background-color 0.2s ease-out;
border: 2px solid white; /* Borda branca fixa */
}
.item-card-square a {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 10;
text-decoration: none;
display: block;
}
.item-card-square .item-label {
font-size: 14px;
color: white;
font-weight: bold;
position: relative;
z-index: 5;
margin-top: 5px;
line-height: 1.2;
}
.item-card-square:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
.item-card-square.blue-bg:hover {
background-color: #2980b9 !important;
}
.item-card-square.gold-bg:hover {
background-color: #c9951f !important;
}
.item-card-square.green-bg:hover {
background-color: #229954 !important;
}
</style>
<a href="/index.php/Predefinição:Page" title="Predefinição:Label"></a>
[[Arquivo:Predefinição:Image|60px|semlink]]