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. }