Mudanças entre as edições de "Widget:ItemButton"

De Wiki Gla
Ir para navegação Ir para pesquisar
 
Linha 1: Linha 1:
<style>
<style>


     .item-card-square {
     .item-grid-container {
     <!-- Dimensões e Estilos Básicos -->
     max-width: 1000px;  
    width: 100px;
     margin: 0 auto;  
    height: 100px;
     padding: 0 10px;  
    border-radius: 12px;
     display: flex;  
     margin: 0 auto;
     flex-wrap: wrap;  
     padding-top: 10px;
     gap: 20px;  
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
     width: 100%;  
    cursor: pointer;
     box-sizing: border-box;
    position: relative;
    overflow: hidden;
   
    <!-- Layout Interno -->
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
     text-align: center;
   
    <!-- Transições para o Hover (Deixa a animação suave) -->
    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 */
  }
  }



Edição atual tal como às 19h44min de 15 de outubro de 2025

<style>

   .item-grid-container {
   max-width: 1000px; 
   margin: 0 auto; 
   padding: 0 10px; 
   display: flex; 
   flex-wrap: wrap; 
   gap: 20px; 
   width: 100%; 
   box-sizing: border-box;
}
.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]]