MediaWiki:Vector-2022.css: Difference between revisions

Line 232:

/* --- ~~ATRONIA ICON REPAIR: THE FINAL COMBO~~ --- */

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

/* 1. ~~Ataca o elemento principal e força~~ o branco ~~como cor de máscara~~ */

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

.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: ~~#ffffff~~ !important;

background-color: transparent !important;

-~~webkit-mask-size: contain !important;~~

background-image: none !important;

~~mask-size: contain !important;~~

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

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

~~-webkit-mask-position: center !important;~~

~~mask-position: center !important;~~

~~/* Remove opacidade que faz sumir no estado normal */~~

~~opacity: 1 !important;~~

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

}

/* 2. ~~Força os mesmos atributos no ::before~~ (~~onde muitos ícones vivem~~) */

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

.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 {

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

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

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

~~background-color: #ffffff !important;~~

~~-webkit-mask-size: contain !important;~~

~~mask-size~~: ~~contain~~ !important;

opacity: 1 !important;

visibility: visible !important;

}

/* 3. ~~Mata o mix-blend-mode~~ que o ~~teu Inspect mostrou~~ (~~causador do sumiço~~) */

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

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

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

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

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

~~mix~~-~~blend-mode: normal !important;~~

background-color: transparent !important;

~~filter~~: ~~none~~ !important;

}