MediaWiki:Common.css: Difference between revisions

← Older edit

@@ Line 4: / Line 4: @@
 @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;700;900&display=swap');
+/* Espaçamento do seletor para afastar do "Main menu" e da "Main page" */
+.gtranslate_wrapper {
+  margin-top: 18px !important;    /* Espaço acima (Main menu) */
+  margin-bottom: 24px !important; /* Espaço abaixo (Main page) */
+  padding: 0 !important;
+  display: block !important;
+}
+/* Estilização da caixa e seta personalizada */
+.gtranslate_wrapper select {
+  -webkit-appearance: none !important;
+  -moz-appearance: none !important;
+  appearance: none !important;
+  width: 100% !important;
+  max-width: 100% !important;
+  padding: 6px 36px 6px 12px !important; /* 36px à direita dá margem ao chevron */
+  height: auto !important;
+  line-height: 1.4 !important;
+  box-sizing: border-box !important;
+  cursor: pointer !important;
+  /* Seta SVG personalizada afastada 14px da direita */
+  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 fill="%23000000" d="M2.22 4.47a.75.75 0 011.06 0L6 7.19l2.72-2.72a.75.75 0 111.06 1.06l-3.25 3.25a.75.75 0 01-1.06 0L2.22 5.53a.75.75 0 010-1.06z"/></svg>') !important;
+  background-repeat: no-repeat !important;
+  background-position: right 14px center !important;
+  background-size: 12px 12px !important;
+  transition: border-color 0.2s ease !important;
+}
+/* Animação: inverte a seta ao focar/abrir o select */
+.gtranslate_wrapper select:focus {
+  outline: none !important;
+  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 fill="%23000000" d="M2.22 7.53a.75.75 0 011.06 0L6 4.81l2.72 2.72a.75.75 0 101.06-1.06l-3.25-3.25a.75.75 0 00-1.06 0L2.22 6.47a.75.75 0 000 1.06z"/></svg>') !important;
+}
+/* Esconde as subpáginas */
+.wiki-submenu {
+    display: none !important;
+    padding-left: 15px !important;
+    font-size: 0.95em !important;
+    opacity: 0.85;
+}
+.wiki-submenu.is-open {
+    display: block !important;
+}
+/* Desenha a seta */
+.wiki-toggle-btn {
+    cursor: pointer;
+    display: inline-block;
+    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 */
+.wiki-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;
+}
-/* Any JavaScript here will be loaded for all users on every page load. */
+/* Efeito Hover: Quadrado cinza clarinho ao passar o rato */
+.toc-toggle-arrow:hover {
+    background-color: #e2e4e8 !important;
+}
-// Força o menu lateral a expandir (Vector 2022) se estiver colapsado
+/* 5. O Desenho da Seta (Estilo Chevron - Cor Preta Forte) */
-mw.hook('wikipage.content').add(function () {
+.toc-toggle-arrow .arrow-icon {
-     if (document.documentElement.classList.contains('vector-feature-main-menu-pinned-disabled')) {
+    display: inline-block;
-        var pinButton = document.getElementById('vector-main-menu-dropdown-checkbox');
+    width: 5px;
-        if (pinButton) {
+    height: 5px;
-            // Remove a classe de desativado e força o estado expandido
+    border-right: 1.5px solid #202122; /* Preto forte igual aos cabeçalhos da wiki */
-            document.documentElement.classList.remove('vector-feature-main-menu-pinned-disabled');
+    border-bottom: 1.5px solid #202122;
-            document.documentElement.classList.add('vector-feature-main-menu-pinned-enabled');
+    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;
+}
@@ Line 128: / Line 260: @@
      border-top: 1px solid #ffffff !important;
      border-bottom: 1px solid #ffffff !important; /* Separador abaixo do scroll */
+    display: block;      /* NOVO: força a ser bloco */
+    width: 100%;          /* NOVO: nunca ultrapassa o ecrã */
+    max-width: 100%;      /* NOVO: reforço de segurança */
+    box-sizing: border-box; /* NOVO: padding não soma à largura total */
 }
@@ Line 169: / Line 305: @@
      border: 0 !important;
      border-top: 1px solid #ffffff !important;
-     width: 100vw !important;
+     width: 100%;
-     position: relative !important;
+    max-width: 100vw;
-     left: 50% !important;
+     position: relative;
-     right: 50% !important;
+     left: 0;
-     margin-left: -50vw !important;
+     right: 0;
-     margin-right: -50vw !important;
+     margin-left: 0;
+     margin-right: 0;
+    box-sizing: border-box;
 }
@@ Line 216: / Line 354: @@
      }
 }