MediaWiki:Citizen.css: Difference between revisions

Revision as of 06:45, 9 November 2025

/* All CSS here will be loaded for users of the Citizen skin */

:root {
	--color-progressive-oklch__h: 220;
	--font-family-citizen-base: sans-serif;
	--space-unit: 1.2em;
	--transform-image-hover: unset;
}

@font-face {
	font-family: 'Libre Caslon';
	src:
		url('resources/assets/Libre_Caslon_Text/LibreCaslonText-Regular.ttf');
}

.citizen-menu__heading, .mw-list-item {
	font-family: 'Libre Caslon';
}

h1, h2, h3 {
	font-family: 'Libre Caslon';
	font-weight: 400;
}

.mw-heading2 {
    border-bottom: 1px solid;
    border-image: linear-gradient(90deg, transparent 1.8em, var(--color-emphasized) 3.6em, transparent 90%) 30;
}

.mw-heading2 h2 {
    margin-left: calc(var(--space-unit) / 2);
    margin-bottom: calc(var(--space-unit) / 8);
}

.mw-heading3 .mw-editsection,
.mw-heading4 .mw-editsection {
    display: none;
}

.info-image.info-image figcaption,
.mw-default-size.mw-default-size figcaption {
    text-align: center;
    font-style: italic;
    padding-bottom: var(--space);
    font-family: 'Shippori Mincho';
}

.info-image,
.mw-default-size {
    display: flex;
    flex-direction: column;
    align-items: center;

    max-width: 360px;

    padding: calc(var(--space-unit) / 2);


    margin-bottom: calc(var(--space-unit) / 2);

    border: 2px solid;
    border-image: linear-gradient(90deg, var(--color-emphasized), transparent 30%, transparent 70%, var(--color-emphasized)) 30;

    background-image: repeating-conic-gradient(from 45deg at 50% 50%, var(--color-surface-3) 25% 50%, var(--color-surface-2) 50% 75%);

    background-clip: padding-box;
    background-size: 18px 18px;
    background-position: 50% 100%;
    box-sizing: border-box;
}

/* Moves notification area down. */
.mw-notification-area {
	margin-top: 6em;
}

/* Extension:Moderation adjustments. */
#mw-editing-your-version {
	color: var(--color-surface-0);
}

.citizen-menu__card-content .citizen-ui-icon {
	display: none;
}