☰

SteamStat.us - /r/pcmasterrace Theme

SteamStat.us - /r/pcmasterrace style

  1. /* ==UserStyle==
  2. @name         SteamStat.us - /r/pcmasterrace Theme
  3. @version      20241119.00.07
  4. @namespace    typpi.online
  5. @supportURL   https://github.com/Nick2bad4u/UserStyles/issues
  6. @description  SteamStat.us - /r/pcmasterrace style
  7. @homepageURL  https://github.com/Nick2bad4u/UserStyles
  8. @author       Nick2bad4u
  9. @license      UnLicense
  10.  
  11. @var color color1 "Color 1" #ffffff
  12. @var color color2 "Color 2" #ffd700
  13. @var color color3 "Color 3" #000000
  14. @var color color4 "Color 4" #ff4500
  15. @var color color5 "Color 5" #ffffff
  16. @var color color6 "Color 6" #ff0000
  17. ==/UserStyle== */
  18. @-moz-document domain("steamstat.us") {
  19. 	:root {
  20. 		--color-1: var(color1);
  21. 		--color-2: var(color2);
  22. 		--color-3: var(color3);
  23. 		--color-4: var(color4);
  24. 		--color-5: var(color5);
  25. 		--color-6: var(color6);
  26. 	}
  27.  
  28. 	/* Main title styling with /r/pcmasterrace colors */
  29. 	.title {
  30. 		margin: 10px 0;
  31. 		background: linear-gradient(
  32. 			135deg,
  33. 			var(--color-1) 30%,
  34. 			var(--color-2) 70%
  35. 		); /* var(--color-8) to Gold */
  36. 		color: var(--color-2); /* Gold */
  37. 		font-weight: 700;
  38. 		font-size: 2.6em;
  39. 		text-align: center;
  40. 		text-shadow: 2px 2px 5px rgb(0 0 0 / 60%);
  41. 		-webkit-text-stroke-width: 1px;
  42. 		-webkit-text-stroke-color: var(--color-3);
  43. 		background-clip: text;
  44. 		-webkit-text-fill-color: transparent;
  45. 		display: flex;
  46. 		position: relative;
  47. 		justify-content: center;
  48. 		align-items: center;
  49. 		animation: title-animation 3s ease-in-out infinite
  50. 			alternate;
  51. 	}
  52. 	/* Animation for the title */
  53. 	@keyframes title-animation {
  54. 		0% {
  55. 			transform: scale(1);
  56. 		}
  57. 		100% {
  58. 			transform: scale(1.08);
  59. 		}
  60. 	}
  61. 	/* Logo addition with /r/pcmasterrace emblem */
  62. 	.title::after {
  63. 		display: inline-block;
  64. 		transition: transform 0.3s ease;
  65. 		margin-left: 10px;
  66. 		background: url('https://i.gyazo.com/ad80b30c1872cee5a8f4da207d06917d.png')
  67. 			no-repeat center; /* Replace with /r/pcmasterrace logo URL */
  68. 		background-size: auto 100%;
  69. 		width: 200px;
  70. 		height: 60px;
  71. 		content: '';
  72. 	}
  73. 	.title:hover::after {
  74. 		transform: scale(1.5);
  75. 	}
  76. 	/* Link styling with hover effect */
  77. 	a {
  78. 		transition:
  79. 			color 0.3s ease,
  80. 			text-shadow 0.3s ease;
  81. 		color: var(--color-2); /* Gold */
  82. 		font-weight: 700;
  83. 		text-decoration: none;
  84. 		text-shadow: 1px 1px 2px rgb(0 0 0 / 40%);
  85. 	}
  86. 	a:hover {
  87. 		color: var(--color-1); /* var(--color-8) */
  88. 		text-decoration: underline;
  89. 		text-shadow: 2px 2px 6px rgb(0 0 0 / 70%);
  90. 	}
  91. 	/* Status colors with /r/pcmasterrace theme */
  92. 	.good {
  93. 		transition: color 0.3s ease;
  94. 		color: var(--color-1); /* var(--color-8) */
  95. 		text-shadow: 1px 1px 2px rgb(0 0 0 / 60%);
  96. 	}
  97. 	.minor {
  98. 		transition: color 0.3s ease;
  99. 		color: var(--color-2); /* Gold */
  100. 		font-weight: 700;
  101. 		text-shadow: 1px 1px 2px rgb(0 0 0 / 60%);
  102. 	}
  103. 	.major {
  104. 		transition: color 0.3s ease;
  105. 		color: var(--color-4); /* Bright var(--color-6) */
  106. 		font-weight: 700;
  107. 		text-shadow: 1px 1px 2px rgb(0 0 0 / 60%);
  108. 	}
  109. 	/* Refresh button styling */
  110. 	#js-refresh {
  111. 		transition:
  112. 			color 0.3s ease,
  113. 			transform 0.3s ease;
  114. 		color: var(--color-2); /* Gold */
  115. 		font-weight: bolder;
  116. 		text-shadow: 0 0 3px rgb(0 0 0 / 80%);
  117. 	}
  118. 	#js-refresh:hover {
  119. 		transform: scale(1.1);
  120. 		color: var(--color-1); /* var(--color-8) */
  121. 	}
  122. 	/* Container with /r/pcmasterrace-inspired accents */
  123. 	.services,
  124. 	#psa,
  125. 	noscript,
  126. 	footer {
  127. 		position: relative;
  128. 		transition:
  129. 			box-shadow 0.3s ease,
  130. 			background 0.3s ease;
  131. 		box-shadow: 0 4px 12px rgb(0 0 0 / 80%);
  132. 		border: 1px solid var(--color-2);
  133. 		border-radius: 4px;
  134. 		background: linear-gradient(
  135. 			135deg,
  136. 			rgb(255 215 0 / 80%) 30%,
  137. 			rgb(255 255 255 / 80%) 70%
  138. 		);
  139. 		color: var(--color-3);
  140. 		font-size: 1em;
  141. 		line-height: 1.5;
  142. 		text-shadow: 0 0 4px rgb(0 0 0 / 90%);
  143. 	}
  144. 	.services:hover,
  145. 	#psa:hover,
  146. 	noscript:hover,
  147. 	footer:hover {
  148. 		box-shadow: 0 6px 15px rgb(0 0 0 / 90%);
  149. 		background: rgb(0 0 0 / 95%);
  150. 		color: var(--color-1);
  151. 	}
  152. 	/* Body styling with /r/pcmasterrace backdrop */
  153. 	body {
  154. 		transition: background 0.3s ease;
  155. 		margin: 0;
  156. 		background: url('https://i.gyazo.com/144fb81227c6f8e81bc6b9eaada78fc2.jpg')
  157. 			no-repeat center center fixed; /* Replace with /r/pcmasterrace background URL */
  158. 		background-size: cover;
  159. 		color: var(--color-2); /* Gold */
  160. 		font-weight: 300;
  161. 		font-size: 16px;
  162. 		font-family:
  163. 			Segoe UI,
  164. 			Tahoma,
  165. 			Geneva,
  166. 			Verdana,
  167. 			sans-serif;
  168. 		text-shadow: 2px 2px 4px rgb(0 0 0 / 70%);
  169. 	}
  170. 	/* Tooltip customization */
  171. 	[data-tooltip]::before {
  172. 		position: absolute;
  173. 		top: 0;
  174. 		left: 2%;
  175. 		visibility: hidden;
  176. 		opacity: 0%;
  177. 		z-index: 1;
  178. 		transition:
  179. 			visibility 0s,
  180. 			opacity 0.3s ease-in-out;
  181. 		border-radius: 8px;
  182. 		background: rgb(255 215 0 / 90%); /* Gold */
  183. 		padding: 8px;
  184. 		width: 96%;
  185. 		content: attr(data-tooltip);
  186. 		color: var(--color-3);
  187. 		font-size: 0.9em;
  188. 		text-shadow: 2px 2px 4px rgb(0 0 0 / 50%);
  189. 	}
  190. 	[data-tooltip]:hover::before {
  191. 		visibility: visible;
  192. 		opacity: 100%;
  193. 	}
  194. 	/* Advanced feature: Animated gold border */
  195. 	.gradient-border {
  196. 		position: relative;
  197. 		box-shadow: 0 0 10px rgb(255 215 0 / 80%);
  198. 		border-radius: 6px;
  199. 		background-color: rgb(0 0 0 / 90%);
  200. 		padding: 12px;
  201. 		color: var(--color-1);
  202. 		font-weight: 700;
  203. 		text-align: center;
  204. 	}
  205. 	.gradient-border::before {
  206. 		position: absolute;
  207. 		z-index: -1;
  208. 		animation: gradient-border 4s linear infinite;
  209. 		inset: 0;
  210. 		border-radius: 6px;
  211. 		background: linear-gradient(
  212. 			45deg,
  213. 			var(--color-2),
  214. 			var(--color-1),
  215. 			var(--color-2)
  216. 		); /* Gold to var(--color-8) */
  217. 		background-size: 300% 300%;
  218. 		content: '';
  219. 	}
  220. 	@keyframes gradient-border {
  221. 		0% {
  222. 			background-position: 0% 50%;
  223. 		}
  224. 		50% {
  225. 			background-position: 100% 50%;
  226. 		}
  227. 		100% {
  228. 			background-position: 0% 50%;
  229. 		}
  230. 	}
  231. }