MediaWiki:Citizen.css: Difference between revisions
MediaWiki interface page
More actions
No edit summary |
No edit summary |
||
| Line 172: | Line 172: | ||
} | } | ||
} | |||
/* Buttons row */ | |||
.mecha-buttons { | |||
display: flex; | |||
justify-content: center; | |||
gap: 12px; | |||
flex-wrap: wrap; /* wraps nicely on mobile */ | |||
margin-top: 18px; | |||
} | |||
/* Make the spans look like buttons */ | |||
.mecha-btn a { | |||
display: inline-flex; | |||
align-items: center; | |||
gap: 8px; | |||
background: var(--color-progressive); | |||
color: #fff !important; | |||
padding: 10px 14px; | |||
border-radius: 10px; | |||
text-decoration: none !important; | |||
font-weight: 600; | |||
line-height: 1; | |||
} | |||
.mecha-btn a:hover { | |||
transform: translateY(-1px); | |||
} | |||
/* Icon sizing (external image) */ | |||
.mecha-btn img { | |||
width: 18px; | |||
height: 18px; | |||
display: inline-block; | |||
} | } | ||
Revision as of 13:58, 21 February 2026
/* ======================
FULL WIDTH FIX
====================== */
.mw-body {
max-width: 1400px !important;
margin: 0 auto;
}
/* remove extra top spacing */
.mecha-hero {
margin-top: 10px;
margin-bottom: 30px;
text-align: center;
}
/* ======================
HERO LOGO
====================== */
.mecha-logo {
width: 140px;
margin-bottom: 10px;
}
/* ======================
HERO BUTTONS
====================== */
.mecha-buttons {
margin-top: 20px;
}
.mecha-buttons a {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--color-progressive);
color: white !important;
padding: 10px 16px;
margin: 6px;
border-radius: 10px;
text-decoration: none;
font-weight: 500;
transition: 0.15s;
}
.mecha-buttons a:hover {
transform: translateY(-2px);
box-shadow: 0 4px 14px rgba(0,0,0,0.15);
}
/* ======================
MAIN GRID
====================== */
.mecha-layout {
width: 100%;
border-spacing: 20px;
}
/* cards */
.mecha-card {
background: var(--color-surface-2);
border-radius: 16px;
padding: 20px;
border: 1px solid var(--color-border);
}
/* ======================
ECOSYSTEM GRID
====================== */
.mecha-grid {
width: 100%;
border-spacing: 14px;
}
.mecha-grid td {
background: var(--color-surface-1);
border-radius: 12px;
padding: 16px;
transition: 0.15s;
}
.mecha-grid td:hover {
background: var(--color-progressive-subtle);
transform: translateY(-2px);
}
/* ecosystem icon */
.mecha-ecosystem-icon {
width: 22px;
margin-right: 8px;
vertical-align: middle;
}
/* ======================
MOBILE
====================== */
@media (max-width: 900px) {
.mecha-layout,
.mecha-layout tbody,
.mecha-layout tr,
.mecha-layout td {
display: block;
width: 100%;
}
}
/* Buttons row */
.mecha-buttons {
display: flex;
justify-content: center;
gap: 12px;
flex-wrap: wrap; /* wraps nicely on mobile */
margin-top: 18px;
}
/* Make the spans look like buttons */
.mecha-btn a {
display: inline-flex;
align-items: center;
gap: 8px;
background: var(--color-progressive);
color: #fff !important;
padding: 10px 14px;
border-radius: 10px;
text-decoration: none !important;
font-weight: 600;
line-height: 1;
}
.mecha-btn a:hover {
transform: translateY(-1px);
}
/* Icon sizing (external image) */
.mecha-btn img {
width: 18px;
height: 18px;
display: inline-block;
}