Jump to content

MediaWiki:Common.css: Difference between revisions

← Older edit
No edit summary
No edit summary
 
(39 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");
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;700&display=swap');




/* Esconde as subpáginas */
.atlas-submenu {
    display: none !important;
    padding-left: 15px !important;
    font-size: 0.95em !important;
    opacity: 0.85;
}
.atlas-submenu.is-open {
    display: block !important;
}
/* O Segredo: Desenha a seta idêntica à do índice da Datasheet */
.atlas-toggle-btn {
    cursor: pointer;
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-left: 8px;
    /* Usa o SVG oficial do MediaWiki para garantir o mesmo design */
    background-image: url(data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12"><path d="M3.22 2.22a.75.75 0 011.06 0l3.5 3.5a.75.75 0 010 1.06l-3.5 3.5a.75.75 0 11-1.06-1.06L6.19 6 3.22 3.03a.75.75 0 010-1.06z" fill="%2354595d"/></svg>);
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    transition: transform 0.2s ease-in-out;
}
/* Quando clicado (Aberto), roda para baixo igual à imagem image_5452b6.png */
.atlas-toggle-btn.is-active {
    transform: rotate(90deg);
}
/* ==========================================================================
  ÍNDICE LATERAL (TOC) - DESIGN FINAL REFINADO COM HOVER E ANIMAÇÃO RÁPIDA
  ========================================================================== */
/* 1. Oculta as sublistas por padrão */
.vector-toc-contents .vector-toc-list .vector-toc-list {
    display: none !important;
}
/* 2. Mostra a sublista quando expandido */
.vector-toc-list-item.toc-expanded > .vector-toc-list {
    display: block !important;
}
/* 3. Posicionamento relativo das linhas do menu */
.vector-toc-contents .vector-toc-list .vector-toc-list-item {
    position: relative !important;
}
/* 4. Container do botão da seta (Área clicável com efeito Hover) */
.toc-toggle-arrow {
    position: absolute !important;
    left: -18px !important;    /* Ajuste para centralizar o quadrado do hover à esquerda */
    top: 3px !important;      /* Alinha perfeitamente ao centro da linha de texto */
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer !important;
    width: 18px !important;    /* Tamanho do quadrado do hover */
    height: 18px !important;
    border-radius: 2px;        /* Cantos levemente suavizados para o quadrado */
    z-index: 50 !important;
    transition: background-color 0.1s ease;
}
/* Efeito Hover: Quadrado cinza clarinho ao passar o rato */
.toc-toggle-arrow:hover {
    background-color: #e2e4e8 !important;
}
/* 5. O Desenho da Seta (Estilo Chevron - Cor Preta Forte) */
.toc-toggle-arrow .arrow-icon {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-right: 1.5px solid #202122; /* Preto forte igual aos cabeçalhos da wiki */
    border-bottom: 1.5px solid #202122;
    transform: rotate(-45deg);        /* Aponta para a direita */
    transition: transform 0.1s ease-in-out; /* Animação ultra rápida */
    margin-left: -2px;
}
/* 6. Rotação rápida quando o menu abre (roda para baixo) */
.vector-toc-list-item.toc-expanded > .toc-toggle-arrow .arrow-icon {
    transform: rotate(45deg) !important;
    margin-top: -2px;
    margin-left: 0px;
}
/* 7. Indentação interna limpa para os subcapítulos */
.vector-toc-contents .vector-toc-list .vector-toc-list {
    padding-left: 12px !important;
    margin-top: 4px !important;
}
/* 8. Proteção absoluta para o cabeçalho principal "Datasheet" */
.vector-toc-header .toc-toggle-arrow,
.vector-toc-title .toc-toggle-arrow,
#vector-toc-collapsed-button .toc-toggle-arrow {
    display: none !important;
    opacity: 0 !important;
}
/* Contentor do bloco de código */
.mw-highlight, .syntaxhighlight {
    position: relative; /* Necessário para o posicionamento do botão */
}
/* Estilo do Botão Copy */
.copy-code-button {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 100;
    padding: 4px 8px;
    background-color: #f8f9fa;
    border: 1px solid #a2a9b1;
    border-radius: 4px;
    color: #202122;
    font-size: 11px;
    font-family: sans-serif;
    cursor: pointer;
    opacity: 0.8;
}
.copy-code-button:hover {
    opacity: 1;
    background-color: #ffffff;
    border-color: #447ff5;
    color: #447ff5;
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
/* --- AJUSTES RESPONSIVOS ATRONIA --- */
@media only screen and (max-width: 768px) {
    #custom-atronia-footer img[src*="Igus.svg"] {
        max-width: 120px !important; /* Ajusta este valor (ex: 100px ou 120px) até gostares */
        margin-bottom: 10px;
    }
    /* 1. Forçar menus a empilhar no mobile */
    #custom-atronia-footer div[style*="justify-content: space-between"] {
        flex-direction: column !important;
        align-items: flex-start !important;
    }
    /* 2. Grelha de Logos: Passa de 2 colunas para 1 no mobile para não esmagar */
    #custom-atronia-footer div[style*="display: grid"] {
        grid-template-columns: 1fr !important;
        width: 100% !important;
    }
    /* 3. Logos: Garante que as imagens não saem do ecrã */
    #custom-atronia-footer img {
        max-width: 100% !important;
        height: auto !important;
    }
    /* 4. Botões Flutuantes: Evitar que tapem os logos no fundo */
    #atronia-floating-nav {
        bottom: 15px !important;
        right: 10px !important;
        transform: scale(0.85); /* Ficam ligeiramente menores */
        transform-origin: bottom right;
    }
   
    /* 5. Scrolling Text: Diminuir um pouco no mobile */
    .atronia-scrolling-container {
        height: 80px !important;
        line-height: 80px !important;
    }
}
#back-to-top {
    font-family: 'Rubik', sans-serif !important;
    font-weight: bold;
}




/* Aplicar a fonte a todo o footer */
#custom-atronia-footer,
#custom-atronia-footer * {
    font-family: 'Rubik', sans-serif !important;
}




/* Footer Atronia Website */
/* Footer Atronia Website */


/* --- AJUSTE FINAL: SCROLL E HOVER --- */
/* --- ESTRUTURA BASE --- */
#custom-atronia-footer {
    background-color: #121e1c !important;
    width: 100% !important;
    clear: both !important;
    display: block !important;
}


/* 1. Scrolling Text - Correção de Visibilidade */
/* Scrolling Text Estilo "Vazado" */
.atronia-scrolling-container {
.atronia-scrolling-container {
     background-color: #121e1c !important;
     background-color: #121e1c !important;
     overflow: hidden;
     overflow: hidden;
     padding: 30px 0;
    white-space: nowrap;
     padding: 20px 0;
     border-top: 1px solid #ffffff !important;
     border-top: 1px solid #ffffff !important;
     border-bottom: 1px solid rgba(255,255,255,0.1);
     border-bottom: 1px solid #ffffff !important; /* Separador abaixo do scroll */
}
}


.atronia-scrolling-content span {
.atronia-scrolling-content span {
     font-family: sans-serif;
     font-family: 'Rubik', sans-serif;
     font-size: 50px;
     font-size: 50px;
     font-weight: bold;
     font-weight: bold;
     color: transparent !important;
     color: transparent !important; /* Mantém o interior vazio */
     -webkit-text-stroke: 1px rgba(255,255,255,0.4);
     -webkit-text-stroke: 1.5px #ffffff; /* Branco puro e um pouco mais grosso */
     text-transform: uppercase;
     opacity: 1 !important; /* Garante que o contorno não seja translúcido */
     padding-right: 50px;
     padding-right: 50px;
    display: inline-block;
    letter-spacing: 1px; /* Melhora a leitura em letras vazadas */
}
}


Line 34: Line 237:
     100% { transform: translateX(-50%); }
     100% { transform: translateX(-50%); }
}
}
.atronia-scrolling-content { display: inline-block; animation: atronia-scroll 15s linear infinite; }


.atronia-scrolling-content {  
/* Esconder elementos nativos */
    display: inline-block;  
#footer, .mw-footer, #catlinks { display: none !important; }
    animation: atronia-scroll 30s linear infinite;
}


/* 2. Forçar Branco e Remover Cores de Hover */
/* Forçar underline no hover e limpar estilos nativos da Wiki */
#custom-atronia-footer,
#custom-atronia-footer a {
#custom-atronia-footer a,
#custom-atronia-footer a:visited,
#custom-atronia-footer p,
#custom-atronia-footer h4 {
    color: #ffffff !important;
     text-decoration: none !important;
     text-decoration: none !important;
     background-color: transparent !important;
     background: none !important; /* Remove blocos de cor que a wiki possa inserir */
    transition: text-decoration 0.2s ease;
}
}


/* Hover: Apenas Underline, Sem Troca de Cor */
#custom-atronia-footer a:hover {
#custom-atronia-footer a:hover {
     text-decoration: underline !important;
     text-decoration: underline !important;
     color: #ffffff !important;
     color: #ffffff !important;
     background: none !important;
     background: none !important;
    opacity: 1 !important;
}
/* 3. Colunas do Menu (Largura Fixa) */
.atronia-col {
    flex: 1;
    min-width: 150px !important;
    margin-right: 20px;
}
}


.atronia-col h4 {
    font-size: 14px !important;
    margin-bottom: 20px !important;
    border: none !important;
}


.atronia-col a {
/* Linha de largura total absoluta */
     display: block !important;
.atronia-full-width-line {
     margin-bottom: 12px !important;
     border: 0 !important;
    border-top: 1px solid #ffffff !important;
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
     margin-left: -50vw !important;
    margin-right: -50vw !important;
}
}


/* 4. Grelha de Logos 2x2 */
.sponsor-grid {
    display: grid !important;
    grid-template-columns: repeat(2, auto) !important;
    gap: 20px 40px !important;
}
.footer-sponsor-img {
    width: 250px !important;
    height: 70px !important;
    object-fit: contain !important;
}
#footer, .mw-footer { display: none !important; }


/* Fim do Footer Atronia Website */
/* Fim do Footer Atronia Website */
Line 321: Line 498:
}
}
.arrow-icon.rotated {
.arrow-icon.rotated {
  transform: rotate(180deg);
    transform: rotate(180deg) !important;
}
 
/* Esta regra garante transição suave mesmo se o MediaWiki interferir */
.arrow-icon {
    transition: transform 0.25s ease-in-out !important;
    transform-origin: center center !important;
}
}


Retrieved from "https://wiki.atronia.eu/MediaWiki:Common.css"