/* For SamToki.github.io */
/* Released under GNU GPL v3 open source license. */
/* © 2023 SAM TOKI STUDIO */

/* This is a theme variant, so only colors along with few things are configured. */

/* General */
	/* Basics */
		/* Overall */
		#Html {
			color: #FFFFFF; accent-color: #D090F0;
		}

		/* Group frameworks */
		.Item {
			background-color: #202020E0;
		}

		/* Texts */
		a {
			color: #D090F0;
		}

		/* Shapes */
		.Shape {
			fill: #303030;
			stroke: #FFFFFF40;
		}

		/* Progress indicators */
		.Progbar {
			background-color: #FFFFFF20;
		}
		.Progbar.Shaped .Shape {
			fill: #FFFFFF20;
		}
		.Progbar.Shaped .ProgbarText {
			color: #FFFFFF;
		}
		.ProgbarFg {
			background-color: #D090F0;
		}
		.ProgbarFg.Shaped .Shape {
			fill: #8040A0;
		}
		.ProgringBg {
			stroke: #FFFFFF20;
		}
		.ProgringFg {
			stroke: #D090F0;
		}
		.NeedleFg, .NeedleArrow {
			background-color: #FFFFFF;
		}

		/* Indicator lights */
		.IndicatorLight.Off {
			background-color: #FFFFFF40;
		}
		.IndicatorLight.Red {
			background-color: #FF4040;
		}
		.IndicatorLight.Orange {
			background-color: #FF8000;
		}
		.IndicatorLight.Green {
			background-color: #00C000;
		}
		.IndicatorLight.Blue {
			background-color: #00A0E0;
		}

		/* Interactive ctrls */
		.Button, .Combobox {
			border: 1px solid #FFFFFF40;
			background-color: #303030;
			color: #FFFFFF;
		}
		.DropctrlGroup {
			border: 1px solid #FFFFFF40;
			background-color: #303030;
		}
		.Textbox {
			border: 1px solid #FFFFFF40;
			background-color: #303018;
			color: #FFFFFF;
		}

		/* Floating ctrls */
		.ScreenFilter {
			background-color: #000000C0;
		}
		.ScreenFilter.AsWindow, .Window {
			background-color: #202020E0;
		}
			/* Hotkey indicators */
			.HotkeyIndicator {
				background-color: #303030;
			}

			/* Toast */
			#Toast {
				background-color: #583868E0;
			}

			/* Dialog */
			#DialogIcon_Info, #DialogIcon_Question {
				fill: #00A0E0;
			}
			#DialogIcon_Caution {
				fill: #FF8000;
			}
			#DialogIcon_Error {
				fill: #FF4040;
			}

			/* Watermarks */
			.Watermark {
				color: #FFFFFF80; text-shadow: 0 0 5px #000000;
			}

	/* Variants */
		/* Background */
		.Box {
			background-color: #202020E0;
		}
		.Active {
			background-color: #004000;
		}
		.Button.Shaped.Active .Shape {
			fill: #004000;
		}
		.Glow {
			box-shadow: 0 0 4px 2px #D090F0;
		}
			@keyframes Anim_Glow {
				0%, 100% {
					box-shadow: none;
				}
				50% {
					box-shadow: 0 0 4px 2px #D090F0;
				}
			}
		.IAmHere {
			box-shadow: 0 0 4px 2px #D090F0;
		}

		/* Foreground */
		.RedText {
			color: #FF6060;
		}
		.OrangeText {
			color: #FFA000;
		}
		.GreenText {
			color: #00E000;
		}

	/* Interactions */
		/* Hover */
		a:hover, label:not(:has(:disabled:not(option))):hover, .Button:enabled:hover /* .Combobox:enabled:hover, .Textbox:enabled:hover */ {
			background-color: #583868;
		}
		.Active:enabled:hover, .Active:not(:has(:disabled:not(option))):hover {
			background-color: #185818;
		}
		.Button.Shaped:enabled:hover .Shape {
			fill: #583868;
		}
		.Button.Shaped.Active:enabled:hover .Shape {
			fill: #185818;
		}
		.Textbox.ShownAsLabel:enabled:hover, .Textbox.ShownAsLabel:focus-visible {
			background-color: #303018;
		}

		/* Click */
		a:active, label:not(:has(:disabled:not(option))):active, .Button:enabled:active,
		.Combobox:enabled:active, .Textbox:enabled:active, .Textbox.ShownAsLabel:enabled:active,
		.Active:enabled:active, .Active:not(:has(:disabled:not(option))):active {
			background-color: #D090F0;
			color: #000000;
		}
		.Button.Shaped:enabled:active .Shape, .Button.Shaped.Active:enabled:active .Shape {
			fill: #D090F0;
		}

		/* Focus */
		*:focus-visible {
			box-shadow: 0 0 0 2px #D090F0 !important;
		}
		.Button.Shaped:focus-visible .Shape {
			stroke: #D090F0 !important;
		}
		.Dropctrl .Button:focus-visible {
			box-shadow: 0 0 0 2px inset #D090F0 !important;
		}

		/* Text selection */
		::selection {
			background-color: #8040A0;
			color: #FFFFFF;
		}

/* Area specific */
	/* Header */
	#Topbar {
		background-color: #303030E0;
	}
	#Ctrl_NavUnderline {
		background-color: #FFFFFF;
	}

	/* Main */
	#Main {
		background-color: #000000E0;
	}

	/* Footer */
	footer {
		background-color: #000000E0;
		color: #FFFFFF80;
	}

/* Responsive web design */
@media (max-width: 920px) {
	/* Area specific */
		/* Header */
		#DropctrlGroup_Nav {
			border: 1px solid #FFFFFF40;
			background-color: #303030;
		}
}

/* Dev */
#Html.ShowDebugOutlines * {
	outline: 1px solid #008000;
}
#Html.ShowDebugOutlines section {
	outline: 3px dashed #FFFFFF;
}
#Html.ShowDebugOutlines .ItemGroup, #Html.ShowDebugOutlines .Viewport, #Html.ShowDebugOutlines .Window {
	outline: 3px solid #C00000;
}
#Html.ShowDebugOutlines .Item, #Html.ShowDebugOutlines .Ctnr {
	outline: 3px dashed #FF6060;
}
#Html.ShowDebugOutlines .CtrlGroup, #Html.ShowDebugOutlines .DropctrlGroup {
	outline: 2px solid #0000C0;
}
#Html.ShowDebugOutlines .Ctrl, #Html.ShowDebugOutlines .Dropctrl {
	outline: 2px dashed #6060FF;
}