Mudanças entre as edições de "Widget:Lari1"
| Linha 130: | Linha 130: | ||
.ba-video-area { | .ba-video-area { | ||
border-radius: 10px; overflow: hidden; | border-radius: 10px; overflow: hidden; | ||
aspect-ratio: 16/9; | aspect-ratio: 16/9; width: 480px; min-width: 360px; | ||
display: flex; align-items: center; justify-content: center; | display: flex; align-items: center; justify-content: center; | ||
flex-shrink: 0; | flex-shrink: 0; | ||
| Linha 145: | Linha 145: | ||
font-size: 12px; line-height: 1.5; | font-size: 12px; line-height: 1.5; | ||
padding: 8px 12px; border-radius: 8px; | padding: 8px 12px; border-radius: 8px; | ||
flex: 1; min-width: | flex: 1; min-width: 80px; | ||
} | } | ||
.ba-wrap.dark .ba-skill-desc { color: #8888a8; background: #1a1a2a; border-left: 2px solid #6ab4ff; } | .ba-wrap.dark .ba-skill-desc { color: #8888a8; background: #1a1a2a; border-left: 2px solid #6ab4ff; } | ||
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 = '
';
return;
}
if (currentSkill >= skills.length) currentSkill = 0;
var html = '
'; 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 += ' } else {
html += 'Sem vídeo disponível
}
if (skill.desc) {
html += '}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>