MediaWiki:Common.css: Difference between revisions
No edit summary |
No edit summary |
||
| Line 6: | Line 6: | ||
/* ========================================================================== | /* ========================================================================== | ||
ÍNDICE LATERAL (TOC) - DESIGN | ÍNDICE LATERAL (TOC) - DESIGN FINAL REFINADO COM HOVER E ANIMAÇÃO RÁPIDA | ||
========================================================================== */ | ========================================================================== */ | ||
/* 1. | /* 1. Oculta as sublistas por padrão */ | ||
.vector-toc-contents .vector-toc-list .vector-toc-list { | .vector-toc-contents .vector-toc-list .vector-toc-list { | ||
display: none !important; | display: none !important; | ||
| Line 24: | Line 24: | ||
} | } | ||
/* 4. Container do botão da seta ( | /* 4. Container do botão da seta (Área clicável com efeito Hover) */ | ||
.toc-toggle-arrow { | .toc-toggle-arrow { | ||
position: absolute !important; | position: absolute !important; | ||
left: - | left: -18px !important; /* Ajuste para centralizar o quadrado do hover à esquerda */ | ||
top: | top: 3px !important; /* Alinha perfeitamente ao centro da linha de texto */ | ||
display: inline-flex !important; | display: inline-flex !important; | ||
align-items: center; | align-items: center; | ||
justify-content: center; | justify-content: center; | ||
cursor: pointer !important; | cursor: pointer !important; | ||
width: | width: 18px !important; /* Tamanho do quadrado do hover */ | ||
height: | height: 18px !important; | ||
border-radius: 2px; /* Cantos levemente suavizados para o quadrado */ | |||
z-index: 50 !important; | z-index: 50 !important; | ||
transition: background-color 0.1s ease; | |||
} | } | ||
/* 5. O Desenho da Seta (Estilo Chevron | /* Efeito Hover: Quadrado cinza clarinho ao passar o rato */ | ||
.toc-toggle-arrow:hover { | |||
background-color: #f8f9fa !important; | |||
} | |||
/* 5. O Desenho da Seta (Estilo Chevron - Cor Preta Forte) */ | |||
.toc-toggle-arrow .arrow-icon { | .toc-toggle-arrow .arrow-icon { | ||
display: inline-block; | display: inline-block; | ||
width: 5px; | width: 5px; | ||
height: 5px; | height: 5px; | ||
border-right: 1.5px solid # | border-right: 1.5px solid #202122; /* Preto forte igual aos cabeçalhos da wiki */ | ||
border-bottom: 1.5px solid # | border-bottom: 1.5px solid #202122; | ||
transform: rotate(-45deg); | transform: rotate(-45deg); /* Aponta para a direita */ | ||
transition: transform 0. | transition: transform 0.1s ease-in-out; /* Animação ultra rápida */ | ||
margin-left: -2px; | margin-left: -2px; | ||
} | } | ||
/* 6. Rotação | /* 6. Rotação rápida quando o menu abre (roda para baixo) */ | ||
.vector-toc-list-item.toc-expanded > .toc-toggle-arrow .arrow-icon { | .vector-toc-list-item.toc-expanded > .toc-toggle-arrow .arrow-icon { | ||
transform: rotate(45deg) !important; | transform: rotate(45deg) !important; | ||
| Line 57: | Line 64: | ||
} | } | ||
/* 7. Indentação interna para os subcapítulos */ | /* 7. Indentação interna limpa para os subcapítulos */ | ||
.vector-toc-contents .vector-toc-list .vector-toc-list { | .vector-toc-contents .vector-toc-list .vector-toc-list { | ||
padding-left: 12px !important; | padding-left: 12px !important; | ||
| Line 63: | Line 70: | ||
} | } | ||
/* 8. Proteção absoluta para | /* 8. Proteção absoluta para o cabeçalho principal "Datasheet" */ | ||
.vector-toc-header .toc-toggle-arrow, | .vector-toc-header .toc-toggle-arrow, | ||
.vector-toc-title .toc-toggle-arrow, | .vector-toc-title .toc-toggle-arrow, | ||