Jump to content

MediaWiki:Common.css: Difference between revisions

← Older edit
No edit summary
No edit summary
 
(9 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;
    }
}




Line 6: Line 41:
/* 1. Contentor do botão Buy Now (MONARCH) - Alinhado à direita */
/* 1. Contentor do botão Buy Now (MONARCH) - Alinhado à direita */
.buy-now-container {
.buy-now-container {
    margin: 20px 0;
     display: flex !important;
     display: flex !important;
     justify-content: center !important;
     justify-content: right !important;
}
}


Line 55: Line 89:




/* 1. Contentor do Rodapé - Força a largura total para permitir o alinhamento à direita */
/* ==========================================================================
  RODAPÉ (Footer) - Versão Final Limpa
  ========================================================================== */
 
/* 1. Contentor do Rodapé - Permite que os itens respirem e alinhem */
#footer-places {
#footer-places {
     display: flex !important;
     display: flex !important;
Line 61: Line 99:
     align-items: center !important;
     align-items: center !important;
     flex-wrap: nowrap !important;
     flex-wrap: nowrap !important;
     padding: 10px 0 !important;
     padding: 10px 25px !important;
}
}


/* 2. Links da Esquerda - Garante o espaçamento entre eles */
/* 2. Links da Esquerda (Privacy, About, etc) */
#footer-places li {
#footer-places li {
     margin-right: 15px !important;
     margin-right: 15px !important;
Line 70: Line 108:
}
}


/* 3. O Alvo do Botão - O "margin-left: auto" empurra-o para o extremo direito */
/* 3. NOVO CONTENTOR DOS BOTÕES (Seta + Link)
#footer-custom-button {
  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-left: auto !important;  
     margin-right: 0 !important;
     margin-right: 0 !important;
Line 77: Line 119:
}
}


/* 4. Estilo Final do Botão (Cápsula Verde) */
/* 4. Estilo Comum para Seta e Botão (Cápsula Verde) */
/* Estilo do Botão Aumentado */
.footer-top-button,
.footer-button-atronia-real {
.footer-button-atronia-real {
     display: inline-block !important;
     display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
     background-color: #d1ff00 !important;
     background-color: #d1ff00 !important;
     color: #000 !important;
     color: #000 !important;
   
    /* AUMENTA ESTES VALORES: */
    padding: 7px 35px !important; /* Mais largo e alto */
    font-size: 1.1em !important;    /* Texto maior */
   
    border-radius: 50px !important;
     font-weight: bold !important;
     font-weight: bold !important;
     text-decoration: none !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;
     white-space: nowrap !important;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2) !important; /* Sombra mais visível */
    transition: all 0.2s ease-in-out !important;
    font-family: sans-serif !important;
}
}


/* Ajuste do Hover para acompanhar o tamanho */
/* 7. Hover para os dois */
.footer-top-button:hover,
.footer-button-atronia-real:hover {
.footer-button-atronia-real:hover {
     background-color: #e2ff33 !important;
     background-color: #e2ff33 !important;
     transform: scale(1.1) !important; /* Aumenta um pouco ao passar o rato */
     transform: scale(1.05) !important;
}
     text-decoration: none !important;
 
/* Garante que o ícone de link externo não estraga o tamanho */
.footer-button-atronia-real.external {
     background-image: none !important;
    padding-right: 35px !important;  
}
}


/* Remove a seta de link externo do MediaWiki */
/* 8. Remover ícones de link externo do MediaWiki */
.footer-button-atronia-real.external,  
.footer-button-atronia-real.external,
.footer-button-atronia-real.external:after {
.footer-button-atronia-real.external:after {
     background-image: none !important;
     background-image: none !important;
     padding-right: 20px !important;
     padding-right: 25px !important; /* Mantém igual à esquerda para centrar */
    margin-right: 0 !important;
}
}


/* --- AJUSTE PARA MOBILE --- */
/* --- AJUSTE PARA MOBILE (Ecrãs até 720px) --- */
@media screen and (max-width: 720px) {
@media screen and (max-width: 720px) {
    /* Faz os links e o botão ficarem em coluna */
     #footer-places {
     #footer-places {
        display: flex !important;
         flex-direction: column !important;
         flex-direction: column !important;
         align-items: center !important; /* Centra tudo */
         align-items: center !important;
         text-align: center !important;
         text-align: center !important;
        width: auto !important;
     }
     }


    /* Remove o empurrão para a direita e centraliza o botão */
    #footer-custom-button {
        margin-left: 0 !important;
        margin-top: 20px !important; /* Dá espaço entre o texto e o botão */
        width: 100% !important;
    }
    /* Garante que os links de cima não fiquem colados */
     #footer-places li {
     #footer-places li {
         margin-right: 0 !important;
         margin-right: 0 !important;
         margin-bottom: 8px !important;
         margin-bottom: 10px !important;
     }
     }


     /* Ajusta o tamanho do botão para não ocupar o ecrã todo, mas ser fácil de clicar */
     /* No mobile, os botões ficam centrados em baixo dos textos */
     .footer-button-atronia-real {
     #footer-custom-buttons-container {
         padding: 12px 40px !important;
         margin-left: 0 !important;
         font-size: 1.2em !important;
        margin-top: 15px !important;
         justify-content: center !important;
     }
     }
}
}
Retrieved from "https://wiki.atronia.eu/index.php?title=MediaWiki:Common.css"