MediaWiki:Common.css: Difference between revisions
No edit summary |
No edit summary |
||
| (23 intermediate revisions by the same user not shown) | |||
| Line 2: | Line 2: | ||
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:FILL@0..1"); | @import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:FILL@0..1"); | ||
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;700&display=swap'); | @import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;700&display=swap'); | ||
/* 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: 4px; | |||
color: #202122; | |||
font-size: 11px; | |||
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); | |||
} | |||
/* --- AJUSTES RESPONSIVOS ATRONIA --- */ | |||
@media only screen and (max-width: 768px) { | |||
#custom-atronia-footer img[src*="Igus.svg"] { | |||
max-width: 120px !important; /* Ajusta este valor (ex: 100px ou 120px) até gostares */ | |||
margin-bottom: 10px; | |||
} | |||
/* 1. Forçar menus a empilhar no mobile */ | |||
#custom-atronia-footer div[style*="justify-content: space-between"] { | |||
flex-direction: column !important; | |||
align-items: flex-start !important; | |||
} | |||
/* 2. Grelha de Logos: Passa de 2 colunas para 1 no mobile para não esmagar */ | |||
#custom-atronia-footer div[style*="display: grid"] { | |||
grid-template-columns: 1fr !important; | |||
width: 100% !important; | |||
} | |||
/* 3. Logos: Garante que as imagens não saem do ecrã */ | |||
#custom-atronia-footer img { | |||
max-width: 100% !important; | |||
height: auto !important; | |||
} | |||
/* 4. Botões Flutuantes: Evitar que tapem os logos no fundo */ | |||
#atronia-floating-nav { | |||
bottom: 15px !important; | |||
right: 10px !important; | |||
transform: scale(0.85); /* Ficam ligeiramente menores */ | |||
transform-origin: bottom right; | |||
} | |||
/* 5. Scrolling Text: Diminuir um pouco no mobile */ | |||
.atronia-scrolling-container { | |||
height: 80px !important; | |||
line-height: 80px !important; | |||
} | |||
} | |||
| Line 38: | Line 222: | ||
.atronia-scrolling-content span { | .atronia-scrolling-content span { | ||
font-family: sans-serif; | font-family: 'Rubik', sans-serif; | ||
font-size: 50px; | font-size: 50px; | ||
font-weight: bold; | font-weight: bold; | ||
color: transparent !important; | color: transparent !important; /* Mantém o interior vazio */ | ||
-webkit-text-stroke: | -webkit-text-stroke: 1.5px #ffffff; /* Branco puro e um pouco mais grosso */ | ||
opacity: 1 !important; /* Garante que o contorno não seja translúcido */ | |||
padding-right: 50px; | padding-right: 50px; | ||
display: inline-block; | display: inline-block; | ||
letter-spacing: 1px; /* Melhora a leitura em letras vazadas */ | |||
} | } | ||
| Line 312: | Line 498: | ||
} | } | ||
.arrow-icon.rotated { | .arrow-icon.rotated { | ||
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; | |||
} | } | ||