Toggle menu
4
4
2
384
MechaWiki
Toggle preferences menu
Toggle personal menu
Not logged in
Your IP address will be publicly visible if you make any edits.

MediaWiki:Citizen.css: Difference between revisions

MediaWiki interface page
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:
/* All CSS here will be loaded for users of the Citizen skin */
/* TRUE Mecha-style cards for Citizen */
/* Mecha-style cards for Citizen theme */
/* Dark mode safe */
/* Dark mode compatible */
/* No site background changes */
/* Does NOT change background */


.mecha-card {
.mecha-card {


     background: var(--color-surface-2);
     background: var(--color-surface-1);
     border: 1px solid var(--color-border-subtle);
 
     border: 1px solid var(--color-border);


     border-radius: 16px;
     border-radius: 20px;


     padding: 20px;
     padding: 28px;


     margin: 16px 0;
     margin: 18px 0;


     transition: all 0.15s ease;
     transition: all 0.18s cubic-bezier(.4,0,.2,1);


}
}




/* Hover effect like mecha.so */
/* Hover like mecha.so */


.mecha-card:hover {
.mecha-card:hover {


     background: var(--color-surface-3);
     background: var(--color-surface-2);
 
    border-color: var(--color-primary);
 
    transform: translateY(-3px);
 
}
 
 
/* Icon */
 
.mecha-card-icon img {


     transform: translateY(-2px);
     width: 26px;
 
    margin-bottom: 14px;


}
}
Line 35: Line 48:
.mecha-card-title {
.mecha-card-title {


     font-size: 18px;
     font-size: 20px;


     font-weight: 600;
     font-weight: 600;
Line 48: Line 61:
.mecha-card-desc {
.mecha-card-desc {


     font-size: 14px;
     font-size: 15px;


     color: var(--color-base-subtle);
     color: var(--color-base-subtle);
Line 55: Line 68:




/* Optional icon */
/* GRID LAYOUT LIKE MECHA */
 
.mecha-grid {


.mecha-card-icon {
    display: grid;


     margin-bottom: 10px;
     grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));


     opacity: 0.85;
     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;

}