Darker mode for Steam Trade Matcher
/* ==UserStyle==
@name steamtradematcher.com - Dark Mode [Customizable]
@namespace typpi.online
@version 1.3.1
@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
==/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;
}
.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;
}
*,
: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(--screen-width) - (2 * var(--gpSpace-Gap)) - (2 * var(--gpSpace-Gutter))) / 3) !important;
--gpWidth-2colcap: calc( ( var(--screen-width) - (1 * var(--gpSpace-Gap)) - (2 * var(--gpSpace-Gutter))) / 2) !important;
--gpWidth-1colcap: calc( (var(--screen-width) - (2 * var(--gpSpace-Gutter)))) !important;
--gpStoreMenuHeight: 58px !important;
--gpShadow-Small: 0 2px 2px 0 #0000003d !important;
--gpShadow-Medium: 0 3px 6px 0 #0000003d !important;
--gpShadow-Large: 0 12px 16px 0 #0000003d !important;
--gpShadow-XLarge: 0 24px 32px 0 #0000003d !important;
--gpText-HeadingLarge: normal 700 26px/1.4 'Motiva Sans', arial, sans-serif !important;
--gpText-HeadingMedium: normal 700 22px/1.4 'Motiva Sans', arial, sans-serif !important;
--gpText-HeadingSmall: normal 700 18px/1.4 'Motiva Sans', arial, sans-serif !important;
--gpText-BodyLarge: normal 400 16px/1.4 'Motiva Sans', arial, sans-serif !important;
--gpText-BodyMedium: normal 400 14px/1.4 'Motiva Sans', arial, sans-serif !important;
--gpText-BodySmall: normal 400 12px/1.4 'Motiva Sans', arial, sans-serif !important;
}
}