MediaWiki:Citizen.css: mudanças entre as edições
Página de Interface do MediaWiki
Mais ações
Sem resumo de edição |
Sem resumo de edição |
||
| Linha 4: | Linha 4: | ||
====================================================================== */ | ====================================================================== */ | ||
/* 1. Esconde | /* 1. Esconde a imagem do logo (Forfans) permanentemente */ | ||
.citizen-header__logo img, | .citizen-header__logo img, | ||
.citizen-header__logo-image, | .citizen-header__logo-image, | ||
.mw-logo-wordmark, | .mw-logo-wordmark, | ||
.mw-logo-icon { | .mw-logo-icon { | ||
display: none !important; | display: none !important; | ||
} | } | ||
/* 2. | /* 2. Injeta um ícone de Home por padrão usando máscara SVG | ||
.citizen- | (Ele herda a cor correta do tema automaticamente) */ | ||
. | .citizen-header__logo::before { | ||
content: "" !important; | |||
display: inline-block !important; | |||
width: 22px !important; | |||
height: 22px !important; | |||
background-color: currentColor !important; /* Usa a cor do texto do cabeçalho */ | |||
-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 3L2 12h3v8h6v-6h2v6h6v-8h3L12 3z'/></svg>") no-repeat center !important; | |||
mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 3L2 12h3v8h6v-6h2v6h6v-8h3L12 3z'/></svg>") no-repeat center !important; | |||
-webkit-mask-size: contain !important; | |||
mask-size: contain !important; | |||
opacity: 1 !important; | opacity: 1 !important; | ||
visibility: visible !important; | visibility: visible !important; | ||
transition: opacity 0.2s ease, transform 0.2s ease !important; | |||
} | } | ||
/* 3. | /* 3. Quando o mouse passa por cima, o nosso ícone esmaece e encolhe | ||
enquanto o ícone nativo do Citizen surge no lugar, criando a animação */ | |||
.citizen-header__logo:hover::before { | |||
opacity: 0 !important; | |||
transform: scale(0.7) !important; | |||
.citizen-header__logo | |||
opacity: | |||
transform: | |||
} | } | ||
Edição das 23h18min de 16 de junho de 2026
/* Todo o CSS aqui será carregado para usuários do tema Citizen */
/* ======================================================================
AJUSTES DA BARRA LATERAL E ÍCONE HOME (CITIZEN)
====================================================================== */
/* 1. Esconde a imagem do logo (Forfans) permanentemente */
.citizen-header__logo img,
.citizen-header__logo-image,
.mw-logo-wordmark,
.mw-logo-icon {
display: none !important;
}
/* 2. Injeta um ícone de Home por padrão usando máscara SVG
(Ele herda a cor correta do tema automaticamente) */
.citizen-header__logo::before {
content: "" !important;
display: inline-block !important;
width: 22px !important;
height: 22px !important;
background-color: currentColor !important; /* Usa a cor do texto do cabeçalho */
-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 3L2 12h3v8h6v-6h2v6h6v-8h3L12 3z'/></svg>") no-repeat center !important;
mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 3L2 12h3v8h6v-6h2v6h6v-8h3L12 3z'/></svg>") no-repeat center !important;
-webkit-mask-size: contain !important;
mask-size: contain !important;
opacity: 1 !important;
visibility: visible !important;
transition: opacity 0.2s ease, transform 0.2s ease !important;
}
/* 3. Quando o mouse passa por cima, o nosso ícone esmaece e encolhe
enquanto o ícone nativo do Citizen surge no lugar, criando a animação */
.citizen-header__logo:hover::before {
opacity: 0 !important;
transform: scale(0.7) !important;
}
/* 4. Seus ajustes originais da barra lateral */
.citizen-drawer {
width: 30px !important;
}
.citizen-nav {
font-size: 15px !important;
}
.citizen-nav__item {
padding: 10px 16px !important;
}