MediaWiki:Common.css: mudanças entre as edições
De X Angel Wiki
Ir para navegaçãoIr para pesquisar
(Criou página com '→X Angel – Home: .xa-home { max-width: 1100px; margin: 0 auto 40px; } →faixa título vermelha: .xa-ribbon{ background: linear-gradient(90deg,#a00 0%,#d22 40%,#a00 100%); color:#fff; font-weight:bold; padding:10px 14px; border-radius:10px; display:flex; align-items:center; gap:10px; margin:12px 0 18px; } →grade (4 colunas): .xa-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap: 28px 40px; justify-items:center; align-items:start; } /...') |
Sem resumo de edição |
||
| Linha 1: | Linha 1: | ||
/* X Angel – | /* ====== X Angel – Estilos da home ====== */ | ||
.xa-home { max-width: 1100px; margin: 0 auto 40px; } | .xa-home { max-width: 1100px; margin: 0 auto 40px; padding: 0 10px; } | ||
/* | /* Faixa vermelha com gradiente */ | ||
.xa-ribbon{ | .xa-ribbon { | ||
background: linear-gradient(90deg,#a00 0%,#d22 40%,#a00 100%); | display: flex; align-items: center; gap: 10px; | ||
color:#fff; font-weight: | background: linear-gradient(90deg, #a00 0%, #d22 40%, #a00 100%); | ||
color: #fff; font-weight: 700; | |||
border-radius: 12px; padding: 12px 18px; margin: 18px 0 26px; | |||
} | } | ||
.xa-ribbon .xa-ribbon-icon { width: 28px; height: 28px; image-rendering: pixelated; } | |||
/* | /* Grade dos cards */ | ||
.xa-grid{ | .xa-grid { | ||
display:grid; grid-template-columns: repeat(4, 1fr); | display: grid; | ||
gap: 28px 40px; justify | grid-template-columns: repeat(4, 1fr); | ||
gap: 28px 40px; | |||
justify-items: start; | |||
} | } | ||
/* | /* Card (sem <a>) */ | ||
.xa-card{ | .xa-card { | ||
.xa-card img{ width:110px; height:auto; image-rendering: | display: inline-flex; flex-direction: column; align-items: center; | ||
.xa-card | gap: 6px; min-width: 120px; | ||
.xa-card:hover | transition: transform .12s ease-in-out, filter .12s ease-in-out; | ||
} | |||
.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 */ | |||
.xa-card:hover { transform: translateY(-3px); filter: brightness(1.05); } | |||
/* | /* Responsivo */ | ||
@media (max-width: | @media (max-width: 1050px) { .xa-grid { grid-template-columns: repeat(3, 1fr); } } | ||
@media (max-width: | @media (max-width: 780px) { .xa-grid { grid-template-columns: repeat(2, 1fr); } } | ||
@media (max-width: | @media (max-width: 520px) { .xa-grid { grid-template-columns: 1fr; justify-items:center; } } | ||
Edição das 19h39min de 8 de novembro de 2025
/* ====== X Angel – Estilos da home ====== */
.xa-home { max-width: 1100px; margin: 0 auto 40px; padding: 0 10px; }
/* Faixa vermelha com gradiente */
.xa-ribbon {
display: flex; align-items: center; gap: 10px;
background: linear-gradient(90deg, #a00 0%, #d22 40%, #a00 100%);
color: #fff; font-weight: 700;
border-radius: 12px; padding: 12px 18px; margin: 18px 0 26px;
}
.xa-ribbon .xa-ribbon-icon { width: 28px; height: 28px; image-rendering: pixelated; }
/* Grade dos cards */
.xa-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 28px 40px;
justify-items: start;
}
/* Card (sem <a>) */
.xa-card {
display: inline-flex; flex-direction: column; align-items: center;
gap: 6px; min-width: 120px;
transition: transform .12s ease-in-out, filter .12s ease-in-out;
}
.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 */
.xa-card:hover { transform: translateY(-3px); filter: brightness(1.05); }
/* Responsivo */
@media (max-width: 1050px) { .xa-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 780px) { .xa-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .xa-grid { grid-template-columns: 1fr; justify-items:center; } }