-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Create SteamStat.us-Re-Remastered-WorldOfWarcraft.user.css
- Loading branch information
1 parent
68de675
commit 9b58efd
Showing
1 changed file
with
255 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,255 @@ | ||
| /* ==UserStyle== | ||
| @name SteamStat.us - World of Warcraft | ||
| @version 20241115.16.04 | ||
| @namespace https://github.com/Nick2bad4u/UserStyles | ||
| @description SteamStat.us - World of Warcraft Theme with Advanced CSS | ||
| @homepageURL https://github.com/Nick2bad4u/UserStyles | ||
| @author Nick2bad4u | ||
| @license UnLicense | ||
| ==/UserStyle== */ | ||
| @-moz-document domain("steamstat.us") | ||
| { | ||
| /* Main title styling with WoW colors */ | ||
| .title | ||
| { | ||
| text-align: center; | ||
| margin: 10px 0; | ||
| font-size: 2.6em; | ||
| font-weight: 700; | ||
| color: #FFD700; | ||
| /* WoW Gold */ | ||
| text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.4); | ||
| background: linear-gradient(135deg, #FFD700 30%, #4A3A1C 70%); | ||
| /* Gold to Brown */ | ||
| -webkit-text-stroke-width: 1px; | ||
| -webkit-text-stroke-color: black; | ||
| -webkit-background-clip: text; | ||
| -webkit-text-fill-color: transparent; | ||
| animation: title-animation 2s ease-in-out infinite alternate; | ||
| position: relative; | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| font-family: 'Merriweather', serif; | ||
| } | ||
|
|
||
| /* Animation for the title */ | ||
| @keyframes title-animation | ||
| { | ||
| 0% | ||
| { | ||
| transform: scale(1); | ||
| } | ||
|
|
||
| 100% | ||
| { | ||
| transform: scale(1.05); | ||
| } | ||
| } | ||
|
|
||
| /* Logo addition with scaling effect */ | ||
| .title::after | ||
| { | ||
| content: ''; | ||
| display: inline-block; | ||
| width: 100px; | ||
| height: 60px; | ||
| background: url('https://i.gyazo.com/cc0548ce7f1b051ade8a24d5dc5ad508.png') no-repeat center; | ||
| background-size: contain; | ||
| margin-left: 10px; | ||
| transition: transform 0.3s ease; | ||
| } | ||
|
|
||
| .title:hover::after | ||
| { | ||
| transform: scale(1.2); | ||
| } | ||
|
|
||
| /* Link styling with hover effect */ | ||
| a | ||
| { | ||
| color: #FFD700; | ||
| /* WoW Gold */ | ||
| text-decoration: none; | ||
| font-weight: bold; | ||
| transition: color 0.3s ease, text-shadow 0.3s ease; | ||
| text-shadow: 1px 1px 0px rgba(0, 0, 0, 0.4); | ||
| } | ||
|
|
||
| a:hover | ||
| { | ||
| color: #4A3A1C; | ||
| /* WoW Dark Brown */ | ||
| text-decoration: underline; | ||
| text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6); | ||
| } | ||
|
|
||
| /* Status colors with WoW theme */ | ||
| .good | ||
| { | ||
| color: #FFD700; | ||
| /* WoW Gold */ | ||
| text-shadow: 1px 1px 2px rgb(0, 0, 0); | ||
| transition: color 0.3s ease; | ||
| } | ||
|
|
||
| .minor | ||
| { | ||
| color: #790303; | ||
| /* White for minor status */ | ||
| text-shadow: 1px 1px 2px rgba(0, 0, 0, .6); | ||
| font-weight: bold; | ||
| transition: color 0.3s ease; | ||
| } | ||
|
|
||
| .major | ||
| { | ||
| color: #4A3A1C; | ||
| /* WoW Dark Brown */ | ||
| text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6); | ||
| font-weight: bold; | ||
| transition: color 0.3s ease; | ||
| } | ||
|
|
||
| /* Refresh button styling with hover effect */ | ||
| #js-refresh | ||
| { | ||
| color: #FFD700; | ||
| /* WoW Gold */ | ||
| text-shadow: 0 0 2px rgb(0, 0, 0); | ||
| font-weight: bolder; | ||
| transition: color 0.3s ease, transform 0.3s ease; | ||
| } | ||
|
|
||
| #js-refresh:hover | ||
| { | ||
| color: #4A3A1C; | ||
| /* WoW Dark Brown */ | ||
| transform: scale(1.1); | ||
| } | ||
|
|
||
| /* Container with dark background and gold accents */ | ||
| .services, | ||
| #psa, | ||
| noscript, | ||
| footer, | ||
| div.regions-title.sep | ||
| { | ||
| position: relative; | ||
| background: linear-gradient(135deg, #4A3A1C 30%, #FFD700 70%); | ||
| /* WoW Dark Brown to Gold */ | ||
| border: 1px solid #FFD700; | ||
| /* WoW Gold border */ | ||
| border-radius: 5px; | ||
| font-size: 1em; | ||
| line-height: 1.5; | ||
| text-shadow: 0px 0px 2px rgb(0, 0, 0); | ||
| box-shadow: 0px 4px 8px rgb(0, 0, 0); | ||
| color: #FFFFFF; | ||
| /* White text */ | ||
| transition: box-shadow 0.3s ease, background 0.3s ease; | ||
| } | ||
|
|
||
| .services:hover, | ||
| #psa:hover, | ||
| noscript:hover, | ||
| footer:hover, | ||
| div.regions-title.sep:hover | ||
| { | ||
| box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.5); | ||
| background: rgba(0, 0, 0, 0.9); | ||
| } | ||
|
|
||
| /* Body styling with a WoW background */ | ||
| body | ||
| { | ||
| margin: 0; | ||
| color: #FFD700; | ||
| /* WoW Gold */ | ||
| font-family: 'Merriweather', serif; | ||
| font-size: 16px; | ||
| font-weight: 300; | ||
| background: url('https://i.gyazo.com/32e11566c0e73d25ed470ab687959359.jpg') repeat-y; | ||
| /* WoW Background */ | ||
| text-shadow: 1px 1px 3px rgb(0, 0, 0); | ||
| transition: background 0.3s ease; | ||
| } | ||
|
|
||
| /* Tooltip customization */ | ||
| [data-tooltip]:before | ||
| { | ||
| visibility: hidden; | ||
| opacity: 0; | ||
| font-size: 0.9em; | ||
| content: attr(data-tooltip); | ||
| position: absolute; | ||
| top: 0; | ||
| left: 2%; | ||
| width: 96%; | ||
| background: #4A3A1C; | ||
| /* WoW Dark Brown */ | ||
| color: #FFD700; | ||
| /* WoW Gold */ | ||
| padding: 8px; | ||
| border-radius: 6px; | ||
| z-index: 1; | ||
| text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4); | ||
| transition: visibility 0s, opacity 0.3s ease-in-out; | ||
| font-style: italic; | ||
| font-weight: 300; | ||
| } | ||
|
|
||
| [data-tooltip]:hover:before | ||
| { | ||
| visibility: visible; | ||
| opacity: 1; | ||
| } | ||
|
|
||
| /* Gradient border with WoW-themed animation */ | ||
| .gradient-border | ||
| { | ||
| position: relative; | ||
| padding: 10px; | ||
| border-radius: 5px; | ||
| background-color: #FFD700; | ||
| /* WoW Gold */ | ||
| color: #FFFFFF; | ||
| /* White text */ | ||
| font-weight: bold; | ||
| text-align: center; | ||
| } | ||
|
|
||
| .gradient-border::before | ||
| { | ||
| content: ''; | ||
| position: absolute; | ||
| top: 0; | ||
| left: 0; | ||
| right: 0; | ||
| bottom: 0; | ||
| background: linear-gradient(45deg, #FFD700, #4A3A1C, #FFD700, #4A3A1C); | ||
| /* Gold to Dark Brown */ | ||
| background-size: 400% 400%; | ||
| border-radius: 5px; | ||
| z-index: -1; | ||
| animation: gradient-border 3s linear infinite; | ||
| } | ||
|
|
||
| @keyframes gradient-border | ||
| { | ||
| 0% | ||
| { | ||
| background-position: 400% 0%; | ||
| } | ||
|
|
||
| 50% | ||
| { | ||
| background-position: 0% 100%; | ||
| } | ||
|
|
||
| 100% | ||
| { | ||
| background-position: 400% 0%; | ||
| } | ||
| } | ||
| } |