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
No edit summary
No edit summary
Line 1: Line 1:
/* TRUE Mecha-style cards for Citizen */
/* Mecha.so TRUE card recreation for Citizen */
/* Dark mode safe */
/* No site background changes */


.mecha-card {
.mecha-card {


     background: var(--color-surface-1);
     position: relative;
 
    border-radius: 18px;
 
    overflow: hidden;


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


     border-radius: 20px;
     background: transparent;
 
}
 
 
/* TOP SECTION */


    padding: 28px;
.mecha-card-top {


     margin: 18px 0;
     background: var(--color-surface-2);


     transition: all 0.18s cubic-bezier(.4,0,.2,1);
     padding: 24px;


}
}




/* Hover like mecha.so */
/* BOTTOM SECTION */


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


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


     border-color: var(--color-primary);
     padding: 14px 24px;


     transform: translateY(-3px);
     border-top: 1px solid var(--color-border-subtle);


}
}




/* Icon */
/* THE CUT TAB */


.mecha-card-icon img {
.mecha-card-bottom::before {


     width: 26px;
     content: "";


     margin-bottom: 14px;
     position: absolute;
 
    top: -12px;
 
    left: 40px;
 
    width: 80px;
 
    height: 24px;
 
    background: var(--color-surface-1);
 
    border-left: 1px solid var(--color-border-subtle);
 
    border-right: 1px solid var(--color-border-subtle);
 
    border-top: 1px solid var(--color-border-subtle);
 
    border-radius: 0 0 12px 12px;


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


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


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


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


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




/* GRID LAYOUT LIKE MECHA */
/* Bottom label */
 
.mecha-card-label {
 
    font-size: 13px;
 
    font-weight: 500;
 
}
 
 
/* Grid */


.mecha-grid {
.mecha-grid {
Line 74: Line 110:
     display: grid;
     display: grid;


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


     gap: 18px;
     gap: 18px;


}
}

Revision as of 13:29, 21 February 2026

/* Mecha.so TRUE card recreation for Citizen */

.mecha-card {

    position: relative;

    border-radius: 18px;

    overflow: hidden;

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

    background: transparent;

}


/* TOP SECTION */

.mecha-card-top {

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

    padding: 24px;

}


/* BOTTOM SECTION */

.mecha-card-bottom {

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

    padding: 14px 24px;

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

}


/* THE CUT TAB */

.mecha-card-bottom::before {

    content: "";

    position: absolute;

    top: -12px;

    left: 40px;

    width: 80px;

    height: 24px;

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

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

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

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

    border-radius: 0 0 12px 12px;

}


/* Title */

.mecha-card-title {

    font-size: 18px;

    font-weight: 600;

    margin-bottom: 6px;

}


/* Description */

.mecha-card-desc {

    font-size: 14px;

    color: var(--color-base-subtle);

}


/* Bottom label */

.mecha-card-label {

    font-size: 13px;

    font-weight: 500;

}


/* Grid */

.mecha-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

    gap: 18px;

}