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

De Wiki Gla
Ir para navegação Ir para pesquisar
m
Linha 1: Linha 1:
<div class="wiki-social-wrapper">
<div class="wiki-social-wrapper">
  <style>
<style>
    .wiki-social-wrapper .social-cards {
.wiki-social-wrapper .social-cards {
      display: grid;
display: grid;
      grid-template-columns: 1fr;
grid-template-columns: 1fr;
      gap: 0.25em;
gap: 0.25em;
    }
}


    @media screen and (max-width: 1024px) {
@media screen and (max-width: 1024px) {
      .wiki-social-wrapper .social-cards {
.wiki-social-wrapper .social-cards {
        grid-template-columns: repeat(2, 1fr);
grid-template-columns: repeat(2, 1fr);
        gap: 0.5em;
gap: 0.5em;
      }
}
    }
}


    .wiki-social-wrapper .social-card {
.wiki-social-wrapper .social-card {
      position: relative;
position: relative;
      height: 4em;             /* altura fixa para todos */
height: 4em;
      border-radius: 0.75em;
border-radius: 0.75em;
      overflow: hidden;
overflow: hidden;
      cursor: pointer;
cursor: pointer;
      transition: transform .2s, box-shadow .2s;
transition: transform .2s, box-shadow .2s;
      background-size: cover;
background-size: cover;
      background-position: center;
background-position: center;
      margin: 0;
margin: 0;
    }
}
    .wiki-social-wrapper .social-card::before {
      content: "";
      position: absolute;
      inset: 0;
      background-color: rgba(0,0,0,0.3);
      mix-blend-mode: multiply;
      pointer-events: none;
      transition: background-color .2s;
    }
    .wiki-social-wrapper .social-card:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    }
    .wiki-social-wrapper .social-card:hover::before {
      background-color: rgba(0,0,0,0.5);
    }
    .wiki-social-wrapper .social-card-content {
      position: relative;
      display: flex;
      align-items: center;
      padding: 0 1em;
      height: 100%;
      color: #fff;
    }
    .wiki-social-wrapper .social-icon {
      width: 1.5em;
      height: 1.5em;
      margin-right: 0.5em;
    }
    .wiki-social-wrapper .social-name {
      font-size: 1em;
      font-weight: bold;
    }


    /* backgrounds individuais */
.wiki-social-wrapper .social-card::before {
    .wiki-social-wrapper .social-card.discord  { background-image: url('https://i.imgur.com/3ON2kVj.gif'); }
content: "";
    .wiki-social-wrapper .social-card.tiktok    { background-image: url('https://i.imgur.com/oY0Z4PMC.jpg'); }
position: absolute;
    .wiki-social-wrapper .social-card.instagram { background-image: url('https://i.imgur.com/ZXQ7wq3.jpg'); }
inset: 0;
    .wiki-social-wrapper .social-card.facebook  { background-image: url('https://i.imgur.com/9bGkq7Y.jpg'); }
background-color: rgba(0, 0, 0, 0.3);
  </style>
mix-blend-mode: multiply;
pointer-events: none;
transition: background-color .2s;
}


  <div class="social-cards">
.wiki-social-wrapper .social-card:hover {
    <a href="https://discord.gg/SEULINK" class="social-card discord" target="_blank" rel="noopener">
transform: translateY(-2px);
      <div class="social-card-content">
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
        <img src="https://cdn.simpleicons.org/Discord/ffffff" alt="Discord" class="social-icon"/>
}
        <span class="social-name">Discord</span>
 
      </div>
.wiki-social-wrapper .social-card:hover::before {
    </a>
background-color: rgba(0, 0, 0, 0.5);
    <a href="https://tiktok.com/@SEUTIKTOK" class="social-card tiktok" target="_blank" rel="noopener">
}
      <div class="social-card-content">
 
        <img src="https://cdn.simpleicons.org/TikTok/ffffff" alt="TikTok" class="social-icon"/>
.wiki-social-wrapper .social-card-content {
        <span class="social-name">TikTok</span>
position: relative;
      </div>
display: flex;
    </a>
align-items: center;
    <a href="https://instagram.com/SEUINS" class="social-card instagram" target="_blank" rel="noopener">
/* garante alinhamento vertical */
      <div class="social-card-content">
padding: 0 1em;
        <img src="https://cdn.simpleicons.org/Instagram/ffffff" alt="Instagram" class="social-icon"/>
height: 100%;
        <span class="social-name">Instagram</span>
color: #fff;
      </div>
}
    </a>
 
    <a href="https://facebook.com/SEUPAGE" class="social-card facebook" target="_blank" rel="noopener">
.wiki-social-wrapper .social-icon {
      <div class="social-card-content">
width: 2em;
        <img src="https://cdn.simpleicons.org/Facebook/ffffff" alt="Facebook" class="social-icon"/>
/* ligeiramente maior */
        <span class="social-name">Facebook</span>
height: 2em;
      </div>
margin-right: 0.75em;
    </a>
flex-shrink: 0;
  </div>
}
 
.wiki-social-wrapper .social-name {
font-size: 1.25em;
/* fonte maior */
line-height: 1;
/* evita desalinhamento */
font-weight: bold;
}
 
/* backgrounds individuais */
.wiki-social-wrapper .social-card.discord {
background-image: url('https://i.imgur.com/3ON2kVj.gif');
}
 
.wiki-social-wrapper .social-card.tiktok {
background-image: url('https://i.imgur.com/oY0Z4PMC.jpg');
}
 
.wiki-social-wrapper .social-card.instagram {
background-image: url('https://i.imgur.com/ZXQ7wq3.jpg');
}
 
.wiki-social-wrapper .social-card.facebook {
background-image: url('https://i.imgur.com/9bGkq7Y.jpg');
}
</style>
 
<div class="social-cards">
<a href="https://discord.gg/SEULINK" class="social-card discord" target="_blank" rel="noopener">
<div class="social-card-content">
<img src="https://cdn.simpleicons.org/Discord/ffffff" alt="Discord" class="social-icon" />
<span class="social-name">Discord</span>
</div>
</a>
<a href="https://tiktok.com/@SEUTIKTOK" class="social-card tiktok" target="_blank" rel="noopener">
<div class="social-card-content">
<img src="https://cdn.simpleicons.org/TikTok/ffffff" alt="TikTok" class="social-icon" />
<span class="social-name">TikTok</span>
</div>
</a>
<a href="https://instagram.com/SEUINS" class="social-card instagram" target="_blank" rel="noopener">
<div class="social-card-content">
<img src="https://cdn.simpleicons.org/Instagram/ffffff" alt="Instagram" class="social-icon" />
<span class="social-name">Instagram</span>
</div>
</a>
<a href="https://facebook.com/SEUPAGE" class="social-card facebook" target="_blank" rel="noopener">
<div class="social-card-content">
<img src="https://cdn.simpleicons.org/Facebook/ffffff" alt="Facebook" class="social-icon" />
<span class="social-name">Facebook</span>
</div>
</a>
</div>
</div>
</div>

Edição das 10h54min de 24 de abril de 2025

<style> .wiki-social-wrapper .social-cards { display: grid; grid-template-columns: 1fr; gap: 0.25em; }

@media screen and (max-width: 1024px) { .wiki-social-wrapper .social-cards { grid-template-columns: repeat(2, 1fr); gap: 0.5em; } }

.wiki-social-wrapper .social-card { position: relative; height: 4em; border-radius: 0.75em; overflow: hidden; cursor: pointer; transition: transform .2s, box-shadow .2s; background-size: cover; background-position: center; margin: 0; }

.wiki-social-wrapper .social-card::before { content: ""; position: absolute; inset: 0; background-color: rgba(0, 0, 0, 0.3); mix-blend-mode: multiply; pointer-events: none; transition: background-color .2s; }

.wiki-social-wrapper .social-card:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); }

.wiki-social-wrapper .social-card:hover::before { background-color: rgba(0, 0, 0, 0.5); }

.wiki-social-wrapper .social-card-content { position: relative; display: flex; align-items: center; /* garante alinhamento vertical */ padding: 0 1em; height: 100%; color: #fff; }

.wiki-social-wrapper .social-icon { width: 2em; /* ligeiramente maior */ height: 2em; margin-right: 0.75em; flex-shrink: 0; }

.wiki-social-wrapper .social-name { font-size: 1.25em; /* fonte maior */ line-height: 1; /* evita desalinhamento */ font-weight: bold; }

/* backgrounds individuais */ .wiki-social-wrapper .social-card.discord { background-image: url('https://i.imgur.com/3ON2kVj.gif'); }

.wiki-social-wrapper .social-card.tiktok { background-image: url('https://i.imgur.com/oY0Z4PMC.jpg'); }

.wiki-social-wrapper .social-card.instagram { background-image: url('https://i.imgur.com/ZXQ7wq3.jpg'); }

.wiki-social-wrapper .social-card.facebook { background-image: url('https://i.imgur.com/9bGkq7Y.jpg'); } </style>

Disponível em “https://wiki.gla.com.br/index.php?title=Widget:Gurren&oldid=31339”