From 9b58efd3bd011722c4619274db0c2bcf8686af73 Mon Sep 17 00:00:00 2001 From: Nick2bad4u <20943337+Nick2bad4u@users.noreply.github.com> Date: Tue, 19 Nov 2024 22:35:20 -0500 Subject: [PATCH] Create SteamStat.us-Re-Remastered-WorldOfWarcraft.user.css --- ....us-Re-Remastered-WorldOfWarcraft.user.css | 255 ++++++++++++++++++ 1 file changed, 255 insertions(+) create mode 100644 SteamStat.us-Re-Remastered-WorldOfWarcraft.user.css diff --git a/SteamStat.us-Re-Remastered-WorldOfWarcraft.user.css b/SteamStat.us-Re-Remastered-WorldOfWarcraft.user.css new file mode 100644 index 0000000..0ea65bd --- /dev/null +++ b/SteamStat.us-Re-Remastered-WorldOfWarcraft.user.css @@ -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%; + } + } +} \ No newline at end of file