MediaWiki:Citizen.css: Difference between revisions
MediaWiki interface page
More actions
Created page with "→All CSS here will be loaded for users of the Citizen skin: →Mecha-style cards for Citizen theme: →Dark mode compatible: →Does NOT change background: .mecha-card { background: var(--color-surface-2); border: 1px solid var(--color-border-subtle); border-radius: 16px; padding: 20px; margin: 16px 0; transition: all 0.15s ease; } →Hover effect like mecha.so: .mecha-card:hover { background: var(--color-surface-3);..." |
No edit summary |
||
| Line 1: | Line 1: | ||
/* | /* TRUE Mecha-style cards for Citizen */ | ||
/* Dark mode safe */ | |||
/* Dark mode | /* No site background changes */ | ||
/* | |||
.mecha-card { | .mecha-card { | ||
background: var(--color-surface- | background: var(--color-surface-1); | ||
border: 1px solid var(--color-border | |||
border: 1px solid var(--color-border); | |||
border-radius: | border-radius: 20px; | ||
padding: | padding: 28px; | ||
margin: | margin: 18px 0; | ||
transition: all 0. | transition: all 0.18s cubic-bezier(.4,0,.2,1); | ||
} | } | ||
/* Hover | /* Hover like mecha.so */ | ||
.mecha-card:hover { | .mecha-card:hover { | ||
background: var(--color-surface- | background: var(--color-surface-2); | ||
border-color: var(--color-primary); | |||
transform: translateY(-3px); | |||
} | |||
/* Icon */ | |||
.mecha-card-icon img { | |||
width: 26px; | |||
margin-bottom: 14px; | |||
} | } | ||
| Line 35: | Line 48: | ||
.mecha-card-title { | .mecha-card-title { | ||
font-size: | font-size: 20px; | ||
font-weight: 600; | font-weight: 600; | ||
| Line 48: | Line 61: | ||
.mecha-card-desc { | .mecha-card-desc { | ||
font-size: | font-size: 15px; | ||
color: var(--color-base-subtle); | color: var(--color-base-subtle); | ||
| Line 55: | Line 68: | ||
/* | /* GRID LAYOUT LIKE MECHA */ | ||
.mecha-grid { | |||
display: grid; | |||
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); | |||
gap: 18px; | |||
} | } | ||
Revision as of 13:28, 21 February 2026
/* TRUE Mecha-style cards for Citizen */
/* Dark mode safe */
/* No site background changes */
.mecha-card {
background: var(--color-surface-1);
border: 1px solid var(--color-border);
border-radius: 20px;
padding: 28px;
margin: 18px 0;
transition: all 0.18s cubic-bezier(.4,0,.2,1);
}
/* Hover like mecha.so */
.mecha-card:hover {
background: var(--color-surface-2);
border-color: var(--color-primary);
transform: translateY(-3px);
}
/* Icon */
.mecha-card-icon img {
width: 26px;
margin-bottom: 14px;
}
/* Title */
.mecha-card-title {
font-size: 20px;
font-weight: 600;
margin-bottom: 6px;
}
/* Description */
.mecha-card-desc {
font-size: 15px;
color: var(--color-base-subtle);
}
/* GRID LAYOUT LIKE MECHA */
.mecha-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
gap: 18px;
}