Skip to content

Commit 5971784

Browse files
Nick2bad4uNick2bad4u
committed
chore(css): update SteamTradeMatcher Dark Mode to version 1.3.1 with customizable color variables
1 parent 0085c97 commit 5971784

1 file changed

Lines changed: 80 additions & 96 deletions

File tree

‎SteamTradeMatcher-DarkMode.user.css‎

Lines changed: 80 additions & 96 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,68 @@
11
/* ==UserStyle==
2-
@name steamtradematcher.com - Dark Mode
2+
@name steamtradematcher.com - Dark Mode [Customizable]
33
@namespace typpi.online
4-
@version 1.2.1
4+
@version 1.3.1
55
@description Darker mode for Steam Trade Matcher
66
@author Nick2bad4u
77
@license UnLicense
88
@homepageURL https://github.com/Nick2bad4u/UserStyles
99
@supportURL https://github.com/Nick2bad4u/UserStyles/issues
10+
11+
@var color background-color "Background Color" #000000
12+
@var color text-color "Text Color" #ffffff
13+
@var color card-body-background "Card Body Background" #000000
14+
@var color card-header-background "Card Header Background" #5BA32B61
15+
@var color text-light-color "Text Light Color" #F8F9FA
16+
@var color icon-color "Icon Color" #5BA32BB8
1017
==/UserStyle== */
11-
@-moz-document domain("steamtradematcher.com") {
18+
@-moz-document domain("steamtradematcher.com")
19+
{
1220
html,
1321
.m-3,
1422
.inside,
1523
.bg-white,
1624
body,
1725
.bg-dark,
18-
:root {
19-
background: #000000 !important;
20-
background-color: #000000 !important;
21-
color: #ffffff !important;
26+
:root,
27+
#filterToolbar > div
28+
{
29+
background: var(--background-color) !important;
30+
background-color: var(--background-color) !important;
31+
color: var(--text-color) !important;
32+
}
33+
34+
.card-body
35+
{
36+
background: var(--card-body-background) !important;
37+
background-color: var(--card-body-background) !important;
38+
}
39+
40+
.card-header
41+
{
42+
background: var(--card-header-background) !important;
43+
background-color: var(--card-header-background) !important;
44+
}
45+
46+
.fw-light,
47+
.big-title .inside span,
48+
.text-nowrap,
49+
.navbar-nav .nav-link.active,
50+
.navbar-nav .show > .nav-link,
51+
.dropdown-item,
52+
.text-light,
53+
#filterToolbar > div
54+
{
55+
color: var(--text-light-color) !important;
56+
}
57+
58+
.fa-classic, .fa-regular, .fa-solid, .far, .fas
59+
{
60+
color: var(--icon-color) !important;
2261
}
2362

2463
*,
25-
:root {
64+
:root
65+
{
2666
--bs-blue: #375a7f !important;
2767
--bs-indigo: #6610f2 !important;
2868
--bs-purple: #6f42c1 !important;
@@ -68,21 +108,16 @@
68108
--bs-black-rgb: 0, 0, 0 !important;
69109
--bs-body-color-rgb: 255, 255, 255 !important;
70110
--bs-body-bg-rgb: 34, 34, 34 !important;
71-
--bs-font-sans-serif: lato, -apple-system,
72-
blinkmacsystemfont, 'Segoe UI', roboto,
73-
'Helvetica Neue', arial, sans-serif,
74-
'Apple Color Emoji', 'Segoe UI Emoji',
75-
'Segoe UI Symbol' !important;
76-
--bs-font-monospace: sfmono-regular, menlo, monaco,
77-
consolas, 'Liberation Mono', 'Courier New', monospace !important;
78-
--bs-gradient: linear-gradient(
79-
180deg,
80-
hsl(0deg 0% 100% / 15%),
81-
hsl(0deg 0% 100% / 0%)
82-
) !important;
83-
--bs-body-font-family: var(
84-
--bs-font-sans-serif
85-
) !important;
111+
--bs-font-sans-serif: lato, -apple-system, blinkmacsystemfont, 'Segoe UI',
112+
roboto, 'Helvetica Neue', arial, sans-serif,
113+
'Apple Color Emoji', 'Segoe UI Emoji',
114+
'Segoe UI Symbol' !important;
115+
--bs-font-monospace: sfmono-regular, menlo, monaco, consolas,
116+
'Liberation Mono', 'Courier New', monospace !important;
117+
--bs-gradient: linear-gradient( 180deg,
118+
hsl(0deg 0% 100% / 15%),
119+
hsl(0deg 0% 100% / 0%)) !important;
120+
--bs-body-font-family: var( --bs-font-sans-serif) !important;
86121
--bs-body-font-size: 1rem !important;
87122
--bs-body-font-weight: 400 !important;
88123
--bs-body-line-height: 1.5 !important;
@@ -91,9 +126,7 @@
91126
--bs-border-width: 1px !important;
92127
--bs-border-style: solid !important;
93128
--bs-border-color: #dee2e6 !important;
94-
--bs-border-color-translucent: rgb(
95-
0 0 0 / 17.5%
96-
) !important;
129+
--bs-border-color-translucent: rgb( 0 0 0 / 17.5%) !important;
97130
--bs-border-radius: 0.375rem !important;
98131
--bs-border-radius-sm: 0.25rem !important;
99132
--bs-border-radius-lg: 0.5rem !important;
@@ -119,16 +152,12 @@
119152
--gpStoreDarkGrey: #2a475e !important;
120153
--gpStoreDarkerGrey: #1b2838 !important;
121154
--gpStoreDarkestGrey: #000f18 !important;
122-
--gpGradient-StoreBackground: linear-gradient(
123-
180deg,
124-
var(--gpStoreDarkGrey) 0%,
125-
var(--gpStoreDarkerGrey) 80%
126-
) !important;
127-
--gpGradient-LibraryBackground: radial-gradient(
128-
farthest-corner at 40px 40px,
129-
#3d4450 0%,
130-
#23262e 80%
131-
) !important;
155+
--gpGradient-StoreBackground: linear-gradient( 180deg,
156+
var(--gpStoreDarkGrey) 0%,
157+
var(--gpStoreDarkerGrey) 80%) !important;
158+
--gpGradient-LibraryBackground: radial-gradient( farthest-corner at 40px 40px,
159+
#3d4450 0%,
160+
#23262e 80%) !important;
132161
--gpColor-Blue: #1a9fff !important;
133162
--gpColor-BlueHi: #00bbff !important;
134163
--gpColor-Green: #5ba32b !important;
@@ -165,71 +194,26 @@
165194
--gpSidePanelWidth: 340px !important;
166195
--gpGiftingPanelWidth: 280px !important;
167196
--gpCommunityRightPanelWidth: 320px !important;
168-
--gpVerticalResponsivePadding-Small: calc(
169-
(100vw - 854px) / 60
170-
) !important;
171-
--gpVerticalResponsivePadding-Medium: calc(
172-
(100vw - 854px) / 20
173-
) !important;
174-
--gpVerticalResponsivePadding-Large: calc(
175-
(100vw - 854px) / 12
176-
) !important;
197+
--gpVerticalResponsivePadding-Small: calc( (100vw - 854px) / 60) !important;
198+
--gpVerticalResponsivePadding-Medium: calc( (100vw - 854px) / 20) !important;
199+
--gpVerticalResponsivePadding-Large: calc( (100vw - 854px) / 12) !important;
177200
--screen-width: 100vw !important;
178-
--gpWidth-6colcap: calc(
179-
(
180-
var(--screen-width) - (5 * var(--gpSpace-Gap)) -
181-
(2 * var(--gpSpace-Gutter))
182-
) /
183-
6
184-
) !important;
185-
--gpWidth-5colcap: calc(
186-
(
187-
var(--screen-width) - (4 * var(--gpSpace-Gap)) -
188-
(2 * var(--gpSpace-Gutter))
189-
) /
190-
5
191-
) !important;
192-
--gpWidth-4colcap: calc(
193-
(
194-
var(--screen-width) - (3 * var(--gpSpace-Gap)) -
195-
(2 * var(--gpSpace-Gutter))
196-
) /
197-
4
198-
) !important;
199-
--gpWidth-3colcap: calc(
200-
(
201-
var(--screen-width) - (2 * var(--gpSpace-Gap)) -
202-
(2 * var(--gpSpace-Gutter))
203-
) /
204-
3
205-
) !important;
206-
--gpWidth-2colcap: calc(
207-
(
208-
var(--screen-width) - (1 * var(--gpSpace-Gap)) -
209-
(2 * var(--gpSpace-Gutter))
210-
) /
211-
2
212-
) !important;
213-
--gpWidth-1colcap: calc(
214-
(var(--screen-width) - (2 * var(--gpSpace-Gutter)))
215-
) !important;
201+
--gpWidth-6colcap: calc( ( var(--screen-width) - (5 * var(--gpSpace-Gap)) - (2 * var(--gpSpace-Gutter))) / 6) !important;
202+
--gpWidth-5colcap: calc( ( var(--screen-width) - (4 * var(--gpSpace-Gap)) - (2 * var(--gpSpace-Gutter))) / 5) !important;
203+
--gpWidth-4colcap: calc( ( var(--screen-width) - (3 * var(--gpSpace-Gap)) - (2 * var(--gpSpace-Gutter))) / 4) !important;
204+
--gpWidth-3colcap: calc( ( var(--screen-width) - (2 * var(--gpSpace-Gap)) - (2 * var(--gpSpace-Gutter))) / 3) !important;
205+
--gpWidth-2colcap: calc( ( var(--screen-width) - (1 * var(--gpSpace-Gap)) - (2 * var(--gpSpace-Gutter))) / 2) !important;
206+
--gpWidth-1colcap: calc( (var(--screen-width) - (2 * var(--gpSpace-Gutter)))) !important;
216207
--gpStoreMenuHeight: 58px !important;
217208
--gpShadow-Small: 0 2px 2px 0 #0000003d !important;
218209
--gpShadow-Medium: 0 3px 6px 0 #0000003d !important;
219210
--gpShadow-Large: 0 12px 16px 0 #0000003d !important;
220211
--gpShadow-XLarge: 0 24px 32px 0 #0000003d !important;
221-
--gpText-HeadingLarge: normal 700 26px/1.4 'Motiva Sans',
222-
arial, sans-serif !important;
223-
--gpText-HeadingMedium: normal 700 22px/1.4
224-
'Motiva Sans',
225-
arial, sans-serif !important;
226-
--gpText-HeadingSmall: normal 700 18px/1.4 'Motiva Sans',
227-
arial, sans-serif !important;
228-
--gpText-BodyLarge: normal 400 16px/1.4 'Motiva Sans',
229-
arial, sans-serif !important;
230-
--gpText-BodyMedium: normal 400 14px/1.4 'Motiva Sans',
231-
arial, sans-serif !important;
232-
--gpText-BodySmall: normal 400 12px/1.4 'Motiva Sans',
233-
arial, sans-serif !important;
212+
--gpText-HeadingLarge: normal 700 26px/1.4 'Motiva Sans', arial, sans-serif !important;
213+
--gpText-HeadingMedium: normal 700 22px/1.4 'Motiva Sans', arial, sans-serif !important;
214+
--gpText-HeadingSmall: normal 700 18px/1.4 'Motiva Sans', arial, sans-serif !important;
215+
--gpText-BodyLarge: normal 400 16px/1.4 'Motiva Sans', arial, sans-serif !important;
216+
--gpText-BodyMedium: normal 400 14px/1.4 'Motiva Sans', arial, sans-serif !important;
217+
--gpText-BodySmall: normal 400 12px/1.4 'Motiva Sans', arial, sans-serif !important;
234218
}
235219
}

0 commit comments

Comments
 (0)