MediaWiki:Vector-2022.css

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans:ital,wght@0,100..900;1,100..900&display=swap');

@media screen {
	html,
	body, 
	.mw-editsection, 
	.mw-editsection-like, 
	.mw-body h1,
	.mw-body-content h1,
	.mw-body-content h2,
	.vector-sticky-header-context-bar-primary {
		font-family: "Noto Sans", sans-serif;
	}

	.mw-header {
		padding-top: 16px;
	}
	
	.vector-user-menu-create-account, .vector-user-menu-login {
		display: none;
	}
	

	#pt-userpage-2 {
		overflow: hidden;
		text-overflow: ellipsis;
	}

	
	@media (prefers-color-scheme: dark) {
		body {
			background-color: #111111;
			color: white;
			
			--blue: #5e9aee;
			--purple: #a67eff;
			
			--seperator-color: #ffffff20;
			--seperator: 1px solid var(--seperator-color);
		}
		
		.mw-page-container {
			background-color: transparent;
		}
		
		.mw-logo {
			color: white !important
		}
		
		a,
		.vector-menu-tabs .mw-list-item a,
		#pt-userpage-2 a,
		#pt-userpage-2,
		.vector-menu-portal .vector-menu-content li a,
		.sidebar-toc .sidebar-toc-link,
		.vector-toc-collapse-button:hover,
		.vector-toc-uncollapse-button:hover,
		.vector-toc-collapse-button,
		.vector-toc-uncollapse-button,
		.mw-parser-output a.extiw,
		.mw-parser-output a.external {
			color: var(--blue);
		}
		
		a:visited,
		.vector-menu-portal .vector-menu-content li a:visited,
		.mw-parser-output a.extiw:visited,
		.mw-parser-output a.external:visited {
			color: var(--purple);
		}
		
		.vector-menu-portal .vector-menu-heading,
		.vector-menu-tabs .mw-list-item.selected a,
  .vector-menu-tabs .mw-list-item.selected a:visited {
    		color: white;
		}
		
		.oo-ui-popupWidget-popup {
			background-color: #1e1e1e;
			border: var(--seperator);
			border-radius: 0.5rem;
		}
		
		.mw-sidebar, .sidebar-toc {
			background-color: #1e1e1e;
			padding: 1rem 1.25rem;
			border-radius: 0.5rem;
			font-size: 0.875rem;
			display: flex;
			flex-direction: column;
			gap: 1rem;
		}
		
		.sidebar-toc, .mw-sidebar, .sidebar-toc, .sidebar-toc::after {
			margin: 0;
		}
		
		.vector-menu-portal .vector-menu-heading {
			border: none;
			font-weight: 500;
		}
		
		.vector-menu-portal,
		.vector-menu-portal .vector-menu-content,
		.vector-menu-portal .vector-menu-heading,
		.sidebar-toc .sidebar-toc-header {
			margin: 0;
			padding: 0;
		}
		
		.sidebar-toc .sidebar-toc-list-item-active > .sidebar-toc-link {
			color: white;
		}
		
		.sidebar-toc .sidebar-toc-toggle {
			position: absolute;
			top: 0;
			left: unset;
			right: 0;
		}
		
		#vector-toc-collapsed-button,
		#vector-toc-collapsed-button:hover,
		#vector-toc-collapsed-button:active {
			background-color: transparent;
			user-select: none;
		}
		
		@media (max-width: 999px) {
			.mw-table-of-contents-container .sidebar-toc {
				top: 4rem;
				border: var(--seperator);
				width: 280px;
			}
		}
		
		.sidebar-toc .sidebar-toc-list-item a,
		.sidebar-toc .sidebar-toc-title,
		.vector-menu-portal .vector-menu-content li,
		.vector-menu-portal .vector-menu-heading {
			font-size: inherit;
		}
		
		.vector-menu-portal .vector-menu-content ul {
			padding: 0;
			display: flex;
			flex-direction: column;
			gap: 0.3rem;
		}
		
		.vector-menu-portal .vector-menu-content li {
			padding: 0;
		}
		
		.mw-portlet {
			display: flex;
			flex-direction: column;
			gap: 1rem;
		}
		
		.mw-sidebar-action,
		.vector-toc-not-collapsed .sidebar-toc::after {
			display: none;
		}
		
		.mw-footer {
			border-top: var(--seperator);
		}
		
		.mw-footer li {
			color: #f6f6f6;
		}
		
		.mw-ui-icon {
			filter: invert(1);
		}
	
		
		.vector-sticky-header {
			background-color: #0b0b0b;
			border-bottom: var(--seperator);
			max-width: none !important;
		}
		
		.vector-sticky-header-context-bar {
			border-left: var(--seperator);
		}
		
		.sidebar-toc .sidebar-toc-title {
			color: white;
		}
		
		h1, h2, h3, h4, h5, h6 {
			color: white;
			font-weight: 500;
		}
		
		h1,
		h2, 
		.mw-article-toolbar-container {
			border-bottom: var(--seperator);
		}
		
		.mw-editsection-divider,
		.client-js .mw-content-ltr .mw-editsection-bracket:first-of-type,
		.client-js .mw-content-rtl .mw-editsection-bracket:not(:first-of-type),
		.client-js .mw-content-rtl .mw-editsection-bracket:first-of-type,
		.client-js .mw-content-ltr .mw-editsection-bracket:not(:first-of-type){
			color: var(--seperator-color);
		}
		
		ul {
			list-style-image: none;
		}
		
		/*
			excluding 'pre' blocks, because re-styling syntax
			highlighting to support dark mode is a nightmare.
		*/  
		code,
		.mw-code {
			background-color: #272727;
			color: white;
			border: none;
		}
		
		.catlinks {
			background-color: #000011;
		}
		
		.oo-ui-toolbar-bar, .oo-ui-labelElement-label,.oo-ui-iconElement-icon .oo-ui-icon-textStyle {
			color: #858585;
			background-color: #000011
		}
		
  .wikitable > tr > th, .wikitable > tr > td, .wikitable > * > tr > th, .wikitable > * > tr > td {
    border: var(--seperator);
    padding: 0.4em 1em;
  }
  .wikitable > tr > th, .wikitable > * > tr > th {
    background-color: transparent;
    text-align: left;
    color: white;
  }
  .wikitable {
    background-color: #0e0e0e;
    color: white;
    border: var(--seperator);
  }
	}
}