MediaWiki:Vector-2022.css: Difference between revisions

Line 2,317:

/* --- ~~RECONSTRUÇÃO DO TOPO MOBILE~~ --- */

/* --- FIX FINAL PARA O LOGIN "CAÍDO" --- */

@media screen and (max-width: 720px) {

/* 1. ~~Força~~ o ~~cabeçalho a mostrar tudo o que sai das bordas~~ */

/* 1. Impede que o container de links de utilizador se comporte como um dropdown flutuante */

.mw-~~header~~, .~~vector~~-~~header~~-~~container~~ {

.vector-user-links-main,

~~overflow~~: ~~visible~~ !important;

.user-links-collapsible-item {

~~height~~: ~~54px~~ !important;

position: static !important; /* Remove o posicionamento que o faz flutuar */

display: flex !important;

align-items: center !important;

margin: 0 !important;

}

/* 2. ~~Reduz~~ o ~~logo ao máximo~~ para ~~ganhar espaço horizontal~~ */

/* 2. Força o botão de Log in a voltar para dentro da linha verde */

~~.mw~~-~~header .mw~~-~~logo~~-~~icon~~ {

#pt-login-2, #pt-login {

~~width~~: ~~70px~~ !important;

position: static !important;

~~max-height~~: ~~18px~~ !important;

background: transparent !important;

~~margin~~-~~right~~: 0 !important;

padding: 0 5px !important;

display: flex !important;

align-items: center !important;

}

/* 3. ~~O "Pulo~~ do ~~Gato": faz a pesquisa ocupar zero de espaço lateral~~ */

/* 3. Ajuste do texto do Login para não empurrar os ícones */

#p-~~search~~ {

#pt-login span {

~~position~~: ~~relative~~ !important;

font-size: 12px !important;

~~flex~~: ~~0 0 auto~~ !important;

color: #ffffff !important;

~~margin: 0 !important;~~

~~width: 35px !important; /* Apenas o tamanho do ícone da lupa */~~

}

/* 4. ~~Alinha todos os ícones da direita num bloco colado~~ */

/* 4. Garante que o container pai (header-end) não limite a altura */

.vector-header-end {

overflow: visible !important;

display: flex !important;

~~flex-direction: row !important;~~

justify-content: flex-end !important;

align-items: center !important;

~~gap: 0px !important; /* Cola os ícones uns aos outros */~~

flex: 1 !important;

}

/* 5. Reduz a largura da pesquisa para o Login ter onde morar */

#p-search {

/* 6. ~~Corrige~~ o ~~botão de~~ Login~~/User que está "caído" ou cortado~~ */

max-width: 40px !important;

~~.vector-user~~-~~links~~ {

~~margin: 0 !important;~~

~~padding: 0 !important;~~

~~display: flex !important;~~

~~align~~-~~items~~: ~~center~~ !important;

}