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="bemvindo-widget" style="display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 20px; padding: 1em; background: #1c1b1b; border: 2px solid #212121; box-sizing: border-box;">
  <style>
    .wiki-social-wrapper .social-cards {
      display: grid;
      grid-template-columns: 1fr;
      gap: 0.25em;
    }


     @media screen and (max-width: 1024px) {
  <!-- Texto -->
      .wiki-social-wrapper .social-cards {
  <div class="bemvindo-text" style="flex: 1 1 500px;">
        grid-template-columns: repeat(2, 1fr);
     <div style="font-family: Inter, sans-serif; font-size: 1.4em; font-weight: 600; color: #ddd; margin-bottom: 0.3em;">
        gap: 0.5em;
      Bem-vindos à Wiki do GLA
      }
    </div>
    }
    <div style="color: #bbb; font-size: 1em; line-height: 1.6;">
      Essa é uma wiki oficial do jogo <strong>Grand Line Adventures</strong>, um MMORPG gratuito criado por fãs ambientado no universo de One Piece, onde você pode jogar como vários personagens do anime.<br><br>
      O jogo está disponível para PC e Mobile. Você pode fazer o download clicando abaixo.
    </div>
    <div style="margin-top: 1em;">
      <a href="/index.php/Download" style="padding: 0.6em 1.2em; background: #333; color: #fff; text-decoration: none; border: 1px solid #444; font-weight: bold; font-family: Inter, sans-serif;">Download</a>
    </div>
  </div>


    .wiki-social-wrapper .social-card {
  <!-- Redes sociais -->
      position: relative;
  <div class="bemvindo-social" style="flex: 0 0 auto; display: flex; flex-direction: column; gap: 10px; align-items: flex-end;">
      height: 4em;
     <a href="https://discord.gg/gla" target="_blank" style="color: #bbb; text-decoration: none;">Discord</a>
      border-radius: 0.75em;
     <a href="https://tiktok.com/@gla" target="_blank" style="color: #bbb; text-decoration: none;">TikTok</a>
      overflow: hidden;
     <a href="https://instagram.com/gla" target="_blank" style="color: #bbb; text-decoration: none;">Instagram</a>
      cursor: pointer;
     <a href="https://facebook.com/gla" target="_blank" style="color: #bbb; text-decoration: none;">Facebook</a>
      margin: 0;
   </div>
      text-decoration: none;
      /* overlay azul padrão */
      --overlay-color: rgba(30,144,255,0.6);
    }
 
    /* Fundo ligeiramente borrado */
    .wiki-social-wrapper .social-card::before {
      content: "";
      position: absolute;
      inset: 0;
      background-image: var(--bg-url);
      background-size: cover;
      background-position: center;
      filter: blur(1px) brightness(0.8);
      transform: scale(1.05);
      z-index: 0;
     }
 
    /* Overlay colorido */
    .wiki-social-wrapper .social-card::after {
      content: "";
      position: absolute;
      inset: 0;
      background-color: var(--overlay-color);
      z-index: 1;
      transition: background-color 0.3s ease;
     }
    .wiki-social-wrapper .social-card:hover::after {
      /* ao hover usa a cor da rede */
      background-color: var(--hover-color);
    }
 
    /* Conteúdo acima */
    .wiki-social-wrapper .social-card-content {
      position: relative;
      z-index: 2;
      display: flex;
      align-items: center;
      padding: 0 1em;
      height: 100%;
      color: #fff;
      transition: filter 0.3s ease;
    }
    .wiki-social-wrapper .social-card:hover .social-card-content {
      filter: brightness(1.1);
    }
 
    .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;
      text-decoration: none;
    }
 
    /* URLs, cores de hover e placeholder */
     .wiki-social-wrapper .social-card.discord {
      --bg-url: url('https://i.imgur.com/cbUqsXp.png');
      --hover-color: rgba(114,137,218,0.85);
    }
    .wiki-social-wrapper .social-card.tiktok {
      --bg-url: url('https://i.imgur.com/cbUqsXp.png');
      --hover-color: rgba(0,0,0,0.85);
     }
    .wiki-social-wrapper .social-card.instagram {
      --bg-url: url('https://i.imgur.com/cbUqsXp.png');
      --hover-color: rgba(193,53,132,0.85);
    }
    .wiki-social-wrapper .social-card.facebook {
      --bg-url: url('https://i.imgur.com/cbUqsXp.png');
      --hover-color: rgba(24,119,242,0.85);
    }
   </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 22h33min de 5 de maio de 2025

     Bem-vindos à Wiki do GLA

     Essa é uma wiki oficial do jogo Grand Line Adventures, um MMORPG gratuito criado por fãs ambientado no universo de One Piece, onde você pode jogar como vários personagens do anime.


     O jogo está disponível para PC e Mobile. Você pode fazer o download clicando abaixo.

     <a href="/index.php/Download" style="padding: 0.6em 1.2em; background: #333; color: #fff; text-decoration: none; border: 1px solid #444; font-weight: bold; font-family: Inter, sans-serif;">Download</a>

   <a href="https://discord.gg/gla" target="_blank" style="color: #bbb; text-decoration: none;">Discord</a>
   <a href="https://tiktok.com/@gla" target="_blank" style="color: #bbb; text-decoration: none;">TikTok</a>
   <a href="https://instagram.com/gla" target="_blank" style="color: #bbb; text-decoration: none;">Instagram</a>
   <a href="https://facebook.com/gla" target="_blank" style="color: #bbb; text-decoration: none;">Facebook</a>
Disponível em “https://wiki.gla.com.br/index.php?title=Widget:Gurren&oldid=32046”