MediaWiki:Citizen.css

Note: After publishing, you may have to bypass your browser's cache to see the changes.

Firefox / Safari: Hold Shift while clicking Reload, or press either Ctrl-F5 or Ctrl-R (⌘-R on a Mac)
Google Chrome: Press Ctrl-Shift-R (⌘-Shift-R on a Mac)
Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5.

/* 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);

    transform: translateY(-2px);

}


/* 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);

}


/* Optional icon */

.mecha-card-icon {

    margin-bottom: 10px;

    opacity: 0.85;

}