Jump to content

MediaWiki:Common.css: Difference between revisions

← Older edit
No edit summary
No edit summary
 
(7 intermediate revisions by the same user not shown)
Line 3: Line 3:
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;700&display=swap');
@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) - COMPORTAMENTO POR CLIQUE ISOLADO
   ÍNDICE LATERAL (TOC) - DESIGN FINAL REFINADO COM HOVER E ANIMAÇÃO RÁPIDA
   ========================================================================== */
   ========================================================================== */


/* 1. Esconde as sublistas numéricas por padrão */
/* 1. Oculta as sublistas por padrão */
.vector-toc-contents .vector-toc-list .vector-toc-list {
.vector-toc-contents .vector-toc-list .vector-toc-list {
     display: none !important;
     display: none !important;
}
}


/* 2. Mostra a sublista unicamente quando o item pai tiver a classe expandida */
/* 2. Mostra a sublista quando expandido */
.vector-toc-list-item.toc-expanded > .vector-toc-list {
.vector-toc-list-item.toc-expanded > .vector-toc-list {
     display: block !important;
     display: block !important;
}
}


/* 3. Prepara o espaço relativo para o alinhamento perfeito da seta */
/* 3. Posicionamento relativo das linhas do menu */
.vector-toc-contents .vector-toc-list .vector-toc-list-item {
.vector-toc-contents .vector-toc-list .vector-toc-list-item {
     position: relative !important;
     position: relative !important;
}
}


/* 4. Estilização e posicionamento absoluto da seta na margem esquerda */
/* 4. Container do botão da seta (Área clicável com efeito Hover) */
.toc-toggle-arrow {
.toc-toggle-arrow {
     position: absolute !important;
     position: absolute !important;
     left: -13px !important;    /* Afasta a seta para fora do alinhamento do texto */
     left: -18px !important;    /* Ajuste para centralizar o quadrado do hover à esquerda */
     top: 5px !important;      /* Centraliza verticalmente com a linha do texto */
     top: 3px !important;      /* Alinha perfeitamente ao centro da linha de texto */
     display: inline-block !important;
     display: inline-flex !important;
    align-items: center;
    justify-content: center;
     cursor: pointer !important;
     cursor: pointer !important;
     font-size: 9px !important;
     width: 18px !important;   /* Tamanho do quadrado do hover */
     color: #54595d !important;
     height: 18px !important;
     width: 10px !important;
     border-radius: 2px;       /* Cantos levemente suavizados para o quadrado */
    text-align: center !important;
     z-index: 50 !important;
     z-index: 50 !important;
     transition: transform 0.2s ease !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;
}
}


/* 5. Rotação da seta ao expandir */
/* 6. Rotação rápida quando o menu abre (roda para baixo) */
.vector-toc-list-item.toc-expanded > .toc-toggle-arrow {
.vector-toc-list-item.toc-expanded > .toc-toggle-arrow .arrow-icon {
     transform: rotate(90deg) !important;
     transform: rotate(45deg) !important;
    margin-top: -2px;
    margin-left: 0px;
}
}


/* 6. Indentação interna limpa para os subcapítulos abertos */
/* 7. Indentação interna limpa para os subcapítulos */
.vector-toc-contents .vector-toc-list .vector-toc-list {
.vector-toc-contents .vector-toc-list .vector-toc-list {
     padding-left: 12px !important;
     padding-left: 12px !important;
Line 50: Line 102:
}
}


/* 7. PROTEÇÃO TOTAL DO HEADING PRINCIPAL - Bloqueia qualquer modificação visual */
/* 8. Proteção absoluta para o cabeçalho principal "Datasheet" */
.vector-toc-header .toc-toggle-arrow,
.vector-toc-header .toc-toggle-arrow,
.vector-toc-title .toc-toggle-arrow,
.vector-toc-title .toc-toggle-arrow,
Line 56: Line 108:
     display: none !important;
     display: none !important;
     opacity: 0 !important;
     opacity: 0 !important;
    visibility: hidden !important;
}
}


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