Ativa o menu
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
Sem resumo de edição
Sem resumo de edição
Linha 7: Linha 7:
}
}


/* 2. Prepara o contêiner do logo para ser a âncora do posicionamento */
/* 2. Prepara o contêiner do logo como âncora */
.citizen-header__logo {
.citizen-header__logo {
     position: relative !important;
     position: relative !important;
Linha 13: Linha 13:
     align-items: center !important;
     align-items: center !important;
     justify-content: center !important;
     justify-content: center !important;
     min-width: 32px !important; /* Mantém o clique do botão com tamanho bom */
     min-width: 32px !important;
     min-height: 32px !important;
     min-height: 32px !important;
}
}


/* 3. Injeta o ícone flutuando exatamente no centro (sem mover o layout) */
/* 3. Injeta o ícone de Home padrão no centro exato */
.citizen-header__logo::before {
.citizen-header__logo::before {
     content: "" !important;
     content: "" !important;
Linha 23: Linha 23:
     top: 50% !important;
     top: 50% !important;
     left: 50% !important;
     left: 50% !important;
     transform: translate(-50%, -50%) !important; /* Truque clássico de centralização perfeita */
     transform: translate(-50%, -50%) !important;
     width: 22px !important;
     width: 22px !important;
     height: 22px !important;
     height: 22px !important;
Linha 36: Linha 36:
}
}


/* 4. Quando passa o mouse, o ícone some suavemente para o do Citizen entrar */
/* 4. SINCRONIZAÇÃO: Faz o nosso ícone sumir assim que o mouse entra
      no espaço do cabeçalho (corrigindo o "buraco vazio") */
.citizen-header: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.7) !important; /* Mantém o centro enquanto encolhe */
     transform: translate(-50%, -50%) scale(0.7) !important;
}
}



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

/* 1. Esconde a imagem do logo (Forfans) */
.citizen-header__logo img,
.citizen-header__logo-image,
.mw-logo-wordmark,
.mw-logo-icon {
    display: none !important;
}

/* 2. Prepara o contêiner do logo como âncora */
.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;
}

/* 3. Injeta o ícone de Home padrão no centro exato */
.citizen-header__logo::before {
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 22px !important;
    height: 22px !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='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;
}

/* 4. SINCRONIZAÇÃO: Faz o nosso ícone sumir assim que o mouse entra 
      no espaço do cabeçalho (corrigindo o "buraco vazio") */
.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.7) !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;
}