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

De X Angel Wiki
Ir para navegaçãoIr para pesquisar
Sem resumo de edição
Sem resumo de edição
 
Linha 1: Linha 1:
/* ====== X Angel – Estilos da home ====== */
/* Zera qualquer caixinha/miniatura que o wikitext cria dentro da faixa */
.xa-ribbon .image,
.xa-ribbon .thumb,
.xa-ribbon .thumbinner {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}
 
/* Ajuste do ícone da faixa */
.xa-ribbon .xa-ribbon-icon {
  vertical-align: middle;
  margin-right: 10px;
}
 
/* Container da home (ajuste se quiser) */
.xa-home { max-width: 1100px; margin: 0 auto 40px; padding: 0 10px; }
.xa-home { max-width: 1100px; margin: 0 auto 40px; padding: 0 10px; }


/* Faixa vermelha com gradiente */
/* Faixa vermelha de “Tópicos Importantes” */
.xa-ribbon {
.xa-ribbon {
   display: flex; align-items: center; gap: 10px;
   display: flex;
  align-items: center;
  gap: 10px;
   background: linear-gradient(90deg, #a00 0%, #d22 40%, #a00 100%);
   background: linear-gradient(90deg, #a00 0%, #d22 40%, #a00 100%);
   color: #fff; font-weight: 700;
   color: #fff;
   border-radius: 12px; padding: 12px 18px; margin: 18px 0 26px;
  font-weight: 600;
   padding: 12px 16px;
  border-radius: 8px;
}
}
.xa-ribbon .xa-ribbon-icon { width: 28px; height: 28px; image-rendering: pixelated; }


/* Grade dos cards */
/* Grade de cards */
.xa-grid {
.xa-grid {
   display: grid;
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   grid-template-columns: repeat(4, 1fr);
   gap: 28px 40px;
   gap: 28px 40px;
   justify-items: start;
   justify-items: center;
  align-items: start;
}
}


/* Card (sem <a>) */
/* Card sem fundo/sombra (para não aparecer “caixa branca”) */
.xa-card {
.xa-card {
   display: inline-flex; flex-direction: column; align-items: center;
   text-align: center;
   gap: 6px; min-width: 120px;
  background: transparent;
   transition: transform .12s ease-in-out, filter .12s ease-in-out;
  padding: 0;
   border: 0;
  box-shadow: none;
   border-radius: 0;
}
}
.xa-card .xa-img { width: 110px; height: auto; image-rendering: pixelated; }
.xa-card .xa-title { color: #1a1a1a; font-weight: 700; text-align: center; display: block; }


/* “efeito hover” só visual, sem JS */
/* Imagens dos cards */
.xa-card:hover { transform: translateY(-3px); filter: brightness(1.05); }
.xa-img { width: 120px; height: auto; image-rendering: -webkit-optimize-contrast; }


/* Responsivo */
/* Título do card (link) */
@media (max-width: 1050px) { .xa-grid { grid-template-columns: repeat(3, 1fr); } }
.xa-title a { text-decoration: none; color: #b11; font-weight: 600; }
@media (max-width: 780px)  { .xa-grid { grid-template-columns: repeat(2, 1fr); } }
.xa-title a:hover { text-decoration: underline; }
@media (max-width: 520px)  { .xa-grid { grid-template-columns: 1fr; justify-items:center; } }

Edição atual tal como às 21h37min de 8 de novembro de 2025

/* Zera qualquer caixinha/miniatura que o wikitext cria dentro da faixa */
.xa-ribbon .image,
.xa-ribbon .thumb,
.xa-ribbon .thumbinner {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
}

/* Ajuste do ícone da faixa */
.xa-ribbon .xa-ribbon-icon {
  vertical-align: middle;
  margin-right: 10px;
}

/* Container da home (ajuste se quiser) */
.xa-home { max-width: 1100px; margin: 0 auto 40px; padding: 0 10px; }

/* Faixa vermelha de “Tópicos Importantes” */
.xa-ribbon {
  display: flex;
  align-items: center;
  gap: 10px;
  background: linear-gradient(90deg, #a00 0%, #d22 40%, #a00 100%);
  color: #fff;
  font-weight: 600;
  padding: 12px 16px;
  border-radius: 8px;
}

/* Grade de cards */
.xa-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px 40px;
  justify-items: center;
  align-items: start;
}

/* Card sem fundo/sombra (para não aparecer “caixa branca”) */
.xa-card {
  text-align: center;
  background: transparent;
  padding: 0;
  border: 0;
  box-shadow: none;
  border-radius: 0;
}

/* Imagens dos cards */
.xa-img { width: 120px; height: auto; image-rendering: -webkit-optimize-contrast; }

/* Título do card (link) */
.xa-title a { text-decoration: none; color: #b11; font-weight: 600; }
.xa-title a:hover { text-decoration: underline; }