☰

SteamDB - Black Mode [Customizable]

Dark mode for SteamDB

  1. /* ==UserStyle==
  2. @name           SteamDB - Black Mode [Customizable]
  3. @namespace      typpi.online
  4. @version        2.3
  5. @description    Dark mode for SteamDB
  6. @author         Nick2bad4u
  7. @license        UnLicense
  8. @homepageURL    https://github.com/Nick2bad4u/UserStyles
  9. @supportURL     https://github.com/Nick2bad4u/UserStyles/issues
  10.  
  11. @var color primary-color "Primary Color" #bb86fc
  12. @var color black "Black" #000000
  13. @var color light-gray "Light Gray" #e0e0e0
  14. ==/UserStyle== */
  15. @-moz-document domain("steamdb.info") {
  16. 	:root {
  17. 		--primary-color: var(primary-color);
  18. 		--black: var(black);
  19. 		--light-gray: var(light-gray);
  20. 	}
  21. 	/* Dark Mode for SteamDB Free Packages */
  22. 	body,
  23. 	.container,
  24. 	#js-hover {
  25. 		/*Box model stuff*/
  26. 		background-color: var(--black) !important;
  27. 		/*Typography stuff*/
  28. 		color: var(--light-gray) !important;
  29. 	}
  30.  
  31. 	.container-hello.container,
  32. 	#main
  33. 		> div.container.container-products
  34. 		> div:nth-child(1)
  35. 		> div:nth-child(n),
  36. 	#main
  37. 		> div.container.container-products
  38. 		> div:nth-child(2)
  39. 		> div:nth-child(n),
  40. 	#events,
  41. 	#news-popups,
  42. 	#main > div:nth-child(8),
  43. 	.container-stats,
  44. 	#freepackages {
  45. 		border-width: 3px;
  46. 		border-style: dashed;
  47. 		border-color: var(--primary-color);
  48. 		border-radius: 20px;
  49. 	}
  50.  
  51. 	.muted,
  52. 	.muted > a {
  53. 		margin-bottom: 0;
  54. 		border: 1px solid #00406b;
  55. 		border-radius: 6px;
  56. 		padding: 8px;
  57. 	}
  58.  
  59. 	#main > div.container.container-products {
  60. 		border-radius: 20px !important;
  61. 	}
  62.  
  63. 	#main > div > div.header-wrapper > div,
  64. 	#main > div > div.container {
  65. 		border-radius: 10px;
  66. 	}
  67.  
  68. 	.navbar,
  69. 	.footer,
  70. 	.navbar-inverse {
  71. 		background-color: var(--black) !important;
  72. 		color: var(--light-gray) !important;
  73. 		text-shadow: 1px 1px var(--black);
  74. 	}
  75.  
  76. 	.table,
  77. 	.dropdown-menu,
  78. 	.modal-content,
  79. 	.card,
  80. 	.panel {
  81. 		background-color: var(--black) !important;
  82. 		color: var(--light-gray) !important;
  83. 		text-shadow: 1px 1px var(--black);
  84. 	}
  85.  
  86. 	.table th,
  87. 	.table td,
  88. 	.dropdown-item,
  89. 	.modal-header,
  90. 	.modal-body,
  91. 	.modal-footer,
  92. 	.card-header,
  93. 	.card-body,
  94. 	.panel-heading,
  95. 	.panel-body {
  96. 		border-color: #333333 !important;
  97. 		text-shadow: 1px 1px var(--black);
  98. 	}
  99.  
  100. 	a,
  101. 	span > ins,
  102. 	#main
  103. 		> div
  104. 		> div.header-wrapper
  105. 		> div
  106. 		> div.row.app-row
  107. 		> div.span8
  108. 		> table
  109. 		> tbody
  110. 		> tr:nth-child(n)
  111. 		> td:nth-child(1)
  112. 		> span
  113. 		> svg,
  114. 	.octicon-steamdeck_playable > path,
  115. 	.row-app-charts
  116. 		> div:nth-child(n)
  117. 		> ul
  118. 		> li:nth-child(odd),
  119. 	#chart-month-table > thead > tr > th,
  120. 	#chart-month-table
  121. 		> tbody
  122. 		> tr:nth-child(even)
  123. 		> td:nth-child(n),
  124. 	#js-header-hamburger {
  125. 		color: var(--primary-color) !important;
  126. 		text-shadow: 1px 1px var(--black);
  127. 	}
  128.  
  129. 	#charts
  130. 		> div.row.row-app-charts
  131. 		> div:nth-child(n)
  132. 		> ul
  133. 		> li:nth-child(even) {
  134. 		color: #eb92e5 !important;
  135. 		text-shadow: 1px 1px var(--black);
  136. 	}
  137.  
  138. 	a:hover,
  139. 	span > ins:hover,
  140. 	.span8
  141. 		> table
  142. 		> tbody
  143. 		> tr:nth-child(n)
  144. 		> td:nth-child(1)
  145. 		> span
  146. 		> svg:hover,
  147. 	.octicon-steamdeck_playable > path:hover,
  148. 	.row-app-charts
  149. 		> div:nth-child(n)
  150. 		> ul
  151. 		> li:nth-child(odd):hover,
  152. 	.row-app-charts
  153. 		> div:nth-child(n)
  154. 		> ul
  155. 		> li:nth-child(even):hover,
  156. 	.row-app-charts
  157. 		> div:nth-child(n)
  158. 		> ul
  159. 		> li:nth-child(odd),
  160. 	#chart-month-table > thead > tr > th:hover {
  161. 		color: #8251f2 !important;
  162. 		text-shadow: 1px 1px var(--black);
  163. 	}
  164.  
  165. 	.text-center.tabular-nums.green,
  166. 	.text-center.green,
  167. 	.table-responsive
  168. 		> table
  169. 		> tbody
  170. 		> tr:nth-child(odd)
  171. 		> td:nth-child(n) {
  172. 		color: #08c9b9 !important;
  173. 		text-shadow: 1px 1px var(--black);
  174. 	}
  175.  
  176. 	.text-center.tabular-nums.green:hover,
  177. 	.text-center.green:hover,
  178. 	.text-center.green,
  179. 	.table-responsive
  180. 		> table
  181. 		> tbody
  182. 		> tr:nth-child(odd)
  183. 		> td:nth-child(n):hover,
  184. 	.table-responsive
  185. 		> table
  186. 		> tbody
  187. 		> tr:nth-child(even)
  188. 		> td:nth-child(n):hover {
  189. 		color: #f29fee !important;
  190. 		text-shadow: 1px 1px var(--black);
  191. 	}
  192.  
  193. 	.table-responsive
  194. 		> table
  195. 		> tbody
  196. 		> tr:nth-child(even)
  197. 		> td:nth-child(n) {
  198. 		color: #58a5dc !important;
  199. 		text-shadow: 1px 1px var(--black);
  200. 	}
  201.  
  202. 	h2,
  203. 	.navigation-heading,
  204. 	.container-products
  205. 		> div:nth-child(n)
  206. 		> div:nth-child(n)
  207. 		> table
  208. 		> thead
  209. 		> tr
  210. 		> .text-center {
  211. 		color: #5ed443 !important;
  212. 		text-decoration: underline;
  213. 		text-decoration-style: solid;
  214. 		text-decoration-color: #3bd8264a;
  215. 		text-shadow: 1px 1px var(--black);
  216. 	}
  217.  
  218. 	h2:hover,
  219. 	li.navigation-heading:hover,
  220. 	#main
  221. 		> div.container.container-products
  222. 		> div:nth-child(n)
  223. 		> div:nth-child(n)
  224. 		> table
  225. 		> thead
  226. 		> tr
  227. 		> .text-center:hover,
  228. 	#chart-month-table
  229. 		> tbody
  230. 		> tr:nth-child(n)
  231. 		> td:nth-child(n):hover {
  232. 		color: #8251f2 !important;
  233. 		text-decoration: underline;
  234. 		text-decoration-style: solid;
  235. 		text-decoration-color: #ffffff4a;
  236. 		text-shadow: 1px 1px var(--black);
  237. 	}
  238.  
  239. 	span.app-history-action > del {
  240. 		color: #830751;
  241. 		text-decoration: underline;
  242. 		text-decoration-style: dotted;
  243. 		text-decoration-color: #ff0000;
  244. 		text-shadow: 1px 1px var(--black);
  245. 	}
  246.  
  247. 	span.app-history-action > del:hover {
  248. 		color: #ff0000;
  249. 		text-decoration: underline;
  250. 		text-decoration-style: dotted;
  251. 		text-decoration-color: #9dff00;
  252. 		text-shadow: 1px 1px var(--black);
  253. 	}
  254.  
  255. 	.app-chart > svg > path {
  256. 		filter: invert(1) hue-rotate(0);
  257. 	}
  258.  
  259. 	#main
  260. 		> div.container.container-products
  261. 		> div:nth-child(1)
  262. 		> div:nth-child(n)
  263. 		> table
  264. 		> tbody
  265. 		> tr:nth-child(n)
  266. 		> td:nth-child(n) {
  267. 		color: #e37575;
  268. 		text-shadow: 1px 1px var(--black);
  269. 	}
  270.  
  271. 	#main
  272. 		> div.container.container-products
  273. 		> div:nth-child(1)
  274. 		> div:nth-child(n)
  275. 		> table
  276. 		> tbody
  277. 		> tr:nth-child(n)
  278. 		> td:nth-child(n):hover {
  279. 		color: #ff0000;
  280. 		text-shadow: 1px 1px var(--black);
  281. 	}
  282.  
  283. 	#main
  284. 		> div.container.container-products
  285. 		> div:nth-child(2)
  286. 		> div:nth-child(2)
  287. 		> table
  288. 		> tbody
  289. 		> tr:nth-child(n)
  290. 		> td:nth-child(n) {
  291. 		color: #e8ca84;
  292. 		text-shadow: 1px 1px var(--black);
  293. 	}
  294.  
  295. 	#main
  296. 		> div.container.container-products
  297. 		> div:nth-child(2)
  298. 		> div:nth-child(2)
  299. 		> table
  300. 		> tbody
  301. 		> tr:nth-child(n)
  302. 		> td:nth-child(n):hover {
  303. 		color: #7491f2;
  304. 		text-shadow: 1px 1px var(--black);
  305. 	}
  306.  
  307. 	#main
  308. 		> div
  309. 		> div.header-wrapper
  310. 		> div
  311. 		> div.row.app-row
  312. 		> div.span8
  313. 		> table
  314. 		> tbody
  315. 		> tr:nth-child(odd)
  316. 		> td:nth-child(1),
  317. 	#charts
  318. 		> div.table-responsive
  319. 		> table
  320. 		> tbody
  321. 		> tr:nth-child(odd)
  322. 		> td:nth-child(1) {
  323. 		background: var(--black);
  324. 		text-align: right;
  325. 		text-shadow: 1px 1px var(--black);
  326. 	}
  327.  
  328. 	#main
  329. 		> div
  330. 		> div.header-wrapper
  331. 		> div
  332. 		> div.row.app-row
  333. 		> div.span8
  334. 		> table
  335. 		> tbody
  336. 		> tr:nth-child(even)
  337. 		> td:nth-child(1),
  338. 	#charts
  339. 		> div.table-responsive
  340. 		> table
  341. 		> tbody
  342. 		> tr:nth-child(even)
  343. 		> td:nth-child(1) {
  344. 		text-align: right;
  345. 		text-shadow: 1px 1px var(--black);
  346. 	}
  347.  
  348. 	#main
  349. 		> div
  350. 		> div.header-wrapper
  351. 		> div
  352. 		> div.row.app-row
  353. 		> div.span8
  354. 		> table
  355. 		> tbody
  356. 		> tr:nth-child(odd)
  357. 		> td:nth-child(2),
  358. 	#charts
  359. 		> div.table-responsive
  360. 		> table
  361. 		> tbody
  362. 		> tr:nth-child(odd)
  363. 		> td:nth-child(2),
  364. 	#charts
  365. 		> div.table-responsive
  366. 		> table
  367. 		> tbody
  368. 		> tr:nth-child(odd)
  369. 		> td:nth-child(3) {
  370. 		background: var(--black);
  371. 		text-align: left;
  372. 		text-shadow: 1px 1px var(--black);
  373. 	}
  374.  
  375. 	#chart-month-table
  376. 		> tbody
  377. 		> tr:nth-child(odd)
  378. 		> td:nth-child(n) {
  379. 		background: var(--black);
  380. 		color: #ffa2ec;
  381. 		text-shadow: 1px 1px var(--black);
  382. 	}
  383.  
  384. 	#main
  385. 		> div
  386. 		> div.header-wrapper
  387. 		> div
  388. 		> div.row.app-row
  389. 		> div.span8
  390. 		> table
  391. 		> tbody
  392. 		> tr:nth-child(even)
  393. 		> td:nth-child(12) {
  394. 		text-align: left;
  395. 		text-shadow: 1px 1px var(--black);
  396. 	}
  397.  
  398. 	.octicon-windows > path {
  399. 		color: #5bc6fb;
  400. 		text-shadow: 1px 1px var(--black);
  401. 	}
  402.  
  403. 	.octicon-linux > path {
  404. 		color: #00ffae;
  405. 		text-shadow: 1px 1px var(--black);
  406. 	}
  407.  
  408. 	.octicon-steamdeck > path {
  409. 		color: #b5721b;
  410. 		text-shadow: 1px 1px var(--black);
  411. 	}
  412.  
  413. 	button,
  414. 	.btn,
  415. 	.btn-primary,
  416. 	.btn-secondary,
  417. 	.btn-success,
  418. 	.btn-danger,
  419. 	.btn-warning,
  420. 	.btn-info,
  421. 	.btn-light,
  422. 	.btn-dark,
  423. 	#js-hover > div > div.hover_buttons > *,
  424. 	#js-hover > div > div.hover_body.hover_tag_row > * {
  425. 		border-color: #454545 !important;
  426. 		background-color: var(--black) !important;
  427. 		color: var(--light-gray) !important;
  428. 		text-shadow: 1px 1px var(--black);
  429. 	}
  430.  
  431. 	button:hover,
  432. 	.btn:hover,
  433. 	.btn-primary:hover,
  434. 	.btn-secondary:hover,
  435. 	.btn-success:hover,
  436. 	.btn-danger:hover,
  437. 	.btn-warning:hover,
  438. 	.btn-info:hover,
  439. 	.btn-light:hover,
  440. 	.btn-dark:hover,
  441. 	#js-hover > div > div.hover_buttons > *:hover,
  442. 	#js-hover > div > div.hover_body.hover_tag_row > *:hover {
  443. 		border-color: #555555 !important;
  444. 		background-color: var(--black) !important;
  445. 		color: #ffffff !important;
  446. 		text-shadow: 1px 1px var(--black);
  447. 	}
  448.  
  449. 	input,
  450. 	textarea,
  451. 	select {
  452. 		border-color: #333333 !important;
  453. 		background-color: var(--black) !important;
  454. 		color: var(--light-gray) !important;
  455. 		text-shadow: 1px 1px var(--black);
  456. 	}
  457.  
  458. 	input::placeholder,
  459. 	textarea::placeholder {
  460. 		color: #888888 !important;
  461. 		text-shadow: 1px 1px var(--black);
  462. 	}
  463.  
  464. 	::-webkit-scrollbar {
  465. 		width: 12px !important;
  466. 	}
  467.  
  468. 	::-webkit-scrollbar-track {
  469. 		background: var(--primary-color) !important;
  470. 	}
  471.  
  472. 	::-webkit-scrollbar-thumb {
  473. 		border: 3px solid #121212 !important;
  474. 		border-radius: 10px !important;
  475. 		background-color: var(--black) !important;
  476. 	}
  477.  
  478. 	* {
  479. 		scrollbar-color: var(--primary-color) var(--black) !important;
  480. 		scrollbar-width: thin !important;
  481. 	}
  482.  
  483. 	body,
  484. 	.container-products *,
  485. 	#loading,
  486. 	#freepackages {
  487. 		background: var(--black) !important;
  488. 		background-color: var(--black) !important;
  489. 	}
  490.  
  491. 	.donate-panel {
  492. 		color: var(--light-gray) !important;
  493. 	}
  494. }