MediaWiki:Citizen.css: Difference between revisions

Revision as of 14:11, 21 February 2026

/* =========================
   Mecha Comet Wiki Theme
   ========================= */


/* Layout */

.mecha-home {

max-width: 1200px;
margin: auto;
padding: 10px 20px 40px;

}

.mecha-hero {

text-align: center;
margin-top: 20px;

}


.mecha-logo {

width: 150px;
margin-bottom: 10px;

}


/* =========================
   Buttons
   ========================= */

.mecha-actions {

display: flex;
justify-content: center;
gap: 12px;
flex-wrap: wrap;
margin-top: 20px;

}

.mecha-action {

display: inline-flex;
align-items: center;
gap: 10px;

padding: 12px 18px;

border-radius: 12px;

font-weight: 600;

background: var(--color-progressive);

color: white !important;

text-decoration: none;

transition: 0.15s;

}

.mecha-action:hover {

transform: translateY(-2px);

}


/* ICON SYSTEM */

.mecha-action::before,
.mecha-i::before {

content: "";

width: 18px;
height: 18px;

background-color: currentColor;

mask-size: contain;
mask-repeat: no-repeat;
mask-position: center;

-webkit-mask-size: contain;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: center;

}


/* Button icons */

.mecha-action--discord::before {

mask-image: url("https://cdn.simpleicons.org/discord");
-webkit-mask-image: url("https://cdn.simpleicons.org/discord");

}

.mecha-action--matrix::before {

mask-image: url("https://cdn.simpleicons.org/matrix");
-webkit-mask-image: url("https://cdn.simpleicons.org/matrix");

}

.mecha-action--website::before {

mask-image: url("https://cdn.simpleicons.org/firefoxbrowser");
-webkit-mask-image: url("https://cdn.simpleicons.org/firefoxbrowser");

}

.mecha-action--forums::before {

mask-image: url("https://cdn.simpleicons.org/discourse");
-webkit-mask-image: url("https://cdn.simpleicons.org/discourse");

}


/* =========================
   Cards Layout
   ========================= */

.mecha-grid {

display: grid;

grid-template-columns: 1fr 1.5fr 1fr;

gap: 20px;

margin-top: 40px;

}


.mecha-card {

background: var(--color-surface-2);

border: 1px solid var(--color-border);

border-radius: 16px;

padding: 20px;

}


/* =========================
   Ecosystem icons
   ========================= */

.mecha-i {

display: flex;
align-items: center;
gap: 10px;

}


/* Ecosystem mask icons */

.mecha-i--linux::before {

mask-image: url("https://cdn.simpleicons.org/linux");
-webkit-mask-image: url("https://cdn.simpleicons.org/linux");

}

.mecha-i--flutter::before {

mask-image: url("https://cdn.simpleicons.org/flutter");
-webkit-mask-image: url("https://cdn.simpleicons.org/flutter");

}

.mecha-i--github::before {

mask-image: url("https://cdn.simpleicons.org/github");
-webkit-mask-image: url("https://cdn.simpleicons.org/github");

}

.mecha-i--arch::before {

mask-image: url("https://cdn.simpleicons.org/archlinux");
-webkit-mask-image: url("https://cdn.simpleicons.org/archlinux");

}


/* =========================
   Ecosystem Tiles
   ========================= */

.mecha-tiles {

display: grid;

grid-template-columns: 1fr 1fr;

gap: 12px;

margin-top: 15px;

}

.mecha-tile {

background: var(--color-surface-1);

border-radius: 12px;

padding: 14px;

border: 1px solid var(--color-border);

text-decoration: none;

}

.mecha-tile:hover {

background: var(--color-progressive-subtle);

}


/* =========================
   Stats
   ========================= */

.mecha-stats {

display: grid;

grid-template-columns: 1fr 1fr;

gap: 10px;

margin-top: 15px;

}

.mecha-stat {

background: var(--color-surface-1);

padding: 10px;

border-radius: 10px;

display: flex;
justify-content: space-between;

}


/* =========================
   Mobile
   ========================= */

@media (max-width: 900px) {

.mecha-grid {

grid-template-columns: 1fr;

}

.mecha-tiles {

grid-template-columns: 1fr;

}

}