MediaWiki:Vector-2022.css: Difference between revisions

Line 232:

/* --- REPARAÇÃO ~~DEFINITIVA~~ DOS ÍCONES --- */

/* --- REPARAÇÃO FINAL DOS ÍCONES (BRANCO + MÁSCARA) --- */

/* 1. ~~Remove qualquer fundo que esteja a criar o quadrado branco~~ */

/* 1. Alvo nos ícones do cabeçalho e cabeçalho fixo */

.skin-vector-2022 .mw-header .vector-icon,

.skin-vector-2022 .mw-header .mw-ui-icon,

.skin-vector-2022 .vector-sticky-header .vector-icon,

.skin-vector-2022 .vector-sticky-header .mw-ui-icon {

background-color: ~~transparent~~ !important;

/* Força o branco mas diz que ele é uma máscara, não um fundo comum */

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

background-color: #ffffff !important;

-webkit-mask-size: 20px 20px !important;

mask-size: 20px 20px !important;

-webkit-mask-repeat: no-repeat !important;

mask-repeat: no-repeat !important;

-webkit-mask-position: center !important;

mask-position: center !important;

/* Garante que o ícone não fique "transparente" no estado normal */

opacity: 1 !important;

visibility: visible !important;

}

/* 2. ~~Transforma o ícone original~~ (~~que é preto~~) ~~em BRANCO usando filtros~~ */

/* 2. Aplica a mesma lógica aos elementos internos (::before) */

~~.skin-vector-2022 .mw-header .vector-icon,~~

~~.skin-vector-2022 .mw-header .mw-ui-icon,~~

~~.skin-vector-2022 .vector-sticky-header .vector-icon,~~

~~.skin-vector-2022 .vector-sticky-header .mw-ui-icon,~~

.skin-vector-2022 .mw-header .vector-icon::before,

.skin-vector-2022 .mw-header .mw-ui-icon::before {

.skin-vector-2022 .mw-header .mw-ui-icon::before,

~~filter~~: ~~brightness(0) invert(1)~~ !important;

.skin-vector-2022 .vector-sticky-header .vector-icon::before,

~~opacity~~: 1 !important;

.skin-vector-2022 .vector-sticky-header .mw-ui-icon::before {

~~visibility~~: ~~visible~~ !important;

background-color: #ffffff !important;

-webkit-mask-size: contain !important;

mask-size: contain !important;

}

/* 3. ~~Garante~~ que ~~o botão (container) seja transparente~~ */

/* 3. Limpa qualquer efeito de mistura que os torne invisíveis */

.cdx-button.cdx-button--weight-quiet,

.cdx-button.cdx-button--weight-quiet .vector-icon,

.cdx-button.cdx-button--icon~~-only~~ {

.cdx-button.cdx-button--weight-quiet .mw-ui-icon {

~~background~~-~~color~~: ~~transparent~~ !important;

mix-blend-mode: normal !important;

filter: none !important;

}