steamtradematcher.com - Dark Mode [Customizable] by Nick2bad4u

/* ==UserStyle==
@name           steamtradematcher.com - Dark Mode [Customizable]
@namespace      typpi.online
@version        1.3.3
@description    Darker mode for Steam Trade Matcher
@author         Nick2bad4u
@license        UnLicense
@homepageURL    https://github.com/Nick2bad4u/UserStyles
@supportURL     https://github.com/Nick2bad4u/UserStyles/issues

@var color background-color "Background Color" #000000
@var color text-color "Text Color" #ffffff
@var color card-body-background "Card Body Background" #000000
@var color card-header-background "Card Header Background" #5BA32B61
@var color text-light-color "Text Light Color" #F8F9FA
@var color icon-color "Icon Color" #5BA32BB8
@var color button-color "Button Color" #20C99726
@var color alert-color "Alert Color" #C00E0E
@var color no-alert-color "No Alert Color" #5ba32bb8
==/UserStyle== */
@-moz-document domain("steamtradematcher.com") {
	html,
	.m-3,
	.inside,
	.bg-white,
	body,
	.bg-dark,
	:root,
	#filterToolbar > div {
		background: var(--background-color) !important;
		background-color: var(--background-color) !important;
		color: var(--text-color) !important;
	}

	option:nth-child(n) {
		background: var(--background-color) !important;
		background-color: var(--background-color) !important;
		color: var(--text-light-color) !important;
	}

	.form-control,
	.form-select {
		background-color: var(--background-color) !important;
		color: var(--text-light-color) !important;
	}

	.form-control:focus,
	.form-select:focus {
		background-color: var(--background-color) !important;
		border-color: var(--background-color) !important;
		box-shadow: 0 0 0 0.25rem var(--card-header-background) !important;
		color: var(--text-light-color) !important;
	}

	.btn-gold {
		--bs-btn-color: #fff;
		--bs-btn-bg: #060606;
		--bs-btn-border-color: var(--button-color);
		--bs-btn-hover-color: #fff;
		--bs-btn-hover-bg: var(--button-color);
		--bs-btn-hover-border-color: var(--button-color);
		--bs-btn-focus-shadow-rgb: 230, 172, 89;
		--bs-btn-active-color: #fff;
		--bs-btn-active-bg: var(--button-color);
		--bs-btn-active-border-color: var(--text-color);
		--bs-btn-active-shadow: inset 0 3px 5px
			var(--button-color);
		--bs-btn-disabled-color: #fff;
		--bs-btn-disabled-bg: var(--button-color);
		--bs-btn-disabled-border-color: var(--button-color);
	}

	.btn-check:focus + .btn,
	.btn:focus {
		box-shadow: var(--bs-btn-focus-box-shadow);
		outline: 0;
	}

	.btn {
		--bs-btn-focus-box-shadow: 0 0 0 0.25rem
			rgba(var(--card-header-background), 0.5) !important;
	}

	.card-body {
		background: var(--card-body-background) !important;
		background-color: var(
			--card-body-background
		) !important;
	}

	.card-header {
		background: var(--card-header-background) !important;
		background-color: var(
			--card-header-background
		) !important;
	}

	.fw-light,
	.big-title .inside span,
	.text-nowrap,
	.navbar-nav .nav-link.active,
	.navbar-nav .show > .nav-link,
	.dropdown-item,
	.text-light,
	#filterToolbar > div {
		color: var(--text-light-color) !important;
	}

	.fa-classic,
	.fa-regular,
	.fa-solid,
	.far,
	.fas {
		color: var(--icon-color) !important;
	}

	.fa-stack-1x {
		color: var(--no-alert-color);
	}

	.fa-stack-2x {
		color: var(--alert-color);
	}

	.text-success.fa-stack-1x {
		color: var(--icon-color) !important;
	}

	.fa-check-circle::before,
	.fa-circle-check::before {
		content: '\f058';
		color: var(--card-body-background);
	}

	.fa-circle.fa-stack-1x.text-dark {
		color: var(--no-alert-color);
	}

	.rounded-pill.text-nowrap.text-light > a > span > span {
		color: var(--text-light-color) !important;
		background: var(--no-alert-color) !important;
	}

	*,
	:root {
		--bs-blue: #375a7f !important;
		--bs-indigo: #6610f2 !important;
		--bs-purple: #6f42c1 !important;
		--bs-pink: #e83e8c !important;
		--bs-red: #e74c3c !important;
		--bs-orange: #fd7e14 !important;
		--bs-yellow: #ffc107 !important;
		--bs-green: #029976 !important;
		--bs-teal: #20c997 !important;
		--bs-cyan: #3498db !important;
		--bs-black: #000000 !important;
		--bs-white: #ffffff !important;
		--bs-gray: #888888 !important;
		--bs-gray-dark: #303030 !important;
		--bs-gray-100: #f8f9fa !important;
		--bs-gray-200: #ebebeb !important;
		--bs-gray-300: #dee2e6 !important;
		--bs-gray-400: #ced4da !important;
		--bs-gray-500: #adb5bd !important;
		--bs-gray-600: #888888 !important;
		--bs-gray-700: #444444 !important;
		--bs-gray-800: #303030 !important;
		--bs-gray-900: #222222 !important;
		--bs-primary: #375a7f !important;
		--bs-secondary: #444444 !important;
		--bs-success: #029976 !important;
		--bs-info: #3498db !important;
		--bs-warning: #ffc107 !important;
		--bs-danger: #e74c3c !important;
		--bs-light: #adb5bd !important;
		--bs-dark: #303030 !important;
		--bs-gold: #e19d3c !important;
		--bs-primary-rgb: 55, 90, 127 !important;
		--bs-secondary-rgb: 68, 68, 68 !important;
		--bs-success-rgb: 2, 153, 118 !important;
		--bs-info-rgb: 52, 152, 219 !important;
		--bs-warning-rgb: 255, 193, 7 !important;
		--bs-danger-rgb: 231, 76, 60 !important;
		--bs-light-rgb: 173, 181, 189 !important;
		--bs-dark-rgb: 48, 48, 48 !important;
		--bs-gold-rgb: 225, 157, 60 !important;
		--bs-white-rgb: 255, 255, 255 !important;
		--bs-black-rgb: 0, 0, 0 !important;
		--bs-body-color-rgb: 255, 255, 255 !important;
		--bs-body-bg-rgb: 34, 34, 34 !important;
		--bs-font-sans-serif:
			lato, -apple-system, blinkmacsystemfont, 'Segoe UI',
			roboto, 'Helvetica Neue', arial, sans-serif,
			'Apple Color Emoji', 'Segoe UI Emoji',
			'Segoe UI Symbol' !important;
		--bs-font-monospace:
			sfmono-regular, menlo, monaco, consolas,
			'Liberation Mono', 'Courier New', monospace !important;
		--bs-gradient: linear-gradient(
			180deg,
			hsl(0deg 0% 100% / 15%),
			hsl(0deg 0% 100% / 0%)
		) !important;
		--bs-body-font-family: var(
			--bs-font-sans-serif
		) !important;
		--bs-body-font-size: 1rem !important;
		--bs-body-font-weight: 400 !important;
		--bs-body-line-height: 1.5 !important;
		--bs-body-color: #ffffff !important;
		--bs-body-bg: #000000 !important;
		--bs-border-width: 1px !important;
		--bs-border-style: solid !important;
		--bs-border-color: #dee2e6 !important;
		--bs-border-color-translucent: rgb(
			0 0 0 / 17.5%
		) !important;
		--bs-border-radius: 0.375rem !important;
		--bs-border-radius-sm: 0.25rem !important;
		--bs-border-radius-lg: 0.5rem !important;
		--bs-border-radius-xl: 1rem !important;
		--bs-border-radius-2xl: 2rem !important;
		--bs-border-radius-pill: 50rem !important;
		--bs-link-color: #adb5bd !important;
		--bs-link-hover-color: #8a9197 !important;
		--bs-code-color: #e83e8c !important;
		--bs-card-bg: #060606 !important;
		--bs-highlight-bg: #fff3cd !important;
		--gpSystemLightestGrey: #39708c !important;
		--gpSystemLighterGrey: #b8bcbf !important;
		--gpSystemLightGrey: #8b929a !important;
		--gpSystemGrey: #67707b !important;
		--gpSystemDarkGrey: #3d4450 !important;
		--gpSystemDarkerGrey: #23262e !important;
		--gpSystemDarkestGrey: #0e141b !important;
		--gpStoreLightestGrey: #ccd8e3 !important;
		--gpStoreLighterGrey: #a7bacc !important;
		--gpStoreLightGrey: #7c8ea3 !important;
		--gpStoreGrey: #4e697d !important;
		--gpStoreDarkGrey: #2a475e !important;
		--gpStoreDarkerGrey: #1b2838 !important;
		--gpStoreDarkestGrey: #000f18 !important;
		--gpGradient-StoreBackground: linear-gradient(
			180deg,
			var(--gpStoreDarkGrey) 0%,
			var(--gpStoreDarkerGrey) 80%
		) !important;
		--gpGradient-LibraryBackground: radial-gradient(
			farthest-corner at 40px 40px,
			#3d4450 0%,
			#23262e 80%
		) !important;
		--gpColor-Blue: #1a9fff !important;
		--gpColor-BlueHi: #00bbff !important;
		--gpColor-Green: #5ba32b !important;
		--gpColor-GreenHi: #59bf40 !important;
		--gpColor-Orange: #e35e1c !important;
		--gpColor-Red: #d94126 !important;
		--gpColor-RedHi: #ee563b !important;
		--gpColor-DustyBlue: #417a9b !important;
		--gpColor-LightBlue: #b3dfff !important;
		--gpColor-Yellow: #ffc82c !important;
		--gpColor-ChalkyBlue: #66c0f4 !important;
		--gpBackground-LightSofter: #6998bb24 !important;
		--gpBackground-LightSoft: #3b5a7280 !important;
		--gpBackground-LightMedium: #678ba670 !important;
		--gpBackground-LightHard: #93b8d480 !important;
		--gpBackground-LightHarder: #aacce6a6 !important;
		--gpBackground-DarkSofter: #1e549333 !important;
		--gpBackground-DarkSoft: #0e141b66 !important;
		--gpBackground-DarkMedium: #0e141b99 !important;
		--gpBackground-DarkHard: #0e141bcc !important;
		--gpBackground-Neutral-LightSofter: #ebf6ff1a !important;
		--gpBackground-Neutral-LightSoft: #ebf6ff33 !important;
		--gpBackground-Neutral-LightMedium: #ebf6ff4d !important;
		--gpBackground-Neutral-LightHard: #ebf6ff66 !important;
		--gpBackground-Neutral-LightHarder: #ebf6ff80 !important;
		--gpCorner-Small: 1px !important;
		--gpCorner-Medium: 2px !important;
		--gpCorner-Large: 3px !important;
		--gpSpace-Gutter: 24px !important;
		--gpSpace-Gap: 12px !important;
		--gpNavWidth: 240px !important;
		--gpPaymentsNavWidth: 340px !important;
		--gpDselectWidth: 340px !important;
		--gpSidePanelWidth: 340px !important;
		--gpGiftingPanelWidth: 280px !important;
		--gpCommunityRightPanelWidth: 320px !important;
		--gpVerticalResponsivePadding-Small: calc(
			(100vw - 854px) / 60
		) !important;
		--gpVerticalResponsivePadding-Medium: calc(
			(100vw - 854px) / 20
		) !important;
		--gpVerticalResponsivePadding-Large: calc(
			(100vw - 854px) / 12
		) !important;
		--screen-width: 100vw !important;
		--gpWidth-6colcap: calc(
			(
					var(--screen-width) - (5 * var(--gpSpace-Gap)) -
						(2 * var(--gpSpace-Gutter))
				) /
				6
		) !important;
		--gpWidth-5colcap: calc(
			(
					var(--screen-width) - (4 * var(--gpSpace-Gap)) -
						(2 * var(--gpSpace-Gutter))
				) /
				5
		) !important;
		--gpWidth-4colcap: calc(
			(
					var(--screen-width) - (3 * var(--gpSpace-Gap)) -
						(2 * var(--gpSpace-Gutter))
				) /
				4
		) !important;
		--gpWidth-3colcap: calc(
			(
					var(--scre...