Warframe Wiki - sticky search and ToC by jerekorva

/* ==UserStyle==
@name           Warframe wiki
@namespace      userstyles.world
@version        0.0.10
@description    the official Warframe wiki
@author         jerekorva
==/UserStyle== */
@-moz-document domain("wiki.warframe.com") {
	:root {
		--search-box: #061219;
		--body-main: #0e171d;
		--wikitable-bg: var(--lotus-blue-darker);
		--wikitable-border: var(--lotus-blue-dark);		
		--right-margin: 15rem;
		--top-margin: 2.5rem;
		--lighter-gray: #f0f0f0;
		--infobox-bg1: #212121;
		--infobox-bg2: #161616;
		--table-bg1: #031725;
		--table-bg2: #01101a;
		--lighttable-bg-hover: var(--lotus-blue-dark);
		--lighttable-bg-active: var(--lotus-blue);
		--lighttable-link-color: var(--lighter-gray);
		--thumb-caption-bg: var(--lotus-blue-darker);
		--thumb-bg: var(--lotus-blue-darker);
	}

	body {
		background: linear-gradient(var(--lotus-blue-darker) 60%, var(--almost-black));
		background-attachment: fixed;
	}

	#content {		
		background: linear-gradient(var(--table-bg1), var(--almost-black));
		background-attachment: fixed;

		margin-left: var(--right-margin);
		margin-right: 0 !important;
		border: 2px solid var(--lotus-blue-dark);
		border-top: 0;
		border-right: 0;
		padding: 0;
		font-size: 1em;
	}

	/* article's title */
	#content h1 {
		padding: 0;
		margin: 0;
		margin-left: 1rem;
		position: relative;
		z-index: 100;
		border: 0;
		width: 25em;		
		height: 3rem;
		font-size: 2.2rem;
	}

	#content h2 {
		border-bottom: 1px solid var(--lotus-blue);
	}
	#bodyContent {
		padding-top: 1.5rem !important;
		padding-left: 1.5rem !important;
		padding-right: 1rem !important;
		padding-bottom: 2rem !important;
	}
	.vector-body {
		margin: 0 !important;
		padding: 0 !important;
	}

	/* content area margin for stuff */
	.mw-parser-output > :is(p, ul:not(.gallery), h2, .template-quote-table) {
		margin-right: 25% !important;		
	}

	/* main page header/title */
	.page-WARFRAME_Wiki #firstHeading {
		display: block;		
	}
	#mainpage-box-top {
		margin-top: 1rem;
	}


	/* left side navigaiton and logo hidden */
	#mw-panel nav,
	#mw-panel #p-logo {
		display: none;
	}
	/* show the left side navi only at the main page */
	.page-WARFRAME_Wiki > #mw-navigation > #mw-panel > nav {
		display: block;
	}
	
	
	/* some empty space at top */
	#mw-page-base,
	#mw-head-base {
		display: none;
	}

	/* main navi header destroy !!! */
	#mw-panel {
		padding: 0 !important;
		margin: 0 !important;
		margin-top: 0.5em !important;
		font: 1.2rem 'Roboto', sans-serif;
	}
	/* left navigation header */
	div#mw-panel .vector-menu-portal .vector-menu-heading {
		font-weight: normal;
		display: inline;
		justify-content: normal;
		background: none;
		text-transform: none;
		clip-path: none;
	}
	div#mw-panel .vector-menu-portal .vector-menu-content {
		background: none;
		padding: 0;
		margin: 0;
		box-shadow: none;
	}
	div#mw-panel .vector-menu-portal .vector-menu-heading .vector-menu-heading-label {
		display: inline-block;
		position: relative;
		right: auto;
	}
	div#mw-panel .vector-menu-portal .vector-menu-content ul {
		padding-top: 0
	}

	.vector-legacy-sidebar .vector-menu-portal {
		margin: 0;
		padding: 0;
	}

	/* top header bg and border */
	#mw-head {
		height: 3em;
		border-bottom: 2px solid var(--lotus-blue-dark);
		background: linear-gradient(to right, var(--lotus-blue-darker), #000);
		
	}
	/* page | discussion */
	#mw-head #left-navigation {
		margin-top: 0;
		float: right !important;
	}
	#mw-head #left-navigation .mw-list-item {
		position: relative;
		top: calc(var(--top-margin) - 0.7rem - 1px);
		transform: none;
		font-size: 1.1rem;
		border: 1px solid var(--lotus-blue);
		border-bottom: 2px solid var(--lotus-blue-dark);
		height: 1.2rem;
	}
	/* login, preferences, etc. */
	#p-personal {
		background: none;
		border-radius: 0;
		opacity: 0.2;
	}
	#p-personal:hover {
		opacity: 1;
	}

	#mw-head #right-navigation {
		margin-top: 0;
		padding: 0;
		position: relative;
		right: 30rem;
	}
	/*remove 'more' text from the edit dropdown*/
	nav #p-cactions-label span {
		display: none;
	}

	.vector-menu-dropdown .vector-menu-heading {
		background-color: transparent;
		padding: 0;
		font-size: 1.1em;
	}
	/* edit dropdown menu icon */
	.vector-menu-dropdown .vector-menu-heading::after {
		background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBMaWNlbnNlOiBNSVQuIE1hZGUgYnkgZWxlbWVudC1wbHVzOiBodHRwczovL2dpdGh1Yi5jb20vZWxlbWVudC1wbHVzL2VsZW1lbnQtcGx1cy1pY29ucyAtLT4KPHN2ZyB3aWR0aD0iODAwcHgiIGhlaWdodD0iODAwcHgiIHZpZXdCb3g9IjAgMCAxMDI0IDEwMjQiIGNsYXNzPSJpY29uIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciPjxwYXRoIGZpbGw9IiM0NzhjYWYiIGQ9Ik04MzIgNTEyYTMyIDMyIDAgMTE2NCAwdjM1MmEzMiAzMiAwIDAxLTMyIDMySDE2MGEzMiAzMiAwIDAxLTMyLTMyVjE2MGEzMiAzMiAwIDAxMzItMzJoMzUyYTMyIDMyIDAgMDEwIDY0SDE5MnY2NDBoNjQwVjUxMnoiLz48cGF0aCBmaWxsPSIjNDc4Y2FmIiBkPSJNNDY5Ljk1MiA1NTQuMjRsNTIuOC03LjU1Mkw4NDcuMTA0IDIyMi40YTMyIDMyIDAgMTAtNDUuMjQ4LTQ1LjI0OEw0NzcuNDQgNTAxLjQ0bC03LjU1MiA1Mi44em00MjIuNC00MjIuNGE5NiA5NiAwIDAxMCAxMzUuODA4bC0zMzEuODQgMzMxLjg0YTMyIDMyIDAgMDEtMTguMTEyIDkuMDg4TDQzNi44IDYyMy42OGEzMiAzMiAwIDAxLTM2LjIyNC0zNi4yMjRsMTUuMTA0LTEwNS42YTMyIDMyIDAgMDE5LjAyNC0xOC4xMTJsMzMxLjkwNC0zMzEuODRhOTYgOTYgMCAwMTEzNS43NDQgMHoiLz48L3N2Zz4=");
		filter: invert(0);
	}
	/*edit button background */
	.vector-menu-tabs ul li:not(.selected):hover,
	#p-cactions:hover #p-cactions-label {
		background: none;
	}

	/*hide the edit related buttons*/
	#right-navigation nav {
		display: none;
	}
	/* hide animation from edit dropdown menu*/
	#p-views > .vector-menu-content > .vector-menu-content-list > li:not(#ca-watch):not(#ca-unwatch) {
		display: none;
	}
	#p-views {
		transform: none;
	}

	#mw-head #right-navigation nav:not(.mw-portlet-cactions) .mw-list-item {
		transform: none;
		background: transparent;
		box-shadow: none;
		border-left: 0;
		left: 0.5rem
	}

	.vector-menu-tabs-legacy li a {
		height: 100%;
		color: var(--vector-tab-link-color);
	}

	/* dropdown menu more */
	#p-cactions {
		transform: none;
	}


	#p-namespaces .vector-menu-content-list li:first-child {
		clip-path: none;
	}
	#p-namespaces .vector-menu-content-list li:first-child a {
		padding-left: 10px;
	}
	#mw-head #left-navigation .mw-list-item > a > span {
		transform: none;
	}
	#p-namespaces .vector-menu-content-list li:last-child {
		border-right: 1px solid var(--lotus-blue) !important;
	}

	/* various skews -> away */
	#mainpage-box-content .mainpage-box-content-nav .home-nav,
	#mainpage-box-content .mainpage-box-content-nav .home-nav span,
	.mainpage-box-top .platformversion,
	.mainpage-box-top .platformversion > span,
	.vector-menu-tabs #ca-watch.icon a::before,
	.vector-menu-tabs #ca-watch.icon a:hover::before,
	.vector-menu-tabs #ca-watch.icon a:focus::before,
	.vector-menu-tabs #ca-unwatch.icon a::before,
	.vector-menu-tabs #ca-unwatch.icon a:hover::before,
	.vector-menu-tabs #ca-unwatch.icon a:focus::before,
	#p-cactions-label::after,
	#p-cactions-label span,
	.mw-portlet-cactions,
	#ca-nstab-main,
	#p-cactions > .vector-menu-content,
	#p-cactions-label > span,
	#p-cactions-label::after {
		transform: none !important;
	}

	.mw-portlet-cactions {
		margin-right: 0;
		border-left: none;
	}
	#p-cactions #p-cactions-label {
		padding-right: 0;
	}


	/* needed for the search popup to be on top */
	#mw-head {
		z-index: 99;
	}

	/* search box */
	#searchform {
		border-right: 2px solid var(--lotus-blue-light);
		border-bottom: 2px solid var(--lotus-blue-light);
		/*border-radius: 0px 0px 5px 0px;*/
	}
	#p-search input {
		height: calc(var(--top-margin) + 0.5rem);
		font-size: 1.1em;
		letter-spacing: 0.05em;
		border: none !important;
	}
	#p-search {
		border: 0 !important;
		top: 0px;
		position: fixed;
		left: 0px;
		width: calc(var(--right-margin) + 2px);
	}

	/* search list popup*/
	.vector-search-box-vue .cdx-menu {
		position: fixed;
		top: var(--top-margin);
		width: calc(var(--right-margin) * 1.5);
		background: var(--lotus-blue-darker);
		border: 2px solid var(--lotus-blue);
		left: 0px;
		border-radius: 0px 5px 5px 5px;
	}

	/* hilighted search */
	.vector-search-box-vue .cdx-menu .cdx-menu-item--enabled.cdx-menu-item--highlighted {
		background: var(--lotus-blue);
	}

	/* table */
	table.foundrytable td {
		text-align: center;
		padding: 0.1em;
	}
	table.foundrytable th {
		background: var(--lotus-blue-dark);
		border: 1px solid var(--lotus-blue-dark) !important;
		padding: 1px;
	}
	/* foundrytable - with multiple parts */
	.foundrytable tbody tr td:nth-child(1)[colspan="6"] {
		background: var(--lotus-blue-dark);
	}

	table.article-table th,
	table.emodtable th,
	table.wikitable th,
	table.bigmodtable th {
		background: var(--lotus-blue-dark);
		border-right: 1px solid var(--lotus-blue-darker);
	}
	table.article-table th:nth-last-child(1),
	table.emodtable th:nth-last-child(1),
	table.wikitable th:nth-last-child(1) {
		border-right: 1px solid var(--lotus-blue-dark);
	}
	table.article-table tr:nth-child(odd),
	table.wikitable tr:nth-child(odd),
	table.emodtable tr:nth-child(odd),
	table.foundrytable tr td:nth-child(odd),
	table.listtable tr:nth-child(odd) {
		background: var(--table-bg1);
	}
	table.article-table tr:nth-child(even),
	table.wikitable tr:nth-child(even),
	table.emodtable tr:nth-child(even),
	table.foundrytable tr td:nth-child(even),
	table.listtable tr:nth-child(even) {
		background: var(--table-bg2);
	}
	table.lighttable .highlight-on {
		background-color: var(--lighttable-bg-active) !important;
	}
	table.lighttable .highlight-over {
		background-color: var(--lighttable-bg-hover) !important;		
	}
	
	
	/* current circuit rotation */
	.wikitable td[bgcolor="#777"],
	table tr[bgcolor="#777"] {
		background-color: var(--lotus-blue-dark);
		color: var(--lighter-gray);
		
	}
	.wikitable td[bgcolor="#777"] a {
		color: var(--lighter-gray);
	}
		

	td.resultingStat {
		background: var(--lotus-blue-dark);
	}


	.navbox {
		background: transparent;
	}

	.navboxhead > a,
	.navboxfooter > a,
	.tabberlive > .tabbernav > li > a {
		color: var(--templat...