MediaWiki:Citizen.css
MediaWiki interface page
More actions
Note: After publishing, you may have to bypass your browser's cache to see the changes.
- Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
- Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
- Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.
/* ======================
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%;
}
}