Ativa a pesquisa
Ativa o menu
1
3
9
193
ForFans
Alternar menu de preferências
Alternar menu pessoal
Não autenticado(a)
Your IP address will be publicly visible if you make any edits.

MediaWiki:Citizen.css: mudanças entre as edições

Página de Interface do MediaWiki
Mais ações
← Edição anteriorEdição posterior →
Njr (discussão | contribs)
Burocratas, Administradores da interface, Administradores
292 edições
Sem resumo de edição
Sem resumo de edição
Linha 1: Linha 1:
/* ======================================================================
/* ======================================================================
   ANIMAÇÃO HOME -> HOME (TAMANHO AJUSTADO E AMPLIADO)
   REMOVER LOGO E FIXAR ÍCONE HOME NATIVO (CITIZEN)
   ====================================================================== */
   ====================================================================== */


/* 1. Esconde a imagem do logo original em todas as tags possíveis */
/* 1. Esconde o logo (Forfans) em absolutamente qualquer estado ou hover */
.citizen-header__logo-image,
.citizen-header__logo img,
.citizen-header__logo img,
.citizen-header__logo-image,
.mw-logo-wordmark,
.mw-logo-wordmark,
.mw-logo-icon {
.mw-logo-icon {
     display: none !important;
     display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}
}


/* 2. Limpa o fundo do contêiner para o logo redondo sumir de vez */
/* Remove qualquer imagem de fundo do botão para o logo não voltar */
.citizen-header__logo {
.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;
     background-image: none !important;
    background-color: transparent;
}
}


/* 3. Injeta a casinha SÓLIDA com tamanho maior */
/* 2. Força o ícone de Home NATIVO a ficar sempre visível por padrão,
.citizen-header__logo::before {
      mesmo quando o mouse estiver totalmente fora da barra lateral */
     content: "" !important;
.citizen-header__logo-icon,
     position: absolute !important;
.citizen-header__logo--icon,
    top: 50% !important;
.citizen-header__logo svg:not(.citizen-header__logo-image) {
     left: 50% !important;
     display: inline-flex !important;
     transform: translate(-50%, -50%) !important;
     opacity: 0.65 !important; /* Mesma opacidade padrão da lupa de busca */
      
     visibility: visible !important;
    /* ==================================================================
     transform: none !important;
      REGULAGEM DE TAMANHO: Se quiser maior ou menor, mude os dois valores abaixo
     transition: opacity 0.2s ease !important;
      ================================================================== */
}
    width: 28px !important; 
    height: 28px !important;  
    /* ================================================================== */


    background-color: currentColor !important;
/* Anula a regra do Citizen que tenta sumir com a casinha quando a barra não tem foco */
   
.citizen-header:not(:hover) .citizen-header__logo-icon,
    /* SVG: Casinha totalmente preenchida/sólida */
.citizen-header:not(:hover) .citizen-header__logo--icon,
    -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;
.citizen-header__start:not(:hover) .citizen-header__logo-icon {
    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;
     opacity: 0.65 !important;
   
     visibility: visible !important;
    -webkit-mask-size: contain !important;
     transform: none !important;
     mask-size: contain !important;
     opacity: 0.65 !important;  
     transition: opacity 0.2s ease, transform 0.2s ease !important;
}
}


/* 4. Transição controlada para o Hover do tema assumir */
/* 3. Quando o mouse chega perto do ícone, ele acende para 100% de opacidade
.citizen-header:hover .citizen-header__logo::before,
      e o tema coloca o quadradinho cinza de fundo nativamente */
.citizen-header__start:hover .citizen-header__logo::before,
.citizen-header__logo:hover .citizen-header__logo-icon,
.citizen-header__logo:hover::before {
.citizen-header__logo:hover .citizen-header__logo--icon {
     opacity: 0 !important;
     opacity: 1 !important;
    transform: translate(-50%, -50%) scale(0.8) !important;
}
}


/* 5. Seus ajustes originais da barra lateral */
/* 4. Seus ajustes originais da barra lateral */
.citizen-drawer {
.citizen-drawer {
     width: 30px !important;
     width: 30px !important;

Edição das 23h35min de 16 de junho de 2026

/* ======================================================================
   REMOVER LOGO E FIXAR ÍCONE HOME NATIVO (CITIZEN)
   ====================================================================== */

/* 1. Esconde o logo (Forfans) em absolutamente qualquer estado ou hover */
.citizen-header__logo-image,
.citizen-header__logo img,
.mw-logo-wordmark,
.mw-logo-icon {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Remove qualquer imagem de fundo do botão para o logo não voltar */
.citizen-header__logo {
    background-image: none !important;
    background-color: transparent;
}

/* 2. Força o ícone de Home NATIVO a ficar sempre visível por padrão,
      mesmo quando o mouse estiver totalmente fora da barra lateral */
.citizen-header__logo-icon,
.citizen-header__logo--icon,
.citizen-header__logo svg:not(.citizen-header__logo-image) {
    display: inline-flex !important;
    opacity: 0.65 !important; /* Mesma opacidade padrão da lupa de busca */
    visibility: visible !important;
    transform: none !important;
    transition: opacity 0.2s ease !important;
}

/* Anula a regra do Citizen que tenta sumir com a casinha quando a barra não tem foco */
.citizen-header:not(:hover) .citizen-header__logo-icon,
.citizen-header:not(:hover) .citizen-header__logo--icon,
.citizen-header__start:not(:hover) .citizen-header__logo-icon {
    opacity: 0.65 !important;
    visibility: visible !important;
    transform: none !important;
}

/* 3. Quando o mouse chega perto do ícone, ele acende para 100% de opacidade 
      e o tema coloca o quadradinho cinza de fundo nativamente */
.citizen-header__logo:hover .citizen-header__logo-icon,
.citizen-header__logo:hover .citizen-header__logo--icon {
    opacity: 1 !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;
}
Disponível em “https://forfans.com.br/wiki/index.php?title=MediaWiki:Citizen.css&oldid=41”
Última modificação
Esta página foi modificada pela última vez em 16 de junho de 2026, às 23h35min.