MediaWiki:Citizen.css: Difference between revisions

Revision as of 02:59, 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;
	
	--color-alt-oklch__h: 80;
}

/* Setting color variables */

@media (prefers-color-scheme: dark) {
	.skin-theme-clientpref-os {
		--color-alt-1: oklch(0.8 0.15 var(--color-alt-oklch__h));
		--color-alt-2: oklch(0.9 0.1 var(--color-alt-oklch__h));
		--color-alt-3: oklch(0.95 0.05 var(--color-alt-oklch__h));
		--color-absolute: #000
	}
}

@media (prefers-color-scheme: light) {
	.skin-theme-clientpref-os {
		--color-alt-1: oklch(0.5 0.15 var(--color-alt-oklch__h));
		--color-alt-2: oklch(0.4 0.1 var(--color-alt-oklch__h));
		--color-alt-3: oklch(0.3 0.05 var(--color-alt-oklch__h));
		--color-absolute: #fff
	}
}

.skin-theme-clientpref-night {
	--color-alt-1: oklch(0.8 0.15 var(--color-alt-oklch__h));
	--color-alt-2: oklch(0.9 0.1 var(--color-alt-oklch__h));
	--color-alt-3: oklch(0.95 0.05 var(--color-alt-oklch__h));
	--color-absolute: #000
}

.skin-theme-clientpref-day {
	--color-alt-1: oklch(0.5 0.15 var(--color-alt-oklch__h));
	--color-alt-2: oklch(0.4 0.1 var(--color-alt-oklch__h));
	--color-alt-3: oklch(0.3 0.05 var(--color-alt-oklch__h));
	--color-absolute: #fff
}

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

.citizen-page-container {
	background: var(--color-absolute);
}

.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(--color-emphasized), transparent 30%, transparent 70%, var(--color-emphasized)) 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;
}


/* Table of Contents changes */

#mw-panel-toc-list {
	border-left: none;
}

.citizen-toc-content {
	display: flex;
	flex-direction: row;
}

.citizen-toc-indicator {
	display: none;
}

.citizen-toc-list-item--active > .citizen-toc-link .citizen-toc-content::before {
        background-image: url(resources/assets/cursor-right.svg);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: bottom;
        content: '';
        width: 1rem;
        flex-shrink: 0;
        margin-right: var(--space-xxs);
        margin-left: calc(var(--space-xxs) * -1);
}

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