MediaWiki:Citizen.css

/* Fonts */
@font-face {
	/* Inter: SIL Open Font License 1.1
	 * https://github.com/rsms/inter/blob/v4.0/LICENSE.txt */
	font-family: "webfont-inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("https://static.1f616emo.xyz/Inter/InterVariable.woff2") format("woff2");
}

@font-face {
	/* Inter: SIL Open Font License 1.1
	 * https://github.com/rsms/inter/blob/v4.0/LICENSE.txt */
	font-family: "webfont-inter";
	font-style: italic;
	font-weight: 100 900;
	font-display: swap;
	src: url("https://static.1f616emo.xyz/Inter/InterVariable-Italic.woff2") format("woff2");
}

:root {
	--font-family-base: -apple-system, BlinkMacSystemFont, "SF Pro", webfont-inter, sans-serif;
	--font-family-serif: ui-serif, Georgia, serif;
	--font-family-monospace: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, "Cascadia Mono", monospace;
}

/* Colors */
:root,
:root.skin-theme-clientpref-os {
	--color-base: #000;
	--color-surface-0__s: 0%;
	--color-surface-0__l: 100%;
	--color-surface-1__s: 0%;
	--color-surface-1__l: 100%;
	--color-surface-2__s: 17%;
	--color-surface-2__l: 98%;
	--color-surface-3__s: 17%;
	--color-surface-3__l: 93%;
	--color-surface-4__s: 9%;
	--color-surface-4__l: 80%;
	--background-color-overlay: rgba(255 255 255 / 95%);
	--background-color-overlay-lighter: rgba(255 255 255 / 60%);
	--border-color-base: rgba(0 0 0 / 12.5%);
	--border-color-subtle: rgba(0 0 0 / 8%);
	--border-color-interactive: rgba(0 0 0 / 12.5%);
}

:root.skin-theme-clientpref-night {
	--color-base: #fff;
	--color-surface-0__s: 20%;
	--color-surface-0__l: 7%;
	--color-surface-1__s: 25%;
	--color-surface-1__l: 12%;
	--color-surface-2__s: 25%;
	--color-surface-2__l: 15%;
	--color-surface-3__s: 15%;
	--color-surface-3__l: 20%;
	--color-surface-4__s: 15%;
	--color-surface-4__l: 25%;
	--background-color-overlay: hsla(var(--color-primary__h) 20% 7% / 95%);
	--background-color-overlay-lighter: hsla(var(--color-primary__h) 20% 10% / 60%);
	--border-color-base: rgba(255 255 255 / 20%);
	--border-color-subtle: rgba(255 255 255 / 8%);
	--border-color-interactive: rgba(255 255 255 / 20%);
}

@media (prefers-color-scheme: dark) {
	:root.skin-theme-clientpref-os {
		--color-base: #fff;
		--color-surface-0__s: 20%;
		--color-surface-0__l: 7%;
		--color-surface-1__s: 25%;
		--color-surface-1__l: 12%;
		--color-surface-2__s: 25%;
		--color-surface-2__l: 15%;
		--color-surface-3__s: 15%;
		--color-surface-3__l: 20%;
		--color-surface-4__s: 15%;
		--color-surface-4__l: 25%;
		--background-color-overlay: hsla(var(--color-primary__h) 20% 7% / 95%);
		--background-color-overlay-lighter: hsla(var(--color-primary__h) 20% 10% / 60%);
		--border-color-base: rgba(255 255 255 / 20%);
		--border-color-subtle: rgba(255 255 255 / 8%);
		--border-color-interactive: rgba(255 255 255 / 20%);
	}
}

/* Wider default layout width */
:root {
	--width-layout: 1800px;
}

/* Font config for Inter */
html,
body {
	font-optical-sizing: auto;
}

/* tt and kbd */
tt,
kbd {
	padding: 2px 4px;
	color: var(--color-emphasized);
	background-color: var(--color-surface-2);
	border: var(--border-width-base) solid var(--border-color-base);
	border-radius: var(--border-radius-base);
}

kbd {
	font-family: inherit;
}

/* Logo */
img.mw-logo-wordmark {
	width: 270px;
	height: 46px;
}

.citizen-drawer__siteinfo {
	gap: var(--space-xxs);
}

.citizen-drawer__siteinfo img.mw-logo-wordmark {
	width: 223px;
	height: 38px;
	margin-top: 0;
	margin-bottom: -1px;
}

/* Custom footer icons */
#footer-icons a img {
	opacity: var(--opacity-icon-base);
	filter: var(--filter-invert);
	transition: var(--transition-hover);
	transition-property: opacity;
}

#footer-icons a:hover img {
	opacity: var(--opacity-icon-base--hover);
}

#footer-icons a:active img {
	opacity: var(--opacity-icon-base--active);
}

/* Page subtitle */
body.ns-2 div#siteSub {
	display: block;
}

/* Tables */
.wikitable {
	font-size: var(--font-size-x-small);
}

.wikitable th {
	text-align: center;
}

/* Match .wikitable--border */
.wikitable tr > th:not([hidden]),
.wikitable tr > td:not([hidden]) {
	border-left: var(--border-width-base) solid var(--border-color-base);
	border-right: var(--border-width-base) solid var(--border-color-base);
}

.wikitable tr > th:not([hidden]):first-child,
.wikitable tr > td:not([hidden]):first-child {
	border-left: 0;
}

.wikitable tr > th:not([hidden]):last-child,
.wikitable tr > td:not([hidden]):last-child {
	border-right: 0;
}

.wikitable code {
	font-size: 1em;
	word-break: normal;
}

/* Forms */
.mw-ui-button,
.oo-ui-buttonElement > .oo-ui-buttonElement-button,
.oo-ui-buttonElement-framed > .oo-ui-buttonElement-button {
	border-radius: var(--border-radius-medium);
}

.oo-ui-checkboxInputWidget [type="checkbox"] + span {
	border-radius: var(--border-radius-base);
}

/* Disable page loading bar */
.citizen-loading:after {
	display: none;
}

/* Disable hover zoom effect
 * This should use :is(), but CodeMirror thinks the code has syntax errors if it’s used */
.citizen-body a.image:hover:not(.lazy):not(.new) > img,
figure[typeof~="mw:File"] > a:first-child:hover:not(.lazy):not(.new) img,
figure[typeof~="mw:File/Frameless"] > a:first-child:hover:not(.lazy):not(.new) img,
figure[typeof~="mw:File/Thumb"] > a:first-child:hover:not(.lazy):not(.new) img,
figure[typeof~="mw:File/Frame"] > a:first-child:hover:not(.lazy):not(.new) img,
figure[typeof~="mw:File"] > a:first-child:hover:not(.lazy):not(.new) source,
figure[typeof~="mw:File/Frameless"] > a:first-child:hover:not(.lazy):not(.new) source,
figure[typeof~="mw:File/Thumb"] > a:first-child:hover:not(.lazy):not(.new) source,
figure[typeof~="mw:File/Frame"] > a:first-child:hover:not(.lazy):not(.new) source,
.fullImageLink > a:hover > img {
	transform: initial;
}

/* Sidebar icons */
.citizen-drawer__menu a:before {
	display: block;
	content: "";
	width: var(--size-icon);
	height: var(--size-icon);
	background: transparent center/contain no-repeat;
	opacity: var(--opacity-icon-base);
	filter: var(--filter-invert);
}

.citizen-drawer__menu .citizen-ui-icon {
	display: none;
}

.citizen-drawer__menu #n-mainpage-description a:before { background-image: url(/resources/lib/ooui/themes/wikimediaui/images/icons/home.svg); }
.citizen-drawer__menu #n-Ground-rules a:before         { background-image: url(/resources/lib/ooui/themes/wikimediaui/images/icons/article-ltr.svg); }
.citizen-drawer__menu #n-portal a:before               { background-image: url(/resources/lib/ooui/themes/wikimediaui/images/icons/userGroup-ltr.svg); }
.citizen-drawer__menu #n-recentchanges a:before        { background-image: url(/resources/lib/ooui/themes/wikimediaui/images/icons/recentChanges-ltr.svg); }
.citizen-drawer__menu #n-randompage a:before           { background-image: url(/resources/lib/ooui/themes/wikimediaui/images/icons/die.svg); }
.citizen-drawer__menu #n-help a:before                 { background-image: url(/resources/lib/ooui/themes/wikimediaui/images/icons/help-ltr.svg); }
.citizen-drawer__menu #n-Discord a:before              { background-image: url(/resources/applewiki/discord.svg); }
.citizen-drawer__menu #t-specialpages a:before         { background-image: url(/resources/lib/ooui/themes/wikimediaui/images/icons/specialPages-ltr.svg); }
.citizen-drawer__menu #t-upload a:before               { background-image: url(/resources/lib/ooui/themes/wikimediaui/images/icons/upload.svg); }

.citizen-drawer__menu #n-Devices a:before              { background-image: url(/resources/applewiki/iphone.svg); }
.citizen-drawer__menu #n-Filesystem a:before           { background-image: url(/resources/lib/ooui/themes/wikimediaui/images/icons/folderPlaceholder-ltr.svg); }
.citizen-drawer__menu #n-Firmware a:before             { background-image: url(/resources/lib/ooui/themes/wikimediaui/images/icons/download.svg); }
.citizen-drawer__menu #n-Firmware-Keys a:before        { background-image: url(/resources/lib/ooui/themes/wikimediaui/images/icons/key.svg); }
.citizen-drawer__menu #n-Jailbreak a:before            { background-image: url(/resources/lib/ooui/themes/wikimediaui/images/icons/unLock.svg); }
.citizen-drawer__menu #n-Protocols a:before            { background-image: url(/resources/lib/ooui/themes/wikimediaui/images/icons/pageSettings.svg); }
.citizen-drawer__menu #n-Timeline a:before             { background-image: url(/resources/lib/ooui/themes/wikimediaui/images/icons/history.svg); }

/* Icon invert helper class */
.skin-invert-image img,
.skin-invert {
	filter: var(--filter-invert);
}

.skin-invert .skin-invert,
.skin-invert .skin-invert-image img {
	filter: none;
}

/* Dock the footer to bottom of a short page */
.mw-body,
.parsoid-body {
	flex-grow: 1;
	min-height: auto;
}

/* Collapsible */
.mw-collapsible-toggle {
	display: grid;
	place-items: center;
	width: 40px;
	height: 31px;
	margin: -0.2em -0.3em -0.2em 0;
	padding: 0 !important;
	contain: strict;
}

.mw-collapsible-toggle:before {
	content: "";
	display: block;
	width: var(--font-size-small);
	height: var(--font-size-small);
	margin: auto;
	background: url(/resources/lib/ooui/themes/wikimediaui/images/icons/collapse.svg) center/contain no-repeat;
	opacity: var(--opacity-icon-base);
	filter: var(--filter-invert);
	transition: var(--transition-hover);
	transition-property: transform, opacity;
}

.mw-collapsible-toggle:hover:before {
	opacity: var(--opacity-icon-base--hover);
}

.mw-collapsible-toggle:active:before {
	opacity: var(--opacity-icon-base--active);
}

.mw-collapsible-toggle.mw-collapsible-toggle-collapsed:before {
	transform: rotate3d(1, 0, 0, 180deg);
}

.mw-collapsible-text,
.mw-collapsible-toggle:after {
	display: none;
}

.navbox table.mw-collapsible .mw-collapsible-toggle {
	width: 44px;
	height: calc(1.5em + 10px);
	margin: -5px -20px -5px 0;
}

.navbox table.mw-collapsible .mw-collapsible-toggle:before {
	position: relative;
	left: -4px;
}

.mw-warning-with-logexcerpt.mw-warning-with-logexcerpt.mw-warning-with-logexcerpt,
div.mw-lag-warn-high,
div.mw-cascadeprotectedwarning,
div#mw-protect-cascadeon {
  border-color:var(--border-color-warning);
  background-color:var(--background-color-warning-subtle);
}
/*
.mw-contributions-blocked-notice-partial .mw-warning-with-logexcerpt.mw-warning-with-logexcerpt {
  border-color:#fc3;
  background-color:#fef6e7
}*/

.mw-parser-output .infobox .infobox {
	box-shadow: unset;
}

body.action-edit .wikiEditor-ui-text {
	border-width: 0 1px;
}

body.action-edit .wikiEditor-ui-toolbar {
	border-width: 1px 0 0 1px;
}

.oo-ui-popupToolGroup.oo-ui-widget-enabled > .oo-ui-popupToolGroup-handle:active,
.oo-ui-popupToolGroup.oo-ui-widget-enabled.oo-ui-tool-active > .oo-ui-popupToolGroup-handle,
.oo-ui-popupToolGroup.oo-ui-widget-enabled.oo-ui-popupToolGroup-active > .oo-ui-popupToolGroup-handle {
	background-color: var(--background-color-button-quiet--active);
}

/* imeselector */

.imeselector-menu {
	filter: none;
}

/* Portable infobox */

.portable-infobox {
	border-color: var(--border-color-base);
	border-radius: var(--border-radius--medium);
	border-spacing: 0;
	box-shadow: var(--box-shadow-card);
	font-size: 0.875rem;
	
	--theme-page-background-color: var(--color-surface-2);
	--pi-border-color: var(--border-color-base);
	--pi-border: var(--border-color-base);
}

.portable-infobox .pi-section-navigation,
.portable-infobox .pi-media-collection-tabs {
	margin: 0;
}

.portable-infobox .pi-data {
	border-bottom: none;
}

.pi-group:first-of-type {
	border-top-style: solid;
	border-top-width: 1px;
}

.pi-group .pi-group {
	border: none;
}