edwin/WoWLoginScreens
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

make wrath buttons blue and make cursor glow on hover slider handle

Browse Source
This commit is contained in:
Xiexe
2020-10-04 12:36:18 -04:00
parent e1f4d0e92d
commit 710df26a57
7 changed files with 89 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
assets/css/styles.css
+46 -2
View File
@@ -58,6 +58,10 @@ html, body {
margin-top: 95px; margin-top: 95px;
} }
#disconButton{
margin-top: 95px;
}
#copyrightText { #copyrightText {
font-family: 'FRIZQT'; font-family: 'FRIZQT';
font-size: 15px; font-size: 15px;
@@ -171,6 +175,45 @@ html, body {
background: url('../img/ui/buttons/button_pressed.png') no-repeat top; background: url('../img/ui/buttons/button_pressed.png') no-repeat top;
} }
.button_b {
font-family: 'FRIZQT';
font-size: 23px;
text-align: center;
color: #ffc700;
text-shadow: 0 0 8px #000, 0 0 8px #000, 0 0 8px #000, 0 0 8px #000, 0 0 8px #000;
background: url('../img/ui/buttons/button_idle_b.png') no-repeat top;
width: 270px;
height: 71px;
border: none;
outline: none;
display: block;
margin-top: -25px;
transform: scale(0.8);
filter: drop-shadow(0px 0px 8px #000);
z-index: 2;
cursor: url('../img/ui/Point.png'), auto;
}
.button_b:hover {
font-family: 'FRIZQT';
text-align: center;
color: #ffffff;
text-shadow: 0 0 8px #000, 0 0 8px #000, 0 0 8px #000, 0 0 8px #000, 0 0 8px #000;
background: url('../img/ui/buttons/button_hover_b.png') no-repeat top;
}
.button_b:active {
font-family: 'FRIZQT';
font-size: 22px;
text-align: center;
color: #ffffff;
text-shadow: 0 0 8px #000, 0 0 8px #000, 0 0 8px #000, 0 0 8px #000, 0 0 8px #000;
background: url('../img/ui/buttons/button_pressed_b.png') no-repeat top;
}
.centered { .centered {
min-height: 100vh; min-height: 100vh;
display:flex; display:flex;
@@ -249,6 +292,7 @@ html, body {
background: transparent; background: transparent;
border: 8px solid; border: 8px solid;
border-image: url('../img/ui/UI_SliderBorder.png') 35% round; border-image: url('../img/ui/UI_SliderBorder.png') 35% round;
cursor: url('../img/ui/Point.png'), auto;
outline: none; outline: none;
opacity: 1; opacity: 1;
-webkit-transition: .2s; -webkit-transition: .2s;
@@ -266,7 +310,7 @@ html, body {
width: 32px; width: 32px;
height: 32px; height: 32px;
background: url('../img/ui/UI_SliderHandle.png'); background: url('../img/ui/UI_SliderHandle.png');
cursor: url('../img/ui/Point.png'), auto; cursor: url('../img/ui/Cast.png'), auto;
transform: scale(1.6); transform: scale(1.6);
border: none; border: none;
z-index: 4; z-index: 4;
@@ -276,7 +320,7 @@ html, body {
width: 32px; width: 32px;
height: 32px; height: 32px;
background: url('../img/ui/UI_SliderHandle.png'); background: url('../img/ui/UI_SliderHandle.png');
cursor: url('../img/ui/Point.png'), auto; cursor: url('../img/ui/Cast.png'), auto;
transform: scale(1.6); transform: scale(1.6);
border: none; border: none;
z-index: 4; z-index: 4;
assets/img/ui/Cast.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

assets/img/ui/buttons/button_hover_b.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 8.7 KiB

assets/img/ui/buttons/button_idle_b.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 5.6 KiB

assets/img/ui/buttons/button_pressed_b.png
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 9.1 KiB

assets/js/audiohandler.js
+38
View File
@@ -40,6 +40,18 @@ var dateMap = [
'Oct 13 2020' 'Oct 13 2020'
]; ];
var buttonColorMap = [
0,
0,
1,
0,
0,
0,
0,
0,
0
];
var copyMap = [ var copyMap = [
2006, 2006,
2008, 2008,
@@ -171,6 +183,8 @@ function switchExpansion()
version.textContent = verMap[expansion]; version.textContent = verMap[expansion];
date.textContent = dateMap[expansion]; date.textContent = dateMap[expansion];
copyright.textContent = `Copyright 2004-${copyMap[expansion]} Blizzard Entertainment. All Right Reserved.`; copyright.textContent = `Copyright 2004-${copyMap[expansion]} Blizzard Entertainment. All Right Reserved.`;
setButtonColors(buttonColorMap[expansion]);
bg.load(); bg.load();
bg.play(); bg.play();
audio.play(); audio.play();
@@ -235,4 +249,28 @@ function adjustVolume()
audio.volume = val; audio.volume = val;
buttonAudio.volume = val; buttonAudio.volume = val;
document.getElementById('background').volume = val; document.getElementById('background').volume = val;
}
function setButtonColors(index)
{
var quitButton = document.getElementById("quitButton");
var optButton = document.getElementById("optButton");
var realmListButton = document.getElementById("realmListButton");
var disconButton = document.getElementById("disconButton");
switch(index)
{
case 0:
quitButton.className = "button";
optButton.className = "button";
realmListButton.className = "button";
disconButton.className = "button";
break;
case 1:
quitButton.className = "button_b";
optButton.className = "button_b";
realmListButton.className = "button_b";
disconButton.className = "button_b";
break;
}
} }
index.html
+5 -5
View File
@@ -8,14 +8,14 @@
</head> </head>
<body onload="init();"> <body onload="init();">
<div class="noSelect"> <div class="noSelect">
<!-- LOGO --> <!-- LOGO -->
<button class="xPacButton" id="logo" onclick="manualChangeExpac(); playButtonAudio(1);"></button> <button class="xPacButton" id="logo" onclick="manualChangeExpac(); playButtonAudio(1);"></button>
<!--QUIT BUTTON--> <!--QUIT BUTTON AND OPTIONS BUTTON-->
<div id="quitButtonContainer" class="foreground"> <div id="quitButtonContainer" class="foreground">
<button class="button" onclick="playButtonAudio(0); showSettings();" > Options </button> <button id="optButton" class="button" onclick="playButtonAudio(0); showSettings();" > Options </button>
<button class="button" onclick="location.href='http://www.wowaholics.org/'; playButtonAudio(0);" > Quit </button> <button id="quitButton" class="button" onclick="location.href='http://www.wowaholics.org/'; playButtonAudio(0);" > Quit </button>
</div> </div>
<!--OPTIONS PANEL--> <!--OPTIONS PANEL-->
@@ -53,7 +53,7 @@
<p class="queueText">(WOW51900319)</p> <p class="queueText">(WOW51900319)</p>
</div> </div>
<button class="button" id="realmListButton" onclick="playButtonAudio(1); resetQueue();"> Okay </button> <button class="button" id="disconButton" onclick="playButtonAudio(1); resetQueue();"> Okay </button>
</div> </div>
<!--COPYRIGHT TEXT--> <!--COPYRIGHT TEXT-->