MediaWiki:Common.css: Difference between revisions

← Older edit

@@ Line 4: / Line 4: @@
+/* Esconde as subpáginas */
+.atlas-submenu {
+    display: none !important;
+    padding-left: 15px !important;
+    font-size: 0.95em !important;
+    opacity: 0.85;
+}
+.atlas-submenu.is-open {
+    display: block !important;
+}
+/* O Segredo: Desenha a seta idêntica à do índice da Datasheet */
+.atlas-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 */
+.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;
+}
+/* Contentor do bloco de código */
+.mw-highlight, .syntaxhighlight {
+    position: relative; /* Necessário para o posicionamento do botão */
+}
+/* Estilo do Botão Copy */
 .copy-code-button {
+    position: absolute;
+    top: 5px;
+    right: 5px;
+    z-index: 100;
+    padding: 4px 8px;
      background-color: #f8f9fa;
      border: 1px solid #a2a9b1;
-     border-radius: 2px;
+     border-radius: 4px;
      color: #202122;
-     margin-left: 10px;
+     font-size: 11px;
-     z-index: 100;
+     font-family: sans-serif;
+    cursor: pointer;
+    opacity: 0.8;
 }
 .copy-code-button:hover {
+    opacity: 1;
      background-color: #ffffff;
      border-color: #447ff5;
      color: #447ff5;
+    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
 }
-/* Garante que o bloco pre tem espaço para o botão */
-pre, .mw-code {
-    position: relative;
-    padding-top: 30px !important;
-}
@@ Line 382: / Line 498: @@
 }
 .arrow-icon.rotated {
-  transform: rotate(180deg);
+    transform: rotate(180deg) !important;
+}
+/* Esta regra garante transição suave mesmo se o MediaWiki interferir */
+.arrow-icon {
+    transition: transform 0.25s ease-in-out !important;
+    transform-origin: center center !important;
 }