MediaWiki:Citizen.css: Difference between revisions
MediaWiki interface page
More actions
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
/* | /* ====================== | ||
FULL WIDTH FIX | |||
====================== */ | |||
.mw-body { | |||
max-width: 1400px !important; | |||
margin: 0 auto; | |||
margin: auto | |||
} | } | ||
/* | /* remove extra top spacing */ | ||
.mecha-hero { | .mecha-hero { | ||
margin-top: 10px; | |||
margin-bottom: 30px; | |||
text-align: center; | text-align: center; | ||
} | |||
/* ====================== | |||
HERO LOGO | |||
====================== */ | |||
.mecha-logo { | .mecha-logo { | ||
| Line 33: | Line 32: | ||
width: 140px; | width: 140px; | ||
margin-bottom: | margin-bottom: 10px; | ||
} | } | ||
/* ====================== | |||
HERO BUTTONS | |||
====================== */ | |||
.mecha-buttons { | |||
margin-top: 20px; | |||
margin- | |||
} | } | ||
.mecha- | .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 { | .mecha-card { | ||
background: var(--color-surface-2); | background: var(--color-surface-2); | ||
border-radius: 16px; | border-radius: 16px; | ||
| Line 121: | Line 105: | ||
padding: 20px; | padding: 20px; | ||
border: 1px solid var(--color-border); | |||
} | } | ||
/* ====================== | |||
/* | |||
ECOSYSTEM GRID | ECOSYSTEM GRID | ||
====================== */ | |||
.mecha-grid { | .mecha-grid { | ||
| Line 174: | Line 119: | ||
border-spacing: 14px; | border-spacing: 14px; | ||
} | } | ||
| Line 182: | Line 125: | ||
background: var(--color-surface-1); | background: var(--color-surface-1); | ||
border-radius: 12px; | border-radius: 12px; | ||
| Line 189: | Line 130: | ||
padding: 16px; | padding: 16px; | ||
transition: 0.15s; | |||
transition: | |||
} | } | ||
.mecha-grid td:hover { | .mecha-grid td:hover { | ||
background: var(--color-progressive-subtle); | background: var(--color-progressive-subtle); | ||
transform: translateY(-2px); | transform: translateY(-2px); | ||
} | } | ||
/* ecosystem icon */ | |||
.mecha-ecosystem-icon { | |||
width: 22px; | |||
margin-right: 8px; | |||
vertical-align: middle; | |||
} | } | ||
/* ====================== | |||
MOBILE | |||
====================== */ | |||
@media (max-width: 900px) { | |||
@media (max-width: | |||
.mecha-layout, | .mecha-layout, | ||
| Line 271: | Line 168: | ||
display: block; | display: block; | ||
width: 100%; | |||
width: 100% | |||
} | } | ||
} | } | ||
Revision as of 13:56, 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%;
}
}