MediaWiki:Citizen.css: Difference between revisions
MediaWiki interface page
More actions
No edit summary |
No edit summary |
||
| Line 1: | Line 1: | ||
/* ========================= | /* ========================= | ||
MECHA ICON FIXED VERSION | |||
========================= */ | ========================= */ | ||
/* | /* HERO */ | ||
.mecha-home { | .mecha-home { | ||
max-width: 1200px; | max-width:1200px; | ||
margin: auto; | margin:auto; | ||
padding: 10px 20px 40px; | padding:10px 20px 40px; | ||
} | } | ||
| Line 16: | Line 16: | ||
.mecha-hero { | .mecha-hero { | ||
text-align: center; | text-align:center; | ||
margin-top: 20px; | margin-top:20px; | ||
} | } | ||
.mecha-logo { | .mecha-logo { | ||
width: 150px; | width:150px; | ||
margin-bottom: 10px; | margin-bottom:10px; | ||
} | } | ||
/* | /* BUTTONS */ | ||
.mecha-actions { | .mecha-actions { | ||
display: flex; | display:flex; | ||
justify-content: center; | justify-content:center; | ||
gap: 12px; | gap:12px; | ||
flex-wrap: wrap; | flex-wrap:wrap; | ||
margin-top: 20px; | margin-top:20px; | ||
} | } | ||
| Line 46: | Line 43: | ||
.mecha-action { | .mecha-action { | ||
display: inline-flex; | display:inline-flex; | ||
align-items: center; | align-items:center; | ||
gap: 10px | gap:10px; | ||
padding:12px 18px; | |||
border-radius:12px; | |||
font-weight:600; | |||
background:var(--color-progressive); | |||
color:white !important; | |||
text-decoration:none; | |||
} | } | ||
/* | /* BUTTON ICONS */ | ||
.mecha-action::before { | |||
content:""; | |||
width:18px; | |||
height:18px; | |||
background-size:contain; | |||
background-repeat:no-repeat; | |||
filter:invert(1); | |||
} | } | ||
/* | /* individual icons */ | ||
.mecha-action--discord::before { | .mecha-action--discord::before { | ||
background-image:url("https://cdn.simpleicons.org/discord"); | |||
} | } | ||
| Line 107: | Line 89: | ||
.mecha-action--matrix::before { | .mecha-action--matrix::before { | ||
background-image:url("https://cdn.simpleicons.org/matrix"); | |||
} | } | ||
| Line 114: | Line 95: | ||
.mecha-action--website::before { | .mecha-action--website::before { | ||
background-image:url("https://cdn.simpleicons.org/firefoxbrowser"); | |||
} | } | ||
| Line 121: | Line 101: | ||
.mecha-action--forums::before { | .mecha-action--forums::before { | ||
background-image:url("https://cdn.simpleicons.org/discourse"); | |||
} | } | ||
/* ========================= | /* ========================= | ||
ECOSYSTEM ICONS | |||
========================= */ | ========================= */ | ||
.mecha- | .mecha-i::before { | ||
content:""; | |||
width:18px; | |||
height:18px; | |||
background-size:contain; | |||
background-repeat:no-repeat; | |||
margin-right:8px; | |||
filter:var(--mecha-icon-filter); | |||
} | } | ||
/* auto dark/light */ | |||
:root { | |||
--mecha-icon-filter:invert(0); | |||
} | } | ||
.skin-theme-clientpref-night { | |||
--mecha-icon-filter:invert(1); | |||
} | } | ||
/* | /* ecosystem icons */ | ||
.mecha-i--linux::before { | .mecha-i--linux::before { | ||
background-image:url("https://cdn.simpleicons.org/linux"); | |||
} | } | ||
| Line 181: | Line 153: | ||
.mecha-i--flutter::before { | .mecha-i--flutter::before { | ||
background-image:url("https://cdn.simpleicons.org/flutter"); | |||
} | } | ||
| Line 188: | Line 159: | ||
.mecha-i--github::before { | .mecha-i--github::before { | ||
background-image:url("https://cdn.simpleicons.org/github"); | |||
} | } | ||
| Line 195: | Line 165: | ||
.mecha-i--arch::before { | .mecha-i--arch::before { | ||
background-image:url("https://cdn.simpleicons.org/archlinux"); | |||
} | } | ||
/* ========================= | /* ========================= | ||
CARDS | |||
========================= */ | ========================= */ | ||
.mecha- | .mecha-grid { | ||
display: grid; | display:grid; | ||
grid-template-columns:1fr 1.5fr 1fr; | |||
grid-template-columns: 1fr 1fr; | gap:20px; | ||
margin-top:40px; | |||
gap: | |||
margin-top: | |||
} | } | ||
.mecha- | .mecha-card { | ||
background: var(--color-surface- | background:var(--color-surface-2); | ||
border-radius:16px; | |||
padding:20px; | |||
border:1px solid var(--color-border); | |||
} | } | ||
| Line 269: | Line 198: | ||
/* ========================= | /* ========================= | ||
MOBILE | |||
========================= */ | ========================= */ | ||
@media (max-width: 900px) { | @media(max-width:900px){ | ||
.mecha- | .mecha-grid{ | ||
grid-template-columns: 1fr; | grid-template-columns:1fr; | ||
} | } | ||
} | } | ||
Revision as of 14:12, 21 February 2026
/* =========================
MECHA ICON FIXED VERSION
========================= */
/* HERO */
.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;
}
/* BUTTON ICONS */
.mecha-action::before {
content:"";
width:18px;
height:18px;
background-size:contain;
background-repeat:no-repeat;
filter:invert(1);
}
/* individual icons */
.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");
}
/* =========================
ECOSYSTEM ICONS
========================= */
.mecha-i::before {
content:"";
width:18px;
height:18px;
background-size:contain;
background-repeat:no-repeat;
margin-right:8px;
filter:var(--mecha-icon-filter);
}
/* auto dark/light */
:root {
--mecha-icon-filter:invert(0);
}
.skin-theme-clientpref-night {
--mecha-icon-filter:invert(1);
}
/* ecosystem icons */
.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--github::before {
background-image:url("https://cdn.simpleicons.org/github");
}
.mecha-i--arch::before {
background-image:url("https://cdn.simpleicons.org/archlinux");
}
/* =========================
CARDS
========================= */
.mecha-grid {
display:grid;
grid-template-columns:1fr 1.5fr 1fr;
gap:20px;
margin-top:40px;
}
.mecha-card {
background:var(--color-surface-2);
border-radius:16px;
padding:20px;
border:1px solid var(--color-border);
}
/* =========================
MOBILE
========================= */
@media(max-width:900px){
.mecha-grid{
grid-template-columns:1fr;
}
}