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 HOMEPAGE — CORE LAYOUT + BRANDING
========================================= */
/* Logo — base */
.mecha-logo{
width:200px;
height:auto;
display:block;
margin:0 auto;
transition:filter .15s ease;
}
/* Logo — dark mode */
.skin-theme-clientpref-night .mecha-logo{
filter:invert(1) brightness(2);
}
/* Remove MediaWiki image frame */
.mecha-logo.mw-file-element{
border:none!important;
padding:0!important;
background:none!important;
}
/* Remove link tinting */
.mecha-logoLink img{
border:none!important;
}
/* Page container */
.mecha-home{
max-width:1200px;
margin:0 auto;
padding:12px 18px 34px;
}
/* Hero section */
.mecha-hero{
text-align:center;
margin:6px 0 14px;
padding:0;
}
/* Logo link wrapper */
.mecha-logoLink{
display:inline-flex;
justify-content:center;
align-items:center;
margin:0 0 6px;
}
/* Title */
.mecha-title{
margin:8px 0 6px;
padding:0;
font-size:34px;
font-weight:800;
letter-spacing:-.02em;
}
/* Subtitle */
.mecha-subtitle{
margin:0;
color:var(--color-base-subtle);
font-size:16px;
}
/* =========================================
HERO ACTION BUTTONS
========================================= */
.mecha-actions{
display:flex;
justify-content:center;
gap:14px;
flex-wrap:wrap;
margin:16px 0 0;
padding:0;
}
.mecha-action{
display:inline-flex;
align-items:center;
gap:10px;
padding:11px 16px;
border-radius:12px;
background:var(--color-progressive);
color:#fff!important;
font-weight:700;
text-decoration:none!important;
transition:transform .14s ease,box-shadow .14s ease;
}
.mecha-action:hover{
transform:translateY(-2px);
box-shadow:0 10px 22px rgba(0,0,0,.10);
}
/* Hero button icons — always white */
.mecha-action::before{
content:"";
width:18px;
height:18px;
background-size:contain;
background-repeat:no-repeat;
background-position:center;
filter:brightness(0) invert(1);
}
.mecha-action--discord::before{background-image:url("https://cdn.simpleicons.org/discord");}
.mecha-action--matrix::before{background-image:url("https://cdn.simpleicons.org/matrix");}
.mecha-action--website::before{background-image:url("https://cdn.simpleicons.org/firefoxbrowser");}
.mecha-action--forums::before{background-image:url("https://cdn.simpleicons.org/discourse");}
/* =========================================
GRID + CARD SYSTEM
========================================= */
.mecha-grid{
display:grid;
grid-template-columns:1fr 1.45fr 1fr;
gap:22px;
margin-top:26px;
align-items:start;
}
.mecha-card{
background:var(--color-surface-2);
border:1px solid var(--color-border);
border-radius:18px;
padding:18px;
}
.mecha-cardTitle{
margin:0;
font-size:20px;
font-weight:800;
}
.mecha-cardDesc{
margin:8px 0 0;
color:var(--color-base-subtle);
font-size:14px;
}
/* =========================================
LIST ITEMS
========================================= */
.mecha-list{
margin-top:14px;
display:grid;
gap:10px;
}
.mecha-listItem{
background:var(--color-surface-1);
border:1px solid var(--color-border);
border-radius:12px;
padding:12px;
text-decoration:none!important;
font-weight:650;
display:flex;
align-items:center;
gap:10px;
}
.mecha-listItem:hover{
background:var(--color-progressive-subtle);
border-color:var(--color-progressive);
}
/* =========================================
ECOSYSTEM TILES
========================================= */
.mecha-ecosystem{
margin-top:14px;
display:grid;
grid-template-columns:repeat(2,minmax(0,1fr));
gap:12px;
}
.mecha-tile{
background:var(--color-surface-1);
border:1px solid var(--color-border);
border-radius:14px;
padding:14px;
text-decoration:none!important;
display:flex;
flex-direction:column;
gap:6px;
min-height:80px;
}
.mecha-tile:hover{
background:var(--color-progressive-subtle);
border-color:var(--color-progressive);
transform:translateY(-1px);
}
.mecha-tileTitle{font-weight:800;}
.mecha-tileDesc{
color:var(--color-base-subtle);
font-size:13px;
}
/* =========================================
STATS
========================================= */
.mecha-stats{
margin-top:14px;
display:grid;
grid-template-columns:1fr 1fr;
gap:10px;
}
.mecha-stat{
background:var(--color-surface-1);
border:1px solid var(--color-border);
border-radius:12px;
padding:10px 12px;
display:flex;
justify-content:space-between;
align-items:center;
}
.mecha-stat span{
color:var(--color-base-subtle);
font-size:13px;
}
.mecha-stat b{
font-size:14px;
}
/* =========================================
ICON SYSTEM — MONOCHROME + DARK MODE
========================================= */
.mecha-i::before{
content:"";
width:18px;
height:18px;
background-size:contain;
background-repeat:no-repeat;
background-position:center;
display:inline-block;
flex:0 0 auto;
filter:brightness(0);
}
/* Dark mode icon inversion */
.skin-theme-clientpref-night .mecha-i::before{
filter:brightness(0) invert(1);
}
/* Icon sources */
.mecha-i--rocket::before{background-image:url("https://cdn.jsdelivr.net/npm/@tabler/icons@latest/icons/outline/rocket.svg");}
.mecha-i--code::before{background-image:url("https://cdn.jsdelivr.net/npm/@tabler/icons@latest/icons/outline/code.svg");}
.mecha-i--book::before{background-image:url("https://cdn.jsdelivr.net/npm/@tabler/icons@latest/icons/outline/book.svg");}
.mecha-i--chip::before{background-image:url("https://cdn.jsdelivr.net/npm/@tabler/icons@latest/icons/outline/cpu.svg");}
.mecha-i--puzzle::before{background-image:url("https://cdn.jsdelivr.net/npm/@tabler/icons@latest/icons/outline/puzzle.svg");}
.mecha-i--linux::before{background-image:url("https://cdn.simpleicons.org/linux");}
.mecha-i--flutter::before{background-image:url("https://cdn.simpleicons.org/flutter");}
.mecha-i--box::before{background-image:url("https://cdn.simpleicons.org/docker");}
.mecha-i--github::before{background-image:url("https://cdn.simpleicons.org/github");}
.mecha-i--arch::before{background-image:url("https://cdn.simpleicons.org/archlinux");}
.mecha-i--discord::before{background-image:url("https://cdn.simpleicons.org/discord");}
.mecha-i--matrix::before{background-image:url("https://cdn.simpleicons.org/matrix");}
/* =========================================
MOBILE
========================================= */
@media(max-width:980px){
.mecha-grid{grid-template-columns:1fr;}
.mecha-ecosystem{grid-template-columns:1fr;}
}
@media(max-width:650px){
.mecha-title{font-size:24px;}
.mecha-action{width:100%;justify-content:center;}
.mecha-home{padding:10px 12px 26px;}
}
/* =========================================
KICKSTARTER BANNER
========================================= */
.mecha-kickstarter{
border:1px solid #05ce78;
background:linear-gradient(135deg,rgba(5,206,120,.12),rgba(5,206,120,.04));
}
.mecha-kickstarter-inner{
display:flex;
justify-content:space-between;
align-items:center;
gap:14px;
}
.mecha-kickstarter-button{
background:#05ce78;
color:#000!important;
padding:10px 16px;
border-radius:10px;
font-weight:bold;
text-decoration:none;
}