MediaWiki:Vector-2022.css: Difference between revisions

Line 1:

/* 1. ~~Remove a imagem original (máscara)~~ do ~~ícone~~ */

.vector-~~dropdown-label[aria~~-~~label="Toggle the table of contents"] .vector~~-~~icon,~~

/* 1. Limpa o container do botão do Índice */

.vector-dropdown-label~~[aria-label="Toggle the table of contents"]::after~~ {

#vector-page-titlebar-toc .vector-dropdown-label {

background-image: none !important;

-~~webkit~~-~~mask-image~~: ~~none~~ !important;

display: flex !important;

~~mask-image~~: ~~none~~ !important;

align-items: center !important;

~~display~~: ~~none~~ !important;

justify-content: center !important;

width: 32px !important;

height: 32px !important;

padding: 0 !important;

}

/* 2. ~~Configura~~ o ~~botão para aceitar o novo~~ ícone */

/* 2. Esconde o ícone original da Wikimedia que está lá dentro */

.vector-dropdown-label~~[aria~~-~~label="Toggle the table of contents"]~~ {

#vector-page-titlebar-toc .vector-dropdown-label .vector-icon {

display~~: inline-flex !important;~~

display: none !important;

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

~~text-decoration~~: none !important;

}

/* 3. Injeta o ~~Material Symbol~~ */

/* 3. Injeta o novo ícone usando o ID específico para não falhar */

.vector-dropdown-label~~[aria-label="Toggle the table of contents"]~~::before {

#vector-page-titlebar-toc .vector-dropdown-label::before {

font-family: 'Material Symbols Outlined' !important;

content: "toc" !important; ~~/* Podes usar "toc", "format_list_bulleted" ou "menu_open" */~~

content: "toc" !important;

font-size: 24px !important;

color: #000000 !important;

display: ~~inline-~~block !important;

display: block !important;

~~font-variation-settings: 'FILL' 0, 'wght' 400;~~

~~margin-right: 0 !important; /* Ajusta se houver texto ao lado */~~

}

~~/* Garante que o pseudo-elemento seja visível mesmo em botões "apenas ícone" */~~

~~.vector-dropdown-label[aria-label="Toggle the table of contents"]::before {~~

visibility: visible !important;

opacity: 1 !important;

z-index: 10 !important;

font-variation-settings: 'FILL' 0, 'wght' 400;

}

/* 4. Garante que o checkbox invisível não bloqueie o clique no ícone */

#vector-page-titlebar-toc-checkbox {

z-index: 1 !important;

}