MediaWiki:Citizen.css: Difference between revisions

Revision as of 01:43, 10 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.2rem;
	--transform-image-hover: unset;
	--border-radius-base: 0;
	
	--gold: oklch(0.8 0.15 85);
}

@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';
}

.citizen-menu__heading {
	margin-left: calc(var(--space-unit));
}

/* Page headings */

.citizen-page-header-inner {
	/*border-bottom: 3px solid var(--color-base);*/
	padding-bottom: 0;
}

#firstHeading {
	padding-bottom: calc(var(--space-unit) / 8);
}

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;
}

/* Image customisations. */

.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;

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

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

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

    background-image: repeating-conic-gradient(from 45deg at 50% 50%, transparent 25% 50%, var(--color-surface-3) 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);
}

/* Hides the UI icons from specific menus */
.citizen-menu__card-content .citizen-ui-icon {
	display: none;
}

/* Hides the short description */
#siteSub {
	display: none;
}

/* Adjusts the lower logo and wordmark */
#footer-sitetitle {
	flex-direction: row;
	align-items: center;
}

#footer-sitetitle .mw-logo-wordmark {
	height: 2.4rem;
}