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

De Wiki Gla
Ir para navegação Ir para pesquisar
m (Página substituída por '<style> .island-grid { display: flex; flex-wrap: wrap; gap: 16px; justify-content: flex-start; padding: 16px 0; } .island-card { background: #eeeded; box...')
Etiqueta: Substituído
m
Linha 4: Linha 4:
   flex-wrap: wrap;
   flex-wrap: wrap;
   gap: 16px;
   gap: 16px;
  justify-content: flex-start;
   padding: 16px 0;
   padding: 16px 0;
}
}
Linha 16: Linha 15:
   width: calc(25% - 12px);
   width: calc(25% - 12px);
   box-sizing: border-box;
   box-sizing: border-box;
  cursor: pointer;
   text-decoration: none;
   text-decoration: none;
   display: flex;
   display: flex;
Linha 23: Linha 21:
   gap: 8px;
   gap: 8px;
   transition: transform 0.15s, box-shadow 0.15s;
   transition: transform 0.15s, box-shadow 0.15s;
  color: inherit;
}
}


Linha 30: Linha 29:
}
}


.island-card img.island-img {
.island-card:visited {
  color: inherit;
}
 
.island-card .island-img img {
   width: 150px;
   width: 150px;
   height: 150px;
   height: 150px;
   object-fit: contain;
   object-fit: contain;
  pointer-events: none;
}
}


Linha 40: Linha 44:
   font-weight: bold;
   font-weight: bold;
   color: #000;
   color: #000;
}
.island-card .island-name a {
  color: inherit;
  text-decoration: none;
  pointer-events: none;
}
}


Linha 51: Linha 61:
}
}


.island-card .island-chests img {
.island-card .island-chests a {
   height: auto;
   pointer-events: none;
}
}


@media (max-width: 900px) {
@media (max-width: 900px) {
   .island-card {
   .island-card { width: calc(33.333% - 11px); }
    width: calc(33.333% - 11px);
  }
}
}


@media (max-width: 600px) {
@media (max-width: 600px) {
   .island-card {
   .island-card { width: calc(50% - 8px); }
    width: calc(50% - 8px);
   .island-card .island-img img { width: 100px; height: 100px; }
  }
   .island-card img.island-img {
    width: 100px;
    height: 100px;
  }
}
}


@media (max-width: 360px) {
@media (max-width: 360px) {
   .island-card {
   .island-card { width: 100%; }
    width: 100%;
  }
}
}
</style>
</style>
<div class="island-grid">
{{{content}}}
</div>

Edição das 22h18min de 12 de março de 2026

<style> .island-grid {

 display: flex;
 flex-wrap: wrap;
 gap: 16px;
 padding: 16px 0;

}

.island-card {

 background: #eeeded;
 box-shadow: rgba(0,0,0,0.24) 0px 3px 10px;
 border-radius: 8px;
 text-align: center;
 padding: 20px 16px;
 width: calc(25% - 12px);
 box-sizing: border-box;
 text-decoration: none;
 display: flex;
 flex-direction: column;
 align-items: center;
 gap: 8px;
 transition: transform 0.15s, box-shadow 0.15s;
 color: inherit;

}

.island-card:hover {

 transform: translateY(-3px);
 box-shadow: rgba(0,0,0,0.35) 0px 6px 16px;

}

.island-card:visited {

 color: inherit;

}

.island-card .island-img img {

 width: 150px;
 height: 150px;
 object-fit: contain;
 pointer-events: none;

}

.island-card .island-name {

 font-size: 1.05em;
 font-weight: bold;
 color: #000;

}

.island-card .island-name a {

 color: inherit;
 text-decoration: none;
 pointer-events: none;

}

.island-card .island-chests {

 display: flex;
 align-items: center;
 gap: 4px;
 font-weight: bold;
 font-size: 1em;
 color: #000;

}

.island-card .island-chests a {

 pointer-events: none;

}

@media (max-width: 900px) {

 .island-card { width: calc(33.333% - 11px); }

}

@media (max-width: 600px) {

 .island-card { width: calc(50% - 8px); }
 .island-card .island-img img { width: 100px; height: 100px; }

}

@media (max-width: 360px) {

 .island-card { width: 100%; }

} </style>