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

De Wiki Gla
Ir para navegação Ir para pesquisar
Etiqueta: Reversão manual
Linha 1: Linha 1:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Componente de Abas - MediaWiki</title>
    <style>
        /* Container principal responsivo */
        .mw-tabber-container {
            width: 100%;
            max-width: 100%;
            margin: 20px 0;
            border: 1px solid #a7d7f9;
            border-radius: 4px;
            background-color: #f8f9fa;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }


        /* Container das abas */
<includeonly>
        .mw-tabber-tabs {
<div style="background:#22232a; border-radius:12px; padding:12px; width:330px; max-width:95%; border:2px solid #383946; font-family: 'Segoe UI', sans-serif; color:white; box-shadow:0 0 10px #19191f;">
            display: flex;
  <div style="display:flex; flex-direction:row; align-items:flex-start; gap:12px;">
            flex-wrap: wrap;
    <div style="flex-shrink:0;">
            background-color: #eaecf0;
      <div style="position:relative; width:94px; height:132px;">
            border-bottom: 2px solid #a7d7f9;
         <img src="{{{imagem|https://via.placeholder.com/94x132?text=Criatura}}}" style="width:94px; height:132px; border-radius:8px; object-fit:cover; border: 2px solid #383946;" alt="Imagem da criatura">
            padding: 0;
        <div style="position:absolute; top:6px; right:6px;">
            margin: 0;
          {{#if:{{{favorita|}}}|<span style="font-size:20px; color:#e14658;">&#10084;</span>|}}
            list-style: none;
        }
 
        /* Estilo individual de cada aba */
        .mw-tabber-tab {
            flex: 1 1 auto;
            min-width: 100px;
            padding: 12px 20px;
            cursor: pointer;
            background-color: #eaecf0;
            border: none;
            border-right: 1px solid #c8ccd1;
            text-align: center;
            font-size: 14px;
            font-weight: 500;
            color: #0645ad;
            transition: all 0.2s ease;
            user-select: none;
            position: relative;
        }
 
        .mw-tabber-tab:last-child {
            border-right: none;
        }
 
        /* Hover nas abas */
        .mw-tabber-tab:hover {
            background-color: #f8f9fa;
            color: #0b0080;
        }
 
        /* Aba ativa */
        .mw-tabber-tab.active {
            background-color: #ffffff;
            color: #0645ad;
            border-bottom: 3px solid #0645ad;
            font-weight: 600;
         }
 
        /* Container do conteúdo */
        .mw-tabber-content {
            padding: 20px;
            background-color: #ffffff;
            min-height: 200px;
        }
 
        /* Painel de conteúdo individual */
        .mw-tabber-panel {
            display: none;
            animation: fadeIn 0.3s ease;
        }
 
        .mw-tabber-panel.active {
            display: block;
        }
 
        /* Animação de fade in */
        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(5px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
 
        /* Responsividade para tablets */
        @media (max-width: 768px) {
            .mw-tabber-tabs {
                flex-direction: column;
            }
 
            .mw-tabber-tab {
                border-right: none;
                border-bottom: 1px solid #c8ccd1;
                width: 100%;
            }
 
            .mw-tabber-tab.active {
                border-bottom: 3px solid #0645ad;
                border-right: none;
            }
 
            .mw-tabber-content {
                padding: 15px;
            }
        }
 
        /* Responsividade para mobile */
        @media (max-width: 480px) {
            .mw-tabber-tab {
                padding: 10px 15px;
                font-size: 13px;
            }
 
            .mw-tabber-content {
                padding: 12px;
                min-height: 150px;
            }
        }
    </style>
</head>
<body>
    <!-- Exemplo de uso do componente -->
    <div class="mw-tabber-container" data-tabber>
        <ul class="mw-tabber-tabs">
            <li class="mw-tabber-tab active" data-tab="tab1">Aba 1</li>
            <li class="mw-tabber-tab" data-tab="tab2">Aba 2</li>
            <li class="mw-tabber-tab" data-tab="tab3">Aba 3</li>
        </ul>
        <div class="mw-tabber-content">
            <div class="mw-tabber-panel active" data-panel="tab1">
                <h3>Conteúdo da Aba 1</h3>
                <p>Este é o conteúdo da primeira aba. Você pode adicionar qualquer HTML aqui.</p>
            </div>
            <div class="mw-tabber-panel" data-panel="tab2">
                <h3>Conteúdo da Aba 2</h3>
                <p>Este é o conteúdo da segunda aba. A troca entre abas é instantânea!</p>
            </div>
            <div class="mw-tabber-panel" data-panel="tab3">
                <h3>Conteúdo da Aba 3</h3>
                <p>Este é o conteúdo da terceira aba. O componente é totalmente responsivo.</p>
            </div>
         </div>
         </div>
      </div>
    </div>
    <div style="flex:1">
      <div style="font-size:1.2em; font-weight:bold; margin-bottom:3px;">
        {{{nome|Nome da Criatura}}}
      </div>
      <div style="font-size:0.97em; color:#aad2fa; margin-bottom:6px;">
        <span style="font-size:0.9em;">{{{tipo|Tipo}}}</span>
      </div>
      <div>
        '''Habitat:''' {{{habitat|Desconhecido}}}<br />
        '''Perigo:''' {{{perigo|?}}}
      </div>
    </div>
  </div>
  <div style="margin-top:10px;">
    <div style="background:#171821; border-radius:8px; padding:8px 10px; margin-bottom:6px;">
      <span style="font-weight:bold; color:#f7de72;">Descrição</span><br />
      <span style="font-size:0.98em;">{{{descricao|Sem descrição.}}}</span>
    </div>
    {{#if:{{{ultima_vista|}}}|
    <div style="background:#171821; border-radius:8px; padding:7px 10px; margin-bottom:2px;">
      <span style="font-weight:bold; color:#f7de72;">Última Vista:</span>
      <span style="margin-left:4px; font-size:0.97em;">
        <span style="color:gold;">&#9679;</span> {{{ultima_vista}}}
      </span>
    </div>
    |}}
    {{#if:{{{primeira_aparicao|}}}|
    <div style="background:#171821; border-radius:8px; padding:7px 10px;">
      <span style="font-weight:bold; color:#f7de72;">Primeira Aparição:</span>
      <span style="margin-left:4px; font-size:0.97em;">
        <span style="color:gold;">&#9679;</span> {{{primeira_aparicao}}}
      </span>
     </div>
     </div>
 
     |}}
     <script>
  </div>
        (function() {
</div>
            'use strict';
</includeonly>
 
            // Inicializa todos os componentes de abas na página
            function initTabbers() {
                const tabbers = document.querySelectorAll('[data-tabber]');
               
                tabbers.forEach(function(tabber) {
                    const tabs = tabber.querySelectorAll('.mw-tabber-tab');
                    const panels = tabber.querySelectorAll('.mw-tabber-panel');
 
                    tabs.forEach(function(tab) {
                        tab.addEventListener('click', function() {
                            const targetTab = this.getAttribute('data-tab');
                           
                            // Remove classe active de todas as abas
                            tabs.forEach(function(t) {
                                t.classList.remove('active');
                            });
                           
                            // Remove classe active de todos os painéis
                            panels.forEach(function(p) {
                                p.classList.remove('active');
                            });
                           
                            // Adiciona classe active na aba clicada
                            this.classList.add('active');
                           
                            // Adiciona classe active no painel correspondente
                            const targetPanel = tabber.querySelector('[data-panel="' + targetTab + '"]');
                            if (targetPanel) {
                                targetPanel.classList.add('active');
                            }
                        });
                    });
                });
            }
 
            // Inicializa quando o DOM estiver pronto
            if (document.readyState === 'loading') {
                document.addEventListener('DOMContentLoaded', initTabbers);
            } else {
                initTabbers();
            }
 
            // Suporte para MediaWiki (quando o conteúdo é carregado dinamicamente)
            if (typeof mw !== 'undefined' && mw.hook) {
                mw.hook('wikipage.content').add(function() {
                    initTabbers();
                });
            }
        })();
    </script>
</body>
</html>
<style>
/* Conserta o header das abas para um fundo fixo único e altura consistente */
.mw-tabber-tabs {
    display: flex;
    flex-wrap: wrap;
    background-color: #eaecf0;
    border-bottom: 2px solid #a7d7f9;
    padding: 0;
    margin: 0;
    list-style: none;
    position: relative;
    min-height: 48px; /* Altura fixa para evitar 'tremida' */
    box-sizing: border-box;
}
 
/* Todas as abas: altura fixa e alinhamento centralizado */
.mw-tabber-tab {
    flex: 1 1 auto;
    min-width: 100px;
    padding: 12px 20px;
    cursor: pointer;
    background-color: transparent;
    border: none;
    border-right: 1px solid #c8ccd1;
    text-align: center;
    font-size: 14px;
    font-weight: 500;
    color: #0645ad;
    transition: color 0.2s ease, background-color 0.2s;
    user-select: none;
    position: relative;
    height: 48px; /* Altura igual à do container do header */
    line-height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}
 
.mw-tabber-tab:last-child {
    border-right: none;
}
 
/* Corrige background do header nas abas no hover/active para não sobrescrever o container */
.mw-tabber-tab.active {
    background-color: transparent;
    color: #0645ad;
    border-bottom: 3px solid #0645ad;
    font-weight: 600;
    z-index: 2;
}
 
.mw-tabber-tab:hover:not(.active) {
    background-color: rgba(248,249,250, 0.4);
    color: #0b0080;
}
 
/* CONTEÚDO: Mantém altura fixa para evitar 'tremida' do layout principal */
.mw-tabber-content {
    position: relative;
    padding: 20px;
    background-color: #ffffff;
    min-height: 200px;
    /* Mantém altura mínima e transição só no conteúdo */
    transition: opacity 0.24s;
}
 
/* Painéis: Transição suave para fade-in/fade-out, ocupa mesmo espaço sempre */
.mw-tabber-panel {
    opacity: 0;
    pointer-events: none;
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 0;
    width: 100%;
    transition: opacity 0.24s;
    z-index: 0;
}
 
.mw-tabber-panel.active {
    opacity: 1;
    pointer-events: auto;
    position: relative;
    z-index: 1;
}
 
/* Garante altura estável do conteúdo, mesmo com tamanhos distintos nos painéis */
.mw-tabber-content {
    min-height: 200px;
    /* Você pode definir uma altura máxima se desejar */
    /* max-height: 400px; */
    overflow: auto;
    position: relative;
    /* isola contexto de painéis absolutos */
}
 
/* Para evitar "pulo" do conteúdo, força height igual a maior painel (opcional, ideal JS dinâmico) */
</style>

Edição das 04h57min de 16 de novembro de 2025


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