☰

SteamDB - Black Mode

Dark mode for SteamDB

当前为 2024-12-29 提交的版本，查看 最新版本。

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