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
 
(173 revisões intermediárias por 3 usuários não estão sendo mostradas)
Linha 1: Linha 1:
<style>
.character-box {
    max-width: 720px; margin: 24px auto; border: 2px solid #222; border-radius: 12px;
    background: #1e2327; box-shadow: 0 2px 12px #0007; padding: 24px 32px; color: #f3f3f3;
    font-family: 'Noto Sans', Arial, sans-serif;
}
.character-header { display: flex; align-items: center; gap: 20px; }
.character-img { width: 104px; height: 104px; border-radius: 10px; object-fit: cover; border: 2px solid #555; background: #111; box-shadow: 0 2px 6px #0007; }
.character-header-main { flex: 1; }
.character-name { font-size: 2.3em; font-weight: 900; margin: 0 0 2px 0; }
.character-tier { font-size: 1.1em; color: #85d6ff; font-weight: 700; margin-bottom: 6px; }
.character-class { font-size: 1em; color: #b8bac1; margin-bottom: 6px; }
.character-desc { font-size: 1.05em; margin-bottom: 16px; color: #f5e9c6; background: #24282d; border-radius: 6px; padding: 7px 14px; }
.tabs-bar { display: flex; gap: 8px; margin-bottom: 20px; }
.tab-btn { padding: 7px 24px; border: none; border-radius: 6px 6px 0 0; background: #23272d; color: #fff; font-size: 1.15em; font-weight: 600; cursor: pointer; transition: background 0.15s; }
.tab-btn.active { background: #4a92e6; color: #fff; }
.tab-content { display: none; padding: 18px 0; border-top: 2px solid #333; }
.tab-content.active { display: flex; gap: 32px; }
.skills-bar { display: flex; gap: 10px; margin-bottom: 14px; overflow-x: auto; padding-bottom: 6px; }
.skill-icon { width: 56px; height: 56px; background: #202429; border: 2px solid #363b45; border-radius: 8px; cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s; display: flex; align-items: center; justify-content: center; }
.skill-icon.active, .skill-icon:hover { border-color: #71e4fa; box-shadow: 0 0 8px #58e1ff60; }
.skill-detail { flex: 1.3; background: #23272d; border-radius: 8px; padding: 16px 18px; margin-bottom: 8px; min-height: 180px; }
.skill-detail h3 { font-size: 1.4em; margin: 0 0 10px 0; color: #58bfff; }
.skill-detail p { margin: 7px 0 0 0; font-size: 1.05em; }
.skill-video { flex: 1; display: flex; align-items: center; justify-content: center; background: #181a1d; border-radius: 8px; padding: 8px; min-width: 220px; max-width: 350px; min-height: 120px; }
.skin-bar { display: flex; gap: 18px; margin: 8px 0; overflow-x: auto; padding-bottom: 10px; }
.skin-card { min-width: 110px; max-width: 140px; border-radius: 8px; background: #24282d; border: 2px solid #474e58; padding: 4px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.skin-banner { width: 100%; height: 54px; border-radius: 5px; object-fit: cover; margin-bottom: 5px; background: #111; box-shadow: 0 1px 5px #0005; }
.skin-card img { border-radius: 5px; max-width: 98px; max-height: 92px; background: #232323; }
.skin-card[title] { cursor: pointer; }
@media (max-width: 650px) {
    .character-box { padding: 8px; }
    .character-header { flex-direction: column; gap: 8px; }
    .tab-content.active { flex-direction: column; gap: 12px; }
    .skin-bar { gap: 8px; }
}
</style>
<script>
(function() {
    // Tabs
    var tabs = document.querySelectorAll('.tab-btn');
    var contents = document.querySelectorAll('.tab-content');
    tabs.forEach(function(tab){
        tab.addEventListener('click', function(){
            tabs.forEach(t => t.classList.remove('active'));
            contents.forEach(c => c.classList.remove('active'));
            tab.classList.add('active');
            document.getElementById('tab-' + tab.dataset.tab).classList.add('active');
        });
    });


    // Skills
    var skillIcons = document.querySelectorAll('.skills-bar .skill-icon');
    var details = document.querySelector('.skill-detail');
    var videoDiv = document.querySelector('.skill-video');
    function showSkill(el){
        details.innerHTML =
            '<h3>' + (el.dataset.nome || '') + '</h3>' +
            (el.dataset.atr ? '<div style="font-size:0.98em; color:#c4e5ff; margin-bottom:5px"><b>Atributos:</b> ' + el.dataset.atr + '</div>' : '') +
            '<p>' + (el.dataset.desc || '') + '</p>';
        if(el.dataset.video){
            videoDiv.innerHTML = '<video src="' + el.dataset.video + '" controls width="300" style="margin-top:10px"></video>';
        } else {
            videoDiv.innerHTML = '';
        }
    }
    skillIcons.forEach(function(el, idx){
        el.addEventListener('click', function(){
            skillIcons.forEach(e => e.classList.remove('active'));
            el.classList.add('active');
            showSkill(el);
        });
        if(idx === 0) {
            el.classList.add('active');
            showSkill(el);
        }
    });
})();
</script>

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

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