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

De Wiki Gla
Ir para navegação Ir para pesquisar
m
Etiqueta: Revertido
m
Etiqueta: Revertido
Linha 1: Linha 1:
<style>
<style>
/* ===== Lightbox de GIF universal ===== */
.gx-overlay{position:fixed;inset:0;background:rgba(0,0,0,.86);display:none;align-items:center;justify-content:center;z-index:2147483647}
.gx-overlay {
.gx-modal{position:relative;max-width:min(92vw,1200px);max-height:92vh;background:#000;border-radius:12px;box-shadow:0 10px 40px rgba(0,0,0,.5);overflow:hidden}
  position: fixed;
.gx-modal img{display:block;max-width:100%;max-height:92vh;height:auto;width:auto;image-rendering:auto}
  inset: 0;
.gx-close{position:absolute;top:8px;right:8px;width:34px;height:34px;border-radius:999px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.38);color:#fff;font-size:22px;line-height:32px;text-align:center;cursor:pointer;user-select:none}
  background: rgba(0,0,0,.86);
.gx-close:hover{background:rgba(255,255,255,.25)}
  display: none;           /* vira flex quando abre */
.gx-open{overflow:hidden!important}
  align-items: center;
.gifbox{cursor:pointer;text-decoration:underline;color:#0645ad}
  justify-content: center;
.gifbox:visited{color:#0b0080}
  z-index: 2147483647;      /* cobre QUALQUER header/menu da wiki */
body.gx-open #mw-head,
}
body.gx-open #mw-panel,
 
body.gx-open #p-logo,
.gx-modal {
body.gx-open #footer,
  position: relative;
body.gx-open .vector-header,
  max-width: min(92vw, 1200px);
body.gx-open .vector-sitenotice,
  max-height: 92vh;
body.gx-open .mw-sidebar,
  background: #000;         /* fundo pra não “estourar” GIFs com transparência */
body.gx-open .mw-portlet,
  border-radius: 12px;
body.gx-open .vector-sticky-header{pointer-events:none!important}
  box-shadow: 0 10px 40px rgba(0,0,0,.5);
body.gx-open a:hover,
  overflow: hidden;
body.gx-open a:focus,
}
body.gx-open a:active{outline:none!important;text-decoration:none!important}
 
body.gx-open #mw-content-text ~ *,
.gx-modal img {
body.gx-open #content ~ *,
  display: block;
body.gx-open #mw-head,
  max-width: 100%;
body.gx-open #mw-panel,
  max-height: 92vh;
body.gx-open #p-logo,
  height: auto;
body.gx-open #footer{filter:saturate(.2) brightness(.8)}
  width: auto;
  image-rendering: auto;
}
 
.gx-close {
  position: absolute;
  top: 8px; right: 8px;
  width: 34px; height: 34px;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  border: 1px solid rgba(255,255,255,.38);
  color: #fff;
  font-size: 22px;
  line-height: 32px;
  text-align: center;
  cursor: pointer;
  user-select: none;
}
.gx-close:hover { background: rgba(255,255,255,.25); }
 
.gx-open { overflow: hidden !important; } /* trava o scroll da página quando aberto */
 
/* Link helper (opcional): se quiser, use só class="gifbox" num <span> que vira link */
.gifbox { cursor: pointer; text-decoration: underline; color: #0645ad; }
.gifbox:visited { color: #0b0080; }
</style>
</style>


Linha 62: Linha 37:
<script>
<script>
(function(){
(function(){
  // cria refs
   var overlay=document.querySelector('.gx-overlay');
   var overlay = document.querySelector('.gx-overlay');
   var modal=overlay.querySelector('.gx-modal');
   var modal   = overlay.querySelector('.gx-modal');
   var imgEl=overlay.querySelector('#gx-img');
   var imgEl   = overlay.querySelector('#gx-img');
   var closeEl=overlay.querySelector('.gx-close');
   var closeEl = overlay.querySelector('.gx-close');
   var lastActive=null;
 
   function openBox(url,altText){
   // abre overlay com URL
     if(!url)return;
   function openBox(url, altText){
    lastActive=document.activeElement;
     if(!url) return;
     document.body.classList.add('gx-open');
     document.body.classList.add('gx-open');
     imgEl.src = url;             // carrega GIF (externo ou interno)
     imgEl.src=url;
     imgEl.alt = altText || '';
     imgEl.alt=altText||'';
     overlay.style.display = 'flex';
     overlay.style.display='flex';
    closeEl.setAttribute('tabindex','0');
    closeEl.focus();
   }
   }
  // fecha overlay
   function closeBox(){
   function closeBox(){
     overlay.style.display = 'none';
     overlay.style.display='none';
     document.body.classList.remove('gx-open');
     document.body.classList.remove('gx-open');
     imgEl.src = '';             // limpa pra não ficar gastando CPU do GIF
     imgEl.src='';
     imgEl.alt = '';
     imgEl.alt='';
    if(lastActive&&typeof lastActive.focus==='function'){lastActive.focus()}
   }
   }
 
   overlay.addEventListener('click',function(e){if(e.target===overlay)closeBox()});
  // clique fora da imagem fecha
   closeEl.addEventListener('click',closeBox);
   overlay.addEventListener('click', function(e){
   document.addEventListener('keydown',function(e){if(e.key==='Escape')closeBox()});
    if(e.target === overlay) closeBox();
   document.addEventListener('click',function(e){
  });
     var t=e.target;
   closeEl.addEventListener('click', closeBox);
     while(t&&t!==document){
   document.addEventListener('keydown', function(e){
       if(t.classList&&t.classList.contains('gifbox'))break;
    if(e.key === 'Escape') closeBox();
       t=t.parentNode;
  });
 
  // Delegação: qualquer elemento com class="gifbox" vira trigger
  // 1) <a class="gifbox" href="URL.gif">Texto</a>
  // 2) <span class="gifbox" data-gif="URL.gif">Texto</span>
   document.addEventListener('click', function(e){
     var t = e.target;
    // sobe até achar um elemento com .gifbox
     while (t && t !== document) {
       if (t.classList && t.classList.contains('gifbox')) break;
       t = t.parentNode;
     }
     }
     if (!t || t === document) return;
     if(!t||t===document)return;
 
     e.preventDefault();
     e.preventDefault();
 
     var url=t.getAttribute('data-gif')||t.getAttribute('href');
     var url = t.getAttribute('data-gif') || t.getAttribute('href');
     var alt=t.getAttribute('data-alt')||t.textContent.trim();
     var alt = t.getAttribute('data-alt') || t.textContent.trim();
     if(!url)return;
 
     openBox(url,alt);
    // fallback: se href não é gif, não faz nada
   },false);
     if (!url) return;
 
     openBox(url, alt);
   }, false);
})();
})();
</script>
</script>

Edição das 02h36min de 14 de agosto de 2025

<style> .gx-overlay{position:fixed;inset:0;background:rgba(0,0,0,.86);display:none;align-items:center;justify-content:center;z-index:2147483647} .gx-modal{position:relative;max-width:min(92vw,1200px);max-height:92vh;background:#000;border-radius:12px;box-shadow:0 10px 40px rgba(0,0,0,.5);overflow:hidden} .gx-modal img{display:block;max-width:100%;max-height:92vh;height:auto;width:auto;image-rendering:auto} .gx-close{position:absolute;top:8px;right:8px;width:34px;height:34px;border-radius:999px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.38);color:#fff;font-size:22px;line-height:32px;text-align:center;cursor:pointer;user-select:none} .gx-close:hover{background:rgba(255,255,255,.25)} .gx-open{overflow:hidden!important} .gifbox{cursor:pointer;text-decoration:underline;color:#0645ad} .gifbox:visited{color:#0b0080} body.gx-open #mw-head, body.gx-open #mw-panel, body.gx-open #p-logo, body.gx-open #footer, body.gx-open .vector-header, body.gx-open .vector-sitenotice, body.gx-open .mw-sidebar, body.gx-open .mw-portlet, body.gx-open .vector-sticky-header{pointer-events:none!important} body.gx-open a:hover, body.gx-open a:focus, body.gx-open a:active{outline:none!important;text-decoration:none!important} body.gx-open #mw-content-text ~ *, body.gx-open #content ~ *, body.gx-open #mw-head, body.gx-open #mw-panel, body.gx-open #p-logo, body.gx-open #footer{filter:saturate(.2) brightness(.8)} </style>

<script> (function(){ 

 var overlay=document.querySelector('.gx-overlay');
 var modal=overlay.querySelector('.gx-modal');
 var imgEl=overlay.querySelector('#gx-img');
 var closeEl=overlay.querySelector('.gx-close');
 var lastActive=null;
 function openBox(url,altText){
   if(!url)return;
   lastActive=document.activeElement;
   document.body.classList.add('gx-open');
   imgEl.src=url;
   imgEl.alt=altText||;
   overlay.style.display='flex';
   closeEl.setAttribute('tabindex','0');
   closeEl.focus();
 }
 function closeBox(){
   overlay.style.display='none';
   document.body.classList.remove('gx-open');
   imgEl.src=;
   imgEl.alt=;
   if(lastActive&&typeof lastActive.focus==='function'){lastActive.focus()}
 }
 overlay.addEventListener('click',function(e){if(e.target===overlay)closeBox()});
 closeEl.addEventListener('click',closeBox);
 document.addEventListener('keydown',function(e){if(e.key==='Escape')closeBox()});
 document.addEventListener('click',function(e){
   var t=e.target;
   while(t&&t!==document){
     if(t.classList&&t.classList.contains('gifbox'))break;
     t=t.parentNode;
   }
   if(!t||t===document)return;
   e.preventDefault();
   var url=t.getAttribute('data-gif')||t.getAttribute('href');
   var alt=t.getAttribute('data-alt')||t.textContent.trim();
   if(!url)return;
   openBox(url,alt);
 },false);

})(); </script>

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