@@ -179,13 +179,13 @@ define([ | |||
for (let j = 0; j < h; j++) { | |||
let roll = Math.sin(((j * 0.2) % 5) + Math.cos(ii % 8)); | |||
let tile = 61; | |||
let tile = 5; | |||
if (roll < -0.2) | |||
tile = 63; | |||
tile = 3; | |||
else if (roll < 0.2) | |||
tile = 64; | |||
tile = 4; | |||
else if (roll < 0.5) | |||
tile = 34; | |||
tile = 53; | |||
let alpha = mRandom(); | |||
@@ -196,11 +196,10 @@ define([ | |||
if (mRandom() < 0.35) { | |||
tile = { | |||
61: 62, | |||
63: 64, | |||
64: 63, | |||
34: 33 | |||
5: 6, | |||
3: 0, | |||
4: 1, | |||
53: 54 | |||
}[tile]; | |||
} | |||
@@ -1,16 +1,11 @@ | |||
@import "../../../css/colors.less"; | |||
@leftWidth: 400px; | |||
@rightWidth: 400px; | |||
@boxPadding: 35px; | |||
@logoWidth: 559px; | |||
@logoHeight: 200px; | |||
@boxHeight: 300px; | |||
@messageHeight: @boxPadding; | |||
@totalWidth: (@leftWidth + @rightWidth + @boxPadding); | |||
@totalHeight: (@logoHeight + @boxHeight + (@boxPadding * 3) + @messageHeight); | |||
@@ -25,7 +20,8 @@ | |||
margin-bottom: (@boxPadding * 2); | |||
} | |||
.left, .right { | |||
.left, | |||
.right { | |||
height: @boxHeight; | |||
float: left; | |||
background-color: #3a3b4a; | |||
@@ -50,7 +46,9 @@ | |||
&.selected { | |||
background-color: fade(@white, 25%); | |||
} | |||
} | |||
} | |||
.right { | |||
@@ -74,6 +72,7 @@ | |||
image-rendering: crisp-edges; | |||
display: none; | |||
} | |||
} | |||
.info { | |||
@@ -100,10 +99,11 @@ | |||
text-align: right; | |||
color: darken(@white, 25%); | |||
} | |||
} | |||
.btn { | |||
background-color: @orangeC; | |||
background-color: @blueC; | |||
width: calc((100% - (16px * 2)) / 3); | |||
float: left; | |||
margin-right: 16px; | |||
@@ -114,18 +114,20 @@ | |||
} | |||
&:hover { | |||
background-color: @orangeB; | |||
background-color: @blueB; | |||
} | |||
&.deleting { | |||
background-color: @red; | |||
color: @white; | |||
} | |||
} | |||
.spacer-h { | |||
height: 91px; | |||
} | |||
} | |||
.message { | |||
@@ -135,12 +137,12 @@ | |||
float: left; | |||
text-align: center; | |||
color: @white; | |||
filter: | |||
drop-shadow(0px -2px 0px @blackD) | |||
drop-shadow(0px 2px 0px @blackD) | |||
drop-shadow(2px 0px 0px @blackD) | |||
drop-shadow(-2px 0px 0px @blackD); | |||
filter: drop-shadow(0px -2px 0px @blackD) | |||
drop-shadow(0px 2px 0px @blackD) | |||
drop-shadow(2px 0px 0px @blackD) | |||
drop-shadow(-2px 0px 0px @blackD); | |||
} | |||
} | |||
.mobile .uiCharacters { | |||
@@ -149,4 +151,5 @@ | |||
.logo { | |||
display: none; | |||
} | |||
} |
@@ -1,5 +1,5 @@ | |||
<div class="uiCharacters"> | |||
<img class="logo" src="server/mods/iwd-souls-moor/images/logo.png" alt=""> | |||
<img class="logo" src="images/logo_0.png" alt=""> | |||
<div class="left"> | |||
<div class="character">loading characters...</div> | |||
</div> | |||
@@ -1,13 +1,9 @@ | |||
@import "../../../css/colors.less"; | |||
@boxHeight: 276px; | |||
@boxPadding: 27px; | |||
@logoWidth: 559px; | |||
@logoHeight: 200px; | |||
@messageHeight: @boxPadding; | |||
@totalWidth: (@logoWidth + (@boxPadding * 2) + 427px); | |||
@totalHeight: (@logoHeight + @boxHeight + (@boxPadding * 3) + @messageHeight); | |||
@@ -28,7 +24,8 @@ | |||
width: 613px; | |||
background-color: #3a3b4a; | |||
.left, .right { | |||
.left, | |||
.right { | |||
float: left; | |||
height: 100%; | |||
} | |||
@@ -37,17 +34,18 @@ | |||
width: calc(100% - (@boxPadding * 2) - 160px); | |||
padding: @boxPadding 0px @boxPadding @boxPadding; | |||
.txtClass, .txtCostume { | |||
.txtClass, | |||
.txtCostume { | |||
cursor: pointer; | |||
-webkit-user-select: none; | |||
&:active { | |||
background-color: darken(@gray, 20%); | |||
} | |||
} | |||
.txtClass { | |||
} | |||
.label { | |||
@@ -83,6 +81,7 @@ | |||
&:hover { | |||
background-color: @grayC; | |||
} | |||
} | |||
.txtCostume { | |||
@@ -92,7 +91,9 @@ | |||
align-items: center; | |||
padding: 0px; | |||
} | |||
} | |||
} | |||
} | |||
.right { | |||
@@ -117,6 +118,7 @@ | |||
image-rendering: crisp-edges; | |||
background: url('../../../images/charas.png') -64px 0px; | |||
} | |||
} | |||
.textbox { | |||
@@ -128,7 +130,7 @@ | |||
} | |||
.btn { | |||
background-color: @orangeC; | |||
background-color: @blueC; | |||
width: calc((100% - @boxPadding) / 2); | |||
float: left; | |||
margin-right: @boxPadding; | |||
@@ -139,8 +141,9 @@ | |||
} | |||
&:hover { | |||
background-color: @orangeB; | |||
background-color: @blueB; | |||
} | |||
} | |||
.message { | |||
@@ -151,6 +154,7 @@ | |||
text-align: center; | |||
color: @redA; | |||
} | |||
} | |||
.box-right { | |||
@@ -195,6 +199,7 @@ | |||
&:after { | |||
content: ' ✔'; | |||
} | |||
} | |||
&.disabled { | |||
@@ -204,10 +209,15 @@ | |||
&:hover { | |||
color: @white; | |||
} | |||
} | |||
} | |||
} | |||
} | |||
} | |||
.mobile .uiCreateCharacter { | |||
@@ -228,9 +238,11 @@ | |||
.skinBox { | |||
height: 70px; | |||
} | |||
} | |||
.box-right { | |||
width: 45%; | |||
} | |||
} |
@@ -1,5 +1,5 @@ | |||
<div class="uiCreateCharacter"> | |||
<img class="logo" src="server/mods/iwd-souls-moor/images/logo.png" alt=""> | |||
<img class="logo" src="images/logo_0.png" alt=""> | |||
<div class="box-left"> | |||
<div class="left"> | |||
<div class="label">name</div> | |||
@@ -1,16 +1,11 @@ | |||
@import "../../../css/colors.less"; | |||
@leftWidth: 400px; | |||
@rightWidth: 400px; | |||
@boxPadding: 16px; | |||
@logoWidth: 559px; | |||
@logoHeight: 200px; | |||
@boxHeight: 169px; | |||
@messageHeight: @boxPadding; | |||
@totalWidth: @rightWidth; | |||
@totalHeight: (@logoHeight + @boxHeight + (@boxPadding * 3) + @messageHeight); | |||
@@ -30,34 +25,37 @@ | |||
.right { | |||
height: @boxHeight; | |||
background-color: #3a3b4a; | |||
width: @rightWidth; | |||
padding: @boxPadding; | |||
.label, input { | |||
.label, | |||
input { | |||
float: left; | |||
} | |||
.label { | |||
width: 30%; | |||
padding-top: 10px; | |||
color: @yellow; | |||
color: @green; | |||
} | |||
input { | |||
width: 70%; | |||
} | |||
input, .textbox, input:-webkit-autofill { | |||
box-shadow: 0 0 0px 1000px darken(@gray, 15%) inset; | |||
input, | |||
.textbox, | |||
input:-webkit-autofill { | |||
box-shadow: 0 0 0px 1000px darken(@gray, 15%) inset; | |||
color: @white; | |||
-webkit-text-fill-color: @white; | |||
margin-bottom: @boxPadding; | |||
} | |||
/* We duplicate this for firefox which doesn't like the webkit selector */ | |||
input, .textbox { | |||
box-shadow: 0 0 0px 1000px darken(@gray, 15%) inset; | |||
input, | |||
.textbox { | |||
box-shadow: 0 0 0px 1000px darken(@gray, 15%) inset; | |||
color: @white; | |||
-webkit-text-fill-color: @white; | |||
margin-bottom: @boxPadding; | |||
@@ -71,20 +69,16 @@ | |||
float: left; | |||
text-align: center; | |||
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); | |||
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 { | |||
@@ -92,7 +86,7 @@ | |||
height: 35px; | |||
.btn { | |||
background-color: @orangeC; | |||
background-color: @blueC; | |||
width: calc((100% - @boxPadding) / 2); | |||
float: left; | |||
margin-right: @boxPadding; | |||
@@ -103,10 +97,13 @@ | |||
} | |||
&:hover { | |||
background-color: @orangeB; | |||
background-color: @blueB; | |||
} | |||
} | |||
} | |||
} | |||
.news { | |||
@@ -116,17 +113,16 @@ | |||
width: 600px; | |||
text-align: center; | |||
cursor: pointer; | |||
filter: | |||
drop-shadow(0px -4px 0px @blackD) | |||
drop-shadow(0px 4px 0px @blackD) | |||
drop-shadow(4px 0px 0px @blackD) | |||
drop-shadow(-4px 0px 0px @blackD); | |||
filter: drop-shadow(0px -4px 0px @blackD) | |||
drop-shadow(0px 4px 0px @blackD) | |||
drop-shadow(4px 0px 0px @blackD) | |||
drop-shadow(-4px 0px 0px @blackD); | |||
} | |||
.spacer-h { | |||
height: 61px; | |||
} | |||
} | |||
.uiLoginExtra { | |||
@@ -140,7 +136,7 @@ | |||
padding-right: 10px; | |||
width: 100%; | |||
margin-bottom: 10px; | |||
background-color: @purpleC; | |||
background-color: @blueD; | |||
color: @white; | |||
&:last-child { | |||
@@ -148,9 +144,11 @@ | |||
} | |||
&:hover { | |||
background-color: @purpleA; | |||
background-color: @blueC; | |||
} | |||
} | |||
} | |||
.version { | |||
@@ -159,21 +157,18 @@ | |||
bottom: 10px; | |||
color: @yellow; | |||
cursor: pointer; | |||
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); | |||
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); | |||
} | |||
} | |||
.mobile .uiLogin { | |||
@@ -1,5 +1,5 @@ | |||
<div class="uiLogin"> | |||
<img class="logo" src="server/mods/iwd-souls-moor/images/logo.png" alt=""> | |||
<img class="logo" src="images/logo_0.png" alt=""> | |||
<div class="right"> | |||
<div class="label">username</div> | |||
<input type="text" class="el textbox txtUsername" placeholder="username"> | |||