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

De Wiki Gla
Ir para navegação Ir para pesquisar
m
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;
      height: 4em;
border-radius: 0.75em;
      border-radius: 0.75em;
overflow: hidden;
      overflow: hidden;
cursor: pointer;
      cursor: pointer;
background-size: cover;
      background-size: cover;
background-position: center;
      background-position: center;
transition: filter 0.3s ease, box-shadow 0.3s ease;
      transition: filter 0.3s ease;
margin: 0;
      margin: 0;
}
    }
    .wiki-social-wrapper .social-card::before {
      content: "";
      position: absolute;
      inset: 0;
      background-color: var(--overlay-color);
      opacity: 0.6;                    /* overlay mais forte */
      pointer-events: none;
      transition: opacity 0.3s ease;
    }


.wiki-social-wrapper .social-card::before {
    .wiki-social-wrapper .social-card:hover {
content: "";
      filter: brightness(1.05);
position: absolute;
    }
inset: 0;
    .wiki-social-wrapper .social-card:hover::before {
background-color: var(--overlay-color);
      opacity: 0.85;                   /* overlay ainda mais forte no hover */
opacity: 0.3;
    }
/* overlay suave */
pointer-events: none;
transition: opacity 0.3s ease;
}


.wiki-social-wrapper .social-card:hover {
    .wiki-social-wrapper .social-card-content {
filter: brightness(1.05);
      position: relative;
/* leve brilho */
      display: flex;
}
      align-items: center;
      padding: 0 1em;
      height: 100%;
      color: #fff;
    }
    .wiki-social-wrapper .social-icon {
      width: 2em;
      height: 2em;
      margin-right: 0.75em;
      flex-shrink: 0;
    }
    .wiki-social-wrapper .social-name {
      font-size: 1.25em;
      line-height: 1;
      font-weight: bold;
    }


.wiki-social-wrapper .social-card:hover::before {
    /* cores de overlay fortes para cada rede */
opacity: 0.5;
    .wiki-social-wrapper .social-card.discord  { background-image: url('https://i.imgur.com/3ON2kVj.gif');  --overlay-color: rgba(114,137,218,1); }
/* overlay um pouco mais forte */
    .wiki-social-wrapper .social-card.tiktok    { background-image: url('https://i.imgur.com/oY0Z4PMC.jpg'); --overlay-color: rgba(0,0,0,1);    }
}
    .wiki-social-wrapper .social-card.instagram { background-image: url('https://i.imgur.com/ZXQ7wq3.jpg'); --overlay-color: rgba(193,53,132,1); }
    .wiki-social-wrapper .social-card.facebook  { background-image: url('https://i.imgur.com/9bGkq7Y.jpg'); --overlay-color: rgba(24,119,242,1); }
  </style>


.wiki-social-wrapper .social-card-content {
  <div class="social-cards">
position: relative;
    <a href="https://discord.gg/SEULINK" class="social-card discord" target="_blank" rel="noopener">
display: flex;
      <div class="social-card-content">
align-items: center;
        <img src="https://cdn.simpleicons.org/Discord/ffffff" alt="Discord" class="social-icon"/>
padding: 0 1em;
        <span class="social-name">Discord</span>
height: 100%;
      </div>
color: #fff;
    </a>
}
    <a href="https://tiktok.com/@SEUTIKTOK" class="social-card tiktok" target="_blank" rel="noopener">
 
      <div class="social-card-content">
.wiki-social-wrapper .social-icon {
        <img src="https://cdn.simpleicons.org/TikTok/ffffff" alt="TikTok" class="social-icon"/>
width: 2em;
        <span class="social-name">TikTok</span>
height: 2em;
      </div>
margin-right: 0.75em;
    </a>
flex-shrink: 0;
    <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"/>
.wiki-social-wrapper .social-name {
        <span class="social-name">Instagram</span>
font-size: 1.25em;
      </div>
line-height: 1;
    </a>
font-weight: bold;
    <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"/>
/* cada rede define sua cor de overlay forte aqui */
        <span class="social-name">Facebook</span>
.wiki-social-wrapper .social-card.discord {
      </div>
background-image: url('https://i.imgur.com/3ON2kVj.gif');
    </a>
--overlay-color: rgba(114, 137, 218, 1);
  </div>
}
 
.wiki-social-wrapper .social-card.tiktok {
background-image: url('https://i.imgur.com/oY0Z4PMC.jpg');
--overlay-color: rgba(0, 0, 0, 1);
}
 
.wiki-social-wrapper .social-card.instagram {
background-image: url('https://i.imgur.com/ZXQ7wq3.jpg');
--overlay-color: rgba(193, 53, 132, 1);
}
 
.wiki-social-wrapper .social-card.facebook {
background-image: url('https://i.imgur.com/9bGkq7Y.jpg');
--overlay-color: rgba(24, 119, 242, 1);
}
</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 00h51min de 25 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;
     background-size: cover;
     background-position: center;
     transition: filter 0.3s ease;
     margin: 0;
   }
   .wiki-social-wrapper .social-card::before {
     content: "";
     position: absolute;
     inset: 0;
     background-color: var(--overlay-color);
     opacity: 0.6;                    /* overlay mais forte */
     pointer-events: none;
     transition: opacity 0.3s ease;
   }
   .wiki-social-wrapper .social-card:hover {
     filter: brightness(1.05);
   }
   .wiki-social-wrapper .social-card:hover::before {
     opacity: 0.85;                   /* overlay ainda mais forte no hover */
   }
   .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: 2em;
     height: 2em;
     margin-right: 0.75em;
     flex-shrink: 0;
   }
   .wiki-social-wrapper .social-name {
     font-size: 1.25em;
     line-height: 1;
     font-weight: bold;
   }
   /* cores de overlay fortes para cada rede */
   .wiki-social-wrapper .social-card.discord   { background-image: url('https://i.imgur.com/3ON2kVj.gif');   --overlay-color: rgba(114,137,218,1); }
   .wiki-social-wrapper .social-card.tiktok    { background-image: url('https://i.imgur.com/oY0Z4PMC.jpg'); --overlay-color: rgba(0,0,0,1);     }
   .wiki-social-wrapper .social-card.instagram { background-image: url('https://i.imgur.com/ZXQ7wq3.jpg'); --overlay-color: rgba(193,53,132,1); }
   .wiki-social-wrapper .social-card.facebook  { background-image: url('https://i.imgur.com/9bGkq7Y.jpg'); --overlay-color: rgba(24,119,242,1); }
 </style>