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

De Wiki Gla
Ir para navegação Ir para pesquisar
 
Linha 1: Linha 1:
<style>
<style>
.mw-body { padding: unset !important; }
.tema-btn {
.mw-body-content p { display: none; }
     position: absolute;
.sv-wrap p { display: unset; }
     top: 16px;
#firstHeading, #contentSub, #contentSub2 {
     right: 16px;
     display: none !important;
     background: #f3f4f6;
     margin: 0 !important;
     border: 1px solid rgba(0,0,0,0.08);
     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;
     font-size: 18px;
    padding: 6px 12px;
     font-weight: bold;
     font-size: 13px;
     font-weight: 600;
    color: #6b7280;
     cursor: pointer;
     cursor: pointer;
     display: flex;
     user-select: none;
    align-items: center;
    justify-content: center;
    overflow: hidden;
     transition: all 0.2s ease;
     transition: all 0.2s ease;
     user-select: none;
     z-index: 10;
}
.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; }
}
}
.tema-btn:hover { opacity: 0.8; }
</style>
</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>

Edição atual tal como às 03h09min de 17 de março de 2026

<style> .tema-btn { 

   position: absolute;
   top: 16px;
   right: 16px;
   background: #f3f4f6;
   border: 1px solid rgba(0,0,0,0.08);
   border-radius: 8px;
   padding: 6px 12px;
   font-size: 13px;
   font-weight: 600;
   color: #6b7280;
   cursor: pointer;
   user-select: none;
   transition: all 0.2s ease;
   z-index: 10;

} .tema-btn:hover { opacity: 0.8; } </style>

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