/* ==UserStyle==
* Basic
@name               Pure PRTS.Wiki
@namespace          https://github.com/cworld1
@version            1.3.0
@description        Better experience of PRTS.Wiki
@author             CWorld (https://cworld0.com/)

* Project
@homepageURL        https://gist.github.com/cworld1/920d8fb313a61ec0fc24eb44dbe777d3
@homepageURL        https://greasyfork.org/en/scripts/567490-pure-prts
@license            GPL-3.0

* Var
@var          color    link "Link color"    #83b2ff
@var          color    fg "Font color"    #e9eff4
@var          color    bg "Background color"    #0B0B10
@downloadURL https://update.greasyfork.org/scripts/567490/Pure%20PRTSWiki.user.css
@updateURL https://update.greasyfork.org/scripts/567490/Pure%20PRTSWiki.meta.css
==/UserStyle== */
@-moz-document url-prefix("https://prts.wiki/w/") {
	/* Layout */
	div#MenuSidebar {
		top: 120px;
	}
	#content {
		margin-top: 100px;
	}

	/* Header */
	#mw-head {
		margin-top: -96px;
		& nav.vector-menu-tabs-legacy {
			& * {
				background: none;
			}
			& li.mw-list-item {
				padding: 0 2px;
				height: 36px;
				display: flex !important;
				align-items: center;
			}
			& a {
				padding: 0 10px;
				height: auto;
			}
		}
		& #p-cactions.vector-menu-dropdown {
			height: 36px;
			display: flex;
			align-items: center;
			& > .vector-menu-heading {
				padding: 0 10px;
			}
		}
		& #p-search.vector-search-box {
			margin: 0 3em 0 0;
			& > form {
				margin: 0;
				& .vector-search-box-input {
					height: 40px;
					padding-inline: 10px;
				}
				& #searchButton {
					box-sizing: content-box;
					padding-inline: 10px;
				}
			}
		}
	}
	/* Sidebar */
	#p-logo {
		height: auto;
		& > a {
			max-height: 100px;
			background-size: contain;
			width: inherit;
		}
	}
	/* Hightlight the selflink */
	a.mw-selflink {
		background: #fff80069;
	}

	/* Dark mode */
	@media (prefers-color-scheme: dark) {
		/* Backgroud */
		body {
			background-color: var(--bg) !important;
			&::before {
				height: 1080px;
				background: linear-gradient(transparent 30px, var(--bg) 180px);
			}
			& .mw-body {
				background: linear-gradient(#ffffff82, #ffffff61 80px) !important;
				border-color: #ffffff6e;
				border-top-width: 2px;
			}
		}
		/* Basic */
		ul {
			list-style-image: none;
		}
		/* Header */
		#mw-head {
			& nav.vector-menu-tabs-legacy li.mw-list-item {
				background: #6c6c6c6e;
				border-color: #ffffff61;
				& > a {
					color: var(--fg);
				}
				&.selected {
					background-color: #ffffffb0;
					& > a {
						color: #000000;
					}
				}
			}
			& #p-cactions.vector-menu-dropdown {
				background: #6c6c6c6e;
				border-color: #ffffff61;
				& > .vector-menu-heading {
					color: var(--fg);
					&::after {
						display: none;
					}
				}
			}
		}
		/* Content */
		.mw-body .mw-body-content > :where(.mw-content-ltr, .mw-category-generated):not(.flow-board-page) {
			/* Foreground */
			& :where(.mw-heading, h2, h3, h4, h5, h6) {
				color: #fff
			}
			& > *:not(div:not(.mw-references-wrap, .tabber *:not(tabber__panel div), #mw-pages), table, pre),
			& > #toc .tocnumber,
			& > .nomobile :where(.mp-operators, .mp-today, .mp-extranav, .mp-siteinfo) {
				color: var(--fg);
			}
			/* Link */
			& > :not(
				div.charinfo-container, div#rightToc, table.navbox,
			  & .nomobile:where(& > table.navbox, .cbox-autonarrow, .pathnav2)
			) a,
			& .toctogglelabel {
				color: var(--link);
			}
			/* Card */
			& > table:not(.navbox, & .mc-tooltips),
			& > #toc {
				background: #0000003d;
				color: var(--fg);
			}
		}
		/* Footer */
		.mw-footer {
			& a {
				color: var(--link);
			}
			& li {
				color: var(--fg);
			}
		}
	}
}
@-moz-document url-prefix("https://prts.wiki/w/") {
	/* Scene */
	.button_style {
		top: 18px;
	}
	/* hide unused button */
	#button_report.normal,
	#button_reset.right {
		transition: opacity 0.3s;
		opacity: 0;
	}
	#button_report.normal:hover,
	#button_reset.right:hover {
		opacity: 1;
	}
	/* lower highlight of other buttons */
	#button_playback_all.normal,
	#button_fullscreen,
	.button_style.right {
		transition: opacity 0.3s;
		opacity: 0.4;
	}
	#button_playback_all.normal:hover,
	#button_fullscreen:hover,
	.button_style.right:hover {
		opacity: 1;
	}

	/* left button */
	#button_playback_all.normal {
		left: 80px;
	}
	#button_report.normal {
		left: 130px;
	}
	/* right button */
	.button_style.right {
		width: 60px;
	}
	#button_auto.right {
		width: 90px;
	}
	#button_auto {
		right: 80px;
	}
	#button_reset {
		right: 180px;
	}
	/* move fullscreen mode button to right */
	#button_fullscreen.return {
		background-image: url(https://static.prts.wiki/assets/scenario/ui/ui_fullscreen.png);
		background-size: 30px 30px;
	}
	.button_style.left:not(.hidden) ~ #button_fullscreen {
		left: inherit;
		right: 40px;
		float: right;
		height: 20px;
		width: 20px;
		top: 23px;
		font-size: 9px;
		line-height: 2.2;
	}
	.button_style.left:not(.hidden) ~ #button_fullscreen.return::after {
		content: "Esc";
	}

	/* prove dialog style */
	.dialog_style.header {
		background-image: linear-gradient(rgba(0, 0, 0, .40) 10%, rgba(0, 0, 0, 0) 50%);
	}
	.dialog_style.footer {
		background-image: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, .7) 40%);
	}

	/* bigger size of log */
	.mw-content-ltr ul {
		margin-left: 0.7em;
	}
	.log_style {
		left: 0;
		width: 930px;
	}
	.log_style li > em,
	.log_style li > span {
		font-size: 18px;
	}
	.log_style li > em {
		width: 170px;
	}
	.log_style li > span {
		left: 190px;
		width: 730px;
	}
	/* bigger size of dialog */
	.dialog_style.footer > div.content {
		font-size: 20px;
		margin-top: 1px;
	}
	.log_style li {
		padding: 7px 0px;
		height: 22px;
	}
}