Ir para o conteúdo

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

De RagnaDust
Sync automatico via GitHub Actions
 
Sync automatico via GitHub Actions
(7 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
   "canvas" da Main Page (mesmo tom usado nos cards do layout customizado). */
  identidade visual. Sem escopo de pagina de proposito: isso vale pra
body.page-Main_Page .mw-page-container {
  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.page-Main_Page .mw-footer-container {
  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.page-Main_Page #footer ul {
body #footer ul {
display: flex;
display: flex;
flex-wrap: wrap;
flex-wrap: wrap;
Linha 38: Linha 50:
list-style: none;
list-style: none;
}
}
body.page-Main_Page #footer li {
body #footer li {
display: inline;
display: inline;
}
}
body.page-Main_Page #footer a {
body #footer a {
color: #6b7086;
color: #6b7086;
text-decoration: none;
text-decoration: none;
}
}
body.page-Main_Page #footer a:hover {
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.page-Main_Page #footer-poweredbyico img {
body #footer-poweredbyico img {
display: none;
display: none;
}
}
body.page-Main_Page #footer-poweredbyico a {
body #footer-poweredbyico a {
font-size: 11px;
font-size: 11px;
color: #8a8074;
color: #8a8074;
}
}
body.page-Main_Page #footer-poweredbyico a::after {
body #footer-poweredbyico a::after {
content: "MediaWiki";
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;
}
}

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;
}