MediaWiki:Common.css: Difference between revisions
No edit summary Tag: Manual revert |
No edit summary |
||
| Line 1: | Line 1: | ||
@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined"); | @import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined"); | ||
@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"); | ||
/**************************************************/ | |||
/* --- 1. AJUSTES GERAIS PARA MOBILE (Ecrãs até 720px) --- */ | |||
@media screen and (max-width: 720px) { | |||
/* Garantir que o fundo não atrapalha a leitura no telemóvel */ | |||
body, .mw-page-container { | |||
background-image: none !important; /* Remove a textura no mobile para ser mais rápido */ | |||
background-color: #ffffff !important; /* Fundo branco limpo */ | |||
} | |||
/* Ajustar o tamanho do conteúdo para não haver margens gigantes */ | |||
.mw-body { | |||
margin: 0 !important; | |||
padding: 10px !important; | |||
width: 100% !important; | |||
} | |||
/* Forçar as tabelas (como as dos teus produtos) a ter scroll lateral */ | |||
/* Isto impede que a tabela "saia" do ecrã */ | |||
.mw-parser-output { | |||
overflow-x: auto !important; | |||
-webkit-overflow-scrolling: touch; | |||
} | |||
table { | |||
display: block !important; | |||
width: 100% !important; | |||
overflow-x: auto !important; | |||
border-collapse: collapse !important; | |||
} | |||
/* Ajustar o tamanho das imagens para não estourarem o ecrã */ | |||
img { | |||
max-width: 100% !important; | |||
height: auto !important; | |||
} | |||
/* 2. CORES E TEXTO */ | |||
/* Se o texto estiver muito pequeno ou com cores estranhas */ | |||
#mw-content-text { | |||
color: #202122 !important; | |||
font-size: 16px !important; /* Tamanho ideal para leitura mobile */ | |||
line-height: 1.6; | |||
} | |||
/* Esconder elementos desnecessários no mobile para ganhar espaço */ | |||
.vector-column-end, .vector-main-menu-container { | |||
display: none !important; | |||
} | |||
} | |||
/* --- 2. AJUSTE DO LOGO NO MOBILE --- */ | |||
/* Se o teu logo da ATRONIA estiver gigante no telemóvel */ | |||
.mw-wiki-logo { | |||
max-width: 150px !important; | |||
background-size: contain !important; | |||
} | |||
/***************************************************/ | |||