MediaWiki:Common.css: mudanças entre as edições
Aparência
Sync automatico via GitHub Actions |
Sync automatico via GitHub Actions |
||
| (3 revisões intermediárias pelo mesmo usuário não estão sendo mostradas) | |||
| Linha 8: | Linha 8: | ||
} | } | ||
/* Fundo branco padrao do Vector 2022 -> cinza claro, pra combinar com o | /* Fundo branco padrao do Vector 2022 -> cinza claro, pra combinar com a | ||
identidade visual. Sem escopo de pagina de proposito: isso vale pra | |||
body | wiki inteira (Main Page, artigos, pagina de link quebrado, etc.), so o | ||
titulo/toolbar acima e que fica exclusivo da Main Page. */ | |||
body .mw-page-container { | |||
background-color: #b9b9b9; | background-color: #b9b9b9; | ||
} | } | ||
| Linha 16: | Linha 18: | ||
/* Rodape padrao do MediaWiki (links de privacidade/sobre/powered-by) estava | /* Rodape padrao do MediaWiki (links de privacidade/sobre/powered-by) estava | ||
perdido no fundo branco. Estiliza pra combinar com a identidade visual e | perdido no fundo branco. Estiliza pra combinar com a identidade visual e | ||
alinha na mesma largura do conteudo customizado. */ | alinha na mesma largura do conteudo customizado - tambem sem escopo de | ||
body | pagina, pra ficar consistente em qualquer lugar da wiki. */ | ||
body .mw-footer-container { | |||
max-width: 1080px; | max-width: 1080px; | ||
margin: 0 auto; | margin: 0 auto; | ||
padding: 32px 20px 40px; | padding: 32px 20px 40px; | ||
} | } | ||
body.page-Main_Page #footer { | /* Na Main Page, esse padding-top de 32px soma ao espaco que o | ||
.mw-body-content padrao ja deixa depois do nosso <footer> customizado | |||
(o "RagnaDust Wiki - construido com MediaWiki" dentro do .canvas), | |||
criando um vao grande antes do rodape real da wiki ("Esta pagina foi | |||
modificada..."). Reduz so nesse caso - nas demais paginas o padding | |||
maior ainda faz sentido, separando texto de artigo do rodape. */ | |||
body.page-Main_Page .mw-footer-container { | |||
padding-top: 4px; | |||
} | |||
body #footer { | |||
border-top: 1px solid #e6e8f0; | border-top: 1px solid #e6e8f0; | ||
padding-top: 16px; | padding-top: 16px; | ||
| Linha 29: | Linha 41: | ||
color: #6b7086; | color: #6b7086; | ||
} | } | ||
body | body #footer ul { | ||
display: flex; | display: flex; | ||
flex-wrap: wrap; | flex-wrap: wrap; | ||
| Linha 38: | Linha 50: | ||
list-style: none; | list-style: none; | ||
} | } | ||
body | body #footer li { | ||
display: inline; | display: inline; | ||
} | } | ||
body | body #footer a { | ||
color: #6b7086; | color: #6b7086; | ||
text-decoration: none; | text-decoration: none; | ||
} | } | ||
body | body #footer a:hover { | ||
color: #eb6a0e; | color: #eb6a0e; | ||
text-decoration: underline; | text-decoration: underline; | ||
| Linha 53: | Linha 65: | ||
afeta redistribuicao de codigo, nao o site rodando), mas mantemos um | afeta redistribuicao de codigo, nao o site rodando), mas mantemos um | ||
link de texto pequeno e discreto em vez de remover 100%. */ | link de texto pequeno e discreto em vez de remover 100%. */ | ||
body | body #footer-poweredbyico img { | ||
display: none; | display: none; | ||
} | } | ||
body | body #footer-poweredbyico a { | ||
font-size: 11px; | font-size: 11px; | ||
color: #8a8074; | color: #8a8074; | ||
} | } | ||
body | body #footer-poweredbyico a::after { | ||
content: "MediaWiki"; | content: "MediaWiki"; | ||
} | } | ||
| Linha 72: | Linha 84: | ||
/* Remove o menu principal (hamburguer + logo/texto RagnaDust) e a barra de | /* Remove o menu principal (hamburguer + logo/texto RagnaDust) e a barra de | ||
busca do topo, | busca do topo - wiki inteira, sem escopo de pagina de proposito (decisao | ||
consciente: aceita o trade-off de nao ter busca visivel em lugar nenhum, | |||
ja que o wordmark RAGNADUST gigante do hero ja cumpre o papel de | |||
identidade visual e queremos o mesmo "sem chrome" em qualquer pagina). */ | |||
body | body .vector-header-start, | ||
body | body .vector-search-box { | ||
display: none; | display: none; | ||
} | } | ||
| Linha 89: | Linha 95: | ||
/* Na tela de login/criar conta nao faz sentido manter os links "Entrar" / | /* Na tela de login/criar conta nao faz sentido manter os links "Entrar" / | ||
"Criar conta" flutuando em algum canto - voce ja esta nessa tela. Esconde | "Criar conta" flutuando em algum canto - voce ja esta nessa tela. Esconde | ||
o header inteiro, diferente | o header inteiro, diferente das demais paginas (onde o header-end | ||
visivel, so reposicionado - ver regra mais abaixo). */ | continua visivel, so reposicionado - ver regra mais abaixo). */ | ||
body.mw-special-Userlogin .vector-header-end, | body.mw-special-Userlogin .vector-header-end, | ||
body.mw-special-UserLogin .vector-header-end, | body.mw-special-UserLogin .vector-header-end, | ||
| Linha 98: | Linha 104: | ||
/* Depois de esconder start/search (e, no caso do login, o header inteiro), | /* Depois de esconder start/search (e, no caso do login, o header inteiro), | ||
sobra uma barra branca vazia | sobra uma barra branca vazia. Zera o "chrome" visual do container sem | ||
dar display:none nele, senao o header-end (que e descendente dele) | |||
sumiria junto. position:static de proposito: remove o | |||
display:none nele, senao o header-end | position:relative nativo do skin nesse elemento, que servia de | ||
referencia (errada) pro position:absolute do header-end logo abaixo - | |||
sem isso, o menu de login ficava "grudado" na tela ao rolar em vez de | |||
rolar junto com a pagina como o resto do conteudo. */ | |||
body .vector-header-container, | |||
body .vector-header { | |||
body | |||
body | |||
background: transparent; | background: transparent; | ||
border: 0; | border: 0; | ||
| Linha 119: | Linha 121: | ||
height: 0; | height: 0; | ||
overflow: visible; | overflow: visible; | ||
position: static; | |||
} | } | ||
/* position: | /* position:absolute (nao fixed): com o header-container acima neutralizado | ||
position: | (position:static), isso passa a ser medido a partir do topo do | ||
documento, nao da tela - rola junto com a pagina exatamente como o | |||
"Servidor no ar" do hero, em vez de ficar fixo na tela ao rolar. | |||
palpite, confirme | "right" nao pode ser um px fixo: o conteudo vive dentro de um .wrap | ||
centralizado (max-width:1080px, padding:0 20px - ver MainPage.html), nao | |||
body | colado na borda real da tela. calc() reproduz a borda direita do .wrap: | ||
position: | metade da tela menos metade do max-width (540px) mais o padding interno | ||
(20px). Abaixo de 1080px de viewport o .wrap vira fluido com 20px de | |||
padding fixo, dai o max() com esse piso. Top ainda e palpite, confirme | |||
visualmente. */ | |||
body .vector-header-end { | |||
position: absolute; | |||
top: 120px; | top: 120px; | ||
right: | right: max(20px, calc(50vw - 520px)); | ||
z-index: 20; | z-index: 20; | ||
} | } | ||
Edição das 03h56min de 15 de julho de 2026
/* Home totalmente customizada: esconde o titulo "Pagina principal" e a barra
de abas (Pagina principal / Discussao / Ler / Editar / Ver historico /
Ferramentas) que o Vector 2022 gera por padrao. So afeta a Main Page —
as demais paginas da wiki continuam com a navegacao normal. */
body.page-Main_Page .vector-page-titlebar,
body.page-Main_Page .vector-page-toolbar {
display: none;
}
/* Fundo branco padrao do Vector 2022 -> cinza claro, pra combinar com a
identidade visual. Sem escopo de pagina de proposito: isso vale pra
wiki inteira (Main Page, artigos, pagina de link quebrado, etc.), so o
titulo/toolbar acima e que fica exclusivo da Main Page. */
body .mw-page-container {
background-color: #b9b9b9;
}
/* Rodape padrao do MediaWiki (links de privacidade/sobre/powered-by) estava
perdido no fundo branco. Estiliza pra combinar com a identidade visual e
alinha na mesma largura do conteudo customizado - tambem sem escopo de
pagina, pra ficar consistente em qualquer lugar da wiki. */
body .mw-footer-container {
max-width: 1080px;
margin: 0 auto;
padding: 32px 20px 40px;
}
/* Na Main Page, esse padding-top de 32px soma ao espaco que o
.mw-body-content padrao ja deixa depois do nosso <footer> customizado
(o "RagnaDust Wiki - construido com MediaWiki" dentro do .canvas),
criando um vao grande antes do rodape real da wiki ("Esta pagina foi
modificada..."). Reduz so nesse caso - nas demais paginas o padding
maior ainda faz sentido, separando texto de artigo do rodape. */
body.page-Main_Page .mw-footer-container {
padding-top: 4px;
}
body #footer {
border-top: 1px solid #e6e8f0;
padding-top: 16px;
font-family: 'Manrope', sans-serif;
font-size: 12px;
color: #6b7086;
}
body #footer ul {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px 16px;
margin: 0 0 10px;
padding: 0;
list-style: none;
}
body #footer li {
display: inline;
}
body #footer a {
color: #6b7086;
text-decoration: none;
}
body #footer a:hover {
color: #eb6a0e;
text-decoration: underline;
}
/* Badge grande "Powered by MediaWiki" -> nao e exigido por licenca (GPL so
afeta redistribuicao de codigo, nao o site rodando), mas mantemos um
link de texto pequeno e discreto em vez de remover 100%. */
body #footer-poweredbyico img {
display: none;
}
body #footer-poweredbyico a {
font-size: 11px;
color: #8a8074;
}
body #footer-poweredbyico a::after {
content: "MediaWiki";
}
/* Esconde o header fixo (sticky) que aparece ao rolar a pagina pra baixo.
Ele duplica busca/menu que ja existem no topo normal e nao existia no
prototipo estatico da Main Page - afeta a wiki inteira, nao so a Main Page. */
.vector-sticky-header {
display: none;
}
/* Remove o menu principal (hamburguer + logo/texto RagnaDust) e a barra de
busca do topo - wiki inteira, sem escopo de pagina de proposito (decisao
consciente: aceita o trade-off de nao ter busca visivel em lugar nenhum,
ja que o wordmark RAGNADUST gigante do hero ja cumpre o papel de
identidade visual e queremos o mesmo "sem chrome" em qualquer pagina). */
body .vector-header-start,
body .vector-search-box {
display: none;
}
/* Na tela de login/criar conta nao faz sentido manter os links "Entrar" /
"Criar conta" flutuando em algum canto - voce ja esta nessa tela. Esconde
o header inteiro, diferente das demais paginas (onde o header-end
continua visivel, so reposicionado - ver regra mais abaixo). */
body.mw-special-Userlogin .vector-header-end,
body.mw-special-UserLogin .vector-header-end,
body.mw-special-CreateAccount .vector-header-end {
display: none;
}
/* Depois de esconder start/search (e, no caso do login, o header inteiro),
sobra uma barra branca vazia. Zera o "chrome" visual do container sem
dar display:none nele, senao o header-end (que e descendente dele)
sumiria junto. position:static de proposito: remove o
position:relative nativo do skin nesse elemento, que servia de
referencia (errada) pro position:absolute do header-end logo abaixo -
sem isso, o menu de login ficava "grudado" na tela ao rolar em vez de
rolar junto com a pagina como o resto do conteudo. */
body .vector-header-container,
body .vector-header {
background: transparent;
border: 0;
box-shadow: none;
margin: 0;
padding: 0;
min-height: 0;
height: 0;
overflow: visible;
position: static;
}
/* position:absolute (nao fixed): com o header-container acima neutralizado
(position:static), isso passa a ser medido a partir do topo do
documento, nao da tela - rola junto com a pagina exatamente como o
"Servidor no ar" do hero, em vez de ficar fixo na tela ao rolar.
"right" nao pode ser um px fixo: o conteudo vive dentro de um .wrap
centralizado (max-width:1080px, padding:0 20px - ver MainPage.html), nao
colado na borda real da tela. calc() reproduz a borda direita do .wrap:
metade da tela menos metade do max-width (540px) mais o padding interno
(20px). Abaixo de 1080px de viewport o .wrap vira fluido com 20px de
padding fixo, dai o max() com esse piso. Top ainda e palpite, confirme
visualmente. */
body .vector-header-end {
position: absolute;
top: 120px;
right: max(20px, calc(50vw - 520px));
z-index: 20;
}