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
 
(172 revisões intermediárias por 3 usuários não estão sendo mostradas)
Linha 1: Linha 1:
<script>
(function() {
    // Seletores das skills
    const skillIcons = document.querySelectorAll('.character-skillicon');
    const descDiv = document.querySelector('.character-skilldesc');
    const videoDiv = document.querySelector('.character-skillvideo');


    function showSkill(el) {
        descDiv.innerHTML =
            '<h3>' + (el.dataset.nome || '') + '</h3>' +
            (el.dataset.atr ? '<div class="character-attr"><b>Atributos:</b> ' + el.dataset.atr + '</div>' : '') +
            '<div class="character-skilltext">' + (el.dataset.desc || '') + '</div>';
        if (el.dataset.video) {
            videoDiv.innerHTML = '<video src="' + el.dataset.video + '" controls playsinline></video>';
        } else {
            videoDiv.innerHTML = '<div style="color:#aaa; font-size:1.3em; text-align:center; padding-top:30px;">SEM VÍDEO</div>';
        }
    }
    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>
<style>
.character-box {
    max-width: 1080px;
    margin: 36px auto 0 auto;
    font-family: 'Noto Sans', Arial, sans-serif;
    color: #222;
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(80,80,80,0.07);
    padding: 0 20px 28px 20px;
    box-sizing: border-box;
}
.character-header {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 12px;
    padding-top: 18px;
}
.character-icon {
    width: 94px;
    height: 94px;
    border-radius: 10px;
    object-fit: cover;
    border: 2px solid #e2e8f0;
    background: #fff;
}
.character-header-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 3px;
}
.character-name {
    font-size: 2.6em;
    font-weight: 900;
    margin: 0 0 2px 0;
    letter-spacing: 0.01em;
    line-height: 1;
}
.character-classes {
    display: flex;
    align-items: center;
    gap: 11px;
    margin-bottom: 3px;
    flex-wrap: wrap;
}
.character-class {
    display: inline-block;
    font-size: 1em;
    font-weight: 600;
    background: #f5f6fa;
    border-radius: 5px;
    padding: 3px 13px;
    border: 1.1px solid #d8e0f0;
    color: #184e73;
    margin-right: 2px;
}
.character-desc {
    font-size: 1.09em;
    margin: 10px 0 0 0;
    color: #454545;
    line-height: 1.35;
    font-weight: 500;
    background: #f0f7fb;
    border-radius: 6px;
    padding: 7px 12px;
    display: inline-block;
}
.character-skillbar {
    display: flex;
    gap: 13px;
    margin: 30px 0 15px 0;
    overflow-x: auto;
    padding-bottom: 7px;
    border-bottom: 2.5px solid #e5e7eb;
    scrollbar-width: thin;
}
.character-skillicon {
    width: 49px;
    height: 49px;
    border-radius: 8px;
    border: 1.7px solid #e5e7eb;
    background: #f9f9f9;
    cursor: pointer;
    transition: border-color 0.14s, box-shadow 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    flex-shrink: 0;
    box-shadow: 0 0 0 0 #fff0;
}
.character-skillicon.active,
.character-skillicon:focus,
.character-skillicon:hover {
    border-color: #3ec8ff;
    box-shadow: 0 0 0 2px #c8eafd;
}
.character-skillicon img {
    width: 43px;
    height: 43px;
    border-radius: 6px;
    object-fit: cover;
    box-shadow: 0 1px 5px #0001;
    pointer-events: none;
}
.character-content {
    display: flex;
    gap: 34px;
    align-items: flex-start;
    min-height: 270px;
    margin-top: 15px;
}
.character-skilldesc {
    flex: 1.3;
    background: #f8fafb;
    border-radius: 10px;
    padding: 16px 18px 12px 18px;
    min-width: 240px;
    min-height: 155px;
    color: #223;
    box-shadow: 0 0 0 1px #e3e7eb;
}
.character-skilldesc h3 {
    font-size: 1.22em;
    font-weight: 700;
    margin: 0 0 6px 0;
    color: #2175c2;
}
.character-skilldesc .character-attr {
    font-size: 1.01em;
    margin-bottom: 7px;
    color: #2a72af;
    font-weight: 600;
}
.character-skilldesc .character-skilltext {
    font-size: 1.09em;
    margin-top: 7px;
    color: #21262b;
    line-height: 1.36;
}
.character-skillvideo {
    flex: 1;
    min-width: 220px;
    max-width: 390px;
    min-height: 115px;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    background: #fafcff;
    border-radius: 10px;
    box-shadow: 0 0 0 1px #e3e7eb;
    padding: 12px;
}
.character-skillvideo video {
    width: 100%;
    max-width: 370px;
    border-radius: 7px;
    background: #222;
}
@media (max-width: 860px) {
    .character-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 13px;
    }
    .character-content {
        flex-direction: column;
        gap: 18px;
    }
    .character-skillvideo {
        max-width: 100%;
    }
    .character-name {
        font-size: 2.1em;
    }
}
@media (max-width: 570px) {
    .character-box {
        padding: 0 5px 18px 5px;
    }
    .character-skillbar {
        gap: 8px;
    }
    .character-header {
        gap: 7px;
    }
    .character-skilldesc {
        padding: 9px 6px 7px 9px;
    }
    .character-name {
        font-size: 1.5em;
    }
}
</style>

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”