MediaWiki:Common.css: Difference between revisions
No edit summary |
No edit summary |
||
| (42 intermediate revisions by the same user not shown) | |||
| 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"); | ||
/* Botão de Seta para o Topo */ | |||
.footer-top-button { | |||
display: inline-flex !important; | |||
align-items: center !important; | |||
justify-content: center !important; | |||
background-color: #d1ff00 !important; /* Mesmo verde */ | |||
color: #000 !important; | |||
width: 40px !important; | |||
height: 40px !important; | |||
border-radius: 50% !important; /* Circular */ | |||
font-weight: bold !important; | |||
font-size: 20px !important; | |||
text-decoration: none !important; | |||
box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important; | |||
transition: transform 0.2s ease !important; | |||
cursor: pointer; | |||
} | |||
.footer-top-button:hover { | |||
transform: scale(1.1) !important; | |||
background-color: #e2ff33 !important; | |||
text-decoration: none !important; | |||
} | |||
/* Garante que o container se alinha bem no mobile */ | |||
@media screen and (max-width: 720px) { | |||
#footer-custom-buttons-container { | |||
justify-content: center !important; | |||
margin-top: 15px !important; | |||
} | |||
} | |||
/* 1. Contentor do botão Buy Now (MONARCH) - Alinhado à direita */ | |||
.buy-now-container { | |||
display: flex !important; | |||
justify-content: right !important; | |||
} | |||
/* 2. Estilo do Botão - Base e Centralização */ | |||
.button-buy-now a.external { | |||
display: inline-flex !important; | |||
align-items: center !important; | |||
justify-content: center !important; | |||
background-color: #d1ff00 !important; /* Verde néon */ | |||
color: #000 !important; /* Texto preto */ | |||
/* PADDING IGUAL DOS DOIS LADOS (Essencial para centrar) */ | |||
padding: 7px 25px !important; | |||
border-radius: 50px !important; | |||
font-weight: bold !important; | |||
text-decoration: none !important; | |||
font-size: 1.0em !important; | |||
font-family: "Rubik", sans-serif !important; | |||
box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important; | |||
transition: transform 0.2s ease !important; | |||
/* Remove a seta e o espaço fantasma do MediaWiki */ | |||
background-image: none !important; | |||
margin-right: 0 !important; | |||
text-indent: 0 !important; | |||
letter-spacing: 0 !important; | |||
} | |||
/* 3. Forçar anulação de regras do sistema (mw-parser-output) */ | |||
.mw-parser-output .button-buy-now a.external { | |||
padding-right: 25px !important; /* Força a simetria com a esquerda */ | |||
background-image: none !important; | |||
} | |||
/* 4. Efeito ao passar o rato */ | |||
.button-buy-now a.external:hover { | |||
transform: scale(1.05) !important; | |||
background-color: #e2ff33 !important; | |||
text-decoration: none !important; | |||
} | |||
/* ========================================================================== | |||
RODAPÉ (Footer) - Versão Final Limpa | |||
========================================================================== */ | |||
/* 1. Contentor do Rodapé - Permite que os itens respirem e alinhem */ | |||
#footer-places { | |||
display: flex !important; | |||
width: 100% !important; | |||
align-items: center !important; | |||
flex-wrap: nowrap !important; | |||
padding: 10px 25px !important; | |||
} | |||
/* 2. Links da Esquerda (Privacy, About, etc) */ | |||
#footer-places li { | |||
margin-right: 15px !important; | |||
list-style: none !important; | |||
} | |||
/* 3. NOVO CONTENTOR DOS BOTÕES (Seta + Link) | |||
O "margin-left: auto" é o íman que empurra o grupo para a direita */ | |||
#footer-custom-buttons-container { | |||
display: flex !important; | |||
gap: 12px !important; /* Espaço entre a seta e o botão */ | |||
align-items: center !important; | |||
margin-left: auto !important; | |||
margin-right: 0 !important; | |||
list-style: none !important; | |||
} | |||
/* 4. Estilo Comum para Seta e Botão (Cápsula Verde) */ | |||
.footer-top-button, | |||
.footer-button-atronia-real { | |||
display: inline-flex !important; | |||
align-items: center !important; | |||
justify-content: center !important; | |||
background-color: #d1ff00 !important; | |||
color: #000 !important; | |||
font-weight: bold !important; | |||
text-decoration: none !important; | |||
box-shadow: 0 4px 8px rgba(0,0,0,0.15) !important; | |||
transition: all 0.2s ease-in-out !important; | |||
border-radius: 50px !important; | |||
} | |||
/* 5. Especificações da Seta (Circular) */ | |||
.footer-top-button { | |||
width: 40px !important; | |||
height: 40px !important; | |||
font-size: 18px !important; | |||
} | |||
/* 6. Especificações do Botão do Site */ | |||
.footer-button-atronia-real { | |||
padding: 7px 25px !important; | |||
font-size: 1.0em !important; | |||
font-family: "Rubik", sans-serif !important; | |||
white-space: nowrap !important; | |||
} | |||
/* 7. Hover para os dois */ | |||
.footer-top-button:hover, | |||
.footer-button-atronia-real:hover { | |||
background-color: #e2ff33 !important; | |||
transform: scale(1.05) !important; | |||
text-decoration: none !important; | |||
} | |||
/* 8. Remover ícones de link externo do MediaWiki */ | |||
.footer-button-atronia-real.external, | |||
.footer-button-atronia-real.external:after { | |||
background-image: none !important; | |||
padding-right: 25px !important; /* Mantém igual à esquerda para centrar */ | |||
} | |||
/* --- AJUSTE PARA MOBILE (Ecrãs até 720px) --- */ | |||
@media screen and (max-width: 720px) { | |||
#footer-places { | |||
flex-direction: column !important; | |||
align-items: center !important; | |||
text-align: center !important; | |||
width: auto !important; | |||
} | |||
#footer-places li { | |||
margin-right: 0 !important; | |||
margin-bottom: 10px !important; | |||
} | |||
/* No mobile, os botões ficam centrados em baixo dos textos */ | |||
#footer-custom-buttons-container { | |||
margin-left: 0 !important; | |||
margin-top: 15px !important; | |||
justify-content: center !important; | |||
} | |||
} | |||