Temp redesign login See merge request !103tags/v0.1.3^2
@@ -14,8 +14,8 @@ | |||
@red: #d43346; | |||
@blue: #3fa7dd; | |||
@green: #80f643; | |||
@greenB: #4ac441; | |||
@greenC: #386646; | |||
@blackA: #505360; | |||
@blackB: #3c3f4c; | |||
@@ -154,14 +154,43 @@ define([ | |||
for (var i = 0; i < w; i++) { | |||
for (var j = 0; j < h; j++) { | |||
var ii = i / 10; | |||
var alpha = Math.sin(((j * 0.2) % 5) + Math.cos(ii % 8)); | |||
var tile = 5; | |||
if (Math.random() < 0.4) | |||
tile = 6; | |||
var tile = new pixi.Sprite(this.getTexture('sprites', tile)); | |||
if (j < 7) | |||
tile = 5; | |||
//else if (j > 26) | |||
// tile = 3; | |||
else if (alpha < -0.2) | |||
tile = 3; | |||
else if (alpha < 0.2) | |||
tile = 4; | |||
else if ((alpha < 0.5) && (j > 7)) | |||
tile = 53; | |||
alpha = Math.random(); | |||
var alpha = Math.sin((i % 4) + Math.cos(j % 8)); | |||
if (tile == 5) | |||
alpha /= 2; | |||
alpha *= 2; | |||
else if (tile == 3) | |||
alpha *= 1; | |||
else if (tile == 4) | |||
alpha *= 1; | |||
else if (tile == 53) | |||
alpha *= 2; | |||
alpha = Math.min(Math.max(0.1, alpha), 0.8); | |||
if (Math.random() < 0.35) { | |||
tile = { | |||
'5': 6, | |||
'3': 0, | |||
'4': 1, | |||
'53': 54 | |||
}[tile]; | |||
} | |||
var tile = new pixi.Sprite(this.getTexture('sprites', tile)); | |||
tile.alpha = alpha; | |||
tile.position.x = i * scale; | |||
@@ -29,6 +29,9 @@ define([ | |||
.eq(0).focus(); | |||
renderer.buildTitleScreen(); | |||
this.find('.extra, .version') | |||
.appendTo($('<div class="uiLoginExtra"></div>>').appendTo('.ui-container')); | |||
}, | |||
redirect: function(e) { | |||
@@ -7,18 +7,18 @@ | |||
@logoWidth: 559px; | |||
@logoHeight: 200px; | |||
@boxHeight: 370px; | |||
@boxHeight: 169px; | |||
@messageHeight: @boxPadding; | |||
@totalWidth: (@leftWidth + @rightWidth + (@boxPadding * 2)); | |||
@totalWidth: @rightWidth; | |||
@totalHeight: (@logoHeight + @boxHeight + (@boxPadding * 3) + @messageHeight); | |||
.uiLogin { | |||
display: none; | |||
width: @totalWidth; | |||
height: @totalHeight; | |||
margin-top: -30px; | |||
margin-top: -80px; | |||
.logo { | |||
width: 562px; | |||
@@ -27,25 +27,30 @@ | |||
margin-bottom: (@boxPadding * 3); | |||
} | |||
.left, .right, .news { | |||
.right { | |||
height: @boxHeight; | |||
float: left; | |||
background-color: #3a3b4a; | |||
} | |||
.left { | |||
width: @leftWidth; | |||
padding: @boxPadding; | |||
} | |||
.right { | |||
width: @rightWidth; | |||
padding: @boxPadding; | |||
margin-left: (@boxPadding * 2); | |||
.label, input { | |||
float: left; | |||
} | |||
.label { | |||
width: 30%; | |||
padding-top: 10px; | |||
color: @green; | |||
} | |||
input { | |||
width: 70%; | |||
} | |||
input, .textbox, input:-webkit-autofill { | |||
box-shadow: 0 0 0px 1000px darken(@gray, 15%) inset; | |||
width: 100%; | |||
color: @white; | |||
-webkit-text-fill-color: @white; | |||
margin-bottom: @boxPadding; | |||
@@ -54,7 +59,6 @@ | |||
/* We duplicate this for firefox which doesn't like the webkit selector */ | |||
input, .textbox { | |||
box-shadow: 0 0 0px 1000px darken(@gray, 15%) inset; | |||
width: 100%; | |||
color: @white; | |||
-webkit-text-fill-color: @white; | |||
margin-bottom: @boxPadding; | |||
@@ -62,11 +66,26 @@ | |||
.message { | |||
height: @messageHeight; | |||
width: 100%; | |||
margin-top: @boxPadding; | |||
width: 200%; | |||
margin-left: -50%; | |||
margin-top: 36px; | |||
float: left; | |||
text-align: center; | |||
color: @redA; | |||
color: @orange; | |||
filter: | |||
brightness(100%) | |||
drop-shadow(0px -4px 0px @blackD) | |||
drop-shadow(0px 4px 0px @blackD) | |||
drop-shadow(4px 0px 0px @blackD) | |||
drop-shadow(-4px 0px 0px @blackD); | |||
-moz-filter: | |||
brightness(100%) | |||
drop-shadow(0px -4px 0px @blackD) | |||
drop-shadow(0px 4px 0px @blackD) | |||
drop-shadow(4px 0px 0px @blackD) | |||
drop-shadow(-4px 0px 0px @blackD); | |||
} | |||
.top-buttons { | |||
@@ -89,52 +108,55 @@ | |||
} | |||
} | |||
} | |||
} | |||
.buttons { | |||
width: 100%; | |||
height: 35px; | |||
margin-top: 80px; | |||
.button { | |||
width: 100%; | |||
margin-bottom: calc(@boxPadding / 2); | |||
background-color: @blueC; | |||
color: @white; | |||
&:hover { | |||
background-color: @blueB; | |||
} | |||
} | |||
} | |||
.spacer-h { | |||
height: 61px; | |||
} | |||
} | |||
.news { | |||
width: @leftWidth; | |||
padding: @boxPadding; | |||
.uiLoginExtra { | |||
.extra { | |||
position: absolute; | |||
left: 10px; | |||
bottom: 10px; | |||
.heading { | |||
background-color: @grayD; | |||
.button { | |||
padding-left: 10px; | |||
padding-right: 10px; | |||
width: 100%; | |||
margin-bottom: 10px; | |||
background-color: @blueD; | |||
color: @white; | |||
margin-bottom: 8px; | |||
text-align: center; | |||
height: 35px; | |||
padding-top: 9px; | |||
} | |||
.list { | |||
overflow-y: auto; | |||
padding: 16px; | |||
&:last-child { | |||
margin-bottom: 0px; | |||
} | |||
.item { | |||
text-align: justify; | |||
color: @grayB; | |||
margin-bottom: 22px; | |||
&:hover { | |||
background-color: @blueC; | |||
} | |||
} | |||
} | |||
.spacer-h { | |||
height: 61px; | |||
.version { | |||
position: absolute; | |||
right: 10px; | |||
bottom: 10px; | |||
color: @yellow; | |||
filter: | |||
brightness(100%) | |||
drop-shadow(0px -4px 0px @blackD) | |||
drop-shadow(0px 4px 0px @blackD) | |||
drop-shadow(4px 0px 0px @blackD) | |||
drop-shadow(-4px 0px 0px @blackD); | |||
-moz-filter: | |||
brightness(100%) | |||
drop-shadow(0px -4px 0px @blackD) | |||
drop-shadow(0px 4px 0px @blackD) | |||
drop-shadow(4px 0px 0px @blackD) | |||
drop-shadow(-4px 0px 0px @blackD); | |||
} | |||
} |
@@ -1,28 +1,20 @@ | |||
<div class="uiLogin"> | |||
<img class="logo" src="images/logo_4.png" alt=""> | |||
<div class="news"> | |||
<div class="heading">what's new</div> | |||
<div class="list"> | |||
<div class="item">Faction Quartermasters</div> | |||
<div class="item">New Unlockable Skin</div> | |||
<div class="item">New Map: City Sewer</div> | |||
<div class="item">Factions and Reputations</div> | |||
<div class="item">You can now filter the chat window</div> | |||
<div class="item">Prophecies. When creating a new character you can choose which prophecies to apply. This includes a permadeath prophecy called 'hardcore'.</div> | |||
</div> | |||
</div> | |||
<div class="right"> | |||
<div class="label">username</div> | |||
<input type="text" class="el textbox txtUsername" placeholder="username"> | |||
<div class="label">password</div> | |||
<input type="password" class="el textbox txtPassword" placeholder="password"> | |||
<div class="top-buttons"> | |||
<div class="el button btnRegister">register</div> | |||
<div class="el button btnLogin">login</div> | |||
</div> | |||
<div class="message"></div> | |||
<div class="buttons"> | |||
<div class="el button btnPatreon" location="http://patreon.com/bigbadwaffle">Pledge on Patreon</div> | |||
<div class="el button btnPaypal" location="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=BR2CC82WUAVEA">Donate on Paypal</div> | |||
<div class="el button btnWiki" location="http://isleward.gamepedia.com/Isleward_Wiki">Access the Wiki</div> | |||
</div> | |||
</div> | |||
<div class="extra"> | |||
<div class="el button btnPatreon" location="http://patreon.com/bigbadwaffle">Pledge on Patreon</div> | |||
<div class="el button btnPaypal" location="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=BR2CC82WUAVEA">Donate on Paypal</div> | |||
<div class="el button btnWiki" location="http://isleward.gamepedia.com/Isleward_Wiki">Access the Wiki</div> | |||
</div> | |||
<div class="version">v0.1.3</div> | |||
</div> |