Darker mode for Steam Trade Matcher
/* ==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(--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;
}
}