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.
/* =========================
MECHA COMET FULL THEME
========================= */
/* PAGE WIDTH FIX */
.mw-body {
max-width: 1400px !important;
margin: auto !important;
}
/* HERO */
.mecha-home {
text-align: center;
}
.mecha-hero {
margin-top: 20px;
margin-bottom: 40px;
}
.mecha-logo {
margin-bottom: 10px;
}
.mecha-subtitle {
color: var(--color-base-subtle);
margin-top: 6px;
margin-bottom: 20px;
font-size: 16px;
}
/* BUTTONS */
.mecha-buttons {
display: flex;
justify-content: center;
gap: 14px;
flex-wrap: wrap;
}
.mecha-btn {
background: var(--color-progressive);
color: white !important;
padding: 10px 18px;
border-radius: 10px;
font-weight: 600;
text-decoration: none !important;
display: inline-block;
}
.mecha-btn:hover {
transform: translateY(-2px);
}
/* MAIN GRID */
.mecha-layout {
width: 100%;
border-spacing: 24px;
border-collapse: separate;
table-layout: fixed;
}
.mecha-layout td {
vertical-align: top;
padding: 0;
}
/* COLUMN WIDTHS */
.mecha-layout td:nth-child(1),
.mecha-layout td:nth-child(3) {
width: 25%;
}
.mecha-layout td:nth-child(2) {
width: 50%;
}
/* CARDS */
.mecha-card {
background: var(--color-surface-2);
border: 1px solid var(--color-border);
border-radius: 16px;
padding: 20px;
height: 100%;
}
/* ECOSYSTEM GRID */
.mecha-grid {
width: 100%;
border-spacing: 14px;
}
.mecha-grid td {
background: var(--color-surface-1);
padding: 16px;
border-radius: 10px;
text-align: center;
font-weight: 600;
}
.mecha-grid td:hover {
background: var(--color-progressive-subtle);
cursor: pointer;
}
/* MOBILE */
@media (max-width: 900px) {
.mecha-layout,
.mecha-layout tbody,
.mecha-layout tr,
.mecha-layout td {
display: block;
width: 100% !important;
}
.mecha-card {
margin-bottom: 20px;
}
.mecha-buttons {
flex-direction: column;
align-items: center;
}
}