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

De Wiki Gla
Ir para navegação Ir para pesquisar
(Criou página com '<style> .tema-btn { position: absolute; top: 16px; right: 16px; background: #f3f4f6; border: 1px solid rgba(0,0,0,0.08); border-radius: 8px; paddin...')
 
Linha 1: Linha 1:
<style>
<style>
.tema-btn {
.mw-body { padding: unset !important; }
     position: absolute;
.mw-body-content p { display: none; }
     top: 16px;
.sv-wrap p { display: unset; }
     right: 16px;
#firstHeading, #contentSub, #contentSub2 {
     background: #f3f4f6;
     display: none !important;
     border: 1px solid rgba(0,0,0,0.08);
    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;
     border-radius: 8px;
    padding: 6px 12px;
     font-size: 18px;
     font-size: 13px;
     font-weight: bold;
     font-weight: 600;
    color: #6b7280;
     cursor: pointer;
     cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: all 0.2s ease;
     user-select: none;
     user-select: none;
    transition: all 0.2s ease;
    z-index: 10;
}
}
.tema-btn:hover { opacity: 0.8; }
.sv-tab img { width: 100%; height: 100%; object-fit: cover; }
.dark .tema-btn {
.sv-tab:hover { border-color: #555555; }
     background: #16213e;
.sv-tab.active { border-color: #2563eb; background: #000000; }
     border-color: rgba(255,255,255,0.1);
.sv-dark .sv-tab { background: #2a2a2a; }
     color: #94a3b8;
.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>
</style>
<script>
<script>
window.TemaInit = function(wrapSelector, darkClass) {
document.addEventListener('DOMContentLoaded', function() {
     darkClass = darkClass || 'dark';
 
     document.querySelectorAll(wrapSelector).forEach(function(wrap) {
     if (window.TemaInit) window.TemaInit('.sv-wrap', 'sv-dark');
         var btn = wrap.querySelector('.tema-btn');
 
        if (!btn) return;
     document.querySelectorAll('.sv-media[data-youtube]').forEach(function(media) {
         var saved = localStorage.getItem('wiki-tema');
         var id = media.getAttribute('data-youtube');
         if (saved === 'dark') {
         var iframe = document.createElement('iframe');
            wrap.classList.add(darkClass);
         iframe.src = 'https://www.youtube.com/embed/' + id;
            btn.textContent = '☀ Light';
         iframe.setAttribute('allowfullscreen', '');
         }
        iframe.setAttribute('frameborder', '0');
        btn.addEventListener('click', function() {
         media.appendChild(iframe);
            wrap.classList.toggle(darkClass);
            var isDark = wrap.classList.contains(darkClass);
            btn.textContent = isDark ? '☀ Light' : '☾ Dark';
            localStorage.setItem('wiki-tema', isDark ? 'dark' : 'light');
         });
     });
     });
};
</script>
```


---
    document.querySelectorAll('video[data-wikivideo]').forEach(function(video) {
        var filename = video.getAttribute('data-wikivideo');
        video.src = '/index.php?title=Especial:FilePath/' + encodeURIComponent(filename);
    });


## Como usar em qualquer widget
    document.querySelectorAll('.sv-box').forEach(function(box) {
        box.querySelectorAll('.sv-tab').forEach(function(tab) {
            tab.addEventListener('click', function() {
                box.querySelectorAll('.sv-tab').forEach(function(t) { t.classList.remove('active'); });
                box.querySelectorAll('.sv-panel').forEach(function(p) { p.classList.remove('active'); });
                tab.classList.add('active');
                box.querySelector('.sv-panel[data-panel="' + tab.dataset.skill + '"]').classList.add('active');
            });
        });
    });


**1. Chamar a widget no topo da predefinição:**
});
```
</script>
{{#widget:Tema}}{{#widget:MinhaWidget}}{{#invoke:MeuModulo|render|...}}

Edição das 03h04min de 17 de março de 2026

<style> .mw-body { padding: unset !important; } .mw-body-content p { display: none; } .sv-wrap p { display: unset; }

  1. 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> document.addEventListener('DOMContentLoaded', function() {

   if (window.TemaInit) window.TemaInit('.sv-wrap', 'sv-dark');
   document.querySelectorAll('.sv-media[data-youtube]').forEach(function(media) {
       var id = media.getAttribute('data-youtube');
       var iframe = document.createElement('iframe');
       iframe.src = 'https://www.youtube.com/embed/' + id;
       iframe.setAttribute('allowfullscreen', );
       iframe.setAttribute('frameborder', '0');
       media.appendChild(iframe);
   });
   document.querySelectorAll('video[data-wikivideo]').forEach(function(video) {
       var filename = video.getAttribute('data-wikivideo');
       video.src = '/index.php?title=Especial:FilePath/' + encodeURIComponent(filename);
   });
   document.querySelectorAll('.sv-box').forEach(function(box) {
       box.querySelectorAll('.sv-tab').forEach(function(tab) {
           tab.addEventListener('click', function() {
               box.querySelectorAll('.sv-tab').forEach(function(t) { t.classList.remove('active'); });
               box.querySelectorAll('.sv-panel').forEach(function(p) { p.classList.remove('active'); });
               tab.classList.add('active');
               box.querySelector('.sv-panel[data-panel="' + tab.dataset.skill + '"]').classList.add('active');
           });
       });
   });

}); </script>