Jump to content

MediaWiki:Common.css: Difference between revisions

No edit summary
No edit summary
Line 6: Line 6:


/* ==========================================================================
/* ==========================================================================
   ÍNDICE LATERAL (TOC) INTELIGENTE E COLAPSÁVEL
   ÍNDICE LATERAL (TOC) - DRIVEN BY CLICK ONLY
   ========================================================================== */
   ========================================================================== */


/* 1. Esconde os sub-itens de segundo e terceiro nível por padrão (ex: 10.1, 10.2) */
/* Esconde todos os subcapítulos por padrão */
.vector-toc-contents .vector-toc-list-item .vector-toc-list {
.vector-toc-contents .vector-toc-list-item .vector-toc-list {
     display: none !important;
     display: none !important;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.25s ease-in-out;
}
}


/* 2. Mostra as sub-secções APENAS quando a secção pai estiver ativa (onde o utilizador está a ler) */
/* Força a exibição apenas quando o item pai recebe a classe 'toc-expanded' via JS */
.vector-toc-list-item-active > .vector-toc-list {
.vector-toc-list-item.toc-expanded > .vector-toc-list {
     display: block !important;
     display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}
}


/* 3. Se um sub-item estiver ativo, garante que a lista pai continua aberta */
/* Cria o ícone da seta clicável ao lado do texto do título */
.vector-toc-list-item:focus-within > .vector-toc-list {
.toc-toggle-arrow {
     display: block !important;
     display: inline-block;
     visibility: visible !important;
     cursor: pointer;
     opacity: 1 !important;
     margin-left: 5px;
}
    padding: 0 5px;
 
    font-size: 10px;
/* 4. BONUS: Permite expandir temporariamente se o utilizador passar com o rato (Hover) */
     transition: transform 0.2s ease;
.vector-toc-list-item:hover > .vector-toc-list {
     color: #54595d;
    display: block !important;
     visibility: visible !important;
     opacity: 1 !important;
}
}


/* 5. Ajuste visual leve para alinhar e destacar a hierarquia dos sub-itens */
/* Roda a seta para baixo quando o menu expande */
.vector-toc-list .vector-toc-list {
.vector-toc-list-item.toc-expanded > .vector-toc-link .toc-toggle-arrow {
    padding-left: 12px !important;
     transform: rotate(90deg);
    border-left: 1px dashed #cccccc;
    margin-top: 4px;
     margin-bottom: 4px;
}
}