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=Nunito&family=Saira&family=Saira+Condensed:wght@400;700&family=Saira+Extra+Condensed:wght@400;700&display=swap');

.mw-logo-wordmark {
    font-family: 'Saira Condensed','Nunito','Saira',system-ui,-apple-system,sans-serif;
}

.mw-logo-wordmark {
	height: auto !important;
}

.skin-citizen-dark .mw-logo-wordmark {
	filter: invert(0) !important;
}

.skin-citizen-dark .tabber__header__prev::after, .skin-citizen-dark .tabber__header__next::after {
	filter: invert(1) hue-rotate(180deg);
}

body, html {
	font-family: 'Nunito','Saira',system-ui,-apple-system,sans-serif;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Saira Condensed','Nunito','Saira',system-ui,-apple-system,sans-serif;
}

:root {
	--rarity-legendary: #f7bb2b;
	--rarity-epic: #df4d92;
	--rarity-rare: #2bb2d4;
	--rarity-common: #13c3a6;
	--rarity-none: #575757;
	--color-pill: #d21f3c;
}

@media screen and (prefers-color-scheme:dark) {
  :root.skin-theme-clientpref-os {
    --color-primary__h: 270;
	--color-primary__l: 56%;
	--color-surface-0: hsl(var(--color-primary__h),10.34%,11.37%);
	--color-surface-2: hsl(var(--color-primary__h),12%,14%);
	--background-color-overlay: hsla(var(--color-primary__h),10.34%,11.37%,0.95);
	--color-primary: #d21f3c;
	--color-primary--hover: #008FC6;
	--color-base: hsl(269, 0%, 92%);
	--color-base--subtle: #808080;
	--color-base--emphasized: #f1f2f4;
	--card-background: #161418;
	--color-button: #232026;
	--color-button--hover: #d21f3c;
	--color-secret: #14161f;
    color-scheme:dark
  }
  :root.skin-theme-clientpref-os a {
	--color-link: #52c1fa;
  }
}

:root.skin-citizen-dark {
	--color-primary__h: 270;
	--color-primary__l: 56%;
	--color-surface-0: hsl(var(--color-primary__h),10.34%,11.37%);
	--color-surface-2: hsl(var(--color-primary__h),12%,14%);
	--background-color-overlay: hsla(var(--color-primary__h),10.34%,11.37%,0.95);
	--color-primary: #d21f3c;
	--color-primary--hover: #008FC6;
	--color-base: hsl(269, 0%, 92%);
	--color-base--subtle: #808080;
	--color-base--emphasized: #f1f2f4;
	--card-background: #161418;
	--color-button: #232026;
	--color-button--hover: #d21f3c;
	--color-secret: #14161f;
}

:root.skin-citizen-dark a {
	--color-link: #52c1fa;
}

:root.skin-citizen-light {
	--card-background: #e1e1e1;
	--color-primary: #CA2256;
	--color-button: #d6d6d6;
	--color-button--hover: #f7bb2b;
	--color-secret: #F5F5ED;
}

.skin-citizen-light .template-vr-icon img {
	filter: invert(1);
}

.page-Main_Page .mw-body-header {
	display: none;
}

.page-Main_Page .catlinks {
	display: none;
}

.fullwidth {
	width: 100%;
	height: auto;
}


/* REMOVE ZOOM FROM IMAGE *TEMP* */
.citizen-body a.image:hover:not(.lazy):not(.new) > img {
    transform: scale(1.02);
}


.citizen-body a.image {
	border-radius: 6px;
}


/* 
	TABBER COLOURS FOR WEAPON PAGES *I HATE THIS, WILL CHANGE*
*/

[id*="tab-LEGENDARY-"][aria-selected="true"], [id*="tab-LEGENDARY-"][aria-selected="true"]:visited  {
	color: var(--rarity-legendary);
}

[id*="tab-EPIC-"][aria-selected="true"], [id*="tab-EPIC-"][aria-selected="true"]:visited  {
	color: var(--rarity-epic);
}

[id*="tab-RARE-"][aria-selected="true"], [id*="tab-RARE-"][aria-selected="true"]:visited  {
	color: var(--rarity-rare);
}

[id*="tab-COMMON-"][aria-selected="true"], [id*="tab-COMMON-"][aria-selected="true"]:visited  {
	color: var(--rarity-common);
}

.tabber__indicator {
	background-color: #f1f2f4;
}

.tabber__tab:hover {
	color: var(--color-primary--hover);
}