MediaWiki:Common.css: Difference between revisions

Line 6:

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

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

ÍNDICE LATERAL (TOC) - COMPORTAMENTO POR CLIQUE INDEPENDENTE

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

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

/* 1. Oculta os subcapítulos por padrão */

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

display: none !important;

}

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

/* 2. Mostra a sublista apenas quando o item pai tiver a classe expandida */

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

display: block !important;

}

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

/* 3. Abre espaço à esquerda nos itens que têm filhos para acomodar a seta */

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

position: relative !important;

}

/* 4. Estilização e alinhamento perfeito para a seta manual */

.toc-toggle-arrow {

~~display~~: ~~inline-block~~;

position: absolute !important;

~~cursor~~: ~~pointer;~~

left: -14px !important; /* Posiciona a seta nitidamente à esquerda do texto */

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

top: 6px !important; /* Alinha verticalmente com a primeira linha de texto */

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

display: inline-block !important;

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

cursor: pointer !important;

~~transition~~: ~~transform 0.2s ease~~;

font-size: 9px !important;

color: #54595d;

color: #54595d !important;

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

width: 12px !important;

text-align: center;

text-align: center !important;

z-index: 10 !important;

transition: transform 0.2s ease !important;

}

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

/* 5. Rotação da seta quando expandido */

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

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

transform: rotate(90deg);

transform: rotate(90deg) !important;

}

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

/* 6. Indentação visual para os subcapítulos abertos */

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

padding-left: ~~15px~~ !important;

padding-left: 12px !important;

margin-top: ~~2px~~;

margin-top: 4px;

}