Mudanças entre as edições de "Widget:Tema"
(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> | ||
. | .mw-body { padding: unset !important; } | ||
.mw-body-content p { display: none; } | |||
.sv-wrap p { display: unset; } | |||
#firstHeading, #contentSub, #contentSub2 { | |||
background: # | display: none !important; | ||
border: | 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; | ||
font-size: 18px; | |||
font-size: | font-weight: bold; | ||
font-weight: | |||
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; | ||
} | } | ||
. | .sv-tab img { width: 100%; height: 100%; object-fit: cover; } | ||
.dark . | .sv-tab:hover { border-color: #555555; } | ||
background: # | .sv-tab.active { border-color: #2563eb; background: #000000; } | ||
border- | .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> | </style> | ||
<script> | <script> | ||
document.addEventListener('DOMContentLoaded', function() { | |||
document.querySelectorAll( | if (window.TemaInit) window.TemaInit('.sv-wrap', 'sv-dark'); | ||
var | |||
document.querySelectorAll('.sv-media[data-youtube]').forEach(function(media) { | |||
var | 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 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; }
- 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>