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.

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

}