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

De Wiki Gla
Ir para navegação Ir para pesquisar
Linha 1: Linha 1:
<div class="wiki-social-wrapper">
<style>
    <style>
.index-container {
        .wiki-social-wrapper .social-cards {
    display: flex;
            display: grid;
    flex-wrap: wrap;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    justify-content: space-between;
            gap: 0.75em;
    font-family: Verdana, Arial, Helvetica, sans-serif;
            justify-content: center;
    padding: 10px;
        }
}


        @media screen and (max-width: 768px) {
.index-section {
            .wiki-social-wrapper .social-cards {
    flex: 1 1 45%;
                grid-template-columns: repeat(3, 1fr);
    min-width: 300px;
                gap: 0.5em;
    margin: 10px 0;
            }
}
        }


        .wiki-social-wrapper .social-card {
.index-title {
            position: relative;
    display: flex;
            height: 4em;
    align-items: center;
            border-radius: 1em;
    border-bottom: 1px dashed #aaa;
            overflow: hidden;
    padding-bottom: 5px;
            cursor: pointer;
    margin-bottom: 8px;
            margin: 0;
    font-weight: bold;
            text-decoration: none;
    font-size: 16px;
            display: flex;
}
            align-items: center;
            background-color: var(--bg-color);
            border: 1px solid transparent;
            transition: border 0.3s ease, box-shadow 0.3s ease;
        }


        .wiki-social-wrapper .social-card::before {
.index-title img {
            content: "";
    width: 32px;
            position: absolute;
    height: 32px;
            inset: 0;
    margin-right: 8px;
            background-image: var(--bg-image);
}
            background-size: cover;
            background-position: center;
            opacity: 0;
            z-index: 0;
            transition: opacity 0.3s ease;
        }


        .wiki-social-wrapper .social-card:hover::before {
.index-links {
            opacity: 1;
    line-height: 1.6;
        }
}


        .wiki-social-wrapper .social-card:hover {
.index-links a {
            border: 1px solid var(--hover-color);
    text-decoration: none;
            box-shadow: 0 0 8px var(--hover-color);
}
        }


        .wiki-social-wrapper .social-card-content {
.index-links span.separator {
            position: relative;
    margin: 0 4px;
            z-index: 2;
    color: #aaa;
            display: flex;
}
            align-items: center;
            padding: 0 1em;
            width: 100%;
            height: 100%;
            color: #fff;
            transition: filter 0.3s ease;
            text-shadow: 0 1px 2px black;
            -webkit-font-smoothing: antialiased;
            transform: translateZ(0);
        }


        .wiki-social-wrapper .social-card:hover .social-card-content {
@media (max-width: 768px) {
            filter: brightness(1.15);
    .index-container {
        }
        flex-direction: column;
    }
    .index-section {
        min-width: 100%;
    }
}
</style>


        .wiki-social-wrapper .social-icon {
<div class="index-container">
            width: 2em;
            height: 2em;
            margin-right: 0.75em;
            flex-shrink: 0;
            filter: drop-shadow(0 1px 1px black);
            image-rendering: auto;
            transform: translateZ(0);
        }


         .wiki-social-wrapper .social-name {
    <div class="index-section">
             font-size: 1.2em;
         <div class="index-title">
             font-weight: bold;
             <img src="https://wiki.gla.com.br/images/Gold_medal.gif" alt="">
             text-decoration: none;
             Grand Line Adventures
         }
        </div>
        <div class="index-links">
            <a href="/Download">Download</a><span class="separator">·</span>
            <a href="/Suporte">Suporte</a><span class="separator">·</span>
            <a href="/Doações">Doações</a><span class="separator">·</span>
            <a href="/Benefícios_VIP">Benefícios VIP</a><span class="separator">·</span>
            <a href="/Revendedores_Oficiais">Revendedores Oficiais</a><span class="separator">·</span>
            <a href="/Criadores_de_Conteúdo">Criadores de Conteúdo</a><span class="separator">·</span>
             <a href="/Redes_Sociais">Redes Sociais</a>
         </div>
    </div>


         .wiki-social-wrapper .sprite-hover {
    <div class="index-section">
             position: absolute;
         <div class="index-title">
             bottom: -20px;
             <img src="https://wiki.gla.com.br/images/Gold_medal.gif" alt="">
             right: -10px;
             Informações Gerais
             width: 64px;
        </div>
             height: auto;
        <div class="index-links">
             opacity: 0;
             <a href="/Baús_de_Personagens">Baús de Personagens</a><span class="separator">·</span>
             pointer-events: none;
             <a href="/Tier_e_Estrelas">Tier e Estrelas</a><span class="separator">·</span>
             transition: opacity 0.3s ease, transform 0.3s ease;
             <a href="/Perfil_e_Ranking">Perfil e Ranking</a><span class="separator">·</span>
             z-index: 2;
             <a href="/Experiência">Experiência</a><span class="separator">·</span>
         }
             <a href="/Login_Diário">Login Diário</a><span class="separator">·</span>
             <a href="/Loja_de_Gemas">Loja de Gemas</a><span class="separator">·</span>
             <a href="/Skins">Skins</a>
         </div>
    </div>


         .wiki-social-wrapper .social-card:hover .sprite-hover {
    <div class="index-section">
             opacity: 1;
         <div class="index-title">
             transform: translateY(-20px);
            <img src="https://wiki.gla.com.br/images/Gold_medal.gif" alt="">
         }
            Sistemas
        </div>
        <div class="index-links">
            <a href="/Sistema_de_Indicação">Sistema de Indicação</a><span class="separator">·</span>
            <a href="/Melhoria_de_Equipamentos">Melhoria de Equipamentos</a><span class="separator">·</span>
             <a href="/Black_Market">Black Market</a><span class="separator">·</span>
             <a href="/Den-Den_TV">Den-Den TV</a><span class="separator">·</span>
            <a href="/Navegação">Navegação</a><span class="separator">·</span>
            <a href="/PvP">PvP</a>
         </div>
    </div>


        .wiki-social-wrapper .social-card.discord {
    <div class="index-section">
            --bg-color: #7289da;
        <div class="index-title">
            --hover-color: #5b6eae;
             <img src="https://wiki.gla.com.br/images/Gold_medal.gif" alt="">
             --bg-image: url('https://wiki.gla.com.br/images/3/35/Fundodawikiglatest.png');
            Configurações e Segurança
         }
        </div>
        <div class="index-links">
            <a href="/Configuração_de_Atalhos">Configuração de Atalhos</a><span class="separator">·</span>
            <a href="/Autorização_de_Máquina">Autorização de Máquina</a><span class="separator">·</span>
            <a href="/Problemas_de_Conexão">Problemas de Conexão</a><span class="separator">·</span>
            <a href="/Quick_Cast">Quick Cast</a>
         </div>
    </div>


        .wiki-social-wrapper .social-card.tiktok {
    <div class="index-section">
            --bg-color: #111111;
        <div class="index-title">
             --hover-color: #000;
             <img src="https://wiki.gla.com.br/images/Gold_medal.gif" alt="">
            --bg-image: url('https://wiki.gla.com.br/images/3/31/Cinza_capriw.png');
            Eventos Globais
         }
        </div>
        <div class="index-links">
            <a href="/Foxy_Quiz">Foxy Quiz</a><span class="separator">·</span>
            <a href="/Foxy_Race">Foxy Race</a><span class="separator">·</span>
            <a href="/Deathmatch">Deathmatch</a><span class="separator">·</span>
            <a href="/Foxy_Memory">Foxy Memory</a><span class="separator">·</span>
            <a href="/Foxy_Count">Foxy Count</a>
         </div>
    </div>


        .wiki-social-wrapper .social-card.instagram {
    <div class="index-section">
            --bg-color: #FF5341;
        <div class="index-title">
            --hover-color: #8e245f;
             <img src="https://wiki.gla.com.br/images/Gold_medal.gif" alt="">
             --bg-image: url('https://wiki.gla.com.br/images/1/1e/Mapa_instagram.png');
            Eventos Temporários
         }
        </div>
        <div class="index-links">
            <a href="/3D2Y">3D2Y</a><span class="separator">·</span>
            <a href="/Summer">Summer</a><span class="separator">·</span>
            <a href="/Halloween">Halloween</a><span class="separator">·</span>
            <a href="/Easter">Easter</a><span class="separator">·</span>
            <a href="/Germa_66">Germa 66</a><span class="separator">·</span>
            <a href="/Freedom">Freedom</a><span class="separator">·</span>
            <a href="/Fist_of_Love">Fist of Love</a>
         </div>
    </div>


        .wiki-social-wrapper .social-card.facebook {
            --bg-color: #3b5998;
            --hover-color: #2d4373;
            --bg-image: url('https://wiki.gla.com.br/images/5/5b/Mapa_facebook.png');
        }
    </style>
    <div class="social-cards">
        <a href="https://tiktok.com/@grandlineadventures" 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>
            <img class="sprite-hover" src="https://wiki.gla.com.br/images/e/ed/Deathstalker.png" alt="sprite">
        </a>
        <a href="https://instagram.com/grandlineadventures" 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>
            <img class="sprite-hover" src="https://wiki.gla.com.br/images/e/ed/Deathstalker.png" alt="sprite">
        </a>
        <a href="https://facebook.com/grandlineadventures" 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>
            <img class="sprite-hover" src="https://wiki.gla.com.br/images/e/ed/Deathstalker.png" alt="sprite">
        </a>
    </div>
</div>
</div>

Edição das 01h45min de 13 de maio de 2025

<style> .index-container { 

   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
   font-family: Verdana, Arial, Helvetica, sans-serif;
   padding: 10px;

}

.index-section { 

   flex: 1 1 45%;
   min-width: 300px;
   margin: 10px 0;

}

.index-title { 

   display: flex;
   align-items: center;
   border-bottom: 1px dashed #aaa;
   padding-bottom: 5px;
   margin-bottom: 8px;
   font-weight: bold;
   font-size: 16px;

}

.index-title img { 

   width: 32px;
   height: 32px;
   margin-right: 8px;

}

.index-links { 

   line-height: 1.6;

}

.index-links a { 

   text-decoration: none;

}

.index-links span.separator { 

   margin: 0 4px;
   color: #aaa;

}

@media (max-width: 768px) { 

   .index-container {
       flex-direction: column;
   }
   .index-section {
       min-width: 100%;
   }

} </style> 

           <img src="https://wiki.gla.com.br/images/Gold_medal.gif" alt="">
           Grand Line Adventures

           <a href="/Download">Download</a>·
           <a href="/Suporte">Suporte</a>·
           <a href="/Doações">Doações</a>·
           <a href="/Benefícios_VIP">Benefícios VIP</a>·
           <a href="/Revendedores_Oficiais">Revendedores Oficiais</a>·
           <a href="/Criadores_de_Conteúdo">Criadores de Conteúdo</a>·
           <a href="/Redes_Sociais">Redes Sociais</a>

           <img src="https://wiki.gla.com.br/images/Gold_medal.gif" alt="">
           Informações Gerais

           <a href="/Baús_de_Personagens">Baús de Personagens</a>·
           <a href="/Tier_e_Estrelas">Tier e Estrelas</a>·
           <a href="/Perfil_e_Ranking">Perfil e Ranking</a>·
           <a href="/Experiência">Experiência</a>·
           <a href="/Login_Diário">Login Diário</a>·
           <a href="/Loja_de_Gemas">Loja de Gemas</a>·
           <a href="/Skins">Skins</a>

           <img src="https://wiki.gla.com.br/images/Gold_medal.gif" alt="">
           Sistemas

           <a href="/Sistema_de_Indicação">Sistema de Indicação</a>·
           <a href="/Melhoria_de_Equipamentos">Melhoria de Equipamentos</a>·
           <a href="/Black_Market">Black Market</a>·
           <a href="/Den-Den_TV">Den-Den TV</a>·
           <a href="/Navegação">Navegação</a>·
           <a href="/PvP">PvP</a>

           <img src="https://wiki.gla.com.br/images/Gold_medal.gif" alt="">
           Configurações e Segurança

           <a href="/Configuração_de_Atalhos">Configuração de Atalhos</a>·
           <a href="/Autorização_de_Máquina">Autorização de Máquina</a>·
           <a href="/Problemas_de_Conexão">Problemas de Conexão</a>·
           <a href="/Quick_Cast">Quick Cast</a>

           <img src="https://wiki.gla.com.br/images/Gold_medal.gif" alt="">
           Eventos Globais

           <a href="/Foxy_Quiz">Foxy Quiz</a>·
           <a href="/Foxy_Race">Foxy Race</a>·
           <a href="/Deathmatch">Deathmatch</a>·
           <a href="/Foxy_Memory">Foxy Memory</a>·
           <a href="/Foxy_Count">Foxy Count</a>

           <img src="https://wiki.gla.com.br/images/Gold_medal.gif" alt="">
           Eventos Temporários

           <a href="/3D2Y">3D2Y</a>·
           <a href="/Summer">Summer</a>·
           <a href="/Halloween">Halloween</a>·
           <a href="/Easter">Easter</a>·
           <a href="/Germa_66">Germa 66</a>·
           <a href="/Freedom">Freedom</a>·
           <a href="/Fist_of_Love">Fist of Love</a>
Disponível em “https://wiki.gla.com.br/index.php?title=Widget:Teste&oldid=32321”