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

De Wiki Gla
Ir para navegação Ir para pesquisar
m
Etiqueta: Revertido
m (Limpou toda a página)
Etiquetas: Reversão manual anulando
 
(155 revisões intermediárias por 3 usuários não estão sendo mostradas)
Linha 1: Linha 1:
<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>


<div class="gx-overlay" role="dialog" aria-modal="true" aria-label="Visualização de imagem">
  <div class="gx-modal">
    <button class="gx-close" type="button" aria-label="Fechar">&times;</button>
    <img id="gx-img" src="" alt="" loading="eager" decoding="async" referrerpolicy="no-referrer">
  </div>
</div>
<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>

Edição atual tal como às 19h10min de 12 de setembro de 2025