MediaWiki:Common.css: Difference between revisions

Line 6:

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

ÍNDICE LATERAL (TOC) - COMPORTAMENTO ~~POR CLIQUE INDEPENDENTE~~

ÍNDICE LATERAL (TOC) - FIX VISUAL E COMPORTAMENTO

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

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

/* 1. Esconde as sublistas por padrão */

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

.vector-toc-list-item > ul,

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

display: none !important;

}

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

/* 2. Mostra apenas quando o item pai recebe a classe de expansão */

.vector-toc-list-item.toc-expanded > ul,

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

display: block !important;

}

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

/* 3. Garante que os itens de lista aceitam posicionamento absoluto */

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

.vector-toc-list-item {

position: relative !important;

}

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

/* 4. Posiciona a seta perfeitamente à esquerda e alinhada ao texto */

.toc-toggle-arrow {

position: absolute !important;

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

left: -12px !important; /* Ajusta para a margem esquerda */

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

top: 5px !important; /* Centraliza com a primeira linha de texto */

display: inline-block !important;

cursor: pointer !important;

font-size: 9px !important;

color: #54595d !important;

width: ~~12px~~ !important;

width: 10px !important;

text-align: center !important;

z-index: 10 !important;

z-index: 99 !important;

transition: transform 0.2s ease !important;

}

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

/* 5. Roda a seta para baixo quando expandido */

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

transform: rotate(90deg) !important;

}

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

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

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

.vector-toc-list-item .vector-toc-list,

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

.vector-toc-list-item ul {

margin-top: 4px;

padding-left: 10px !important;

margin-top: 4px !important;

}