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 1: | Linha 1: | ||
/* 1. Esconde a imagem do logo | /* ====================================================================== | ||
ANIMAÇÃO HOME -> HOME (CORRIGIDO: ÍCONE SÓLIDO E SEM LOGO SEGUNDO PLANO) | |||
====================================================================== */ | |||
/* 1. Esconde a imagem do logo original em todas as tags possíveis */ | |||
.citizen-header__logo img, | .citizen-header__logo img, | ||
.citizen-header__logo-image, | .citizen-header__logo-image, | ||
| Linha 7: | Linha 11: | ||
} | } | ||
/* 2. | /* 2. Limpa o fundo do contêiner para o logo redondo sumir de vez */ | ||
.citizen-header__logo { | .citizen-header__logo { | ||
position: relative !important; | position: relative !important; | ||
| Linha 15: | Linha 19: | ||
min-width: 32px !important; | min-width: 32px !important; | ||
min-height: 32px !important; | min-height: 32px !important; | ||
background-image: none !important; /* Bloqueia o logo redondo de aparecer no fundo */ | |||
} | } | ||
/* 3. Injeta | /* 3. Injeta a casinha SÓLIDA (idêntica à do seu efeito de hover) */ | ||
.citizen-header__logo::before { | .citizen-header__logo::before { | ||
content: "" !important; | content: "" !important; | ||
| Linha 24: | Linha 29: | ||
left: 50% !important; | left: 50% !important; | ||
transform: translate(-50%, -50%) !important; | transform: translate(-50%, -50%) !important; | ||
width: | width: 18px !important; /* Tamanho calibrado para bater com o nativo */ | ||
height: | height: 18px !important; | ||
background-color: currentColor !important; | background-color: currentColor !important; | ||
-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d=' | |||
mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d=' | /* Novo SVG: Casinha totalmente preenchida/sólida */ | ||
-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/></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='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/></svg>") no-repeat center !important; | |||
-webkit-mask-size: contain !important; | -webkit-mask-size: contain !important; | ||
mask-size: contain !important; | mask-size: contain !important; | ||
opacity: | opacity: 0.65 !important; /* Mesma opacidade discreta da sua lupa de busca */ | ||
transition: opacity 0.2s ease, transform 0.2s ease !important; | transition: opacity 0.2s ease, transform 0.2s ease !important; | ||
} | } | ||
/* 4. | /* 4. Transição controlada para o Hover do tema assumir */ | ||
.citizen-header:hover .citizen-header__logo::before, | .citizen-header:hover .citizen-header__logo::before, | ||
.citizen-header__start:hover .citizen-header__logo::before, | .citizen-header__start:hover .citizen-header__logo::before, | ||
.citizen-header__logo:hover::before { | .citizen-header__logo:hover::before { | ||
opacity: 0 !important; | opacity: 0 !important; | ||
transform: translate(-50%, -50%) scale(0. | transform: translate(-50%, -50%) scale(0.8) !important; | ||
} | } | ||
Edição das 23h25min de 16 de junho de 2026
/* ======================================================================
ANIMAÇÃO HOME -> HOME (CORRIGIDO: ÍCONE SÓLIDO E SEM LOGO SEGUNDO PLANO)
====================================================================== */
/* 1. Esconde a imagem do logo original em todas as tags possíveis */
.citizen-header__logo img,
.citizen-header__logo-image,
.mw-logo-wordmark,
.mw-logo-icon {
display: none !important;
}
/* 2. Limpa o fundo do contêiner para o logo redondo sumir de vez */
.citizen-header__logo {
position: relative !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
min-width: 32px !important;
min-height: 32px !important;
background-image: none !important; /* Bloqueia o logo redondo de aparecer no fundo */
}
/* 3. Injeta a casinha SÓLIDA (idêntica à do seu efeito de hover) */
.citizen-header__logo::before {
content: "" !important;
position: absolute !important;
top: 50% !important;
left: 50% !important;
transform: translate(-50%, -50%) !important;
width: 18px !important; /* Tamanho calibrado para bater com o nativo */
height: 18px !important;
background-color: currentColor !important;
/* Novo SVG: Casinha totalmente preenchida/sólida */
-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/></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='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/></svg>") no-repeat center !important;
-webkit-mask-size: contain !important;
mask-size: contain !important;
opacity: 0.65 !important; /* Mesma opacidade discreta da sua lupa de busca */
transition: opacity 0.2s ease, transform 0.2s ease !important;
}
/* 4. Transição controlada para o Hover do tema assumir */
.citizen-header:hover .citizen-header__logo::before,
.citizen-header__start:hover .citizen-header__logo::before,
.citizen-header__logo:hover::before {
opacity: 0 !important;
transform: translate(-50%, -50%) scale(0.8) !important;
}
/* 5. Seus ajustes originais da barra lateral */
.citizen-drawer {
width: 30px !important;
}
.citizen-nav {
font-size: 15px !important;
}
.citizen-nav__item {
padding: 10px 16px !important;
}