☰

SteamDB - Black Mode [Customizable]

Dark mode for SteamDB

当前为 2025-01-21 提交的版本，查看 最新版本。

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