☰

SteamStat.us - Re-Remastered - Steam Style

SteamStat.us - Re-Remastered - Steam theme

  1. /* ==UserStyle==
  2. @name         SteamStat.us - Re-Remastered - Steam Style
  3. @version      20241115.16.04
  4. @namespace    typpi.online
  5. @supportURL   https://github.com/Nick2bad4u/UserStyles/issues
  6. @description  SteamStat.us - Re-Remastered - Steam theme
  7. @homepageURL  https://github.com/Nick2bad4u/UserStyles
  8. @author       Nick2bad4u
  9. @license      UnLicense
  10.  
  11. @var color title-color "Title Color" #b4d2ff
  12. @var color title-shadow "Title Shadow Color" #000000cc
  13. @var color link-color "Link Color" #66c0f4
  14. @var color link-shadow "Link Shadow Color" #00000099
  15. @var color link-hover-color "Link Hover Color" #ffffff
  16. @var color good-color "Good Status Color" #8bc34a
  17. @var color minor-color "Minor Status Color" #03a9f4
  18. @var color major-color "Major Status Color" #ffeb3b
  19. @var color refresh-color "Refresh Color" #82cffd
  20. @var color text-shadow "Text Shadow Color" #000000cc
  21. @var color box-shadow "Box Shadow Color" #00000066
  22. @var color border-color "Border Color" #4b4b4b
  23. @var color background-gradient-1 "Background Gradient 1" #2a2a2a
  24. @var color background-gradient-2 "Background Gradient 2" #1c1c1c
  25. @var color body-background "Body Background" #171a21
  26. @var color body-text "Body Text Color" #b8c6dc
  27. @var color tooltip-background "Tooltip Background Color" #1b2838
  28. @var color tooltip-text "Tooltip Text Color" #c7d5e0
  29. ==/UserStyle== */
  30.  
  31. @-moz-document url("https://steamstat.us/")
  32. {
  33. 	:root {
  34. 		--title-color: var(title-color);
  35. 		--title-shadow: var(title-shadow);
  36. 		--link-color: var(link-color);
  37. 		--link-shadow: var(link-shadow);
  38. 		--link-hover-color: var(link-hover-color);
  39. 		--good-color: var(good-color);
  40. 		--minor-color: var(minor-color);
  41. 		--major-color: var(major-color);
  42. 		--refresh-color: var(refresh-color);
  43. 		--text-shadow: var(text-shadow);
  44. 		--box-shadow: var(box-shadow);
  45. 		--border-color: var(border-color);
  46. 		--background-gradient-1: var(background-gradient-1);
  47. 		--background-gradient-2: var(background-gradient-2);
  48. 		--body-background: var(body-background);
  49. 		--body-text: var(body-text);
  50. 		--tooltip-background: var(tooltip-background);
  51. 		--tooltip-text: var(tooltip-text);
  52. 	}
  53.  
  54. 	.title {
  55. 		margin: 10px 0;
  56. 		color: var(--title-color);
  57. 		font-weight: 300;
  58. 		font-size: 2.6em;
  59. 		/* Steam Status Title */
  60. 		text-align: center;
  61. 		text-shadow: 2px 2px 8px var(--title-shadow);
  62. 	}
  63.  
  64. 	a {
  65. 		color: var(--link-color);
  66. 		font-weight: 700;
  67. 		text-decoration: none;
  68. 		text-shadow: 1px 1px 4px var(--link-shadow);
  69. 	}
  70.  
  71. 	a:hover {
  72. 		color: var(--link-hover-color);
  73. 		text-decoration: underline;
  74. 	}
  75.  
  76. 	.pull-right,
  77. 	.service .status {
  78. 		float: right;
  79. 		text-align: right;
  80. 	}
  81.  
  82. 	.good {
  83. 		/* Soft Green */
  84. 		color: var(--good-color);
  85. 		text-shadow: 1px 1px 6px var(--text-shadow);
  86. 	}
  87.  
  88. 	.minor {
  89. 		/* Soft Teal */
  90. 		color: var(--minor-color);
  91. 		font-weight: 700;
  92. 		text-shadow: 1px 1px 6px var(--text-shadow);
  93. 	}
  94.  
  95. 	.major {
  96. 		/* Soft Yellow */
  97. 		color: var(--major-color);
  98. 		font-weight: 700;
  99. 		text-shadow: 1px 1px 6px var(--text-shadow);
  100. 	}
  101.  
  102. 	#js-refresh {
  103. 		/* Refreshing in idk seconds */
  104. 		color: var(--refresh-color);
  105. 		font-weight: bolder;
  106. 		text-shadow: 0 0 8px var(--text-shadow);
  107. 	}
  108.  
  109. 	.services,
  110. 	#psa,
  111. 	noscript {
  112. 		position: relative;
  113. 		box-shadow: 0 4px 8px var(--box-shadow);
  114. 		border: 1px solid var(--border-color);
  115. 		border-radius: 6px;
  116. 		background: linear-gradient(
  117. 			145deg,
  118. 			var(--background-gradient-1),
  119. 			var(--background-gradient-2)
  120. 		);
  121. 		color: #eaeaea;
  122. 		font-size: 1em;
  123. 		line-height: 1.5;
  124. 		text-shadow: 0 0 6px var(--link-shadow);
  125. 	}
  126.  
  127. 	body {
  128. 		margin: 0;
  129. 		background: var(--body-background);
  130. 		color: var(--body-text);
  131. 		font-weight: 300;
  132. 		font-size: 16px;
  133. 		font-family: Roboto, Arial, sans-serif;
  134. 		text-shadow: 1px 1px 3px var(--text-shadow);
  135. 	}
  136.  
  137. 	[data-tooltip]::before {
  138. 		/* Time since last status change Box */
  139. 		visibility: hidden;
  140. 		opacity: 0%;
  141. 		overflow: hidden;
  142. 		content: attr(data-tooltip);
  143. 		font-size: 0.9em;
  144. 		white-space: pre;
  145. 		word-wrap: break-word;
  146. 		position: absolute;
  147. 		top: 0;
  148. 		left: 2%;
  149. 		z-index: 1;
  150. 		transition:
  151. 			visibility 0s,
  152. 			opacity 0.3s ease-in-out;
  153. 		border-radius: 6px;
  154. 		background: var(--tooltip-background);
  155. 		padding: 8px;
  156. 		width: 96%;
  157. 		color: var(--tooltip-text);
  158. 		font-style: italic;
  159. 		font-weight: 300;
  160. 		text-align: left;
  161. 		text-shadow: 1px 1px 3px var(--text-shadow);
  162. 	}
  163.  
  164. 	[data-tooltip]:hover::before {
  165. 		visibility: visible;
  166. 		opacity: 100%;
  167. 	}
  168. }