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

De Wiki Gla
Ir para navegação Ir para pesquisar
m
m
Linha 1: Linha 1:
<script>
<script>
(function () {
    (function () {
  // ====== SELECTORS (EN) ======
        const $ = (s, root = document) => root.querySelector(s);
  const tabBtns  = document.querySelectorAll('.tabs__btn');
        const $$ = (s, root = document) => Array.from(root.querySelectorAll(s));
  const tabPanels = document.querySelectorAll('.tabs__panel');


  const iconsBar  = document.querySelector('.skills__icons');
        // ----- Tabs
  const descBox  = document.querySelector('.skills__desc');
        const tabBtns = $$('.tab-btn');
  const videoBox  = document.querySelector('.skills__video');
        const panels = $$('.tab-content');
  const iconCards = iconsBar ? Array.from(iconsBar.querySelectorAll('.skills__icon')) : [];


  let totalVideos = 0, loadedVideos = 0, autoplay = false;
        tabBtns.forEach(btn => {
  const videosCache = {};
            btn.addEventListener('click', () => {
                const id = btn.dataset.tab;
                tabBtns.forEach(b => b.classList.remove('active'));
                panels.forEach(p => p.classList.remove('active'));
                btn.classList.add('active');
                const panel = document.getElementById(id);
                if (panel) panel.classList.add('active');
            });
        });


  initSkinsArrows();
        // ----- Skills (classes novas)
        const skillsTab = $('#skills');
        const iconsBar = skillsTab ? $('.icon-bar', skillsTab) : null;
        const iconItems = iconsBar ? $$('.skill-icon', iconsBar) : [];
        const descBox = skillsTab ? $('.desc-box', skillsTab) : null;
        const videoBox = skillsTab ? $('.video-container', skillsTab) : null;


  // ---- vídeo: placeholder
        const videosCache = {};
  let placeholder = null;
        let totalVideos = 0, loadedVideos = 0, autoplay = false;
  if (videoBox) {
    placeholder = document.createElement('div');
    placeholder.className = 'video-placeholder';
    placeholder.innerHTML = '<img src="/images/d/d5/Icon_gla.png" alt="Carregando...">';
    videoBox.appendChild(placeholder);
  }
  const removePlaceholderSmooth = () => {
    if (!placeholder) return;
    placeholder.classList.add('fade-out');
    placeholder.addEventListener('transitionend', () => { placeholder?.remove(); placeholder = null; }, { once: true });
  };


  // ---- TABS
        // Placeholder do vídeo
  tabBtns.forEach(btn => {
        let placeholder = null;
    btn.addEventListener('click', () => {
        if (videoBox) {
      const id = btn.dataset.tab;
            placeholder = document.createElement('div');
      tabBtns.forEach(b => b.classList.remove('is-active'));
            placeholder.className = 'video-placeholder';
      tabPanels.forEach(p => p.classList.remove('is-active'));
            placeholder.innerHTML = '<img src="/images/d/d5/Icon_gla.png" alt="Carregando...">';
      btn.classList.add('is-active');
            videoBox.appendChild(placeholder);
      const panel = document.getElementById(id);
        }
      if (panel) panel.classList.add('is-active');
        const removePlaceholder = () => {
    });
            if (!placeholder) return;
  });
            placeholder.classList.add('fade-out');
            placeholder.addEventListener('transitionend', () => {
                placeholder && placeholder.remove();
                placeholder = null;
            }, { once: true });
        };


  // ---- Pré-carregar vídeos das skills
        // Pré-carregar vídeos
  iconCards.forEach(card => {
        iconItems.forEach(el => {
    const src = (card.dataset.video || '').trim();
            const src = (el.dataset.video || '').trim();
    const idx = card.dataset.index || '';
            const idx = el.dataset.index || '';
    if (!src || !videoBox || videosCache[idx]) return;
            if (!src || !videoBox || videosCache[idx]) return;


    totalVideos++;
            totalVideos++;
    const v = document.createElement('video');
            const v = document.createElement('video');
    v.setAttribute('width', '100%');
            v.controls = true;
    v.setAttribute('controls', '');
            v.preload = 'auto';
    v.setAttribute('preload', 'auto');
            v.playsInline = true;
    v.setAttribute('playsinline', '');
            v.style.display = 'none';
    v.dataset.index = idx;
            v.dataset.index = idx;
    v.style.display = 'none';


    const source = document.createElement('source');
            const source = document.createElement('source');
    source.src = src;
            source.src = src;
    source.type = 'video/webm';
            source.type = 'video/webm';
    v.appendChild(source);
            v.appendChild(source);


    v.addEventListener('canplay', () => {
            v.addEventListener('canplay', () => {
      loadedVideos++;
                loadedVideos++;
      if (loadedVideos === 1) { v.pause(); v.currentTime = 0; }
                if (loadedVideos === 1) { v.pause(); v.currentTime = 0; }
      const active = document.querySelector('.skills__icon.is-active');
                const active = $('.skill-icon.active', iconsBar);
      if (active && active.dataset.index === idx) setTimeout(removePlaceholderSmooth, 200);
                if (active && active.dataset.index === idx) setTimeout(removePlaceholder, 180);
      if (loadedVideos === totalVideos) autoplay = true;
                if (loadedVideos === totalVideos) autoplay = true;
    });
            });


    v.addEventListener('error', () => {
            v.addEventListener('error', () => {
      loadedVideos++;
                loadedVideos++;
      removePlaceholderSmooth();
                removePlaceholder();
      if (loadedVideos === totalVideos) autoplay = true;
                if (loadedVideos === totalVideos) autoplay = true;
    });
            });


    videoBox.appendChild(v);
            videoBox.appendChild(v);
    videosCache[idx] = v;
            videosCache[idx] = v;
  });
        });


  if (totalVideos === 0) removePlaceholderSmooth();
        if (totalVideos === 0) removePlaceholder();


  // ---- Clique nas skills
        // Clique nas skills
  iconCards.forEach(card => {
        iconItems.forEach(el => {
    const name = card.dataset.nome || '';
            const name = el.dataset.nome || el.dataset.name || '';
    const desc = (card.dataset.desc || '').replace(/'''(.*?)'''/g, '<b>$1</b>');
            const desc = (el.dataset.desc || '').replace(/'''(.*?)'''/g, '<b>$1</b>');
    const attrs = card.dataset.atr || '';
            const attrs = el.dataset.atr || el.dataset.attrs || '';
    const idx   = card.dataset.index || '';
            const idx = el.dataset.index || '';
    const hasVideo = !!(card.dataset.video && card.dataset.video.trim() !== '');
            const hasVideo = !!(el.dataset.video && el.dataset.video.trim() !== '');


    card.title = name;
            el.title = name;


    card.addEventListener('click', () => {
            el.addEventListener('click', () => {
      if (!autoplay && loadedVideos > 0) autoplay = true;
                if (!autoplay && loadedVideos > 0) autoplay = true;


      // título + atributos + texto
                // título + atributos + texto (mantém classes já usadas no CSS)
      if (descBox) {
                if (descBox) {
        descBox.innerHTML = `
                    descBox.innerHTML = `
           <div class="skill__title"><h3>${name}</h3></div>
           <div class="titulo-habilidad"><h3>${name}</h3></div>
           ${renderAttributes(attrs)}
           ${renderAttributes(attrs)}
           <div class="skill__text">${desc}</div>
           <div class="desc">${desc}</div>
         `;
         `;
      }
                }


      // vídeo
                // alterna vídeos
      Object.values(videosCache).forEach(v => { v.pause(); v.style.display = 'none'; });
                Object.values(videosCache).forEach(v => { v.pause(); v.style.display = 'none'; });
      if (videoBox) {
                if (videoBox) {
        if (hasVideo && videosCache[idx]) {
                    if (hasVideo && videosCache[idx]) {
          const v = videosCache[idx];
                        const v = videosCache[idx];
          videoBox.style.display = 'block';
                        videoBox.style.display = 'block';
          v.style.display = 'block';
                        v.style.display = 'block';
          v.currentTime = 0;
                        v.currentTime = 0;
          if (autoplay) v.play().catch(() => {});
                        if (autoplay) v.play().catch(() => { });
        } else {
                    } else {
          videoBox.style.display = 'none';
                        videoBox.style.display = 'none';
        }
                    }
      }
                }


      // estado ativo
                // estado ativo
      iconCards.forEach(i => i.classList.remove('is-active'));
                iconItems.forEach(i => i.classList.remove('active'));
      card.classList.add('is-active');
                el.classList.add('active');
    });
            });
        });


    // opcional: liberar memória dos data-* (mantém via closure)
        // Seleciona a primeira skill por padrão
    ['data-nome','data-desc','data-atr','data-video'].forEach(a => card.removeAttribute(a));
        if (iconItems.length) iconItems[0].click();
  });


  // seleção inicial
        // Scroll horizontal com a roda do mouse
  if (iconCards.length) iconCards[0].click();
        if (iconsBar) {
            iconsBar.addEventListener('wheel', (e) => {
                if (e.deltaY) {
                    e.preventDefault();
                    iconsBar.scrollLeft += e.deltaY;
                }
            });
        }


  // scroll horizontal na barra de skills
        // ----- Skins: setas (classes já estavam ok)
  if (iconsBar) {
        initSkinsArrows();
    iconsBar.addEventListener('wheel', e => {
        function initSkinsArrows() {
      if (e.deltaY) { e.preventDefault(); iconsBar.scrollLeft += e.deltaY; }
            const carousel = $('.skins-carousel');
    });
            const wrapper = $('.skins-carousel-wrapper');
  }
            const left = $('.skins-arrow.left');
            const right = $('.skins-arrow.right');
            if (!carousel || !left || !right || !wrapper) return;


  // ---- Skins: setas / estados
            const scrollAmt = () => Math.round(carousel.clientWidth * 0.6);
  function initSkinsArrows(){
    const carousel = document.querySelector('.skins__carousel');
    const wrapper  = document.querySelector('.skins__wrapper');
    const leftBtn  = document.querySelector('.skins__arrow--left');
    const rightBtn = document.querySelector('.skins__arrow--right');
    if (!carousel || !wrapper || !leftBtn || !rightBtn) return;


    const getScrollAmount = () => Math.round(carousel.clientWidth * 0.6);
            function setState() {
                const max = carousel.scrollWidth - carousel.clientWidth;
                const x = carousel.scrollLeft;
                const hasLeft = x > 5, hasRight = x < max - 5;
                left.style.display = hasLeft ? 'inline-block' : 'none';
                right.style.display = hasRight ? 'inline-block' : 'none';
                wrapper.classList.toggle('has-left', hasLeft);
                wrapper.classList.toggle('has-right', hasRight);
                carousel.style.justifyContent = (!hasLeft && !hasRight) ? 'center' : '';
            }
            function go(dir) {
                const max = carousel.scrollWidth - carousel.clientWidth;
                const next = dir < 0
                    ? Math.max(0, carousel.scrollLeft - scrollAmt())
                    : Math.min(max, carousel.scrollLeft + scrollAmt());
                carousel.scrollTo({ left: next, behavior: 'smooth' });
            }
            left.addEventListener('click', () => go(-1));
            right.addEventListener('click', () => go(1));
            carousel.addEventListener('scroll', setState);
            new ResizeObserver(setState).observe(carousel);
            setState();
        }


    const setState = (x) => {
        // ----- Atributos (ordem fixa, espaços "fantasmas" no fim)
      const max = carousel.scrollWidth - carousel.clientWidth;
        function renderAttributes(str) {
      const hasLeft = x > 5;
            const vals = (str || '').split(',').map(v => v.trim());
      const hasRight = x < max - 5;
            const pve = parseInt(vals[0], 10);
      wrapper.classList.toggle('has-left', hasLeft);
            const pvp = parseInt(vals[1], 10);
      wrapper.classList.toggle('has-right', hasRight);
            const ene = parseInt(vals[2], 10);
      leftBtn.disabled  = !hasLeft;
            const cd = parseInt(vals[3], 10);
      rightBtn.disabled = !hasRight;
      carousel.style.justifyContent = (!hasLeft && !hasRight) ? 'center' : '';
    };


    const go = (dir) => {
            const recargaVal = isNaN(cd) ? '-' : cd;
      const max = carousel.scrollWidth - carousel.clientWidth;
            const energiaLabel = isNaN(ene) ? 'Energia' : (ene >= 0 ? 'Ganho de energia' : 'Custo de energia');
      const next = dir < 0
            const energiaVal = isNaN(ene) ? '-' : Math.abs(ene);
        ? Math.max(0, carousel.scrollLeft - getScrollAmount())
            const poderVal = isNaN(pve) ? '-' : pve;
        : Math.min(max, carousel.scrollLeft + getScrollAmount());
            const poderPvpVal = isNaN(pvp) ? '-' : pvp;
      setState(next);
      carousel.scrollTo({ left: next, behavior: 'smooth' });
    };


    leftBtn .addEventListener('click', ()=>go(-1));
            const rows = [
    rightBtn.addEventListener('click', ()=>go(+1));
                ['Recarga', recargaVal],
    carousel.addEventListener('scroll', ()=>setState(carousel.scrollLeft));
                [energiaLabel, energiaVal],
    new ResizeObserver(()=>setState(carousel.scrollLeft)).observe(carousel);
                ['Poder', poderVal],
    setState(carousel.scrollLeft);
                ['Poder PvP', poderPvpVal],
  }
            ];


  // ---- Atributos (ordem fixa; “linhas-fantasma” no final p/ manter altura)
            // compacta os visíveis e empurra os vazios pro final
  function renderAttributes(str){
            const visible = rows.filter(([, v]) => v !== '-');
    const vals  = (str || '').split(',').map(v => v.trim());
            const empties = rows.length - visible.length;
    const pveRaw = vals[0], pvpRaw = vals[1], eneRaw = vals[2], cdRaw = vals[3];


    const rec = parseInt(cdRaw, 10);
            const visibleHtml = visible.map(([label, value]) => `
    const recargaVal = isNaN(rec) ? '-' : rec;
 
    const ene = parseInt(eneRaw, 10);
    const energiaLabel = isNaN(ene) ? 'Energia' : (ene >= 0 ? 'Ganho de energia' : 'Custo de energia');
    const energiaVal  = isNaN(ene) ? '-' : Math.abs(ene);
 
    const pve = parseInt(pveRaw, 10);
    const pvp = parseInt(pvpRaw, 10);
 
    const rows = [
      ['Recarga',    isNaN(rec) ? '-' : recargaVal],
      [energiaLabel, isNaN(ene) ? '-' : energiaVal],
      ['Poder',      isNaN(pve) ? '-' : pve],
      ['Poder PvP',  isNaN(pvp) ? '-' : pvp],
    ];
 
    const visibles = rows.filter(([,v]) => v !== '-');
    const empties  = rows.length - visibles.length;
 
    const visibleHtml = visibles.map(([label,value]) => `
       <div class="attr-row">
       <div class="attr-row">
         <span class="attr-label">${label}:</span>
         <span class="attr-label">${label}:</span>
         <span class="attr-value">${value}</span>
         <span class="attr-value">${value}</span>
       </div>`).join('');
       </div>
    `).join('');


    const emptyHtml = Array.from({length: empties}).map(() => `
            const emptyHtml = Array.from({ length: empties }).map(() => `
       <div class="attr-row is-empty">
       <div class="attr-row is-empty">
         <span class="attr-label">&nbsp;</span>
         <span class="attr-label">&nbsp;</span>
         <span class="attr-value">&nbsp;</span>
         <span class="attr-value">&nbsp;</span>
       </div>`).join('');
       </div>
    `).join('');


    return `<div class="attr-list">${visibleHtml}${emptyHtml}</div>`;
            return `<div class="attr-list">${visibleHtml}${emptyHtml}</div>`;
  }
        }
})();
    })();
</script>
</script>
<style>
<style>
     /* ------- resets ------- */
     /* ------- resets ------- */

Edição das 02h55min de 21 de agosto de 2025

<script> 

   (function () {
       const $ = (s, root = document) => root.querySelector(s);
       const $$ = (s, root = document) => Array.from(root.querySelectorAll(s));

       // ----- Tabs
       const tabBtns = $$('.tab-btn');
       const panels = $$('.tab-content');

       tabBtns.forEach(btn => {
           btn.addEventListener('click', () => {
               const id = btn.dataset.tab;
               tabBtns.forEach(b => b.classList.remove('active'));
               panels.forEach(p => p.classList.remove('active'));
               btn.classList.add('active');
               const panel = document.getElementById(id);
               if (panel) panel.classList.add('active');
           });
       });

       // ----- Skills (classes novas)
       const skillsTab = $('#skills');
       const iconsBar = skillsTab ? $('.icon-bar', skillsTab) : null;
       const iconItems = iconsBar ? $$('.skill-icon', iconsBar) : [];
       const descBox = skillsTab ? $('.desc-box', skillsTab) : null;
       const videoBox = skillsTab ? $('.video-container', skillsTab) : null;

       const videosCache = {};
       let totalVideos = 0, loadedVideos = 0, autoplay = false;

       // Placeholder do vídeo
       let placeholder = null;
       if (videoBox) {
           placeholder = document.createElement('div');
           placeholder.className = 'video-placeholder';
           placeholder.innerHTML = '<img src="/images/d/d5/Icon_gla.png" alt="Carregando...">';
           videoBox.appendChild(placeholder);
       }
       const removePlaceholder = () => {
           if (!placeholder) return;
           placeholder.classList.add('fade-out');
           placeholder.addEventListener('transitionend', () => {
               placeholder && placeholder.remove();
               placeholder = null;
           }, { once: true });
       };

       // Pré-carregar vídeos
       iconItems.forEach(el => {
           const src = (el.dataset.video || ).trim();
           const idx = el.dataset.index || ;
           if (!src || !videoBox || videosCache[idx]) return;

           totalVideos++;
           const v = document.createElement('video');
           v.controls = true;
           v.preload = 'auto';
           v.playsInline = true;
           v.style.display = 'none';
           v.dataset.index = idx;

           const source = document.createElement('source');
           source.src = src;
           source.type = 'video/webm';
           v.appendChild(source);

           v.addEventListener('canplay', () => {
               loadedVideos++;
               if (loadedVideos === 1) { v.pause(); v.currentTime = 0; }
               const active = $('.skill-icon.active', iconsBar);
               if (active && active.dataset.index === idx) setTimeout(removePlaceholder, 180);
               if (loadedVideos === totalVideos) autoplay = true;
           });

           v.addEventListener('error', () => {
               loadedVideos++;
               removePlaceholder();
               if (loadedVideos === totalVideos) autoplay = true;
           });

           videoBox.appendChild(v);
           videosCache[idx] = v;
       });

       if (totalVideos === 0) removePlaceholder();

       // Clique nas skills
       iconItems.forEach(el => {
           const name = el.dataset.nome || el.dataset.name || ;
           const desc = (el.dataset.desc || ).replace(/(.*?)/g, '$1');
           const attrs = el.dataset.atr || el.dataset.attrs || ;
           const idx = el.dataset.index || ;
           const hasVideo = !!(el.dataset.video && el.dataset.video.trim() !== );

           el.title = name;

           el.addEventListener('click', () => {
               if (!autoplay && loadedVideos > 0) autoplay = true;

               // título + atributos + texto (mantém classes já usadas no CSS)
               if (descBox) {
                   descBox.innerHTML = `

${name}

         ${renderAttributes(attrs)}
${desc}
       `;
               }

               // alterna vídeos
               Object.values(videosCache).forEach(v => { v.pause(); v.style.display = 'none'; });
               if (videoBox) {
                   if (hasVideo && videosCache[idx]) {
                       const v = videosCache[idx];
                       videoBox.style.display = 'block';
                       v.style.display = 'block';
                       v.currentTime = 0;
                       if (autoplay) v.play().catch(() => { });
                   } else {
                       videoBox.style.display = 'none';
                   }
               }

               // estado ativo
               iconItems.forEach(i => i.classList.remove('active'));
               el.classList.add('active');
           });
       });

       // Seleciona a primeira skill por padrão
       if (iconItems.length) iconItems[0].click();

       // Scroll horizontal com a roda do mouse
       if (iconsBar) {
           iconsBar.addEventListener('wheel', (e) => {
               if (e.deltaY) {
                   e.preventDefault();
                   iconsBar.scrollLeft += e.deltaY;
               }
           });
       }

       // ----- Skins: setas (classes já estavam ok)
       initSkinsArrows();
       function initSkinsArrows() {
           const carousel = $('.skins-carousel');
           const wrapper = $('.skins-carousel-wrapper');
           const left = $('.skins-arrow.left');
           const right = $('.skins-arrow.right');
           if (!carousel || !left || !right || !wrapper) return;

           const scrollAmt = () => Math.round(carousel.clientWidth * 0.6);

           function setState() {
               const max = carousel.scrollWidth - carousel.clientWidth;
               const x = carousel.scrollLeft;
               const hasLeft = x > 5, hasRight = x < max - 5;
               left.style.display = hasLeft ? 'inline-block' : 'none';
               right.style.display = hasRight ? 'inline-block' : 'none';
               wrapper.classList.toggle('has-left', hasLeft);
               wrapper.classList.toggle('has-right', hasRight);
               carousel.style.justifyContent = (!hasLeft && !hasRight) ? 'center' : ;
           }
           function go(dir) {
               const max = carousel.scrollWidth - carousel.clientWidth;
               const next = dir < 0
                   ? Math.max(0, carousel.scrollLeft - scrollAmt())
                   : Math.min(max, carousel.scrollLeft + scrollAmt());
               carousel.scrollTo({ left: next, behavior: 'smooth' });
           }
           left.addEventListener('click', () => go(-1));
           right.addEventListener('click', () => go(1));
           carousel.addEventListener('scroll', setState);
           new ResizeObserver(setState).observe(carousel);
           setState();
       }

       // ----- Atributos (ordem fixa, espaços "fantasmas" no fim)
       function renderAttributes(str) {
           const vals = (str || ).split(',').map(v => v.trim());
           const pve = parseInt(vals[0], 10);
           const pvp = parseInt(vals[1], 10);
           const ene = parseInt(vals[2], 10);
           const cd = parseInt(vals[3], 10);

           const recargaVal = isNaN(cd) ? '-' : cd;
           const energiaLabel = isNaN(ene) ? 'Energia' : (ene >= 0 ? 'Ganho de energia' : 'Custo de energia');
           const energiaVal = isNaN(ene) ? '-' : Math.abs(ene);
           const poderVal = isNaN(pve) ? '-' : pve;
           const poderPvpVal = isNaN(pvp) ? '-' : pvp;

           const rows = [
               ['Recarga', recargaVal],
               [energiaLabel, energiaVal],
               ['Poder', poderVal],
               ['Poder PvP', poderPvpVal],
           ];

           // compacta os visíveis e empurra os vazios pro final
           const visible = rows.filter(([, v]) => v !== '-');
           const empties = rows.length - visible.length;

           const visibleHtml = visible.map(([label, value]) => `

       ${label}:
       ${value}

   `).join();

           const emptyHtml = Array.from({ length: empties }).map(() => `

        
        

   `).join();

return `

${visibleHtml}${emptyHtml}

`; 

       }
   })();

</script>

<style> 

   /* ------- resets ------- */
   img {
       pointer-events: none;
       user-select: none
   }

   video {
       max-height: 33.25em;
       object-fit: fill
   }

   .mw-body {
       padding: unset !important
   }

   .mw-body-content {
       line-height: 1.5 !important
   }

   .mw-body-content p {
       display: none
   }

   /* ------- banner topo ------- */
   .banner {
       position: absolute;
       z-index: -9;
       width: 100%;
       height: 100%;
       background-image: url(https://i.imgur.com/OVGhLvl.png);
       background-size: cover
   }

   .banner-image {
       width: 100%;
       height: auto
   }

   .banner::before {
       content: "";
       position: absolute;
       inset: 0;
       background: linear-gradient(to right, rgba(0, 0, 0, .6), rgba(0, 0, 0, .2))
   }

   /* ------- container geral ------- */
   .character-box {
       padding: unset !important;
       color: #000;
       font-family: 'Noto Sans', sans-serif !important;
       width: 100%;
       margin: auto;
       position: relative;
       user-select: none
   }

   .character-box p {
       display: unset
   }

   /* ------- topbar ------- */
   .character-topbar {
       display: flex;
       flex-direction: column;
       align-items: flex-start;
       padding: 8px 20px 0
   }

   .character-name-box {
       display: flex;
       align-items: center;
       gap: 14px
   }

   .topbar-icon {
       margin-top: 8px;
       width: 100px;
       height: 100px;
       object-fit: none
   }

   .character-name {
       text-shadow: 0 0 6px #000, 0 0 9px #000;
       color: #fff;
       font-size: 56px;
       font-family: 'Orbitron', sans-serif;
       font-weight: 900
   }

   .topbar-description {
       display: none !important;
       font-size: 16px;
       margin-top: 6px;
       width: fit-content;
       padding-inline: 16px;
       border-radius: 0 10px 10px 0;
       box-shadow: 0 0 2px rgb(0 0 0 / 70%)
   }

   /* ------- header / artwork ------- */
   .character-header {
       position: relative;
       overflow: hidden;
       display: flex;
       gap: 10px;
       flex-direction: column
   }

   .character-art {
       width: 34.3vw;
       height: auto;
       position: absolute;
       right: 3.5rem;
       top: -3.1rem;
       z-index: 1;
       pointer-events: none
   }

   /* tags de classe/tier */
   .class-tags {
       display: flex;
       gap: 9px;
       flex-wrap: wrap;
       margin-left: .28rem
   }

   .class-tag {
       background: #353420;
       color: #fff;
       outline: 2px solid #000;
       padding: 1px 6px;
       border-radius: 4px;
       font-size: .9em;
       font-weight: bold;
       box-shadow: 0 0 2px rgb(0 0 0 / 70%)
   }

   .character-info {
       user-select: none
   }

   .character-info .tier,
   .character-info .class-tag {
       font-size: 18px;
       color: #bbb
   }

   /* ------- abas ------- */
   .character-tabs {
       margin: 4px 0 4px 8px;
       display: flex;
       gap: 12px;
       justify-content: flex-start
   }

   .tab-btn {
       padding: 5px 20px;
       background: #333;
       color: #fff;
       border: 2px solid transparent;
       border-radius: 8px;
       font-size: 20px;
       cursor: pointer;
       font-weight: 600;
       line-height: 1;
       transition: background .15s, border-color .15s
   }

   .tab-btn.active {
       background: #156bc7;
       border-color: #156bc7
   }

   .tab-content {
       display: none;
       padding: 0 8px 8px;
       position: relative;
       z-index: 3
   }

   .tab-content.active {
       display: block
   }

   /* ------- skills ------- */
   .skills-container {
       display: flex;
       gap: 20px
   }

   .skills-details {
       flex: 1;
       display: flex;
       flex-direction: column;
       gap: 10px;
       width: 50%;
       justify-content: center
   }

   /* barra de ícones */
   .icon-bar {
       display: flex;
       flex-wrap: nowrap;
       gap: 10px;
       width: 100%;
       overflow-x: auto;
       overflow-y: hidden;
       padding: 10px 0 3px 3px;
       position: relative;
       z-index: 4;
       margin-bottom: 6px;
       scrollbar-width: thin;
       scrollbar-color: #ababab transparent;
       scroll-behavior: smooth;
       justify-content: flex-start
   }

   .icon-bar::-webkit-scrollbar {
       height: 6px
   }

   .icon-bar::-webkit-scrollbar-track {
       background: transparent
   }

   .icon-bar::-webkit-scrollbar-thumb {
       background-color: #151515;
       border-radius: 3px
   }

   .skill-icon {
       flex: 0 0 auto;
       width: 50px;
       height: 50px;
       border-radius: 6px;
       cursor: pointer;
       transition: transform .12s ease;
       position: relative;
       box-sizing: border-box;
       overflow: hidden
   }

   .skill-icon img {
       display: block;
       width: 100%;
       height: 100%;
       object-fit: cover;
       border-radius: inherit
   }

   /* estado ativo do ícone (moldura sem brilho) */
   .skill-icon.active {
       transform: translateY(-1px);
       outline: 2px solid #f7c945;
       outline-offset: -2px;
       box-shadow: 0 0 0 1px rgba(50, 30, 0, .65) inset
   }

   /* título + tooltip */
   .skill-title {
       position: relative;
       display: flex;
       justify-content: center;
       align-items: center;
       margin-bottom: 8px;
       padding-right: 32px
   }

   .skill-title h3 {
       font-size: 1.6em;
       color: #fff;
       text-align: center;
       margin: 0;
       width: 100%
   }

   /* caixa de descrição */
   .desc-box {
       min-height: 28.89rem;
       height: 100%;
       padding: 4px 16px !important;
       background: #26211C;
       border-radius: 8px;
       position: relative;
       box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
       color: #fff;
       backdrop-filter: blur(2px);
       transition: all .3s ease;
       text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
       padding-top: 0 !important;
       z-index: 99
   }

   .desc-box h3 {
       font-size: 2.7em;
       margin: 0;
       text-align: center;
       padding-top: 0
   }

   .desc-box p,
   .desc {
       font-size: 1.2em;
       margin: 0
   }

   .desc {
       overflow-y: auto !important;
       margin-top: 10px;
       padding-right: 6px;
       max-height: 16.6em
   }

   .desc * {
       font-size: inherit !important;
       line-height: inherit
   }

   /* scrollbar da descrição */
   .desc-box .desc::-webkit-scrollbar {
       width: 7px;
       height: 7px
   }

   .desc-box .desc::-webkit-scrollbar-thumb {
       background-color: #156bc7;
       border-radius: 10px
   }

   .desc-box .desc::-webkit-scrollbar-track {
       background-color: #151515a8;
       border-radius: 10px
   }

   /* tiers */
   .tier-bronze .topbar-icon,
   .tier-bronze .tier {
       outline: 2px solid #7b4e2f !important
   }

   .tier-silver .topbar-icon,
   .tier-silver .tier {
       outline: 2px solid #d6d2d2 !important
   }

   .tier-gold .topbar-icon,
   .tier-gold .tier {
       outline: 2px solid #fcd300 !important
   }

   .tier-diamond .topbar-icon,
   .tier-diamond .tier {
       outline: 2px solid #60dae2 !important
   }

   /* vídeo da skill */
   video::-webkit-media-controls {
       opacity: 0;
       transition: opacity .3s
   }

   video:hover::-webkit-media-controls {
       opacity: 1
   }

   .video-container {
       position: relative;
       width: 43%;
       background: #000;
       display: flex;
       align-items: center;
       justify-content: center;
       border-radius: 2%;
       box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
       overflow: hidden;
       z-index: 999
   }

   .video-placeholder {
       position: absolute;
       inset: 0;
       background: #000;
       display: flex;
       align-items: center;
       justify-content: center;
       z-index: 2;
       opacity: 1;
       transition: opacity .9s ease
   }

   .video-placeholder img {
       width: 120px;
       height: auto;
       animation: breathe 2.5s ease-in-out infinite;
       filter: drop-shadow(0 0 6px rgba(255, 255, 255, .3))
   }

   .video-placeholder.fade-out {
       opacity: 0
   }

   @keyframes breathe {

       0%,
       100% {
           transform: scale(1);
           opacity: 1
       }

       50% {
           transform: scale(1.07);
           opacity: .85
       }
   }

   /* ------- atributos ------- */
   .attrs,
   .attr-list {
       display: block;
       margin: 6px 0 12px
   }

   .desc-box .attrs,
   .desc-box .attrs *,
   .desc-box .attr-list,
   .desc-box .attr-list * {
       text-shadow: none;
       font-family: 'Noto Sans', sans-serif
   }

   .attrs__row,
   .attr-row {
       display: flex;
       align-items: baseline;
       gap: 8px;
       min-height: 22px;
       line-height: 1.2
   }

   .attrs__row--empty,
   .attr-row.is-empty {
       visibility: hidden
   }

   .attrs__label,
   .attr-label {
       font-weight: 700;
       color: #f0c87b;
       font-size: .98rem;
       white-space: nowrap;
       line-height: 1.2;
       margin: 0
   }

   .attrs__value,
   .attr-value {
       color: #fff;
       font-weight: 800;
       font-size: 1.08rem;
       letter-spacing: .01em;
       line-height: 1.2;
       margin: 0
   }

   @media (max-width:1000px),
   (max-aspect-ratio:3/4) {

       .attrs__row,
       .attr-row {
           min-height: 26px
       }

       .attrs__label,
       .attr-label {
           font-size: 1.15rem
       }

       .attrs__value,
       .attr-value {
           font-size: 1.22rem
       }
   }

   /* ------- Skins ------- */
   .card-skins {
       border-radius: 12px;
       user-select: none
   }

   .skins-carousel-wrapper {
       min-height: 28.89rem;
       max-height: 60%;
       padding: 0 16px 0 !important;
       background: #26211C;
       border-radius: 8px;
       position: relative;
       box-shadow: 0 6px 16px rgba(0, 0, 0, .25);
       color: #fff;
       backdrop-filter: blur(2px);
       transition: all .3s ease;
       text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;
       flex: 1;
       display: flex;
       flex-direction: row;
       gap: 10px;
       justify-content: center;
       align-items: center;
       overflow: visible;
       z-index: 99
   }

   .skins-carousel-wrapper::before,
   .skins-carousel-wrapper::after {
       content: ;
       position: absolute;
       top: 0;
       width: 60px;
       height: 100%;
       pointer-events: none;
       opacity: 0;
       transition: opacity .4s ease;
       z-index: 3
   }

   .skins-carousel-wrapper::before {
       left: 0;
       background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%)
   }

   .skins-carousel-wrapper::after {
       right: 0;
       background: linear-gradient(to left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%)
   }

   .skins-carousel-wrapper.has-left::before,
   .skins-carousel-wrapper.has-right::after {
       opacity: 1
   }

   .card-skins-title {
       display: block;
       border-bottom: unset;
       font-size: 40px;
       font-weight: bold;
       width: 47%;
       padding: 6px 0 3px 1px;
       margin-bottom: .02em;
       text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 3px 2px 0 #000
   }

   .skins-carousel {
       display: flex;
       gap: 1vw;
       overflow-x: auto;
       scroll-behavior: smooth;
       padding: 10px 0;
       flex-grow: 1
   }

   .skins-carousel::-webkit-scrollbar {
       display: none
   }

   .has-left {
       padding-left: 60px
   }

   .has-left .skins-carousel {
       mask-image: linear-gradient(to right, transparent 0px, black 40px, black 100%)
   }

   .has-right {
       padding-right: 60px
   }

   .has-right .skins-carousel {
       mask-image: linear-gradient(to right, black 0px, black calc(100% - 40px), transparent 100%)
   }

   .skins-arrow {
       background: none;
       border: none;
       color: #fff;
       font-size: 36px;
       cursor: pointer;
       padding: 8px;
       z-index: 5;
       transition: opacity .3s ease, transform .3s ease
   }

   .skins-arrow.left {
       margin-right: 8px
   }

   .skins-arrow.right {
       margin-left: 8px
   }

   .skins-arrow.hidden {
       opacity: 0;
       transform: scale(.8);
       pointer-events: none;
       visibility: hidden
   }

   .skin-card {
       position: relative;
       width: 12vw;
       height: 39vh;
       flex: 0 0 auto;
       border: 2px solid #697EC9 !important;
       border-radius: 8px;
       overflow: hidden;
       box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
       background: #111
   }

   .skin-card::before {
       content: ;
       position: absolute;
       inset: 0;
       pointer-events: none;
       border-radius: inherit;
       z-index: 2;
       box-shadow: inset 0 0 8px rgba(180, 180, 180, .18)
   }

   .skin-banner {
       width: 100%;
       height: 109%
   }

   .skin-banner img {
       width: 100%;
       height: 100%;
       object-fit: cover;
       filter: brightness(.5);
       scale: 1.1
   }

   .skin-sprite img {
       position: absolute;
       bottom: 10px;
       left: 50%;
       transform: translateX(-50%);
       height: 140px;
       width: auto;
       z-index: 2;
       transition: transform .2s
   }

   /* ------- responsivo ------- */
   @media (max-aspect-ratio:3/4) {
       .character-header .character-art {
           display: none
       }

       .skills-container {
           flex-direction: column-reverse;
           gap: 20px
       }

       .skills-details {
           flex: 1;
           display: flex;
           flex-direction: column;
           width: 96%;
           align-self: center
       }

       .video-container {
           width: 80%;
           border-radius: 3%;
           margin-top: 2%;
           align-self: center
       }

       .icon-bar {
           width: 98%;
           place-self: center;
           padding: 10px 0 16px 1px
       }

       .skill-icon {
           width: 80px;
           height: 80px
       }

       .desc-box h3 {
           font-size: 3.6em;
           margin-top: -14px
       }

       .desc-box p {
           font-size: 2.3em;
           margin-bottom: 5px
       }

       .desc-box {
           padding: 22px !important
       }

       .tab-btn {
           padding: 10px 20px;
           font-size: 26px
       }

       .tab-content {
           position: relative;
           z-index: 1;
           padding: 0 8px 20px
       }

       .class-tag {
           padding: 0 5px;
           font-size: 1.4em
       }

       .skins-carousel {
           gap: 20px
       }

       .skin-card {
           width: 236px;
           height: 400px
       }

       .skin-sprite img {
           height: 170px
       }

       .card-skins-title {
           width: 100% !important
       }

       .skins-arrow {
           display: none !important
       }

       .skins-carousel-wrapper::after,
       .skins-carousel-wrapper::before {
           background: unset
       }

       video::-webkit-media-controls {
           opacity: unset;
           transition: unset
       }

       video:hover::-webkit-media-controls {
           opacity: unset
       }
   }

   /* layout “janela estreita” desktop */
   @media (max-width:1100px),
   (max-aspect-ratio:3/4) {
       .character-header .character-art {
           display: none !important
       }

       .skills-container {
           flex-direction: column-reverse;
           gap: 20px
       }

       .skills-details {
           width: 100%;
           max-width: 820px;
           align-self: center
       }

       .video-container {
           width: 80%;
           max-width: 820px;
           border-radius: 3%;
           margin-top: 2%;
           align-self: center
       }

       .icon-bar {
           width: 100%;
           place-self: center;
           padding: 10px 0 16px 1px
       }

       .skill-icon {
           width: 80px;
           height: 80px
       }

       .tab-btn {
           padding: 10px 20px;
           font-size: 26px
       }

       .tab-content {
           position: relative;
           z-index: 1;
           padding: 0 8px 20px
       }
   }

</style>

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