MediaWiki:Vector-2022.css: Difference between revisions
No edit summary |
No edit summary Tag: Manual revert |
||
| (48 intermediate revisions by the same user not shown) | |||
| Line 2,134: | Line 2,134: | ||
color: white; /* or currentColor */ | color: white; /* or currentColor */ | ||
} | } | ||
.mw-ui-icon-wikimedia-ellipsis { | |||
-webkit-mask-image: none !important; | |||
mask-image: none !important; | |||
background: none !important; | |||
width: 2rem !important; | |||
} | |||
/* Inject Material icon */ | |||
.mw-ui-icon-wikimedia-ellipsis::before { | |||
content: "account_circle"; | |||
font-family: "Material Symbols Rounded"; | |||
font-weight: normal; | |||
font-style: normal; | |||
font-size: 20px; | |||
display: inline-block; | |||
line-height: 1; | |||
font-variation-settings: | |||
"FILL" 1, | |||
"wght" 400, | |||
"GRAD" 0, | |||
"opsz" 24; | |||
color: white; /* or currentColor */ | |||
} | |||
.mw-ui-icon-wikimedia-ellipsis::after { | |||
content: "keyboard_arrow_down"; | |||
font-family: "Material Symbols Rounded"; | |||
font-weight: normal; | |||
font-style: normal; | |||
font-size: 20px; | |||
display: inline-block; | |||
line-height: 1; | |||
letter-spacing: normal; | |||
color: white; /* or currentColor */ | |||
} | |||
/* Remove MediaWiki mask system */ | /* Remove MediaWiki mask system */ | ||
#vector-page-titlebar-toc-label > .mw-ui-icon-wikimedia-listBullet { | #vector-page-titlebar-toc-label > .mw-ui-icon-wikimedia-listBullet { | ||
| Line 2,269: | Line 2,310: | ||
} | } | ||
.mw-header .mw-logo { | /* --- FORÇAR LOGO NO MOBILE (Vector 2022) --- */ | ||
display: | @media screen and (max-width: 720px) { | ||
align-items: center !important; | /* 1. Garante que o container do logo é visível */ | ||
min- | .mw-header .mw-logo { | ||
display: flex !important; | |||
opacity: 1 !important; | |||
visibility: visible !important; | |||
width: auto !important; | |||
height: 32px !important; /* Ajusta conforme necessário */ | |||
} | |||
/* 2. Força a exibição da imagem do logo */ | |||
/* A Vector 2022 muitas vezes esconde o <img> original no mobile */ | |||
.mw-logo-icon, | |||
.mw-logo-container img { | |||
display: block !important; | |||
width: 120px !important; /* Largura do logo ATRONIA no tele */ | |||
height: auto !important; | |||
} | |||
/* 3. Ajusta o espaço entre o menu e o logo */ | |||
.mw-header-start { | |||
gap: 10px !important; | |||
} | |||
} | |||
/* AJUSTE DO TAMANHO DO LOGO NO MOBILE */ | |||
@media screen and (max-width: 720px) { | |||
.mw-header .mw-logo-icon { | |||
width: 120px !important; /* Ajusta este valor para o tamanho que gostares */ | |||
height: auto !important; | |||
max-height: 24px !important; /* Limita a altura para não empurrar o cabeçalho */ | |||
margin-left: 5px !important; | |||
} | |||
/* Garante que o container do logo não estique o topo */ | |||
.mw-header .mw-logo { | |||
padding: 0 !important; | |||
margin: 0 !important; | |||
align-items: center !important; | |||
} | |||
} | |||
/* --- REDUZIR ALTURA DA ZONA ROXA (Cabeçalho) --- */ | |||
@media screen and (max-width: 720px) { | |||
/* 1. Remove a altura mínima e reduz o padding vertical */ | |||
.mw-header { | |||
min-height: 50px !important; /* Estava em 72px ou mais */ | |||
padding-top: 5px !important; | |||
padding-bottom: 5px !important; | |||
height: auto !important; | |||
} | |||
/* 2. Ajusta o container do topo para não forçar espaço extra */ | |||
.vector-header-container { | |||
height: auto !important; | |||
min-height: 50px !important; | |||
} | |||
/* 3. Centraliza verticalmente o logo e os ícones para ficarem perfeitos */ | |||
.mw-header-start, | |||
.vector-header-end { | |||
align-items: center !important; | |||
display: flex !important; | |||
} | |||
} | } | ||