MediaWiki:Common.css: Difference between revisions

Line 6:

/* ==========================================================================

ÍNDICE LATERAL (TOC) - ~~DRIVEN BY CLICK ONLY~~

ÍNDICE LATERAL (TOC) - CONTROLO E ALINHAMENTO POR CLIQUE

========================================================================== */

/* ~~Esconde~~ todos os subcapítulos por ~~padrão~~ */

/* 1. Oculta todos os subcapítulos internos por defeito */

.vector-toc-contents .vector-toc-list-item .vector-toc-list {

display: none !important;

}

/* ~~Força~~ a ~~exibição apenas quando o item~~ pai ~~recebe~~ a classe ~~'toc-expanded' via JS~~ */

/* 2. Mostra os subcapítulos unicamente quando a linha pai tiver a classe aplicada pelo clique */

.vector-toc-list-item.toc-expanded > .vector-toc-list {

display: block !important;

}

/* ~~Cria o ícone da~~ seta ~~clicável ao lado do texto do título~~ */

/* 3. Estilização correta e alinhamento milimétrico para a seta manual */

.toc-toggle-arrow {

display: inline-block;

cursor: pointer;

margin-~~left~~: ~~5px~~;

margin-right: 6px; /* Afasta o ícone do texto do capítulo */

~~padding~~: ~~0 5px~~;

font-size: 9px; /* Ajuste discreto para condizer com o tamanho da fonte */

~~font~~-~~size~~: ~~10px~~;

vertical-align: middle; /* Impede a seta de fugir para cima ou para baixo do texto */

transition: transform 0.2s ease;

color: #54595d;

width: 10px; /* Espaço fixo reservado para o ícone não empurrar o texto */

text-align: center;

}

/* ~~Roda a~~ seta ~~para baixo~~ quando ~~o menu~~ expande */

/* 4. Animação de rotação da seta quando a árvore se expande */

.vector-toc-list-item.toc-expanded > .vector-toc-link .toc-toggle-arrow {

transform: rotate(90deg);

}

/* 5. Identação interna opcional para destacar a hierarquia quando aberta */

.vector-toc-list .vector-toc-list {

padding-left: 15px !important;

margin-top: 2px;

}