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)
Internet Explorer / Edge: Hold Ctrl while clicking Refresh, or press Ctrl-F5
Opera: Press Ctrl-F5.
/* All CSS here will be loaded for users of the Citizen skin */
/* @import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,700;1,400;1,700'); */
/* latin */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v30/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/roboto/v30/KFOkCnqEu92Fr1Mu51xIIzI.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 600;
  src: url(https://fonts.gstatic.com/s/roboto/v30/KFOlCnqEu92Fr1MmWUlfBBc4.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Roboto';
  font-style: italic;
  font-weight: 600;
  src: url(https://fonts.gstatic.com/s/roboto/v30/KFOjCnqEu92Fr1Mu51TzBic6CsQ.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* @import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,400;0,700;1,400;1,700'); */
/* latin */
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/notosans/v27/o-0IIpQlx3QUlC5A4PNr5TRA.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Noto Sans';
  font-style: italic;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/notosans/v27/o-0OIpQlx3QUlC5A4PNr4ARCQ_k.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Noto Sans';
  font-style: normal;
  font-weight: 600;
  src: url(https://fonts.gstatic.com/s/notosans/v27/o-0NIpQlx3QUlC5A4PNjXhFVZNyB.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Noto Sans';
  font-style: italic;
  font-weight: 600;
  src: url(https://fonts.gstatic.com/s/notosans/v27/o-0TIpQlx3QUlC5A4PNr4Az5ZuyDzW0.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Font */
.mw-header, .mw-body-header, .mw-body-content h1, .mw-body-content h2, .portable-infobox .pi-title, .portable-infobox .pi-header, .infobox .infobox-above, .infobox .infobox-header, .mw-footer {
	font-family: 'Noto Sans','Roboto',system-ui,-apple-system,sans-serif;
}
body {
	font-synthesis: initial;
}

/* Page background */
body::before { display: none; }
body.page-NU_carnival_Wiki::before { display: block; }
body.page-NU_carnival_Wiki main div { z-index: 1; }
footer { position: relative; }

/* Wordmark */
.mw-footer .mw-logo-wordmark {
	height: 2rem;
	width: auto;
	filter: none !important;
}
.skin-citizen-dark .mw-footer .mw-logo-wordmark {
	filter: invert(1) hue-rotate(180deg) !important;
}

/* Heading */
.mw-body-content h1, .mw-body-content h2 { border-bottom: 1px solid var(--border-color-base); }
.client-js .section-heading { user-select: auto; }
.citizen-sections-enabled .section-indicator { margin-right: 6px; } 

/* Message box */
.mw-message-box { border: 1px solid var(--color-base); margin-bottom: 1em; }
.mw-message-box- { background-color: var(--color-surface-2); }
.mw-message-box-error {	border-color: var(--color-error); }
.mw-message-box-warning { border-color: var(--color-warning); }
.mw-message-box-success { border-color: var(--color-success); }
#siteNotice { max-width: calc( var(--width-layout) + var(--width-toc) ); margin: auto; }
.mw-message-box.Scroll { border-color: var(--border-color-base); }

/* Gallery */
.thumbcaption { font-size: 0.8125rem; }
.mw-gallery-nolines .gallerybox .thumb {
	background-color: var(--color-surface-2) !important;
}
.mw-gallery-nolines img {
	border-radius: var(--border-radius--small);
}
@media screen {
	a.image:hover:not(.lazy):not(.new) > img, .fullImageLink a:hover > img {
		filter: brightness(1.1);
		transform: none !important;
	}
	.fullImageLink a:hover > img {
		background: url(/w/resources/src/mediawiki.action/images/checker.svg?ff513) repeat !important;
	}
}

/* Table */
table.wikitable > tr > th, table.wikitable > * > tr > th {
	text-align: center;
	padding: var(--space-xs) 0 var(--space-xs) 0;
	background-color: var(--color-surface-3);
	color: var(--color-base--emphasized);
}
table.wikitable tr > th:nth-last-child(n+2), table.wikitable > * > tr > th:nth-last-child(n+2) {
	border-right: 1px solid var(--border-color-base);
}
table.wikitable tr td {
	padding: var(--space-xs);
}
table.wikitable tr td table:not(.wikitable) tr:hover {
	background-color: inherit;
}
table.wikitable tr td table:not(.wikitable) tr td {
	padding: inherit;
}
table.wikitable caption { padding: 0; }
td > p:last-child, td > ul:last-child, td > ol:last-child {
  margin-bottom: 0;
}

/* HotCat */
.catlinks .mw-normal-catlinks { font-size: 0.8125rem; }
.catlinks .mw-normal-catlinks > a { display: inline; }
.catlinks .mw-normal-catlinks > ul li a, .catlinks .mw-hidden-catlinks > ul li a {
	margin: 0 -2px;
	border: 1px solid var(--border-color-base--darker);
	border-radius: 0;
	border-top-left-radius: 100px;
	border-bottom-left-radius: 100px;
}
.catlinks .mw-normal-catlinks > ul li a:last-child, .catlinks .mw-hidden-catlinks > ul li a:last-child {
	border-top-right-radius: 100px;
	border-bottom-right-radius: 100px;
}
.catlinks li { display: inline-flex; }
.catlinks .hotcatlink {
	white-space: nowrap;
	margin: calc( var(--space-xs) + 1px) 3px;
}
.catlinks .hotcatlink a {
	padding: calc( var(--space-xs) + 1px) 3px !important;
	border-top-left-radius: 0 !important;
	border-bottom-left-radius: 0 !important;
}
.catlinks .hotcatlink a:only-child {
	border-top-left-radius: 100px !important;
	border-bottom-left-radius: 100px !important;
}
.catlinks .hotcatlink a:hover {
	background-color: var(--color-primary--hover);
	color: #fff;
}
.catlinks .hotcatinput { top: var(--space-xs); }
.catlinks .hotcatinput input[type=text] { width: 200px; }

/* Actions */
.section-heading--collapsed .mw-editsection { display: none; }
#p-views { padding-left: 10px; }
#p-views #ca-edit { order: inherit; }
.page-actions__card a { width: 105% }
.page-actions__card { overflow-x: hidden; }

/* Hide actions icons and show text on mobile */
@media only screen and (max-width:576px) {
	.page-actions > .mw-portlet li > a { font-size: 0.75rem; padding: 0.5rem; }
	.page-actions > .mw-portlet li > a span { display: none; }
	.page-actions > .mw-portlet li > a::before { display: none; }
}

/* Sidebar */
.citizen-drawer__card { overflow-x: hidden; }
.citizen-drawer__menu {
	width: fit-content;
	font-size: 0.85rem;
	grid-template-columns: repeat(auto-fit, 14rem);
}

#n-contents > a::before, #n-aboutsite > a::before, #n-newpage > a::before, #n-upload > a::before, #n-portal > a::before {
	display: block;
	content: 'icon';
	width: 16px;
	color: transparent;
	opacity: 0.6;
	background-size: contain;
	background-repeat: no-repeat;
}
.skin-citizen-dark #n-contents > a::before, .skin-citizen-dark #n-aboutsite > a::before, .skin-citizen-dark #n-newpage > a::before, .skin-citizen-dark #n-upload > a::before, .skin-citizen-dark #n-portal > a::before {
	filter: invert(1) hue-rotate(180deg) !important;
}
#n-contents > a::before {
	background-image: url(/w/load.php?modules=skins.citizen.icons.wmui&image=article&format=rasterized&lang=en&skin=citizen&version=imtxr);
	background-image: linear-gradient(transparent,transparent),url(/w/load.php?modules=skins.citizen.icons.wmui&image=article&format=original&lang=en&skin=citizen&version=imtxr);
}
#n-aboutsite > a::before {
	background-image: url(/w/load.php?modules=skins.citizen.icons.wmui&image=infoFilled&format=rasterized&lang=en&skin=citizen&version=imtxr);
	background-image: linear-gradient(transparent,transparent),url(/w/load.php?modules=skins.citizen.icons.wmui&image=infoFilled&format=original&lang=en&skin=citizen&version=imtxr);
}
#n-newpage > a::before {
	background-image: url(/w/load.php?modules=skins.citizen.icons.wmui&image=edit&format=rasterized&skin=citizen&version=imtxr);
	background-image: linear-gradient(transparent,transparent),url(/w/load.php?modules=skins.citizen.icons.wmui&image=edit&format=original&skin=citizen&version=imtxr);
}
#n-upload > a::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ctitle%3E upload %3C/title%3E%3Cpath d='M17 12v5H3v-5H1v5a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-5z'/%3E%3Cpath d='M10 1 5 7h4v8h2V7h4z'/%3E%3C/svg%3E%0A");
	background-image: linear-gradient(transparent,transparent),url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Ctitle%3E upload %3C/title%3E%3Cpath d='M17 12v5H3v-5H1v5a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-5z'/%3E%3Cpath d='M10 1 5 7h4v8h2V7h4z'/%3E%3C/svg%3E%0A");
}
#n-portal > a::before {
	background-image: url(/w/load.php?modules=skins.citizen.icons.wmui&image=speechBubbles&format=rasterized&lang=en&skin=citizen&version=imtxr);
	background-image: linear-gradient(transparent,transparent),url(/w/load.php?modules=skins.citizen.icons.wmui&image=speechBubbles&format=original&lang=en&skin=citizen&version=imtxr);
}

#ca-masseditregex > a::before, #t-editcount > a::before {
	display: block;
	content: 'icon';
	width: 20px;
	color: transparent;
	opacity: 0.6;
	background-size: contain;
	background-repeat: no-repeat;
}
.skin-citizen-dark #ca-masseditregex > a::before, .skin-citizen-dark #t-editcount > a::before {
	filter: invert(1) hue-rotate(180deg) !important;
}
#ca-masseditregex > a::before {
	background-image: url(/w/load.php?modules=skins.citizen.icons.wmui&image=recentChanges&format=rasterized&lang=en&skin=citizen&version=imtxr);
	background-image: linear-gradient(transparent,transparent),url(/w/load.php?modules=skins.citizen.icons.wmui&image=recentChanges&format=original&lang=en&skin=citizen&version=imtxr);
}
#t-editcount > a::before {
	background-image: url(/w/load.php?modules=skins.citizen.icons.wmui&image=userContributions&format=rasterized&lang=en&skin=citizen&version=imtxr);
	background-image: linear-gradient(transparent,transparent),url(/w/load.php?modules=skins.citizen.icons.wmui&image=userContributions&format=original&lang=en&skin=citizen&version=imtxr);
}
#p-managewiki-sidebar-header a span { display: none; }

/* Search box */
.citizen-typeahead__item .citizen-typeahead__title { display: block; }
.citizen-typeahead__item .citizen-typeahead__thumbnail { background-position: top; }
.mwe-popups .mwe-popups-thumbnail { object-position: top; }

/* TOC */
.citizen-toc__text {
	display: block !important;
}
.citizen-toc-level--1 .citizen-toc__text {
	color: var(--color-primary);
}
.citizen-toc-level--2 .citizen-toc__text, .citizen-toc-level--3 .citizen-toc__text, .citizen-toc-level--4 .citizen-toc__text, .citizen-toc-level--5 .citizen-toc__text, .citizen-toc-level--6 .citizen-toc__text {
	color: inherit
}
.citizen-toc a {
	padding-left: 12px;
}
.citizen-toc-level--2, .citizen-toc-level--3, .citizen-toc-level--4, .citizen-toc-level--5, .citizen-toc-level--6 {
	margin-left: 12px !important;
}
.citizen-toc li.haschildren > a::after {
	content: '+/-';
	font-size: 14px;
	color: transparent;
	background-image: url(/w/load.php?modules=skins.citizen.icons.wmui&image=collapse&format=original&skin=citizen&version=imtxr);
	background-size: 12px;
	background-repeat: no-repeat;
	background-position: center;
	position: absolute; 
	float: left;
	margin-left: -15px;
	transition: transform 250ms;
	transform: rotate3d(0,0,1,180deg);
}
.citizen-toc li.haschildren.collapsed > a::after {
	transform: rotate3d(0,0,1,90deg);
}
.skin-citizen-dark .citizen-toc li.haschildren > a::after {
	filter: invert(1) hue-rotate(180deg) !important;
}
@media screen and (max-width: 999px) {
	.mw-body-header { z-index: 11 !important; }
	.client-js #citizen-toc__checkbox:checked ~ #citizen-toc__buttonCheckbox {
	  background-color: var(--background-color-primary--active);
	  box-shadow: var(--box-shadow-dialog);
	  pointer-events: auto;
	  transform: scale(1);
	}
	.client-js #citizen-toc__checkbox:checked ~ #citizen-toc__buttonCheckbox .citizen-ui-icon {
	  display: block;
	}
}
@media screen and (min-width: 1300px) {
	.citizen-toc { background-color: var(--color-surface-2); }
}

/* Navbox */
.navbox, .navbox-subgroup {
	background-color: var(--color-surface-1);
}
.navbox-list {
	border-color: var(--color-surface-1);
}
tr + tr > .navbox-abovebelow, tr + tr > .navbox-group, tr + tr > .navbox-image, tr + tr > .navbox-list {    /* Borders above 2nd, 3rd, etc. rows */
	border-top: 2px solid var(--color-surface-1);
}
.navbox th, .navbox-title {
	background-color: var(--color-surface-4);      /* Level 1 color */
}
.navbox-abovebelow, th.navbox-group, .navbox-subgroup .navbox-title {
	background-color: var(--color-surface-3);      /* Level 2 color */
}
.navbox-subgroup .navbox-group, .navbox-subgroup .navbox-abovebelow {
	background-color: var(--color-surface-2);      /* Level 3 color */
}
.navbox-even {
	background-color: var(--color-surface-2);      /* Even row striping */
}

/* Infobox */
.infobox {
	border: none;
	background: var(--color-surface-2);
	color: var(--color-base);
	box-shadow: var(--box-shadow-card);
}
.infobox caption, .infobox .infobox-above, .infobox .infobox-header {
	color: var(--color-base--emphasized);
}
.infobox .infobox-header {
	background: var(--color-surface-3);
}
.infobox.bordered td, .infobox.bordered th {
	border: 1px solid var(--border-color-base);
}

/* Media player */
.oo-ui-windowManager-modal > .oo-ui-dialog { z-index: 99; }
.mw-tmh-player.audio .mw-tmh-play {	background-color: var(--color-link); background-position: left; }

/* Dark mode fix */
.skin-citizen-dark .tocnumber::after, .skin-citizen-dark .mwe-math-element { filter: invert(1); }
.skin-citizen-dark #msupload-list .file-name-input { background: var(--background-color-input); }
.skin-citizen-dark .ui-state-default { background: var(--background-color-input); }
.skin-citizen-dark #siteNotice { color: var(--color-surface-4); }
.skin-citizen-dark .oo-ui-textInputWidget.oo-ui-widget-enabled .oo-ui-inputWidget-input[readonly]:not(.oo-ui-pendingElement-pending) { background-color: var(--color-surface---active); }

/* Remove external link icons */
.plainlinks a.external::after { display: none; }

/* Emphasized */
.emphasized { color: var(--color-base--emphasized); }

/* Footer */
#footer-places ul {
	flex-direction: row;
	margin-top: 20px;
}

/* Scroll fix */
html { scroll-padding-top: calc(var(--header-size) + var( --space-md )); }

#pagehistory ul { margin-bottom: 0; }
.wikiEditor-ui .wikiEditor-ui-top::before {
	right: calc( var(--padding-page) * -0.5 );
	left: calc( var(--padding-page) * -0.5 );
}

:root { --width-layout: 960px; }