|
|
| Line 5: |
Line 5: |
|
| |
|
|
| |
|
| /* Esconde as subpáginas */ | | /* Any JavaScript here will be loaded for all users on every page load. */ |
| .atlas-submenu {
| |
| display: none !important;
| |
| padding-left: 15px !important;
| |
| font-size: 0.95em !important;
| |
| opacity: 0.85;
| |
| }
| |
|
| |
|
| .atlas-submenu.is-open {
| | // Força o menu lateral a expandir (Vector 2022) se estiver colapsado |
| display: block !important;
| | mw.hook('wikipage.content').add(function () { |
| }
| | if (document.documentElement.classList.contains('vector-feature-main-menu-pinned-disabled')) { |
| | | var pinButton = document.getElementById('vector-main-menu-dropdown-checkbox'); |
| /* Desenha a seta */ | | if (pinButton) { |
| .atlas-toggle-btn {
| | // Remove a classe de desativado e força o estado expandido |
| cursor: pointer;
| | document.documentElement.classList.remove('vector-feature-main-menu-pinned-disabled'); |
| display: inline-block;
| | document.documentElement.classList.add('vector-feature-main-menu-pinned-enabled'); |
| width: 12px;
| | } |
| height: 12px;
| | } |
| margin-left: 8px;
| | }); |
| /* Usa o SVG oficial do MediaWiki para garantir o mesmo design */
| |
| background-image: url(data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><path d="M3.22 2.22a.75.75 0 011.06 0l3.5 3.5a.75.75 0 010 1.06l-3.5 3.5a.75.75 0 11-1.06-1.06L6.19 6 3.22 3.03a.75.75 0 010-1.06z" fill="%2354595d"/></svg>);
| |
| background-repeat: no-repeat;
| |
| background-position: center;
| |
| background-size: contain;
| |
| transition: transform 0.2s ease-in-out;
| |
| }
| |
| | |
| /* Quando clicado (Aberto), roda para baixo igual à imagem image_5452b6.png */
| |
| .atlas-toggle-btn.is-active {
| |
| transform: rotate(90deg);
| |
| }
| |
| | |
| | |
| /* ==========================================================================
| |
| ÍNDICE LATERAL (TOC) - DESIGN FINAL REFINADO COM HOVER E ANIMAÇÃO RÁPIDA
| |
| ========================================================================== */
| |
| | |
| /* 1. Oculta as sublistas por padrão */
| |
| .vector-toc-contents .vector-toc-list .vector-toc-list {
| |
| display: none !important; | |
| }
| |
| | |
| /* 2. Mostra a sublista quando expandido */
| |
| .vector-toc-list-item.toc-expanded > .vector-toc-list { | |
| display: block !important;
| |
| }
| |
| | |
| /* 3. Posicionamento relativo das linhas do menu */
| |
| .vector-toc-contents .vector-toc-list .vector-toc-list-item { | |
| position: relative !important;
| |
| }
| |
| | |
| /* 4. Container do botão da seta (Área clicável com efeito Hover) */
| |
| .toc-toggle-arrow {
| |
| position: absolute !important;
| |
| left: -18px !important; /* Ajuste para centralizar o quadrado do hover à esquerda */
| |
| top: 3px !important; /* Alinha perfeitamente ao centro da linha de texto */
| |
| display: inline-flex !important;
| |
| align-items: center;
| |
| justify-content: center;
| |
| cursor: pointer !important;
| |
| width: 18px !important; /* Tamanho do quadrado do hover */
| |
| height: 18px !important;
| |
| border-radius: 2px; /* Cantos levemente suavizados para o quadrado */
| |
| z-index: 50 !important;
| |
| transition: background-color 0.1s ease;
| |
| }
| |
| | |
| /* Efeito Hover: Quadrado cinza clarinho ao passar o rato */
| |
| .toc-toggle-arrow:hover { | |
| background-color: #e2e4e8 !important;
| |
| }
| |
| | |
| /* 5. O Desenho da Seta (Estilo Chevron - Cor Preta Forte) */
| |
| .toc-toggle-arrow .arrow-icon {
| |
| display: inline-block;
| |
| width: 5px;
| |
| height: 5px;
| |
| border-right: 1.5px solid #202122; /* Preto forte igual aos cabeçalhos da wiki */
| |
| border-bottom: 1.5px solid #202122;
| |
| transform: rotate(-45deg); /* Aponta para a direita */
| |
| transition: transform 0.1s ease-in-out; /* Animação ultra rápida */
| |
| margin-left: -2px;
| |
| }
| |
| | |
| /* 6. Rotação rápida quando o menu abre (roda para baixo) */
| |
| .vector-toc-list-item.toc-expanded > .toc-toggle-arrow .arrow-icon {
| |
| transform: rotate(45deg) !important;
| |
| margin-top: -2px;
| |
| margin-left: 0px; | |
| } | |
| | |
| /* 7. Indentação interna limpa para os subcapítulos */
| |
| .vector-toc-contents .vector-toc-list .vector-toc-list {
| |
| padding-left: 12px !important;
| |
| margin-top: 4px !important;
| |
| } | |
| | |
| /* 8. Proteção absoluta para o cabeçalho principal "Datasheet" */
| |
| .vector-toc-header .toc-toggle-arrow,
| |
| .vector-toc-title .toc-toggle-arrow,
| |
| #vector-toc-collapsed-button .toc-toggle-arrow {
| |
| display: none !important;
| |
| opacity: 0 !important;
| |
| }
| |
|
| |
|
|
| |
|
