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

De Wiki Gla
Ir para navegação Ir para pesquisar
 
(8 revisões intermediárias pelo mesmo usuário não estão sendo mostradas)
Linha 1: Linha 1:
.
<style>
    /* ===== RESET ===== */
    .ba-wrap, .ba-wrap * { box-sizing: border-box; margin: 0; padding: 0; }
    .ba-wrap {
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        border-radius: 12px;
        overflow: hidden;
        transition: background .3s, color .3s;
    }
 
    /* ===== TEMAS ===== */
    .ba-wrap.dark { background: #14141f; color: #c8c8d8; }
    .ba-wrap.light { background: #f0f0f5; color: #2a2a3d; }
 
    /* ===== HEADER ===== */
    .ba-header {
        display: flex; align-items: center; justify-content: space-between;
        padding: 16px 20px 0;
    }
    .ba-title { font-size: 20px; font-weight: 700; }
    .ba-wrap.dark .ba-title { color: #fff; }
    .ba-wrap.light .ba-title { color: #1a1a2a; }
 
    .ba-controls { display: flex; align-items: center; gap: 10px; }
 
    .ba-mode-toggle {
        display: flex; gap: 4px; border-radius: 20px; padding: 3px;
        transition: background .3s;
    }
    .ba-wrap.dark .ba-mode-toggle { background: #1e1e30; }
    .ba-wrap.light .ba-mode-toggle { background: #dddde5; }
 
    .ba-mode-btn {
        padding: 5px 16px; border-radius: 16px; border: none;
        font-size: 12px; font-weight: 700; cursor: pointer;
        background: transparent; transition: all .2s;
        text-transform: uppercase; letter-spacing: .5px;
    }
    .ba-wrap.dark .ba-mode-btn { color: #6a6a8a; }
    .ba-wrap.light .ba-mode-btn { color: #8888a0; }
    .ba-wrap.dark .ba-mode-btn.active { background: #2a2a44; color: #e8c84a; }
    .ba-wrap.light .ba-mode-btn.active { background: #fff; color: #5a5a7a; box-shadow: 0 1px 3px rgba(0,0,0,.1); }
 
    .ba-theme-btn {
        display: flex; align-items: center; gap: 6px;
        padding: 6px 14px; border-radius: 20px; border: none;
        cursor: pointer; font-size: 13px; font-weight: 600;
        transition: all .2s; white-space: nowrap;
    }
    .ba-wrap.dark .ba-theme-btn { background: #1e1e30; color: #c8c8d8; }
    .ba-wrap.light .ba-theme-btn { background: #dddde5; color: #5a5a7a; }
 
    /* ===== TABS BOSSES ===== */
    .ba-tabs-bar {
        padding: 16px 20px 0;
        overflow-x: auto;
    }
    .ba-tabs-bar::-webkit-scrollbar { height: 0; }
 
    .ba-tabs {
        display: flex; justify-content: center; gap: 0;
        border-bottom: 1px solid rgba(120,120,180,.15);
    }
    .ba-wrap.light .ba-tabs { border-bottom-color: rgba(0,0,0,.08); }
 
    .ba-tab {
        padding: 10px 20px; background: transparent; border: none; cursor: pointer;
        font-size: 13px; font-weight: 600; white-space: nowrap;
        transition: all .2s; position: relative;
    }
    .ba-wrap.dark .ba-tab { color: #6a6a8a; }
    .ba-wrap.light .ba-tab { color: #8888a0; }
    .ba-wrap.dark .ba-tab.active { color: #e05555; }
    .ba-wrap.light .ba-tab.active { color: #c04040; }
 
    .ba-tab.active::after {
        content: ''; position: absolute; bottom: -1px; left: 15%; right: 15%;
        height: 2px; border-radius: 2px;
    }
    .ba-wrap.dark .ba-tab.active::after { background: #6ab4ff; }
    .ba-wrap.light .ba-tab.active::after { background: #5a8ad0; }
 
    /* ===== BODY ===== */
    .ba-body {
        padding: 20px; min-height: 320px; transition: background .3s;
    }
    .ba-wrap.dark .ba-body { background: #1c1c2e; }
    .ba-wrap.light .ba-body { background: #fff; }
 
    .ba-section-label {
        font-size: 11px; font-weight: 700;
        letter-spacing: 1px; text-transform: uppercase; margin-bottom: 12px;
    }
    .ba-wrap.dark .ba-section-label { color: #7e7e9e; }
    .ba-wrap.light .ba-section-label { color: #9090a8; }
 
    /* ===== SKILLS ===== */
    .ba-skills-area { display: flex; gap: 16px; }
 
    .ba-skills-list {
        width: 200px; flex-shrink: 0; display: flex;
        flex-direction: column; gap: 4px;
    }


document.addEventListener('DOMContentLoaded', function() {
    .ba-skill-btn {
        display: flex; align-items: center; gap: 10px;
        padding: 9px 12px; border-radius: 8px; border: none;
        cursor: pointer; font-size: 13px; font-weight: 500;
        text-align: left; transition: all .15s; width: 100%;
        background: transparent;
    }
    .ba-wrap.dark .ba-skill-btn { color: #9090aa; }
    .ba-wrap.light .ba-skill-btn { color: #7a7a90; }
    .ba-wrap.dark .ba-skill-btn:hover { background: #24243a; color: #c8c8d8; }
    .ba-wrap.light .ba-skill-btn:hover { background: #f0f0f5; color: #2a2a3d; }
    .ba-wrap.dark .ba-skill-btn.active { background: #2a2a44; color: #fff; border-left: 3px solid #6ab4ff; }
    .ba-wrap.light .ba-skill-btn.active { background: #eef4ff; color: #1a1a2a; border-left: 3px solid #5a8ad0; }


     // tema - sempre primeiro
     .ba-skill-num {
     document.querySelectorAll('.sv-wrap').forEach(function(wrap) {
        width: 20px; height: 20px; border-radius: 50%;
         var btn = wrap.querySelector('.tema-btn');
        display: flex; align-items: center; justify-content: center;
         if (!btn) return;
        font-size: 10px; font-weight: 700; flex-shrink: 0;
         var saved = localStorage.getItem('wiki-tema');
    }
        if (saved === 'dark') {
    .ba-wrap.dark .ba-skill-num { background: #2a2a44; color: #6ab4ff; }
            wrap.classList.add('sv-dark');
    .ba-wrap.light .ba-skill-num { background: #dde8f8; color: #5a8ad0; }
             btn.textContent = '☀ Light';
    .ba-wrap.dark .ba-skill-btn.active .ba-skill-num { background: #6ab4ff; color: #14141f; }
    .ba-wrap.light .ba-skill-btn.active .ba-skill-num { background: #5a8ad0; color: #fff; }
 
    /* ===== VIDEO ===== */
    .ba-video-area {
        border-radius: 10px; overflow: hidden;
        aspect-ratio: 16/9; width: 480px; min-width: 360px;
        display: flex; align-items: center; justify-content: center;
        flex-shrink: 0;
    }
     .ba-wrap.dark .ba-video-area { background: #111; border: 1px solid rgba(100,100,160,.15); }
    .ba-wrap.light .ba-video-area { background: #e8e8f0; border: 1px solid rgba(0,0,0,.08); }
 
    .ba-video-placeholder { text-align: center; }
    .ba-wrap.dark .ba-video-placeholder { color: #555; }
    .ba-wrap.light .ba-video-placeholder { color: #aaa; }
    .ba-video-placeholder p { font-size: 12px; }
 
    .ba-skill-desc {
         font-size: 12px; line-height: 1.5;
        padding: 8px 12px; border-radius: 8px;
        flex: 1; min-width: 80px;
    }
    .ba-wrap.dark .ba-skill-desc { color: #8888a8; background: #1a1a2a; border-left: 2px solid #6ab4ff; }
    .ba-wrap.light .ba-skill-desc { color: #6a6a80; background: #f5f5fa; border-left: 2px solid #5a8ad0; }
 
    .ba-video-row {
         display: flex; gap: 14px; align-items: flex-start; flex: 1;
    }
 
    .ba-empty {
         text-align: center; padding: 60px 20px; opacity: .4; font-size: 14px;
    }
 
    /* ===== RESPONSIVO ===== */
    @media (max-width: 600px) {
        .ba-skills-area { flex-direction: column; }
        .ba-skills-list {
            width: 100%; flex-direction: row;
             overflow-x: auto; gap: 6px;
         }
         }
         btn.addEventListener('click', function() {
         .ba-skill-btn { white-space: nowrap; }
            wrap.classList.toggle('sv-dark');
        .ba-video-row { flex-direction: column; }
            var isDark = wrap.classList.contains('sv-dark');
        .ba-video-area { min-width: unset; max-width: 100%; width: 100%; }
            btn.textContent = isDark ? '☀ Light' : '☾ Dark';
     }
            localStorage.setItem('wiki-tema', isDark ? 'dark' : 'light');
        });
     });


     // resto do código...
     /* Fix MediaWiki <p> wrapping */
    .mw-parser-output > p:has(> style),
    .mw-parser-output > p:has(> script) {
        margin: 0 !important;
    }
</style>


});
<style>
.mw-body { padding: unset !important; }
.mw-body-content p { display: none; }
.sv-wrap p { display: unset; }
#firstHeading, #contentSub, #contentSub2 {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.sv-wrap {
    font-family: Arial, Helvetica, sans-serif;
    background: #ffffff;
    color: #000000;
    width: 100%;
    min-height: 100vh;
    margin: 0;
    padding: 40px 32px;
    box-sizing: border-box;
    position: relative;
}
.sv-wrap.sv-dark {
    background: #111111;
    color: #ffffff;
}
.sv-titulo {
    font-size: 1.6rem;
    font-weight: bold;
    margin: 0 0 24px;
    padding-right: 100px;
}
.sv-box {
    max-width: 900px;
    margin: 0 auto;
    text-align: center;
}
.sv-tabs {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 25px;
    flex-wrap: wrap;
}
.sv-tab {
    width: 52px;
    height: 52px;
    background: #222222;
    color: #ffffff;
    border: 2px solid transparent;
    border-radius: 8px;
    font-size: 18px;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: all 0.2s ease;
    user-select: none;
}
.sv-tab img { width: 100%; height: 100%; object-fit: cover; }
.sv-tab:hover { border-color: #555555; }
.sv-tab.active { border-color: #2563eb; background: #000000; }
.sv-dark .sv-tab { background: #2a2a2a; }
.sv-dark .sv-tab.active { background: #0f172a; border-color: #4f8cff; }
.sv-panel { display: none; animation: sv-fadeIn 0.25s ease; }
.sv-panel.active { display: block; }
@keyframes sv-fadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to  { opacity: 1; transform: translateY(0); }
}
.sv-skill-titulo {
    font-size: 26px;
    font-weight: bold;
    margin: 0 0 10px;
    color: inherit;
}
.sv-desc { margin-bottom: 20px; }
.sv-desc p {
    margin: 4px 0;
    font-size: 14px;
    color: inherit;
}
.sv-dark .sv-desc p { color: #cccccc; }
.sv-media {
    background: #1f1f1f;
    border-radius: 10px;
    overflow: hidden;
    margin-top: 10px;
}
.sv-media iframe,
.sv-media video {
    width: 100%;
    height: 420px;
    display: block;
    border: none;
}
@media(max-width: 600px) {
    .sv-wrap { padding: 20px 16px; }
    .sv-tab { width: 42px; height: 42px; font-size: 15px; }
    .sv-media iframe,
    .sv-media video { height: 240px; }
}
</style>
<script>
<script>
document.addEventListener('DOMContentLoaded', function() {
(function () {
    function run() {
        var wrap = document.getElementById('ba-wrap');
        if (!wrap) return;
 
        var bosses;
        try {
            bosses = JSON.parse(wrap.getAttribute('data-bosses') || '[]');
        } catch (e) { return; }
 
        if (!bosses.length) return;
 
        var titulo = wrap.getAttribute('data-titulo') || '';
        var currentMode = 'elite';
        var currentBoss = 0;
        var currentSkill = 0;
        var isDark = wrap.classList.contains('dark');
 
        /* ---------- Extrai YouTube ID ---------- */
        function ytId(str) {
            if (!str) return '';
            var m = str.match(/(?:youtube\.com\/(?:watch\?v=|embed\/)|youtu\.be\/)([A-Za-z0-9_-]{11})/);
            if (m) return m[1];
            if (/^[A-Za-z0-9_-]{11}$/.test(str.trim())) return str.trim();
            return '';
        }
 
        /* ---------- Monta HTML interno ---------- */
        function buildShell() {
            wrap.innerHTML = '';
 
            /* Header */
            var header = document.createElement('div');
            header.className = 'ba-header';
 
            var titleEl = document.createElement('div');
            titleEl.className = 'ba-title';
            titleEl.textContent = titulo;
            header.appendChild(titleEl);
 
            var controls = document.createElement('div');
            controls.className = 'ba-controls';
 
            var modeToggle = document.createElement('div');
            modeToggle.className = 'ba-mode-toggle';
 
            var btnElite = document.createElement('button');
            btnElite.className = 'ba-mode-btn active';
            btnElite.textContent = 'ELITE';
            btnElite.addEventListener('click', function () { setMode('elite', this); });
 
            var btnHard = document.createElement('button');
            btnHard.className = 'ba-mode-btn';
            btnHard.textContent = 'HARD';
            btnHard.addEventListener('click', function () { setMode('hard', this); });
 
            modeToggle.appendChild(btnElite);
            modeToggle.appendChild(btnHard);
            controls.appendChild(modeToggle);
 
            var themeBtn = document.createElement('button');
            themeBtn.className = 'ba-theme-btn';
            themeBtn.id = 'ba-theme-btn';
            themeBtn.innerHTML = isDark ? '&#x2744;&#xFE0F; Light' : '&#x1F319; Dark';
            themeBtn.addEventListener('click', toggleTheme);
            controls.appendChild(themeBtn);
 
            header.appendChild(controls);
            wrap.appendChild(header);
 
            /* Tabs bar */
            var tabsBar = document.createElement('div');
            tabsBar.className = 'ba-tabs-bar';
            var tabsEl = document.createElement('div');
            tabsEl.className = 'ba-tabs';
            tabsEl.id = 'ba-tabs';
            tabsBar.appendChild(tabsEl);
            wrap.appendChild(tabsBar);
 
            /* Body */
            var body = document.createElement('div');
            body.className = 'ba-body';
            body.id = 'ba-body';
            wrap.appendChild(body);
        }
 
        /* ---------- Render tabs ---------- */
        function renderTabs() {
            var el = document.getElementById('ba-tabs');
            if (!el) return;
            el.innerHTML = '';
            bosses.forEach(function (b, i) {
                var btn = document.createElement('button');
                btn.className = 'ba-tab' + (i === currentBoss ? ' active' : '');
                btn.textContent = b.nome;
                btn.addEventListener('click', function () {
                    currentBoss = i;
                    currentSkill = 0;
                    render();
                });
                el.appendChild(btn);
            });
        }
 
        /* ---------- Render body ---------- */
        function renderBody() {
            var el = document.getElementById('ba-body');
            if (!el) return;


    if (window.TemaInit) window.TemaInit('.sv-wrap', 'sv-dark');
            var boss = bosses[currentBoss];
            if (!boss) { currentBoss = 0; boss = bosses[0]; }


    document.querySelectorAll('.sv-media[data-youtube]').forEach(function(media) {
            var skills = boss[currentMode] || [];
        var id = media.getAttribute('data-youtube');
            if (!skills.length) {
        var iframe = document.createElement('iframe');
                el.innerHTML = '<div class="ba-empty">Nenhuma skill cadastrada para este modo.</div>';
        iframe.src = 'https://www.youtube.com/embed/' + id;
                return;
        iframe.setAttribute('allowfullscreen', '');
            }
        iframe.setAttribute('frameborder', '0');
            if (currentSkill >= skills.length) currentSkill = 0;
        media.appendChild(iframe);
    });


    document.querySelectorAll('.sv-box').forEach(function(box) {
            var html = '<div class="ba-section-label">Skills</div>';
        box.querySelectorAll('.sv-tab').forEach(function(tab) {
            html += '<div class="ba-skills-area">';
             tab.addEventListener('click', function() {
 
                box.querySelectorAll('.sv-tab').forEach(function(t) { t.classList.remove('active'); });
             /* Lista de skills */
                 box.querySelectorAll('.sv-panel').forEach(function(p) { p.classList.remove('active'); });
            html += '<div class="ba-skills-list">';
                tab.classList.add('active');
            skills.forEach(function (s, i) {
                 box.querySelector('.sv-panel[data-panel="' + tab.dataset.skill + '"]').classList.add('active');
                 html += '<button class="ba-skill-btn' + (i === currentSkill ? ' active' : '') + '" data-si="' + i + '">';
                 html += '<span class="ba-skill-num">' + (i + 1) + '</span> ' + s.nome + '</button>';
             });
             });
         });
            html += '</div>';
    });
 
            /* Vídeo + descrição lado a lado */
            var skill = skills[currentSkill];
            html += '<div class="ba-video-row">';
 
            var vid = ytId(skill.video);
            if (vid) {
                html += '<div class="ba-video-area"><iframe width="100%" height="100%" src="https://www.youtube.com/embed/' + vid + '" frameborder="0" allowfullscreen style="border:0;"></iframe></div>';
            } else {
                html += '<div class="ba-video-area"><div class="ba-video-placeholder"><p>Sem vídeo disponível</p></div></div>';
            }
 
            if (skill.desc) {
                html += '<div class="ba-skill-desc">' + skill.desc + '</div>';
            }
            html += '</div></div>';
 
            el.innerHTML = html;
 
            /* Listeners skills */
            el.querySelectorAll('.ba-skill-btn').forEach(function (btn) {
                btn.addEventListener('click', function () {
                    currentSkill = parseInt(this.getAttribute('data-si'));
                    renderBody();
                });
            });
        }
 
        /* ---------- Render completo ---------- */
        function render() {
            renderTabs();
            renderBody();
        }
 
        /* ---------- Trocar modo ---------- */
        function setMode(mode, btn) {
            currentMode = mode;
            currentBoss = 0;
            currentSkill = 0;
            wrap.querySelectorAll('.ba-mode-btn').forEach(function (b) {
                b.classList.remove('active');
            });
            btn.classList.add('active');
            render();
         }
 
        /* ---------- Trocar tema ---------- */
        function toggleTheme() {
            isDark = !isDark;
            wrap.classList.toggle('dark', isDark);
            wrap.classList.toggle('light', !isDark);
            var tb = document.getElementById('ba-theme-btn');
            if (tb) tb.innerHTML = isDark ? '&#x2744;&#xFE0F; Light' : '&#x1F319; Dark';
        }
 
        buildShell();
        render();
    }


});
    if (document.readyState === 'loading') {
        document.addEventListener('DOMContentLoaded', run);
    } else {
        run();
    }
})();
</script>
</script>

Edição atual tal como às 13h40min de 17 de março de 2026

<style> 

   /* ===== RESET ===== */
   .ba-wrap, .ba-wrap * { box-sizing: border-box; margin: 0; padding: 0; }
   .ba-wrap {
       font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
       border-radius: 12px;
       overflow: hidden;
       transition: background .3s, color .3s;
   }

   /* ===== TEMAS ===== */
   .ba-wrap.dark { background: #14141f; color: #c8c8d8; }
   .ba-wrap.light { background: #f0f0f5; color: #2a2a3d; }

   /* ===== HEADER ===== */
   .ba-header {
       display: flex; align-items: center; justify-content: space-between;
       padding: 16px 20px 0;
   }
   .ba-title { font-size: 20px; font-weight: 700; }
   .ba-wrap.dark .ba-title { color: #fff; }
   .ba-wrap.light .ba-title { color: #1a1a2a; }

   .ba-controls { display: flex; align-items: center; gap: 10px; }

   .ba-mode-toggle {
       display: flex; gap: 4px; border-radius: 20px; padding: 3px;
       transition: background .3s;
   }
   .ba-wrap.dark .ba-mode-toggle { background: #1e1e30; }
   .ba-wrap.light .ba-mode-toggle { background: #dddde5; }

   .ba-mode-btn {
       padding: 5px 16px; border-radius: 16px; border: none;
       font-size: 12px; font-weight: 700; cursor: pointer;
       background: transparent; transition: all .2s;
       text-transform: uppercase; letter-spacing: .5px;
   }
   .ba-wrap.dark .ba-mode-btn { color: #6a6a8a; }
   .ba-wrap.light .ba-mode-btn { color: #8888a0; }
   .ba-wrap.dark .ba-mode-btn.active { background: #2a2a44; color: #e8c84a; }
   .ba-wrap.light .ba-mode-btn.active { background: #fff; color: #5a5a7a; box-shadow: 0 1px 3px rgba(0,0,0,.1); }

   .ba-theme-btn {
       display: flex; align-items: center; gap: 6px;
       padding: 6px 14px; border-radius: 20px; border: none;
       cursor: pointer; font-size: 13px; font-weight: 600;
       transition: all .2s; white-space: nowrap;
   }
   .ba-wrap.dark .ba-theme-btn { background: #1e1e30; color: #c8c8d8; }
   .ba-wrap.light .ba-theme-btn { background: #dddde5; color: #5a5a7a; }

   /* ===== TABS BOSSES ===== */
   .ba-tabs-bar {
       padding: 16px 20px 0;
       overflow-x: auto;
   }
   .ba-tabs-bar::-webkit-scrollbar { height: 0; }

   .ba-tabs {
       display: flex; justify-content: center; gap: 0;
       border-bottom: 1px solid rgba(120,120,180,.15);
   }
   .ba-wrap.light .ba-tabs { border-bottom-color: rgba(0,0,0,.08); }

   .ba-tab {
       padding: 10px 20px; background: transparent; border: none; cursor: pointer;
       font-size: 13px; font-weight: 600; white-space: nowrap;
       transition: all .2s; position: relative;
   }
   .ba-wrap.dark .ba-tab { color: #6a6a8a; }
   .ba-wrap.light .ba-tab { color: #8888a0; }
   .ba-wrap.dark .ba-tab.active { color: #e05555; }
   .ba-wrap.light .ba-tab.active { color: #c04040; }

   .ba-tab.active::after {
       content: ; position: absolute; bottom: -1px; left: 15%; right: 15%;
       height: 2px; border-radius: 2px;
   }
   .ba-wrap.dark .ba-tab.active::after { background: #6ab4ff; }
   .ba-wrap.light .ba-tab.active::after { background: #5a8ad0; }

   /* ===== BODY ===== */
   .ba-body {
       padding: 20px; min-height: 320px; transition: background .3s;
   }
   .ba-wrap.dark .ba-body { background: #1c1c2e; }
   .ba-wrap.light .ba-body { background: #fff; }

   .ba-section-label {
       font-size: 11px; font-weight: 700;
       letter-spacing: 1px; text-transform: uppercase; margin-bottom: 12px;
   }
   .ba-wrap.dark .ba-section-label { color: #7e7e9e; }
   .ba-wrap.light .ba-section-label { color: #9090a8; }

   /* ===== SKILLS ===== */
   .ba-skills-area { display: flex; gap: 16px; }

   .ba-skills-list {
       width: 200px; flex-shrink: 0; display: flex;
       flex-direction: column; gap: 4px;
   }

   .ba-skill-btn {
       display: flex; align-items: center; gap: 10px;
       padding: 9px 12px; border-radius: 8px; border: none;
       cursor: pointer; font-size: 13px; font-weight: 500;
       text-align: left; transition: all .15s; width: 100%;
       background: transparent;
   }
   .ba-wrap.dark .ba-skill-btn { color: #9090aa; }
   .ba-wrap.light .ba-skill-btn { color: #7a7a90; }
   .ba-wrap.dark .ba-skill-btn:hover { background: #24243a; color: #c8c8d8; }
   .ba-wrap.light .ba-skill-btn:hover { background: #f0f0f5; color: #2a2a3d; }
   .ba-wrap.dark .ba-skill-btn.active { background: #2a2a44; color: #fff; border-left: 3px solid #6ab4ff; }
   .ba-wrap.light .ba-skill-btn.active { background: #eef4ff; color: #1a1a2a; border-left: 3px solid #5a8ad0; }

   .ba-skill-num {
       width: 20px; height: 20px; border-radius: 50%;
       display: flex; align-items: center; justify-content: center;
       font-size: 10px; font-weight: 700; flex-shrink: 0;
   }
   .ba-wrap.dark .ba-skill-num { background: #2a2a44; color: #6ab4ff; }
   .ba-wrap.light .ba-skill-num { background: #dde8f8; color: #5a8ad0; }
   .ba-wrap.dark .ba-skill-btn.active .ba-skill-num { background: #6ab4ff; color: #14141f; }
   .ba-wrap.light .ba-skill-btn.active .ba-skill-num { background: #5a8ad0; color: #fff; }

   /* ===== VIDEO ===== */
   .ba-video-area {
       border-radius: 10px; overflow: hidden;
       aspect-ratio: 16/9; width: 480px; min-width: 360px;
       display: flex; align-items: center; justify-content: center;
       flex-shrink: 0;
   }
   .ba-wrap.dark .ba-video-area { background: #111; border: 1px solid rgba(100,100,160,.15); }
   .ba-wrap.light .ba-video-area { background: #e8e8f0; border: 1px solid rgba(0,0,0,.08); }

   .ba-video-placeholder { text-align: center; }
   .ba-wrap.dark .ba-video-placeholder { color: #555; }
   .ba-wrap.light .ba-video-placeholder { color: #aaa; }
   .ba-video-placeholder p { font-size: 12px; }

   .ba-skill-desc {
       font-size: 12px; line-height: 1.5;
       padding: 8px 12px; border-radius: 8px;
       flex: 1; min-width: 80px;
   }
   .ba-wrap.dark .ba-skill-desc { color: #8888a8; background: #1a1a2a; border-left: 2px solid #6ab4ff; }
   .ba-wrap.light .ba-skill-desc { color: #6a6a80; background: #f5f5fa; border-left: 2px solid #5a8ad0; }

   .ba-video-row {
       display: flex; gap: 14px; align-items: flex-start; flex: 1;
   }

   .ba-empty {
       text-align: center; padding: 60px 20px; opacity: .4; font-size: 14px;
   }

   /* ===== RESPONSIVO ===== */
   @media (max-width: 600px) {
       .ba-skills-area { flex-direction: column; }
       .ba-skills-list {
           width: 100%; flex-direction: row;
           overflow-x: auto; gap: 6px;
       }
       .ba-skill-btn { white-space: nowrap; }
       .ba-video-row { flex-direction: column; }
       .ba-video-area { min-width: unset; max-width: 100%; width: 100%; }
   }

/* Fix MediaWiki

wrapping */ .mw-parser-output > p:has(> style), .mw-parser-output > p:has(> script) { margin: 0 !important; } </style> <script> (function () { function run() { var wrap = document.getElementById('ba-wrap'); if (!wrap) return; var bosses; try { bosses = JSON.parse(wrap.getAttribute('data-bosses') || '[]'); } catch (e) { return; } if (!bosses.length) return; var titulo = wrap.getAttribute('data-titulo') || ; var currentMode = 'elite'; var currentBoss = 0; var currentSkill = 0; var isDark = wrap.classList.contains('dark'); /* ---------- Extrai YouTube ID ---------- */ function ytId(str) { if (!str) return ; var m = str.match(/(?:youtube\.com\/(?:watch\?v=|embed\/)|youtu\.be\/)([A-Za-z0-9_-]{11})/); if (m) return m[1]; if (/^[A-Za-z0-9_-]{11}$/.test(str.trim())) return str.trim(); return ; } /* ---------- Monta HTML interno ---------- */ function buildShell() { wrap.innerHTML = ; /* Header */ var header = document.createElement('div'); header.className = 'ba-header'; var titleEl = document.createElement('div'); titleEl.className = 'ba-title'; titleEl.textContent = titulo; header.appendChild(titleEl); var controls = document.createElement('div'); controls.className = 'ba-controls'; var modeToggle = document.createElement('div'); modeToggle.className = 'ba-mode-toggle'; var btnElite = document.createElement('button'); btnElite.className = 'ba-mode-btn active'; btnElite.textContent = 'ELITE'; btnElite.addEventListener('click', function () { setMode('elite', this); }); var btnHard = document.createElement('button'); btnHard.className = 'ba-mode-btn'; btnHard.textContent = 'HARD'; btnHard.addEventListener('click', function () { setMode('hard', this); }); modeToggle.appendChild(btnElite); modeToggle.appendChild(btnHard); controls.appendChild(modeToggle); var themeBtn = document.createElement('button'); themeBtn.className = 'ba-theme-btn'; themeBtn.id = 'ba-theme-btn'; themeBtn.innerHTML = isDark ? '❄️ Light' : '🌙 Dark'; themeBtn.addEventListener('click', toggleTheme); controls.appendChild(themeBtn); header.appendChild(controls); wrap.appendChild(header); /* Tabs bar */ var tabsBar = document.createElement('div'); tabsBar.className = 'ba-tabs-bar'; var tabsEl = document.createElement('div'); tabsEl.className = 'ba-tabs'; tabsEl.id = 'ba-tabs'; tabsBar.appendChild(tabsEl); wrap.appendChild(tabsBar); /* Body */ var body = document.createElement('div'); body.className = 'ba-body'; body.id = 'ba-body'; wrap.appendChild(body); } /* ---------- Render tabs ---------- */ function renderTabs() { var el = document.getElementById('ba-tabs'); if (!el) return; el.innerHTML = ; bosses.forEach(function (b, i) { var btn = document.createElement('button'); btn.className = 'ba-tab' + (i === currentBoss ? ' active' : ); btn.textContent = b.nome; btn.addEventListener('click', function () { currentBoss = i; currentSkill = 0; render(); }); el.appendChild(btn); }); } /* ---------- Render body ---------- */ function renderBody() { var el = document.getElementById('ba-body'); if (!el) return; var boss = bosses[currentBoss]; if (!boss) { currentBoss = 0; boss = bosses[0]; } var skills = boss[currentMode] || []; if (!skills.length) { el.innerHTML = '

Nenhuma skill cadastrada para este modo.

'; 

               return;
           }
           if (currentSkill >= skills.length) currentSkill = 0;

var html = '

Skills

'; html += '

'; 
           /* Lista de skills */
html += '
'; 
           skills.forEach(function (s, i) {
               html += '<button class="ba-skill-btn' + (i === currentSkill ? ' active' : ) + '" data-si="' + i + '">';
               html += '' + (i + 1) + ' ' + s.nome + '</button>';
           });
html += '
'; 
           /* Vídeo + descrição lado a lado */
           var skill = skills[currentSkill];
html += '
'; 
           var vid = ytId(skill.video);
           if (vid) {
html += '
<iframe width="100%" height="100%" src="https://www.youtube.com/embed/' + vid + '" frameborder="0" allowfullscreen style="border:0;"></iframe>
'; 
           } else {
html += '

Sem vídeo disponível

'; 
           }

           if (skill.desc) {
html += '
' + skill.desc + '
'; 
           }
html += '

'; 

           el.innerHTML = html;

           /* Listeners skills */
           el.querySelectorAll('.ba-skill-btn').forEach(function (btn) {
               btn.addEventListener('click', function () {
                   currentSkill = parseInt(this.getAttribute('data-si'));
                   renderBody();
               });
           });
       }

       /* ---------- Render completo ---------- */
       function render() {
           renderTabs();
           renderBody();
       }

       /* ---------- Trocar modo ---------- */
       function setMode(mode, btn) {
           currentMode = mode;
           currentBoss = 0;
           currentSkill = 0;
           wrap.querySelectorAll('.ba-mode-btn').forEach(function (b) {
               b.classList.remove('active');
           });
           btn.classList.add('active');
           render();
       }

       /* ---------- Trocar tema ---------- */
       function toggleTheme() {
           isDark = !isDark;
           wrap.classList.toggle('dark', isDark);
           wrap.classList.toggle('light', !isDark);
           var tb = document.getElementById('ba-theme-btn');
           if (tb) tb.innerHTML = isDark ? '❄️ Light' : '🌙 Dark';
       }

       buildShell();
       render();
   }

   if (document.readyState === 'loading') {
       document.addEventListener('DOMContentLoaded', run);
   } else {
       run();
   }

})(); </script>

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