feat #1779: initial commit

src/client/css/colors.less

@@ -1,54 +1,66 @@
-@white: rgb(242, 245, 245);
+////Isleward Blurple
 @black: #2d2136;
-@brown: rgb(107, 79, 76);
-@darkGray: rgb(55, 48, 65);
-@gray: rgb(60, 63, 76);
-@lightGray: rgb(146, 147, 152);
-@yellow: #ffeb38;
-@red: #d43346;
-@blue: #3fa7dd;
-@green: #80f643;
-@greenA: #80f643;
-@greenB: #4ac441;
-@greenC: #386646;
-@greenD: #2b4b3e;
-@blackA: #505360;
-@blackB: #3c3f4c;
-@blackC: #373041;
-@blackD: #312136;
-@brownC: #b15a30;
-@brownD: #763b3b;
+////Colour palette starts
+//Red
 @redA: #ff4252;
 @redB: #d43346;
 @redC: #a82841;
 @redD: #802343;
+//Orange
 @orangeA: #ff6942;
 @orangeB: #db5538;
 @orangeC: #b34b3a;
 @orangeD: #953f36;
+//Brown
+@brownA: #e39a30;
+@brownB: #ca752f;
+@brownC: #b15a30;
+@brownD: #763b3b;
+//Yelow
+@yellowA: #ffeb38;
 @yellowB: #faac45;
 @yellowC: #d07840;
 @yellowD: #9a5a3c;
+//Greens
+@greenA: #80f643;
+@greenB: #4ac441;
+@greenC: #386646;
+@greenD: #2b4b3e;
+//Teal
+@tealA: #baffd7;
+@tealB: #51fc9a;
+@tealC: #44cb95;
+@tealD: #3f8d6d;
+//Blue
 @blueA: #48edff;
 @blueB: #3fa7dd;
 @blueC: #3a71ba;
 @blueD: #42548d;
-@tealB: #51fc9a;
-@tealC: #44cb95;
-@tealD: #3f8d6d;
+//Purple
 @purpleA: #a24eff;
 @purpleB: #7a3ad3;
 @purpleC: #533399;
 @purpleD: #393268;
+//Pink
 @pinkA: #fc66f7;
 @pinkB: #de43ae;
 @pinkC: #b4347a;
 @pinkD: #933159;
+//Gray
+@grayA: #fcfcfc;
 @grayB: #c0c3cf;
 @grayC: #929398;
 @grayD: #69696e;
+//Blacks
+@blackA: #505360;
+@blackB: #3c3f4c;
+@blackC: #373041;
+@blackD: #312136;
+////Qualities
 @qualityCommon: @white;
 @qualityMagic: @greenB;
 @qualityRare: @blueB;
 @qualityEpic: @purpleA;
 @qualityLegendary: @orangeA;
+////Misc
+@white: @grayA;

src/client/css/error.css

@@ -0,0 +1,49 @@
+@font-face {
+  font-family: bitty;
+  src: url('../fonts/bitty.ttf');
+}
+* {
+  box-sizing: border-box;
+  font-family: bitty;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+body {
+  margin: 0px;
+  width: 100vw;
+  height: 100vh;
+  background-image: url(../images/static_bg.png);
+  background-repeat: repeat;
+  background-position: center center;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+.logo {
+  width: 562px;
+  height: 200px;
+  margin-bottom: 20px;
+}
+.error,
+.discord {
+  color: #d43346;
+  font-size: 24px;
+  padding: 10px;
+  filter: drop-shadow(0px -6px 0px #312136) drop-shadow(0px 6px 0px #312136) drop-shadow(6px 0px 0px #312136) drop-shadow(-6px 0px 0px #312136);
+}
+.discord {
+  justify-self: end;
+}
+.discord a:visited,
+.discord a:link,
+.discord a:active,
+.discord a:hover {
+  color: #faac45;
+  text-decoration: none;
+}

src/client/css/error.less

@@ -1,9 +1,8 @@
 @import "colors.less";
 
-@font-face
-{
-    font-family: bitty;
-    src: url('../fonts/bitty.ttf');
+@font-face {
+	font-family: bitty;
+	src: url('../fonts/bitty.ttf');
 }
 
 * {
@@ -37,21 +36,26 @@ body {
 	margin-bottom: 20px;
 }
 
-.error, .discord {
-	color: @red;
+.error,
+.discord {
+	color: @redB;
 	font-size: 24px;
 	padding: 10px;
-	filter:
-		drop-shadow(0px -6px 0px @blackD) 
-		drop-shadow(0px 6px 0px @blackD)
-		drop-shadow(6px 0px 0px @blackD) 
-		drop-shadow(-6px 0px 0px @blackD);
+	filter: drop-shadow(0px -6px 0px @blackD) 
+	drop-shadow(0px 6px 0px @blackD)
+	drop-shadow(6px 0px 0px @blackD) 
+	drop-shadow(-6px 0px 0px @blackD);
 }
 
 .discord {
 	justify-self: end;
-	a:visited, a:link, a:active, a:hover {
+
+	a:visited,
+	a:link,
+	a:active,
+	a:hover {
 		color: @yellowB;
 		text-decoration: none;
 	}
+
 }

src/client/css/main.css

@@ -1 +1,261 @@
-body,html{position:fixed;overflow:hidden;overscroll-behavior:none}body{margin:0px;width:100vw;height:100vh;background-color:#2d2136}.ui-container{width:100%;height:100%;position:absolute;left:0px;top:0px;z-index:20;overflow:hidden;display:flex;justify-content:center;align-items:center}.ui-container>.right{position:absolute;right:10px;top:94px}.ui-container.mobile .uiTooltipInfo{display:none !important}.ui-container.hideMonetization .monetization{display:none}.mobile.ui-container>.right{top:10px;right:158px;z-index:2;display:flex;flex-direction:row-reverse}*{box-sizing:border-box;font-family:bitty;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.canvas-container{position:relative;float:left}.canvas-container.visible{opacity:1;transition:1s}.canvas-container canvas{left:0px;top:0px;width:100vw}.disabled{opacity:.4 !important;pointer-events:none !important}[class^="ui"] input,[class^="ui"] textarea{-webkit-user-select:text;-khtml-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}[class^="ui"] .el{height:35px;text-align:center;padding:0px 0px 0px 0px;background-color:transparent}[class^="ui"] .textbox{border:none;outline:none;font-size:16px}[class^="ui"] div.textbox{padding-top:6px}[class^="ui"] .btn{cursor:pointer;display:flex;justify-content:center;align-items:center}[class^="ui"] .btn:hover{background-color:#473456}[class^="ui"] .spacer-h{width:100%}[class^="ui"].modal .btnClose{position:absolute;background-color:#505360;color:#ff6942;cursor:pointer;height:31px;width:31px;text-align:center;right:0px;top:0px;padding-top:0px;display:flex;justify-content:center;align-items:center}[class^="ui"].modal .btnClose:hover{background-color:#676b7c}::-webkit-scrollbar{width:16px}::-webkit-scrollbar-track{background-color:#3c3f4c;-webkit-border-radius:0px;border-radius:0px}::-webkit-scrollbar-thumb{-webkit-border-radius:10px;border-radius:0px;background:#929398}:root{scrollbar-color:#929398 #3c3f4c !important;scrollbar-width:thin !important;--color-element-default:#f2f5f5;--color-element-arcane:#fc66f7;--color-element-frost:#48edff;--color-element-fire:#ff4252;--color-element-holy:#ffeb38;--color-element-poison:#51fc9a}.q0{color:#f2f5f5}.q1{color:#4ac441}.q2{color:#3fa7dd}.q3{color:#a24eff}.q4{color:#ff6942}.color-red{color:#d43346 !important}.color-redA{color:#ff4252 !important}.color-blueA{color:#48edff !important}.color-blueB{color:#3fa7dd !important}.color-greenB{color:#4ac441 !important}.color-yellowB{color:#faac45 !important}.color-green{color:#80f643 !important}.color-brownC{color:#b15a30 !important}.color-brownD{color:#763b3b !important}.color-grayA{color:#f2f5f5 !important}.color-grayB{color:#c0c3cf !important}.color-grayC{color:#929398 !important}.color-grayD{color:#69696e !important}.color-pinkA{color:#fc66f7 !important}.color-pinkB{color:#de43ae !important}.color-purpleA{color:#a24eff !important}.color-tealB{color:#51fc9a !important}[class^="ui"] .renderItem{width:72px;height:72px;float:left;position:relative;cursor:pointer;box-sizing:border-box;margin:4px;background-color:#312136}[class^="ui"] .renderItem.hover{background-color:rgba(72,237,255,0.1)}[class^="ui"] .renderItem.dragging{position:absolute;opacity:.5;pointer-events:none;background-color:transparent}[class^="ui"] .renderItem.dragging .icon{filter:brightness(100%) drop-shadow(0 -4px 0 #312136) drop-shadow(0 4px 0 #312136) drop-shadow(4px 0 0 #312136) drop-shadow(-4px 0 0 #312136);-moz-filter:brightness(100%) drop-shadow(0 -4px 0 #312136) drop-shadow(0 4px 0 #312136) drop-shadow(4px 0 0 #312136) drop-shadow(-4px 0 0 #312136)}[class^="ui"] .renderItem .quantity{left:6px;bottom:3px;position:absolute;color:#f2f5f5;filter:drop-shadow(0 -2px 0 #312136) drop-shadow(0 2px 0 #312136) drop-shadow(2px 0 0 #312136) drop-shadow(-2px 0 0 #312136);-moz-filter:drop-shadow(0 -2px 0 #312136) drop-shadow(0 2px 0 #312136) drop-shadow(2px 0 0 #312136) drop-shadow(-2px 0 0 #312136)}[class^="ui"] .renderItem .icon{width:64px;height:64px;position:absolute;left:4px;top:4px}[class^="ui"] .renderItem.eq .quantity{color:#ffeb38}[class^="ui"] .renderItem.new .quantity{color:#80f643}[class^="ui"] .renderItem:hover .icon{filter:brightness(160%);-moz-filter:brightness(160%)}.hasBorderShadow{box-shadow:0 -2px 0 #2d2136,0 2px 0 #2d2136,2px 0 0 #2d2136,-2px 0 0 #2d2136}
+body,
+html {
+  position: fixed;
+  overflow: hidden;
+  overscroll-behavior: none;
+}
+body {
+  margin: 0px;
+  width: 100vw;
+  height: 100vh;
+  background-color: #2d2136;
+}
+.ui-container {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  z-index: 20;
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.ui-container > .right {
+  position: absolute;
+  right: 10px;
+  top: 94px;
+}
+.ui-container.mobile .uiTooltipInfo {
+  display: none !important;
+}
+.ui-container.hideMonetization .monetization {
+  display: none;
+}
+.mobile.ui-container > .right {
+  top: 10px;
+  right: 158px;
+  z-index: 2;
+  display: flex;
+  flex-direction: row-reverse;
+}
+* {
+  box-sizing: border-box;
+  font-family: bitty;
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+.canvas-container {
+  position: relative;
+  float: left;
+}
+.canvas-container.visible {
+  opacity: 1;
+  transition: 1s;
+}
+.canvas-container canvas {
+  left: 0px;
+  top: 0px;
+  width: 100vw;
+}
+.disabled {
+  opacity: 0.4 !important;
+  pointer-events: none !important;
+}
+[class^="ui"] input,
+[class^="ui"] textarea {
+  -webkit-user-select: text;
+  -khtml-user-select: text;
+  -moz-user-select: text;
+  -ms-user-select: text;
+  user-select: text;
+}
+[class^="ui"] .el {
+  height: 35px;
+  text-align: center;
+  padding: 0px 0px 0px 0px;
+  background-color: transparent;
+}
+[class^="ui"] .textbox {
+  border: none;
+  outline: none;
+  font-size: 16px;
+}
+[class^="ui"] div.textbox {
+  padding-top: 6px;
+}
+[class^="ui"] .btn {
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+[class^="ui"] .btn:hover {
+  background-color: #473456;
+}
+[class^="ui"] .spacer-h {
+  width: 100%;
+}
+[class^="ui"].modal .btnClose {
+  position: absolute;
+  background-color: #505360;
+  color: #ff6942;
+  cursor: pointer;
+  height: 31px;
+  width: 31px;
+  text-align: center;
+  right: 0px;
+  top: 0px;
+  padding-top: 0px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+[class^="ui"].modal .btnClose:hover {
+  background-color: #676b7c;
+}
+::-webkit-scrollbar {
+  width: 16px;
+}
+::-webkit-scrollbar-track {
+  background-color: #c0c3cf;
+  -webkit-border-radius: 0px;
+  border-radius: 0px;
+}
+::-webkit-scrollbar-thumb {
+  -webkit-border-radius: 10px;
+  border-radius: 0px;
+  background: #929398;
+}
+:root {
+  scrollbar-color: #929398 #c0c3cf !important;
+  scrollbar-width: thin !important;
+  --color-element-default: #f2f5f5;
+  --color-element-arcane: #fc66f7;
+  --color-element-frost: #48edff;
+  --color-element-fire: #ff4252;
+  --color-element-holy: #ffeb38;
+  --color-element-poison: #51fc9a;
+}
+.q0 {
+  color: #f2f5f5;
+}
+.q1 {
+  color: #4ac441;
+}
+.q2 {
+  color: #3fa7dd;
+}
+.q3 {
+  color: #a24eff;
+}
+.q4 {
+  color: #ff6942;
+}
+.color-red {
+  color: #d43346 !important;
+}
+.color-redA {
+  color: #ff4252 !important;
+}
+.color-blueA {
+  color: #48edff !important;
+}
+.color-blueB {
+  color: #3fa7dd !important;
+}
+.color-greenB {
+  color: #4ac441 !important;
+}
+.color-yellowB {
+  color: #faac45 !important;
+}
+.color-green {
+  color: #80f643 !important;
+}
+.color-brownC {
+  color: #b15a30 !important;
+}
+.color-brownD {
+  color: #763b3b !important;
+}
+.color-grayA {
+  color: #f2f5f5 !important;
+}
+.color-grayB {
+  color: #c0c3cf !important;
+}
+.color-grayC {
+  color: #929398 !important;
+}
+.color-grayD {
+  color: #69696e !important;
+}
+.color-pinkA {
+  color: #fc66f7 !important;
+}
+.color-pinkB {
+  color: #de43ae !important;
+}
+.color-purpleA {
+  color: #a24eff !important;
+}
+.color-tealB {
+  color: #51fc9a !important;
+}
+[class^="ui"] .renderItem {
+  width: 72px;
+  height: 72px;
+  float: left;
+  position: relative;
+  cursor: pointer;
+  box-sizing: border-box;
+  margin: 4px;
+  background-color: #312136;
+}
+[class^="ui"] .renderItem.hover {
+  background-color: rgba(72, 237, 255, 0.1);
+}
+[class^="ui"] .renderItem.dragging {
+  position: absolute;
+  opacity: 0.5;
+  pointer-events: none;
+  background-color: transparent;
+}
+[class^="ui"] .renderItem.dragging .icon {
+  filter: brightness(100%) drop-shadow(0px -4px 0px #312136) drop-shadow(0px 4px 0px #312136) drop-shadow(4px 0px 0px #312136) drop-shadow(-4px 0px 0px #312136);
+  -moz-filter: brightness(100%) drop-shadow(0px -4px 0px #312136) drop-shadow(0px 4px 0px #312136) drop-shadow(4px 0px 0px #312136) drop-shadow(-4px 0px 0px #312136);
+}
+[class^="ui"] .renderItem .quantity {
+  left: 6px;
+  bottom: 3px;
+  position: absolute;
+  color: #f2f5f5;
+  filter: drop-shadow(0px -2px 0px #312136) drop-shadow(0px 2px 0px #312136) drop-shadow(2px 0px 0px #312136) drop-shadow(-2px 0px 0px #312136);
+  -moz-filter: drop-shadow(0px -2px 0px #312136) drop-shadow(0px 2px 0px #312136) drop-shadow(2px 0px 0px #312136) drop-shadow(-2px 0px 0px #312136);
+}
+[class^="ui"] .renderItem .icon {
+  width: 64px;
+  height: 64px;
+  position: absolute;
+  left: 4px;
+  top: 4px;
+}
+[class^="ui"] .renderItem.eq .quantity {
+  color: #ffeb38;
+}
+[class^="ui"] .renderItem.new .quantity {
+  color: #80f643;
+}
+[class^="ui"] .renderItem:hover .icon {
+  filter: brightness(160%);
+  -moz-filter: brightness(160%);
+}
+.hasBorderShadow {
+  box-shadow: 0 -2px 0 #2d2136, 0 2px 0 #2d2136, 2px 0 0 #2d2136, -2px 0 0 #2d2136;
+}

src/client/css/main.less

@@ -160,7 +160,7 @@ body {
 }
 
 ::-webkit-scrollbar-track {
-	background-color: @gray;
+	background-color: @grayB;
 	-webkit-border-radius: 0px;
 	border-radius: 0px;
 }
@@ -168,18 +168,17 @@ body {
 ::-webkit-scrollbar-thumb {
 	-webkit-border-radius: 10px;
 	border-radius: 0px;
-	background: @lightGray;
+	background: @grayC;
 }
 
 :root {
-	scrollbar-color: @lightGray @gray !important;
+	scrollbar-color: @grayC @grayB !important;
 	scrollbar-width: thin !important;
-
 	--color-element-default: @white;
 	--color-element-arcane: @pinkA;
 	--color-element-frost: @blueA;
 	--color-element-fire: @redA;
-	--color-element-holy: @yellow;
+	--color-element-holy: @yellowA;
 	--color-element-poison: @tealB;
 }
 
@@ -204,7 +203,7 @@ body {
 }
 
 .color-red {
-	color: @red !important;
+	color: @redB !important;
 }
 
 .color-redA {
@@ -228,7 +227,7 @@ body {
 }
 
 .color-green {
-	color: @green !important;
+	color: @greenA !important;
 }
 
 .color-brownC {
@@ -331,14 +330,14 @@ body {
 
 	&.eq {
 		.quantity {
-			color: @yellow;
+			color: @yellowA;
 		}
 
 	}
 
 	&.new {
 		.quantity {
-			color: @green;
+			color: @greenA;
 		}
 
 	}

src/client/ui/templates/announcements/styles.css

@@ -1 +1,42 @@
-.uiAnnouncements{pointer-events:none;position:absolute;left:0px;top:0px;width:100%;top:calc(50% + 92px)}.uiAnnouncements .list{position:relative;width:100%}.uiAnnouncements .list .message{position:absolute;height:36px;left:50%;transform:translateX(-50%);text-align:center;color:#f2f5f5;font-size:18px;background-color:rgba(49,33,54,0.15);padding:8px;text-shadow:2px 2px 0 #312136,-2px -2px 0 #312136,2px -2px 0 #312136,-2px 2px 0 #312136,2px 2px 0 #312136;animation:.5s ease-in-out infinite bounce}.uiAnnouncements .list .message.success{color:#80f643}.uiAnnouncements .list .message.failure{color:#d43346}@keyframes bounce{0%{top:0px}50%{top:4px}100%{top:0px}}
+.uiAnnouncements {
+  pointer-events: none;
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  width: 100%;
+  top: calc(50% + 92px);
+}
+.uiAnnouncements .list {
+  position: relative;
+  width: 100%;
+}
+.uiAnnouncements .list .message {
+  position: absolute;
+  height: 36px;
+  left: 50%;
+  transform: translateX(-50%);
+  text-align: center;
+  color: #f2f5f5;
+  font-size: 18px;
+  background-color: rgba(49, 33, 54, 0.15);
+  padding: 8px;
+  text-shadow: 2px 2px 0 #312136, -2px -2px 0 #312136, 2px -2px 0 #312136, -2px 2px 0 #312136, 2px 2px 0 #312136;
+  animation: 0.5s ease-in-out infinite bounce;
+}
+.uiAnnouncements .list .message.success {
+  color: #80f643;
+}
+.uiAnnouncements .list .message.failure {
+  color: #d43346;
+}
+@keyframes bounce {
+  0% {
+    top: 0px;
+  }
+  50% {
+    top: 4px;
+  }
+  100% {
+    top: 0px;
+  }
+}

src/client/ui/templates/announcements/styles.less

@@ -26,11 +26,11 @@
 			animation: 0.5s ease-in-out infinite bounce;
 
 			&.success {
-				color: @green;
+				color: @greenA;
 			}
 
 			&.failure {
-				color: @red;
+				color: @redB;
 			}
 
 		}

src/client/ui/templates/characters/styles.css

@@ -1 +1,116 @@
-.uiCharacters{display:flex;flex-direction:column;align-items:center;position:absolute}.uiCharacters .logo{width:562px;height:200px;margin-bottom:60px}.uiCharacters .bottom{display:flex;height:300px}.uiCharacters .bottom .left,.uiCharacters .bottom .right{background-color:#3a3b4a;filter:drop-shadow(0 -2px 0 #2d2136) drop-shadow(0 2px 0 #2d2136) drop-shadow(2px 0 0 #2d2136) drop-shadow(-2px 0 0 #2d2136)}.uiCharacters .bottom .left{width:400px;overflow-y:auto}.uiCharacters .bottom .left .character{height:50px;width:100%;color:#f2f5f5;cursor:pointer;display:flex;justify-content:center;align-items:center}.uiCharacters .bottom .left .character:hover{background-color:#505360}.uiCharacters .bottom .left .character.selected{background-color:#69696e}.uiCharacters .bottom .right{width:400px;padding:10px;margin-left:30px;display:flex;flex-direction:column}.uiCharacters .bottom .right .portrait{height:205px;background-color:#2d2136;display:flex;justify-content:center;align-items:center}.uiCharacters .bottom .right .portrait .sprite{width:8px;height:8px;transform-origin:50% 50%;transform:scale(16);image-rendering:pixelated;image-rendering:optimizeSpeed;image-rendering:crisp-edges;display:none}.uiCharacters .bottom .right .info{height:30px;margin-bottom:10px;background-color:#2d2136;color:#f2f5f5;display:flex;justify-content:space-between;padding:0px 10px}.uiCharacters .bottom .right .info .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.uiCharacters .bottom .right .info .class{text-align:right;color:#aabebe}.uiCharacters .bottom .right .buttons{display:flex}.uiCharacters .bottom .right .buttons .btn{background-color:#3a71ba;width:calc((100% - (10px * 2)) / 3);float:left;margin-right:10px;color:#f2f5f5}.uiCharacters .bottom .right .buttons .btn:last-child{margin-right:0px}.uiCharacters .bottom .right .buttons .btn:hover{background-color:#42548d}.uiCharacters .bottom .right .buttons .btn.deleting{background-color:#d43346;color:#f2f5f5}.uiCharacters .message{height:30px;width:100%;margin-top:30px;float:left;text-align:center;color:#f2f5f5;filter:drop-shadow(0 -2px 0 #312136) drop-shadow(0 2px 0 #312136) drop-shadow(2px 0 0 #312136) drop-shadow(-2px 0 0 #312136)}.mobile .uiCharacters{height:300px}.mobile .uiCharacters .logo{display:none}
+.uiCharacters {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: absolute;
+}
+.uiCharacters .logo {
+  width: 562px;
+  height: 200px;
+  margin-bottom: 60px;
+}
+.uiCharacters .bottom {
+  display: flex;
+  height: 300px;
+}
+.uiCharacters .bottom .left,
+.uiCharacters .bottom .right {
+  background-color: #3a3b4a;
+  filter: drop-shadow(0 -2px 0 #2d2136) drop-shadow(0 2px 0 #2d2136) drop-shadow(2px 0 0 #2d2136) drop-shadow(-2px 0 0 #2d2136);
+}
+.uiCharacters .bottom .left {
+  width: 400px;
+  overflow-y: auto;
+}
+.uiCharacters .bottom .left .character {
+  height: 50px;
+  width: 100%;
+  color: #f2f5f5;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.uiCharacters .bottom .left .character:hover {
+  background-color: #505360;
+}
+.uiCharacters .bottom .left .character.selected {
+  background-color: #69696e;
+}
+.uiCharacters .bottom .right {
+  width: 400px;
+  padding: 10px;
+  margin-left: 30px;
+  display: flex;
+  flex-direction: column;
+}
+.uiCharacters .bottom .right .portrait {
+  height: 205px;
+  background-color: #2d2136;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.uiCharacters .bottom .right .portrait .sprite {
+  width: 8px;
+  height: 8px;
+  transform-origin: 50% 50%;
+  transform: scale(16);
+  image-rendering: pixelated;
+  image-rendering: optimizeSpeed;
+  image-rendering: crisp-edges;
+  display: none;
+}
+.uiCharacters .bottom .right .info {
+  height: 30px;
+  margin-bottom: 10px;
+  background-color: #2d2136;
+  color: #f2f5f5;
+  display: flex;
+  justify-content: space-between;
+  padding: 0px 10px;
+}
+.uiCharacters .bottom .right .info .name {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.uiCharacters .bottom .right .info .class {
+  text-align: right;
+  color: #aabebe;
+}
+.uiCharacters .bottom .right .buttons {
+  display: flex;
+}
+.uiCharacters .bottom .right .buttons .btn {
+  background-color: #3a71ba;
+  width: calc((100% - (10px * 2)) / 3);
+  float: left;
+  margin-right: 10px;
+  color: #f2f5f5;
+}
+.uiCharacters .bottom .right .buttons .btn:last-child {
+  margin-right: 0px;
+}
+.uiCharacters .bottom .right .buttons .btn:hover {
+  background-color: #42548d;
+}
+.uiCharacters .bottom .right .buttons .btn.deleting {
+  background-color: #d43346;
+  color: #f2f5f5;
+}
+.uiCharacters .message {
+  height: 30px;
+  width: 100%;
+  margin-top: 30px;
+  float: left;
+  text-align: center;
+  color: #f2f5f5;
+  filter: drop-shadow(0px -2px 0px #312136) drop-shadow(0px 2px 0px #312136) drop-shadow(2px 0px 0px #312136) drop-shadow(-2px 0px 0px #312136);
+}
+.mobile .uiCharacters {
+  height: 300px;
+}
+.mobile .uiCharacters .logo {
+  display: none;
+}

src/client/ui/templates/characters/styles.less

@@ -115,7 +115,7 @@
 					}
 
 					&.deleting {
-						background-color: @red;
+						background-color: @redB;
 						color: @white;
 					}
 

src/client/ui/templates/createCharacter/styles.css

@@ -1 +1,183 @@
-.uiCreateCharacter{width:1040px;height:584px}.uiCreateCharacter .logo{width:562px;height:200px;margin-left:240.5px;margin-bottom:54px}.uiCreateCharacter .box-left{float:left;height:276px;width:613px;background-color:#3a3b4a}.uiCreateCharacter .box-left .left,.uiCreateCharacter .box-left .right{float:left;height:100%}.uiCreateCharacter .box-left .left{width:calc(100% - (27px * 2) - 160px);padding:27px 0 27px 27px}.uiCreateCharacter .box-left .left .txtClass,.uiCreateCharacter .box-left .left .txtCostume{cursor:pointer;-webkit-user-select:none}.uiCreateCharacter .box-left .left .txtClass:active,.uiCreateCharacter .box-left .left .txtCostume:active{background-color:#0f1013}.uiCreateCharacter .box-left .left .label{color:#c0c3cf;text-align:center;margin-bottom:8.3px}.uiCreateCharacter .box-left .left .skinBox{display:flex;flex-direction:row;height:35px}.uiCreateCharacter .box-left .left .skinBox .btn{width:35px;margin:0px;flex-shrink:0;height:100%;display:flex;justify-content:center;align-items:center;padding:0px;background-color:#69696e}.uiCreateCharacter .box-left .left .skinBox .btn:first-child{margin-right:10px}.uiCreateCharacter .box-left .left .skinBox .btn:last-child{margin-left:10px}.uiCreateCharacter .box-left .left .skinBox .btn:hover{background-color:#929398}.uiCreateCharacter .box-left .left .skinBox .txtCostume{height:100%;display:flex;justify-content:center;align-items:center;padding:0px}.uiCreateCharacter .box-left .right{width:calc(160px + (27px * 2));padding:27px 27px 27px 27px}.uiCreateCharacter .box-left .portrait{width:100%;height:160px;background-color:#2d2136;padding:16px 0 0 16px;margin-bottom:27px}.uiCreateCharacter .box-left .portrait .sprite{width:8px;height:8px;transform:scale(16);transform-origin:0% 0%;image-rendering:optimizeSpeed;image-rendering:pixelated;image-rendering:crisp-edges}.uiCreateCharacter .box-left .textbox{width:100%;background-color:#1a1c21;border:3px solid #757b92;color:#f2f5f5;margin-bottom:22px}.uiCreateCharacter .box-left .btn{background-color:#3a71ba;width:calc((100% - 27px) / 2);float:left;margin-right:27px;color:#f2f5f5}.uiCreateCharacter .box-left .btn:last-child{margin-right:0px}.uiCreateCharacter .box-left .btn:hover{background-color:#3fa7dd}.uiCreateCharacter .box-left .message{height:27px;width:100%;margin-top:27px;float:left;text-align:center;color:#ff4252}.uiCreateCharacter .box-right{padding:27px 27px 27px 27px;float:left;height:276px;width:400px;margin-left:13px;background-color:#3a3b4a}.uiCreateCharacter .box-right .top{width:100%;color:#f2f5f5}.uiCreateCharacter .box-right .top>*{width:100%;text-align:center}.uiCreateCharacter .box-right .top .heading{margin-bottom:27px;color:#48edff}.uiCreateCharacter .box-right .top .list .prophecy{padding-top:0px;width:50%;float:left;height:24px;margin-bottom:24px;color:#ff4252;cursor:pointer}.uiCreateCharacter .box-right .top .list .prophecy:after{content:'  ✗'}.uiCreateCharacter .box-right .top .list .prophecy.active{color:#80f643}.uiCreateCharacter .box-right .top .list .prophecy.active:after{content:'  ✔'}.uiCreateCharacter .box-right .top .list .prophecy.disabled{color:#f2f5f5}.uiCreateCharacter .box-right .top .list .prophecy:hover{color:#f2f5f5}.mobile .uiCreateCharacter{height:276px;width:calc(1040px - 80px);display:flex;flex-direction:row;flex-wrap:wrap;justify-content:center}.mobile .uiCreateCharacter .logo{display:none}.mobile .uiCreateCharacter .box-left{width:45%}.mobile .uiCreateCharacter .box-left .skinBox{height:35px}.mobile .uiCreateCharacter .box-right{width:45%}
+.uiCreateCharacter {
+  width: 1040px;
+  height: 584px;
+}
+.uiCreateCharacter .logo {
+  width: 562px;
+  height: 200px;
+  margin-left: 240.5px;
+  margin-bottom: 54px;
+}
+.uiCreateCharacter .box-left {
+  float: left;
+  height: 276px;
+  width: 613px;
+  background-color: #3a3b4a;
+}
+.uiCreateCharacter .box-left .left,
+.uiCreateCharacter .box-left .right {
+  float: left;
+  height: 100%;
+}
+.uiCreateCharacter .box-left .left {
+  width: calc(100% - (27px * 2) - 160px);
+  padding: 27px 0px 27px 27px;
+}
+.uiCreateCharacter .box-left .left .txtClass,
+.uiCreateCharacter .box-left .left .txtCostume {
+  cursor: pointer;
+  -webkit-user-select: none;
+}
+.uiCreateCharacter .box-left .left .txtClass:active,
+.uiCreateCharacter .box-left .left .txtCostume:active {
+  background-color: #373041;
+}
+.uiCreateCharacter .box-left .left .label {
+  color: #c0c3cf;
+  text-align: center;
+  margin-bottom: 8.3px;
+}
+.uiCreateCharacter .box-left .left .skinBox {
+  display: flex;
+  flex-direction: row;
+  height: 35px;
+}
+.uiCreateCharacter .box-left .left .skinBox .btn {
+  width: 35px;
+  margin: 0px;
+  flex-shrink: 0;
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0px;
+  background-color: #69696e;
+}
+.uiCreateCharacter .box-left .left .skinBox .btn:first-child {
+  margin-right: 10px;
+}
+.uiCreateCharacter .box-left .left .skinBox .btn:last-child {
+  margin-left: 10px;
+}
+.uiCreateCharacter .box-left .left .skinBox .btn:hover {
+  background-color: #929398;
+}
+.uiCreateCharacter .box-left .left .skinBox .txtCostume {
+  height: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0px;
+}
+.uiCreateCharacter .box-left .right {
+  width: calc(160px + (27px * 2));
+  padding: 27px 27px 27px 27px;
+}
+.uiCreateCharacter .box-left .portrait {
+  width: 100%;
+  height: 160px;
+  background-color: #2d2136;
+  padding: 16px 0 0 16px;
+  margin-bottom: 27px;
+}
+.uiCreateCharacter .box-left .portrait .sprite {
+  width: 8px;
+  height: 8px;
+  transform: scale(16);
+  transform-origin: 0% 0%;
+  image-rendering: optimizeSpeed;
+  image-rendering: pixelated;
+  image-rendering: crisp-edges;
+}
+.uiCreateCharacter .box-left .textbox {
+  width: 100%;
+  background-color: #2d2136;
+  border: 2px solid #929398;
+  color: #f2f5f5;
+  margin-bottom: 22px;
+}
+.uiCreateCharacter .box-left .btn {
+  background-color: #3a71ba;
+  width: calc((100% - 27px) / 2);
+  float: left;
+  margin-right: 27px;
+  color: #f2f5f5;
+}
+.uiCreateCharacter .box-left .btn:last-child {
+  margin-right: 0px;
+}
+.uiCreateCharacter .box-left .btn:hover {
+  background-color: #3fa7dd;
+}
+.uiCreateCharacter .box-left .message {
+  height: 27px;
+  width: 100%;
+  margin-top: 27px;
+  float: left;
+  text-align: center;
+  color: #ff4252;
+}
+.uiCreateCharacter .box-right {
+  padding: 27px 27px 27px 27px;
+  float: left;
+  height: 276px;
+  width: 400px;
+  margin-left: 13px;
+  background-color: #3a3b4a;
+}
+.uiCreateCharacter .box-right .top {
+  width: 100%;
+  color: #f2f5f5;
+}
+.uiCreateCharacter .box-right .top > * {
+  width: 100%;
+  text-align: center;
+}
+.uiCreateCharacter .box-right .top .heading {
+  margin-bottom: 27px;
+  color: #48edff;
+}
+.uiCreateCharacter .box-right .top .list .prophecy {
+  padding-top: 0px;
+  width: 50%;
+  float: left;
+  height: 24px;
+  margin-bottom: 24px;
+  color: #ff4252;
+  cursor: pointer;
+}
+.uiCreateCharacter .box-right .top .list .prophecy:after {
+  content: '  ✗';
+}
+.uiCreateCharacter .box-right .top .list .prophecy.active {
+  color: #80f643;
+}
+.uiCreateCharacter .box-right .top .list .prophecy.active:after {
+  content: '  ✔';
+}
+.uiCreateCharacter .box-right .top .list .prophecy.disabled {
+  color: #f2f5f5;
+}
+.uiCreateCharacter .box-right .top .list .prophecy:hover {
+  color: #f2f5f5;
+}
+.mobile .uiCreateCharacter {
+  height: 276px;
+  width: calc(1040px - 80px);
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: center;
+}
+.mobile .uiCreateCharacter .logo {
+  display: none;
+}
+.mobile .uiCreateCharacter .box-left {
+  width: 45%;
+}
+.mobile .uiCreateCharacter .box-left .skinBox {
+  height: 35px;
+}
+.mobile .uiCreateCharacter .box-right {
+  width: 45%;
+}

src/client/ui/templates/createCharacter/styles.less

@@ -40,7 +40,7 @@
 				-webkit-user-select: none;
 
 				&:active {
-					background-color: darken(@gray, 20%);
+					background-color: @blackC;
 				}
 
 			}
@@ -122,8 +122,8 @@
 
 		.textbox {
 			width: 100%;
-			background-color: darken(@gray, 15%);
-			border: 3px solid lighten(@gray, 25%);
+			background-color: @black;
+			border: 2px solid @grayC;
 			color: @white;
 			margin-bottom: 22px;
 		}
@@ -193,7 +193,7 @@
 					}
 
 					&.active {
-						color: @green;
+						color: @greenA;
 
 						&:after {
 							content: '  ✔';

src/client/ui/templates/death/styles.css

@@ -1 +1,41 @@
-.uiDeath{display:none;width:400px;background-color:#3c3f4c;border:4px solid #929398;text-align:center;padding:16px 16px 0px 16px}.uiDeath .msg{color:#f2f5f5}.uiDeath .msg .inner{display:inline-block;color:#ff6942}.uiDeath .penalty{color:#faac45;margin-top:15px}.uiDeath .btn{color:#f2f5f5;width:100%;height:32px;background-color:#3fa7dd;margin:16px 0px;padding-top:8px;cursor:pointer}.uiDeath .btn:hover{background-color:#80c5e9;color:#2d2136}.uiDeath.permadeath .buttons .btn-respawn{display:none}.uiDeath.permadeath .buttons .btn-logout{display:block}.uiDeath .buttons .btn-logout{display:none}
+.uiDeath {
+  display: none;
+  width: 400px;
+  background-color: #c0c3cf;
+  border: 4px solid #929398;
+  text-align: center;
+  padding: 16px 16px 0px 16px;
+}
+.uiDeath .msg {
+  color: #f2f5f5;
+}
+.uiDeath .msg .inner {
+  display: inline-block;
+  color: #ff6942;
+}
+.uiDeath .penalty {
+  color: #faac45;
+  margin-top: 15px;
+}
+.uiDeath .btn {
+  color: #f2f5f5;
+  width: 100%;
+  height: 32px;
+  background-color: #3fa7dd;
+  margin: 16px 0px;
+  padding-top: 8px;
+  cursor: pointer;
+}
+.uiDeath .btn:hover {
+  background-color: #80c5e9;
+  color: #2d2136;
+}
+.uiDeath.permadeath .buttons .btn-respawn {
+  display: none;
+}
+.uiDeath.permadeath .buttons .btn-logout {
+  display: block;
+}
+.uiDeath .buttons .btn-logout {
+  display: none;
+}

src/client/ui/templates/death/styles.less

@@ -3,8 +3,8 @@
 .uiDeath {
 	display: none;
 	width: 400px;
-	background-color: @gray;
-	border: 4px solid @lightGray;
+	background-color: @grayB;
+	border: 4px solid @grayC;
 	text-align: center;
 	padding: 16px 16px 0px 16px;
 
@@ -27,13 +27,13 @@
 		color: @white;
 		width: 100%;
 		height: 32px;
-		background-color: @blue;
+		background-color: @blueB;
 		margin: 16px 0px;
 		padding-top: 8px;
 		cursor: pointer;
 
 		&:hover {
-			background-color: lighten(@blue, 15%);
+			background-color: lighten(@blueB, 15%);
 			color: @black;
 		}
 

src/client/ui/templates/dialogue/styles.css

@@ -1 +1,26 @@
-.uiDialogue{position:absolute;bottom:16px;width:calc(320px + (8px * 2));padding:8px;background-color:rgba(55,48,65,0.9);display:none;box-shadow:0 -2px 0 #2d2136,0 2px 0 #2d2136,2px 0 0 #2d2136,-2px 0 0 #2d2136}.uiDialogue .portraitBox{float:left;margin-right:12px;display:none}.uiDialogue .portraitBox .portrait{width:64px;height:64px}.uiDialogue .textBox{width:calc(100%);float:left;height:100%;color:#f2f5f5;text-align:center;filter:drop-shadow(0 -2px 0 #312136) drop-shadow(0 2px 0 #312136) drop-shadow(2px 0 0 #312136) drop-shadow(-2px 0 0 #312136)}
+.uiDialogue {
+  position: absolute;
+  bottom: 16px;
+  width: calc(320px + (8px * 2));
+  padding: 8px;
+  background-color: rgba(55, 48, 65, 0.9);
+  display: none;
+  box-shadow: 0 -2px 0 #2d2136, 0 2px 0 #2d2136, 2px 0 0 #2d2136, -2px 0 0 #2d2136;
+}
+.uiDialogue .portraitBox {
+  float: left;
+  margin-right: 12px;
+  display: none;
+}
+.uiDialogue .portraitBox .portrait {
+  width: 64px;
+  height: 64px;
+}
+.uiDialogue .textBox {
+  width: calc(100%);
+  float: left;
+  height: 100%;
+  color: #f2f5f5;
+  text-align: center;
+  filter: drop-shadow(0px -2px 0px #312136) drop-shadow(0px 2px 0px #312136) drop-shadow(2px 0px 0px #312136) drop-shadow(-2px 0px 0px #312136);
+}

src/client/ui/templates/dialogue/styles.less

@@ -6,7 +6,7 @@
 	bottom: 16px;
 	width: calc(320px + (@pad * 2));
 	padding: @pad;
-	background-color: fade(@darkGray, 90%);
+	background-color: fade(@blackC, 90%);
 	display: none;
 	box-shadow: 0 -2px 0 @black, 0 2px 0 @black, 2px 0 0 @black, -2px 0 0 @black;
 

src/client/ui/templates/equipment/styles.less

@@ -98,7 +98,7 @@
 					drop-shadow(-2px 0px 0px @blackD);
 
 					&.blueText > font {
-						color: @blue;
+						color: @blueB;
 					}
 
 					&.empty {

src/client/ui/templates/events/styles.css

@@ -1 +1,79 @@
-.uiEvents{margin-top:10px;width:326px;box-shadow:0 -2px 0 #2d2136,0 2px 0 #2d2136,2px 0 0 #2d2136,-2px 0 0 #2d2136}.uiEvents .heading{color:#ffeb38;padding:8px;background-color:rgba(58,59,74,0.9)}.uiEvents .list .event{cursor:pointer;padding:8px;background-color:rgba(58,59,74,0.9)}.uiEvents .list .event:hover{background-color:rgba(92,93,117,0.9)}.uiEvents .list .event .name{color:#f2f5f5;margin-bottom:3px}.uiEvents .list .event .description{color:#8da7a7}.uiEvents .list .event.active .name{color:#3fa7dd}.uiEvents .list .event.ready .name{color:#80f643}.uiEvents .list .event.ready .description{display:none}.uiEvents .btnCollapse{display:none}.mobile .uiEvents{background-color:rgba(55,48,65,0.9);margin-top:0px}.mobile .uiEvents:not(.active){width:64px;height:64px}.mobile .uiEvents:not(.active):after{content:'';position:absolute;left:0px;top:0px;background:url('../../../images/uiIcons.png');background-position:-128px -128px;width:64px;height:64px}.mobile .uiEvents:not(.active)>*{display:none}.mobile .uiEvents.active{z-index:3;position:absolute;right:0px;top:0px}.mobile .uiEvents.active .btn{display:block;position:absolute;right:calc(100% + 10px);top:0px;background-color:rgba(55,48,65,0.9);width:64px;height:64px;padding-top:0px}.mobile .uiEvents.active .btn .icon{width:100%;height:100%;background:url('../../../images/uiIcons.png') -448px 0}
+.uiEvents {
+  margin-top: 10px;
+  width: 326px;
+  box-shadow: 0 -2px 0 #2d2136, 0 2px 0 #2d2136, 2px 0 0 #2d2136, -2px 0 0 #2d2136;
+}
+.uiEvents .heading {
+  color: #ffeb38;
+  padding: 8px;
+  background-color: rgba(58, 59, 74, 0.9);
+}
+.uiEvents .list .event {
+  cursor: pointer;
+  padding: 8px;
+  background-color: rgba(58, 59, 74, 0.9);
+}
+.uiEvents .list .event:hover {
+  background-color: rgba(92, 93, 117, 0.9);
+}
+.uiEvents .list .event .name {
+  color: #f2f5f5;
+  margin-bottom: 3px;
+}
+.uiEvents .list .event .description {
+  color: #8da7a7;
+}
+.uiEvents .list .event.active .name {
+  color: #3fa7dd;
+}
+.uiEvents .list .event.ready .name {
+  color: #80f643;
+}
+.uiEvents .list .event.ready .description {
+  display: none;
+}
+.uiEvents .btnCollapse {
+  display: none;
+}
+.mobile .uiEvents {
+  background-color: rgba(55, 48, 65, 0.9);
+  margin-top: 0px;
+}
+.mobile .uiEvents:not(.active) {
+  width: 64px;
+  height: 64px;
+}
+.mobile .uiEvents:not(.active):after {
+  content: '';
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  background: url('../../../images/uiIcons.png');
+  background-position: -128px -128px;
+  width: 64px;
+  height: 64px;
+}
+.mobile .uiEvents:not(.active) > * {
+  display: none;
+}
+.mobile .uiEvents.active {
+  z-index: 3;
+  position: absolute;
+  right: 0px;
+  top: 0px;
+}
+.mobile .uiEvents.active .btn {
+  display: block;
+  position: absolute;
+  right: calc(100% + 10px);
+  top: 0px;
+  background-color: rgba(55, 48, 65, 0.9);
+  width: 64px;
+  height: 64px;
+  padding-top: 0px;
+}
+.mobile .uiEvents.active .btn .icon {
+  width: 100%;
+  height: 100%;
+  background: url('../../../images/uiIcons.png') -448px 0px;
+}

src/client/ui/templates/events/styles.less

@@ -7,7 +7,7 @@
 	box-shadow: 0 -2px 0 @black, 0 2px 0 @black, 2px 0 0 @black, -2px 0 0 @black;
 
 	.heading {
-		color: @yellow;
+		color: @yellowA;
 		padding: 8px;
 		background-color: fade(#3a3b4a, 90%);
 	}
@@ -33,14 +33,14 @@
 
 			&.active {
 				.name {
-					color: @blue;
+					color: @blueB;
 				}
 
 			}
 
 			&.ready {
 				.name {
-					color: @green;
+					color: @greenA;
 				}
 
 				.description {
@@ -60,7 +60,7 @@
 }
 
 .mobile .uiEvents {
-	background-color: fade(@darkGray, 90%);
+	background-color: fade(@blackC, 90%);
 	margin-top: 0px;
 
 	&:not(.active) {
@@ -95,7 +95,7 @@
 			position: absolute;
 			right: calc(100% + 10px);
 			top: 0px;
-			background-color: fade(@darkGray, 90%);
+			background-color: fade(@blackC, 90%);
 			width: @btnSize;
 			height: @btnSize;
 			padding-top: 0px;

src/client/ui/templates/inventory/styles.less

@@ -93,14 +93,14 @@
 
 			&.eq {
 				.quantity {
-					color: @yellow;
+					color: @yellowA;
 				}
 
 			}
 
 			&.new {
 				.quantity {
-					color: @green;
+					color: @greenA;
 				}
 
 			}

src/client/ui/templates/leaderboard/styles.css

@@ -1 +1,133 @@
-.uiLeaderboard{display:none;width:600px;height:410px;border:5px solid rgba(60,63,76,0.9);text-align:center}.uiLeaderboard>.heading{color:#48edff;width:100%;height:36px;background-color:rgba(60,63,76,0.9)}.uiLeaderboard>.heading .heading-text{padding-top:8px;margin:auto}.uiLeaderboard .result{background-color:rgba(55,48,65,0.9);float:left;width:400px;height:calc(100% - 36px);padding:5px}.uiLeaderboard .result .headings{width:100%;height:36px}.uiLeaderboard .result .headings .col{text-align:left;padding:5px 10px;width:50%;float:left;color:#f2f5f5}.uiLeaderboard .result .list{height:calc(100% - 26px - 36px)}.uiLeaderboard .result .list .row{width:100%;height:26px}.uiLeaderboard .result .list .row.self .col{color:#80f643}.uiLeaderboard .result .list .row.online .col{color:#4ac441}.uiLeaderboard .result .list .row .col{padding:5px 10px;float:left;text-align:left;width:50%;color:#c0c3cf;height:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.uiLeaderboard .result .buttons{width:calc(100% - 26px);height:26px}.uiLeaderboard .result .buttons .btn{width:calc((100% - (13px * 3)) / 4);margin-right:13px;float:left;height:100%;color:#f2f5f5;cursor:pointer;background-color:#7a3ad3}.uiLeaderboard .result .buttons .btn:hover{background-color:#a24eff}.uiLeaderboard .result .buttons .btn:last-child{margin-right:0px}.uiLeaderboard .prophecies{float:left;width:calc(100% - 400px);height:calc(100% - 36px);position:relative;background-color:rgba(55,48,65,0.9);padding:5px}.uiLeaderboard .prophecies .heading{width:100%;height:36px;color:#3fa7dd}.uiLeaderboard .prophecies .heading .heading-text{margin:auto}.uiLeaderboard .prophecies .prophecy,.uiLeaderboard .prophecies .btn{cursor:pointer}.uiLeaderboard .prophecies .prophecy{width:100%;padding:5px 10px;background-color:#69696e;color:#f2f5f5;margin-bottom:12px}.uiLeaderboard .prophecies .prophecy.selected{color:#80f643}.uiLeaderboard .prophecies .prophecy:hover{background-color:#929398}.uiLeaderboard .prophecies .prophecy.prophecy-mine,.uiLeaderboard .prophecies .prophecy.prophecy-none{background-color:#929398}.uiLeaderboard .prophecies .prophecy.prophecy-mine:hover,.uiLeaderboard .prophecies .prophecy.prophecy-none:hover{background-color:#c0c3cf}.uiLeaderboard .prophecies .btn-refresh{width:calc(100% - 10px);background-color:#3a71ba;padding:5px 10px;position:absolute;bottom:5px;color:#f2f5f5}.uiLeaderboard .prophecies .btn-refresh:hover{background-color:#3fa7dd}.mobile .uiLeaderboard{z-index:2}
+.uiLeaderboard {
+  display: none;
+  width: 600px;
+  height: 410px;
+  border: 5px solid rgba(60, 63, 76, 0.9);
+  text-align: center;
+}
+.uiLeaderboard > .heading {
+  color: #48edff;
+  width: 100%;
+  height: 36px;
+  background-color: rgba(60, 63, 76, 0.9);
+}
+.uiLeaderboard > .heading .heading-text {
+  padding-top: 8px;
+  margin: auto;
+}
+.uiLeaderboard .result {
+  background-color: rgba(55, 48, 65, 0.9);
+  float: left;
+  width: 400px;
+  height: calc(100% - 36px);
+  padding: 5px;
+}
+.uiLeaderboard .result .headings {
+  width: 100%;
+  height: 36px;
+}
+.uiLeaderboard .result .headings .col {
+  text-align: left;
+  padding: 5px 10px;
+  width: 50%;
+  float: left;
+  color: #f2f5f5;
+}
+.uiLeaderboard .result .list {
+  height: calc(100% - 26px - 36px);
+}
+.uiLeaderboard .result .list .row {
+  width: 100%;
+  height: 26px;
+}
+.uiLeaderboard .result .list .row.self .col {
+  color: #80f643;
+}
+.uiLeaderboard .result .list .row.online .col {
+  color: #4ac441;
+}
+.uiLeaderboard .result .list .row .col {
+  padding: 5px 10px;
+  float: left;
+  text-align: left;
+  width: 50%;
+  color: #c0c3cf;
+  height: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.uiLeaderboard .result .buttons {
+  width: calc(100% - 26px);
+  height: 26px;
+}
+.uiLeaderboard .result .buttons .btn {
+  width: calc((100% - (13px * 3)) / 4);
+  margin-right: 13px;
+  float: left;
+  height: 100%;
+  color: #f2f5f5;
+  cursor: pointer;
+  background-color: #7a3ad3;
+}
+.uiLeaderboard .result .buttons .btn:hover {
+  background-color: #a24eff;
+}
+.uiLeaderboard .result .buttons .btn:last-child {
+  margin-right: 0px;
+}
+.uiLeaderboard .prophecies {
+  float: left;
+  width: calc(100% - 400px);
+  height: calc(100% - 36px);
+  position: relative;
+  background-color: rgba(55, 48, 65, 0.9);
+  padding: 5px;
+}
+.uiLeaderboard .prophecies .heading {
+  width: 100%;
+  height: 36px;
+  color: #3fa7dd;
+}
+.uiLeaderboard .prophecies .heading .heading-text {
+  margin: auto;
+}
+.uiLeaderboard .prophecies .prophecy,
+.uiLeaderboard .prophecies .btn {
+  cursor: pointer;
+}
+.uiLeaderboard .prophecies .prophecy {
+  width: 100%;
+  padding: 5px 10px;
+  background-color: #69696e;
+  color: #f2f5f5;
+  margin-bottom: 12px;
+}
+.uiLeaderboard .prophecies .prophecy.selected {
+  color: #80f643;
+}
+.uiLeaderboard .prophecies .prophecy:hover {
+  background-color: #929398;
+}
+.uiLeaderboard .prophecies .prophecy.prophecy-mine,
+.uiLeaderboard .prophecies .prophecy.prophecy-none {
+  background-color: #929398;
+}
+.uiLeaderboard .prophecies .prophecy.prophecy-mine:hover,
+.uiLeaderboard .prophecies .prophecy.prophecy-none:hover {
+  background-color: #c0c3cf;
+}
+.uiLeaderboard .prophecies .btn-refresh {
+  width: calc(100% - 10px);
+  background-color: #3a71ba;
+  padding: 5px 10px;
+  position: absolute;
+  bottom: 5px;
+  color: #f2f5f5;
+}
+.uiLeaderboard .prophecies .btn-refresh:hover {
+  background-color: #3fa7dd;
+}
+.mobile .uiLeaderboard {
+  z-index: 2;
+}

src/client/ui/templates/leaderboard/styles.less

@@ -50,7 +50,7 @@
 
 				&.self {
 					.col {
-						color: @green;
+						color: @greenA;
 					}
 
 				}
@@ -137,7 +137,7 @@
 			margin-bottom: 12px;
 
 			&.selected {
-				color: @green;
+				color: @greenA;
 			}
 
 			&:hover {

src/client/ui/templates/login/styles.css

@@ -1 +1,131 @@
-.uiLogin{display:none;width:562px;height:475px;margin-top:-80px;display:flex;flex-direction:column;align-items:center}.uiLogin>*{flex-shrink:0}.uiLogin .logo{width:562px;height:200px;margin-bottom:48px;filter:drop-shadow(0 -4px 0 #312136) drop-shadow(0 4px 0 #312136) drop-shadow(4px 0 0 #312136) drop-shadow(-4px 0 0 #312136)}.uiLogin .right{height:169px;background-color:#3a3b4a;width:400px;padding:16px}.uiLogin .right .label,.uiLogin .right input{float:left}.uiLogin .right .label{width:30%;padding-top:10px;color:#80f643}.uiLogin .right input{width:70%}.uiLogin .right input,.uiLogin .right .textbox,.uiLogin .right input:-webkit-autofill{-webkit-appearance:none;box-shadow:0 0 0 20px #1a1c21 inset;color:#f2f5f5;-webkit-text-fill-color:#f2f5f5;margin-bottom:16px}.uiLogin .right input,.uiLogin .right .textbox{-webkit-appearance:none;box-shadow:0 0 0 20px #1a1c21 inset;color:#f2f5f5;-webkit-text-fill-color:#f2f5f5;margin-bottom:16px}.uiLogin .right .message{height:16px;width:200%;margin-left:-50%;margin-top:36px;float:left;text-align:center;color:#ff6942;filter:brightness(100%) drop-shadow(0 -4px 0 #312136) drop-shadow(0 4px 0 #312136) drop-shadow(4px 0 0 #312136) drop-shadow(-4px 0 0 #312136);-moz-filter:brightness(100%) drop-shadow(0 -4px 0 #312136) drop-shadow(0 4px 0 #312136) drop-shadow(4px 0 0 #312136) drop-shadow(-4px 0 0 #312136)}.uiLogin .right .top-buttons{width:100%;height:35px}.uiLogin .right .top-buttons .btn{background-color:#3a71ba;width:calc((100% - 16px) / 2);float:left;margin-right:16px;color:#f2f5f5}.uiLogin .right .top-buttons .btn:last-child{margin-right:0px}.uiLogin .right .top-buttons .btn:hover{background-color:#42548d}.uiLogin .news{margin-top:40px;color:#f2f5f5;text-align:center;cursor:pointer;filter:drop-shadow(0 -4px 0 #312136) drop-shadow(0 4px 0 #312136) drop-shadow(4px 0 0 #312136) drop-shadow(-4px 0 0 #312136)}.uiLogin .spacer-h{height:61px}.uiLoginExtra .extra{position:absolute;left:50%;bottom:10px;transform:translateX(-50%);display:flex}.uiLoginExtra .extra .btn{width:180px;padding-left:10px;padding-right:10px;background-color:#b15a30;color:#f2f5f5;filter:drop-shadow(0 -2px 0 #2d2136) drop-shadow(0 2px 0 #2d2136) drop-shadow(2px 0 0 #2d2136) drop-shadow(-2px 0 0 #2d2136)}.uiLoginExtra .extra .btn+.btn{margin-left:20px}.uiLoginExtra .extra .btn:hover{background-color:#763b3b}.uiLoginExtra .version{position:absolute;right:10px;bottom:10px;color:#ffeb38;cursor:pointer;filter:brightness(100%) drop-shadow(0 -4px 0 #312136) drop-shadow(0 4px 0 #312136) drop-shadow(4px 0 0 #312136) drop-shadow(-4px 0 0 #312136);-moz-filter:brightness(100%) drop-shadow(0 -4px 0 #312136) drop-shadow(0 4px 0 #312136) drop-shadow(4px 0 0 #312136) drop-shadow(-4px 0 0 #312136)}.mobile .uiLogin{margin-top:0px}.mobile .uiLogin .logo{margin-bottom:30px}.mobile .uiLogin .news{margin-top:20px}
+.uiLogin {
+  display: none;
+  width: 562px;
+  height: 475px;
+  margin-top: -80px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.uiLogin > * {
+  flex-shrink: 0;
+}
+.uiLogin .logo {
+  width: 562px;
+  height: 200px;
+  margin-bottom: 48px;
+  filter: drop-shadow(0px -4px 0px #312136) drop-shadow(0px 4px 0px #312136) drop-shadow(4px 0px 0px #312136) drop-shadow(-4px 0px 0px #312136);
+}
+.uiLogin .right {
+  height: 169px;
+  background-color: #3a3b4a;
+  width: 400px;
+  padding: 16px;
+  /* We duplicate this for firefox which doesn't like the webkit selector */
+}
+.uiLogin .right .label,
+.uiLogin .right input {
+  float: left;
+}
+.uiLogin .right .label {
+  width: 30%;
+  padding-top: 10px;
+  color: #80f643;
+}
+.uiLogin .right input {
+  width: 70%;
+}
+.uiLogin .right input,
+.uiLogin .right .textbox,
+.uiLogin .right input:-webkit-autofill {
+  -webkit-appearance: none;
+  box-shadow: 0 0 0px 20px #2d2136 inset;
+  color: #f2f5f5;
+  -webkit-text-fill-color: #f2f5f5;
+  margin-bottom: 16px;
+}
+.uiLogin .right input,
+.uiLogin .right .textbox {
+  -webkit-appearance: none;
+  box-shadow: 0 0 0px 20px #2d2136 inset;
+  color: #f2f5f5;
+  -webkit-text-fill-color: #f2f5f5;
+  margin-bottom: 16px;
+}
+.uiLogin .right .message {
+  height: 16px;
+  width: 200%;
+  margin-left: -50%;
+  margin-top: 36px;
+  float: left;
+  text-align: center;
+  color: #ff6942;
+  filter: brightness(100%) drop-shadow(0px -4px 0px #312136) drop-shadow(0px 4px 0px #312136) drop-shadow(4px 0px 0px #312136) drop-shadow(-4px 0px 0px #312136);
+  -moz-filter: brightness(100%) drop-shadow(0px -4px 0px #312136) drop-shadow(0px 4px 0px #312136) drop-shadow(4px 0px 0px #312136) drop-shadow(-4px 0px 0px #312136);
+}
+.uiLogin .right .top-buttons {
+  width: 100%;
+  height: 35px;
+}
+.uiLogin .right .top-buttons .btn {
+  background-color: #3a71ba;
+  width: calc((100% - 16px) / 2);
+  float: left;
+  margin-right: 16px;
+  color: #f2f5f5;
+}
+.uiLogin .right .top-buttons .btn:last-child {
+  margin-right: 0px;
+}
+.uiLogin .right .top-buttons .btn:hover {
+  background-color: #42548d;
+}
+.uiLogin .news {
+  margin-top: 40px;
+  color: #f2f5f5;
+  text-align: center;
+  cursor: pointer;
+  filter: drop-shadow(0px -4px 0px #312136) drop-shadow(0px 4px 0px #312136) drop-shadow(4px 0px 0px #312136) drop-shadow(-4px 0px 0px #312136);
+}
+.uiLogin .spacer-h {
+  height: 61px;
+}
+.uiLoginExtra .extra {
+  position: absolute;
+  left: 50%;
+  bottom: 10px;
+  transform: translateX(-50%);
+  display: flex;
+}
+.uiLoginExtra .extra .btn {
+  width: 180px;
+  padding-left: 10px;
+  padding-right: 10px;
+  background-color: #b15a30;
+  color: #f2f5f5;
+  filter: drop-shadow(0 -2px 0 #2d2136) drop-shadow(0 2px 0 #2d2136) drop-shadow(2px 0 0 #2d2136) drop-shadow(-2px 0 0 #2d2136);
+}
+.uiLoginExtra .extra .btn + .btn {
+  margin-left: 20px;
+}
+.uiLoginExtra .extra .btn:hover {
+  background-color: #763b3b;
+}
+.uiLoginExtra .version {
+  position: absolute;
+  right: 10px;
+  bottom: 10px;
+  color: #ffeb38;
+  cursor: pointer;
+  filter: brightness(100%) drop-shadow(0px -4px 0px #312136) drop-shadow(0px 4px 0px #312136) drop-shadow(4px 0px 0px #312136) drop-shadow(-4px 0px 0px #312136);
+  -moz-filter: brightness(100%) drop-shadow(0px -4px 0px #312136) drop-shadow(0px 4px 0px #312136) drop-shadow(4px 0px 0px #312136) drop-shadow(-4px 0px 0px #312136);
+}
+.mobile .uiLogin {
+  margin-top: 0px;
+}
+.mobile .uiLogin .logo {
+  margin-bottom: 30px;
+}
+.mobile .uiLogin .news {
+  margin-top: 20px;
+}

src/client/ui/templates/login/styles.less

@@ -46,7 +46,7 @@
 		.label {
 			width: 30%;
 			padding-top: 10px;
-			color: @green;
+			color: @greenA;
 		}
 
 		input {
@@ -57,7 +57,7 @@
 		.textbox,
 		input:-webkit-autofill {
 			-webkit-appearance: none;
-			box-shadow: 0 0 0px 20px darken(@gray, 15%) inset;
+			box-shadow: 0 0 0px 20px @black inset;
 			color: @white;
 			-webkit-text-fill-color: @white;
 			margin-bottom: @boxPadding;
@@ -67,7 +67,7 @@
 		input,
 		.textbox {
 			-webkit-appearance: none;
-			box-shadow: 0 0 0px 20px darken(@gray, 15%) inset;
+			box-shadow: 0 0 0px 20px @black inset;
 			color: @white;
 			-webkit-text-fill-color: @white;
 			margin-bottom: @boxPadding;
@@ -167,7 +167,7 @@
 		position: absolute;
 		right: 10px;
 		bottom: 10px;
-		color: @yellow;
+		color: @yellowA;
 		cursor: pointer;
 		filter: brightness(100%)
 		drop-shadow(0px -4px 0px @blackD) 

src/client/ui/templates/menu/styles.css

@@ -1 +1,122 @@
-.uiMenu{position:absolute;right:10px;bottom:10px;width:336px;height:144px;padding:8px;background-color:rgba(55,48,65,0.9)}.uiMenu [class^="btn"]{width:64px;height:64px;margin:0 8px;float:left;cursor:pointer;position:relative}.uiMenu [class^="btn"]:hover{background-color:rgba(242,245,245,0.1)}.uiMenu [class^="btn"] .icon{pointer-events:none;position:absolute;left:0px;top:0px;width:100%;height:100%}.uiMenu [class^="btn"].btnCollapse{display:none}.uiMenu [class^="btn"].btnInventory .icon{background:url('../../../images/uiIcons.png') 0 0}.uiMenu [class^="btn"].btnEquipment .icon{background:url('../../../images/uiIcons.png') -192px 0}.uiMenu [class^="btn"].btnSmithing .icon{background:url('../../../images/uiIcons.png') -128px -64px}.uiMenu [class^="btn"].btnPassives{position:relative}.uiMenu [class^="btn"].btnPassives .points{width:100%;text-align:center;left:0px;bottom:23px;position:absolute;color:#f2f5f5;filter:drop-shadow(0 -2px 0 #312136) drop-shadow(0 2px 0 #312136) drop-shadow(2px 0 0 #312136) drop-shadow(-2px 0 0 #312136)}.uiMenu [class^="btn"].btnPassives .icon{background:url('../../../images/uiIcons.png') -320px -64px}.uiMenu [class^="btn"].btnOnline .icon{background:url('../../../images/uiIcons.png') -64px 0}.uiMenu [class^="btn"].btnHelp .icon{background:url('../../../images/uiIcons.png') -128px 0}.uiMenu [class^="btn"].btnLeaderboard .icon{background:url('../../../images/uiIcons.png') -256px 0}.uiMenu [class^="btn"].btnReputation .icon{background:url('../../../images/uiIcons.png') -320px 0}.uiMenu [class^="btn"].btnMainMenu .icon{background:url('../../../images/uiIcons.png') 0 -64px}.mobile .uiMenu{bottom:auto;top:10px;right:10px;width:64px;height:64px}.mobile .uiMenu:after{content:'';position:absolute;left:0px;top:0px;background:url('../../../images/uiIcons.png');background-position:0 -64px;width:64px;height:64px}.mobile .uiMenu>*{display:none}.mobile .uiMenu.active{display:flex;flex-direction:column;height:calc(100% - 20px);width:200px;z-index:2;flex-wrap:wrap-reverse;align-items:center;justify-content:center}.mobile .uiMenu.active:after{display:none}.mobile .uiMenu.active>*{display:block;margin:0px}.mobile .uiMenu.active .btnCollapse{display:block;position:absolute;right:calc(100% + 10px);top:50%;transform:translateY(-50%);background-color:rgba(55,48,65,0.9);width:64px;height:64px}.mobile .uiMenu.active .btnCollapse .icon{width:100%;height:100%;background:url('../../../images/uiIcons.png') -448px 0}
+.uiMenu {
+  position: absolute;
+  right: 10px;
+  bottom: 10px;
+  width: 336px;
+  height: 144px;
+  padding: 8px;
+  background-color: rgba(55, 48, 65, 0.9);
+}
+.uiMenu [class^="btn"] {
+  width: 64px;
+  height: 64px;
+  margin: 0px 8px;
+  float: left;
+  cursor: pointer;
+  position: relative;
+}
+.uiMenu [class^="btn"]:hover {
+  background-color: rgba(242, 245, 245, 0.1);
+}
+.uiMenu [class^="btn"] .icon {
+  pointer-events: none;
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  width: 100%;
+  height: 100%;
+}
+.uiMenu [class^="btn"].btnCollapse {
+  display: none;
+}
+.uiMenu [class^="btn"].btnInventory .icon {
+  background: url('../../../images/uiIcons.png') 0px 0px;
+}
+.uiMenu [class^="btn"].btnEquipment .icon {
+  background: url('../../../images/uiIcons.png') -192px 0px;
+}
+.uiMenu [class^="btn"].btnSmithing .icon {
+  background: url('../../../images/uiIcons.png') -128px -64px;
+}
+.uiMenu [class^="btn"].btnPassives {
+  position: relative;
+}
+.uiMenu [class^="btn"].btnPassives .points {
+  width: 100%;
+  text-align: center;
+  left: 0px;
+  bottom: 23px;
+  position: absolute;
+  color: #f2f5f5;
+  filter: drop-shadow(0px -2px 0px #312136) drop-shadow(0px 2px 0px #312136) drop-shadow(2px 0px 0px #312136) drop-shadow(-2px 0px 0px #312136);
+}
+.uiMenu [class^="btn"].btnPassives .icon {
+  background: url('../../../images/uiIcons.png') -320px -64px;
+}
+.uiMenu [class^="btn"].btnOnline .icon {
+  background: url('../../../images/uiIcons.png') -64px 0px;
+}
+.uiMenu [class^="btn"].btnHelp .icon {
+  background: url('../../../images/uiIcons.png') -128px 0px;
+}
+.uiMenu [class^="btn"].btnLeaderboard .icon {
+  background: url('../../../images/uiIcons.png') -256px 0px;
+}
+.uiMenu [class^="btn"].btnReputation .icon {
+  background: url('../../../images/uiIcons.png') -320px 0px;
+}
+.uiMenu [class^="btn"].btnMainMenu .icon {
+  background: url('../../../images/uiIcons.png') 0px -64px;
+}
+.mobile .uiMenu {
+  bottom: auto;
+  top: 10px;
+  right: 10px;
+  width: 64px;
+  height: 64px;
+}
+.mobile .uiMenu:after {
+  content: '';
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  background: url('../../../images/uiIcons.png');
+  background-position: 0px -64px;
+  width: 64px;
+  height: 64px;
+}
+.mobile .uiMenu > * {
+  display: none;
+}
+.mobile .uiMenu.active {
+  display: flex;
+  flex-direction: column;
+  height: calc(100% - 20px);
+  width: 200px;
+  z-index: 2;
+  flex-wrap: wrap-reverse;
+  align-items: center;
+  justify-content: center;
+}
+.mobile .uiMenu.active:after {
+  display: none;
+}
+.mobile .uiMenu.active > * {
+  display: block;
+  margin: 0px;
+}
+.mobile .uiMenu.active .btnCollapse {
+  display: block;
+  position: absolute;
+  right: calc(100% + 10px);
+  top: 50%;
+  transform: translateY(-50%);
+  background-color: rgba(55, 48, 65, 0.9);
+  width: 64px;
+  height: 64px;
+}
+.mobile .uiMenu.active .btnCollapse .icon {
+  width: 100%;
+  height: 100%;
+  background: url('../../../images/uiIcons.png') -448px 0px;
+}

src/client/ui/templates/menu/styles.less

@@ -9,7 +9,7 @@
 	width: ((@btnSize * 4) + (@pad * 10));
 	height: ((@btnSize * 2) + (@pad * 2));
 	padding: @pad;
-	background-color: fade(@darkGray, 90%);
+	background-color: fade(@blackC, 90%);
 
 	[class^="btn"] {
 		width: @btnSize;
@@ -142,7 +142,7 @@
 			right: calc(100% + 10px);
 			top: 50%;
 			transform: translateY(-50%);
-			background-color: fade(@darkGray, 90%);
+			background-color: fade(@blackC, 90%);
 			width: @btnSize;
 			height: @btnSize;
 

src/client/ui/templates/messages/styles.less

@@ -93,11 +93,11 @@
 			}
 
 			&.color-green {
-				color: @green;
+				color: @greenA;
 			}
 
 			&.color-red {
-				color: @red;
+				color: @redB;
 			}
 
 			&.color-cyan {
@@ -160,7 +160,7 @@
 
 			&.textbox.message {
 				display: none;
-				background-color: @gray;
+				background-color: @grayB;
 				text-align: left;
 				padding: 5px 10px;
 			}
@@ -232,7 +232,7 @@
 
 		.list {
 			overflow-y: auto;
-			background-color: @darkGray;
+			background-color: @blackC;
 
 			.list-message {
 				filter: none;
@@ -308,7 +308,7 @@
 	.filters {
 		margin-bottom: 0px;
 		flex-shrink: 0;
-		background-color: @darkGray;
+		background-color: @blackC;
 	}
 
 	.list {
@@ -321,7 +321,7 @@
 		top: 0px;
 		width: 100%;
 		height: 100%;
-		background-color: fade(@darkGray, 90%);
+		background-color: fade(@blackC, 90%);
 		display: flex;
 		flex-direction: column;
 		z-index: 999999998;
@@ -398,7 +398,7 @@
 		bottom: auto;
 		width: @btnSize;
 		height: @btnSize;
-		background-color: fade(@darkGray, 90%);
+		background-color: fade(@blackC, 90%);
 
 		&:after {
 			content: '';

src/client/ui/templates/online/styles.css

@@ -1 +1,74 @@
-.uiOnline{display:none;background-color:#3c3f4c;border:5px solid #3c3f4c;text-align:center;width:450px;height:396px}.uiOnline>.heading{color:#48edff;width:100%;height:36px;background-color:#3c3f4c}.uiOnline>.heading .heading-text{padding-top:8px;margin:auto}.uiOnline .bottom{height:calc(100% - 36px);background-color:#373041;padding:8px}.uiOnline .bottom .list{width:100%;height:100%;overflow-y:auto;background-color:#373041;display:flex;flex-direction:column}.uiOnline .bottom .list .heading{height:24px;color:#f2f5f5}.uiOnline .bottom .list .heading>div{float:left;padding:4px;height:24px}.uiOnline .bottom .list .heading>div:nth-child(1){width:10%}.uiOnline .bottom .list .heading>div:nth-child(2){width:55%}.uiOnline .bottom .list .heading>div:nth-child(3){width:35%}.uiOnline .bottom .list .onlineUser{color:#929398;height:24px;cursor:pointer}.uiOnline .bottom .list .onlineUser>div{float:left;padding:4px;height:24px}.uiOnline .bottom .list .onlineUser>div:nth-child(1){width:10%}.uiOnline .bottom .list .onlineUser>div:nth-child(2){width:55%}.uiOnline .bottom .list .onlineUser>div:nth-child(3){width:35%}.uiOnline .bottom .list .onlineUser:hover{background-color:#75668a}.mobile .uiOnline{z-index:2}
+.uiOnline {
+  display: none;
+  background-color: #3c3f4c;
+  border: 5px solid #3c3f4c;
+  text-align: center;
+  width: 450px;
+  height: 396px;
+}
+.uiOnline > .heading {
+  color: #48edff;
+  width: 100%;
+  height: 36px;
+  background-color: #3c3f4c;
+}
+.uiOnline > .heading .heading-text {
+  padding-top: 8px;
+  margin: auto;
+}
+.uiOnline .bottom {
+  height: calc(100% - 36px);
+  background-color: #373041;
+  padding: 8px;
+}
+.uiOnline .bottom .list {
+  width: 100%;
+  height: 100%;
+  overflow-y: auto;
+  background-color: #373041;
+  display: flex;
+  flex-direction: column;
+}
+.uiOnline .bottom .list .heading {
+  height: 24px;
+  color: #f2f5f5;
+}
+.uiOnline .bottom .list .heading > div {
+  float: left;
+  padding: 4px;
+  height: 24px;
+}
+.uiOnline .bottom .list .heading > div:nth-child(1) {
+  width: 10%;
+}
+.uiOnline .bottom .list .heading > div:nth-child(2) {
+  width: 55%;
+}
+.uiOnline .bottom .list .heading > div:nth-child(3) {
+  width: 35%;
+}
+.uiOnline .bottom .list .onlineUser {
+  color: #929398;
+  height: 24px;
+  cursor: pointer;
+}
+.uiOnline .bottom .list .onlineUser > div {
+  float: left;
+  padding: 4px;
+  height: 24px;
+}
+.uiOnline .bottom .list .onlineUser > div:nth-child(1) {
+  width: 10%;
+}
+.uiOnline .bottom .list .onlineUser > div:nth-child(2) {
+  width: 55%;
+}
+.uiOnline .bottom .list .onlineUser > div:nth-child(3) {
+  width: 35%;
+}
+.uiOnline .bottom .list .onlineUser:hover {
+  background-color: #3c3f4c;
+}
+.mobile .uiOnline {
+  z-index: 2;
+}

src/client/ui/templates/online/styles.less

@@ -18,6 +18,7 @@
 			padding-top: 8px;
 			margin: auto;
 		}
+
 	}
 
 	.bottom {
@@ -29,7 +30,7 @@
 			width: 100%;
 			height: 100%;
 			overflow-y: auto;
-			background-color: @darkGray;
+			background-color: @blackC;
 			display: flex;
 			flex-direction: column;
 
@@ -41,7 +42,7 @@
 					float: left;
 					padding: 4px;
 					height: 24px;
-					
+
 					&:nth-child(1) {
 						width: 10%;
 					}
@@ -50,12 +51,13 @@
 						width: 55%;
 					}
 
-					&:nth-child(3) {	
+					&:nth-child(3) {
 						width: 35%;
 					}
+
 				}
-			}
 
+			}
 
 			.onlineUser {
 				color: @grayC;
@@ -66,7 +68,7 @@
 					float: left;
 					padding: 4px;
 					height: 24px;
-					
+
 					&:nth-child(1) {
 						width: 10%;
 					}
@@ -75,17 +77,22 @@
 						width: 55%;
 					}
 
-					&:nth-child(3) {	
+					&:nth-child(3) {
 						width: 35%;
 					}
+
 				}
 
 				&:hover {
-					background-color: lighten(@darkGray, 25%);
+					background-color: @blackB;
 				}
+
 			}
+
 		}
+
 	}
+
 }
 
 .mobile .uiOnline {

src/client/ui/templates/party/styles.css

@@ -1 +1,128 @@
-.uiParty .party{position:absolute;left:16px;top:154px}.uiParty .party .list{overflow-y:auto;max-height:calc(100vh - 591px);padding-right:22px}.uiParty .party .list .member{width:160px;background-color:#3a3b4a;color:#f2f5f5;cursor:pointer}.uiParty .party .list .member+.member{margin-top:5px}.uiParty .party .list .member.differentZone{opacity:.4}.uiParty .party .list .member.differentZone .statBox [class^="stat"]{width:0% !important}.uiParty .party .list .member:last-child{margin-bottom:0px}.uiParty .party .list .member .statBox{width:100%;height:20px;background-color:#3c3f4c;position:relative;display:flex;justify-content:center;align-items:center}.uiParty .party .list .member .statBox+.statBox{border-top:2px solid #2d2136}.uiParty .party .list .member .statBox [class^="stat"]{position:absolute;left:0px;top:0px;height:100%}.uiParty .party .list .member .statBox .text{color:#f2f5f5;z-index:1;padding:0px 2px;overflow:hidden;text-overflow:ellipsis;text-shadow:2px 0 #2d2136,-2px 0 #2d2136,0 -2px #2d2136,0 2px #2d2136,-2px -2px #2d2136,-2px 2px #2d2136,2px -2px #2d2136,2px 2px #2d2136}.uiParty .party .list .member .statBox:nth-child(1){background-color:#802343}.uiParty .party .list .member .statBox:nth-child(2){background-color:#42548d}.uiParty .party .list .member .statBox .statHp{background-color:#d43346}.uiParty .party .list .member .statBox .statMana{background-color:#3fa7dd}.uiParty .invite{position:absolute;right:436px;bottom:10px;background-color:rgba(55,48,65,0.9);padding:10px;color:#f2f5f5;display:flex;flex-direction:column}.uiParty .invite>.text{margin-bottom:15px;text-align:center;display:flex;flex-direction:column}.uiParty .invite>.text .name{margin-top:10px}.uiParty .invite .buttons{display:flex}.uiParty .invite .buttons .btn{width:100%;background-color:#505360;text-align:center;padding:10px;cursor:pointer;display:flex;justify-content:center;align-items:center}.uiParty .invite .buttons .btn .text{pointer-events:none;color:#f2f5f5;text-shadow:2px 0 #2d2136,-2px 0 #2d2136,0 -2px #2d2136,0 2px #2d2136,-2px -2px #2d2136,-2px 2px #2d2136,2px -2px #2d2136,2px 2px #2d2136}.uiParty .invite .buttons .btn+.btn{margin-left:10px}.uiParty .invite .buttons .btn.btnDecline{background-color:#d43346}.uiParty .invite .buttons .btn.btnDecline:hover{background-color:#a82841}.uiParty .invite .buttons .btn.btnAccept{background-color:#3f8d6d}.uiParty .invite .buttons .btn.btnAccept:hover{background-color:#386646}.uiParty.full .party .list .member{padding:5px;background-color:rgba(55,48,65,0.9)}.uiParty.minimal .party .list .statBox:nth-child(2){display:none}.mobile .uiParty .list{max-height:calc(100% - 154px - 10px)}
+.uiParty .party {
+  position: absolute;
+  left: 16px;
+  top: 154px;
+}
+.uiParty .party .list {
+  overflow-y: auto;
+  max-height: calc(100vh - 591px);
+  padding-right: 22px;
+}
+.uiParty .party .list .member {
+  width: 160px;
+  background-color: #3a3b4a;
+  color: #f2f5f5;
+  cursor: pointer;
+}
+.uiParty .party .list .member + .member {
+  margin-top: 5px;
+}
+.uiParty .party .list .member.differentZone {
+  opacity: 0.4;
+}
+.uiParty .party .list .member.differentZone .statBox [class^="stat"] {
+  width: 0% !important;
+}
+.uiParty .party .list .member:last-child {
+  margin-bottom: 0px;
+}
+.uiParty .party .list .member .statBox {
+  width: 100%;
+  height: 20px;
+  background-color: #c0c3cf;
+  position: relative;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.uiParty .party .list .member .statBox + .statBox {
+  border-top: 2px solid #2d2136;
+}
+.uiParty .party .list .member .statBox [class^="stat"] {
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  height: 100%;
+}
+.uiParty .party .list .member .statBox .text {
+  color: #f2f5f5;
+  z-index: 1;
+  padding: 0px 2px;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  text-shadow: 2px 0px #2d2136, -2px 0px #2d2136, 0px -2px #2d2136, 0px 2px #2d2136, -2px -2px #2d2136, -2px 2px #2d2136, 2px -2px #2d2136, 2px 2px #2d2136;
+}
+.uiParty .party .list .member .statBox:nth-child(1) {
+  background-color: #802343;
+}
+.uiParty .party .list .member .statBox:nth-child(2) {
+  background-color: #42548d;
+}
+.uiParty .party .list .member .statBox .statHp {
+  background-color: #d43346;
+}
+.uiParty .party .list .member .statBox .statMana {
+  background-color: #3fa7dd;
+}
+.uiParty .invite {
+  position: absolute;
+  right: 436px;
+  bottom: 10px;
+  background-color: rgba(55, 48, 65, 0.9);
+  padding: 10px;
+  color: #f2f5f5;
+  display: flex;
+  flex-direction: column;
+}
+.uiParty .invite > .text {
+  margin-bottom: 15px;
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+}
+.uiParty .invite > .text .name {
+  margin-top: 10px;
+}
+.uiParty .invite .buttons {
+  display: flex;
+}
+.uiParty .invite .buttons .btn {
+  width: 100%;
+  background-color: #505360;
+  text-align: center;
+  padding: 10px;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.uiParty .invite .buttons .btn .text {
+  pointer-events: none;
+  color: #f2f5f5;
+  text-shadow: 2px 0px #2d2136, -2px 0px #2d2136, 0px -2px #2d2136, 0px 2px #2d2136, -2px -2px #2d2136, -2px 2px #2d2136, 2px -2px #2d2136, 2px 2px #2d2136;
+}
+.uiParty .invite .buttons .btn + .btn {
+  margin-left: 10px;
+}
+.uiParty .invite .buttons .btn.btnDecline {
+  background-color: #d43346;
+}
+.uiParty .invite .buttons .btn.btnDecline:hover {
+  background-color: #a82841;
+}
+.uiParty .invite .buttons .btn.btnAccept {
+  background-color: #3f8d6d;
+}
+.uiParty .invite .buttons .btn.btnAccept:hover {
+  background-color: #386646;
+}
+.uiParty.full .party .list .member {
+  padding: 5px;
+  background-color: rgba(55, 48, 65, 0.9);
+}
+.uiParty.minimal .party .list .statBox:nth-child(2) {
+  display: none;
+}
+.mobile .uiParty .list {
+  max-height: calc(100% - 154px - 10px);
+}

src/client/ui/templates/party/styles.less

@@ -41,7 +41,7 @@
 				.statBox {
 					width: 100%;
 					height: 20px;
-					background-color: @gray;
+					background-color: @grayB;
 					position: relative;
 					display: flex;
 					justify-content: center;
@@ -95,7 +95,7 @@
 		position: absolute;
 		right: 436px;
 		bottom: 10px;
-		background-color: fade(@darkGray, 90%);
+		background-color: fade(@blackC, 90%);
 		padding: 10px;
 		color: @white;
 		display: flex;
@@ -165,7 +165,7 @@
 			.list {
 				.member {
 					padding: 5px;
-					background-color: fade(@darkGray, 90%);
+					background-color: fade(@blackC, 90%);
 				}
 
 			}

src/client/ui/templates/quests/styles.css

@@ -1 +1,110 @@
-.uiQuests{width:326px;box-shadow:0 -2px 0 #2d2136,0 2px 0 #2d2136,2px 0 0 #2d2136,-2px 0 0 #2d2136}.uiQuests .heading{color:#ffeb38;padding:8px;background-color:rgba(58,59,74,0.9)}.uiQuests .list .quest{cursor:pointer;padding:8px;background-color:rgba(58,59,74,0.9)}.uiQuests .list .quest:hover{background-color:rgba(92,93,117,0.9)}.uiQuests .list .quest .zone{color:#69696e;margin-bottom:4px;text-align:right}.uiQuests .list .quest .name{color:#f2f5f5;margin-bottom:3px}.uiQuests .list .quest .description{color:#8da7a7}.uiQuests .list .quest.disabled .description{display:none}.uiQuests .list .quest .reward{display:none;color:#44cb95}.uiQuests .list .quest:hover>.description{display:none}.uiQuests .list .quest:hover>.reward{display:block}.uiQuests .list .quest .ready-text{display:none}.uiQuests .list .quest.active .name{color:#3fa7dd}.uiQuests .list .quest.ready .name{color:#80f643}.uiQuests .list .quest.ready .description{display:none}.uiQuests .list .quest.ready .reward{display:none}.uiQuests .list .quest.ready .ready-text{display:block;color:#f2f5f5}.uiQuests .btn{display:none}.uiQuests.minimal .quest.disabled{display:none}.mobile .uiQuests{background-color:rgba(55,48,65,0.9)}.mobile .uiQuests:not(.active){width:64px;height:64px;margin-left:10px;position:relative}.mobile .uiQuests:not(.active):after{content:'';position:absolute;left:0px;top:0px;background:url('../../../images/uiIcons.png');background-position:-64px -128px;width:64px;height:64px}.mobile .uiQuests:not(.active)>*{display:none}.mobile .uiQuests.active{z-index:3;position:absolute;right:0px;top:0px}.mobile .uiQuests.active .btn{display:block;position:absolute;right:calc(100% + 10px);top:0px;background-color:rgba(55,48,65,0.9);width:64px;height:64px;padding-top:0px}.mobile .uiQuests.active .btn .icon{width:100%;height:100%;background:url('../../../images/uiIcons.png') -448px 0}
+.uiQuests {
+  width: 326px;
+  box-shadow: 0 -2px 0 #2d2136, 0 2px 0 #2d2136, 2px 0 0 #2d2136, -2px 0 0 #2d2136;
+}
+.uiQuests .heading {
+  color: #ffeb38;
+  padding: 8px;
+  background-color: rgba(58, 59, 74, 0.9);
+}
+.uiQuests .list .quest {
+  cursor: pointer;
+  padding: 8px;
+  background-color: rgba(58, 59, 74, 0.9);
+}
+.uiQuests .list .quest:hover {
+  background-color: rgba(92, 93, 117, 0.9);
+}
+.uiQuests .list .quest .zone {
+  color: #69696e;
+  margin-bottom: 4px;
+  text-align: right;
+}
+.uiQuests .list .quest .name {
+  color: #f2f5f5;
+  margin-bottom: 3px;
+}
+.uiQuests .list .quest .description {
+  color: #8da7a7;
+}
+.uiQuests .list .quest.disabled .description {
+  display: none;
+}
+.uiQuests .list .quest .reward {
+  display: none;
+  color: #44cb95;
+}
+.uiQuests .list .quest:hover > .description {
+  display: none;
+}
+.uiQuests .list .quest:hover > .reward {
+  display: block;
+}
+.uiQuests .list .quest .ready-text {
+  display: none;
+}
+.uiQuests .list .quest.active .name {
+  color: #3fa7dd;
+}
+.uiQuests .list .quest.ready .name {
+  color: #80f643;
+}
+.uiQuests .list .quest.ready .description {
+  display: none;
+}
+.uiQuests .list .quest.ready .reward {
+  display: none;
+}
+.uiQuests .list .quest.ready .ready-text {
+  display: block;
+  color: #f2f5f5;
+}
+.uiQuests .btn {
+  display: none;
+}
+.uiQuests.minimal .quest.disabled {
+  display: none;
+}
+.mobile .uiQuests {
+  background-color: rgba(55, 48, 65, 0.9);
+}
+.mobile .uiQuests:not(.active) {
+  width: 64px;
+  height: 64px;
+  margin-left: 10px;
+  position: relative;
+}
+.mobile .uiQuests:not(.active):after {
+  content: '';
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  background: url('../../../images/uiIcons.png');
+  background-position: -64px -128px;
+  width: 64px;
+  height: 64px;
+}
+.mobile .uiQuests:not(.active) > * {
+  display: none;
+}
+.mobile .uiQuests.active {
+  z-index: 3;
+  position: absolute;
+  right: 0px;
+  top: 0px;
+}
+.mobile .uiQuests.active .btn {
+  display: block;
+  position: absolute;
+  right: calc(100% + 10px);
+  top: 0px;
+  background-color: rgba(55, 48, 65, 0.9);
+  width: 64px;
+  height: 64px;
+  padding-top: 0px;
+}
+.mobile .uiQuests.active .btn .icon {
+  width: 100%;
+  height: 100%;
+  background: url('../../../images/uiIcons.png') -448px 0px;
+}

src/client/ui/templates/quests/styles.less

@@ -6,7 +6,7 @@
 	box-shadow: 0 -2px 0 @black, 0 2px 0 @black, 2px 0 0 @black, -2px 0 0 @black;
 
 	.heading {
-		color: @yellow;
+		color: @yellowA;
 		padding: 8px;
 		background-color: fade(#3a3b4a, 90%);
 	}
@@ -65,14 +65,14 @@
 
 			&.active {
 				.name {
-					color: @blue;
+					color: @blueB;
 				}
 
 			}
 
 			&.ready {
 				.name {
-					color: @green;
+					color: @greenA;
 				}
 
 				.description {
@@ -108,7 +108,7 @@
 }
 
 .mobile .uiQuests {
-	background-color: fade(@darkGray, 90%);
+	background-color: fade(@blackC, 90%);
 
 	&:not(.active) {
 		width: @btnSize;
@@ -144,7 +144,7 @@
 			position: absolute;
 			right: calc(100% + 10px);
 			top: 0px;
-			background-color: fade(@darkGray, 90%);
+			background-color: fade(@blackC, 90%);
 			width: @btnSize;
 			height: @btnSize;
 			padding-top: 0px;

src/client/ui/templates/reputation/styles.css

@@ -1 +1,97 @@
-.uiReputation{display:none;width:600px;height:385px;border:5px solid rgba(60,63,76,0.9);text-align:center}.uiReputation>.heading{color:#48edff;width:100%;height:36px;background-color:rgba(60,63,76,0.9)}.uiReputation>.heading .heading-text{padding-top:8px;margin:auto}.uiReputation .list,.uiReputation .info{background-color:rgba(55,48,65,0.9);float:left;height:calc(100% - 36px)}.uiReputation .list{width:40%;padding:15px 15px 15px 15px}.uiReputation .list .faction{width:100%;padding:5px 10px;background-color:#69696e;color:#f2f5f5;margin-bottom:15px;cursor:pointer}.uiReputation .list .faction.selected{color:#80f643}.uiReputation .list .faction:hover{background-color:#929398}.uiReputation .info{width:60%;padding:15px 15px 15px 0px}.uiReputation .info .heading{width:100%;height:36px;color:#3fa7dd}.uiReputation .info .heading .heading-bottom{margin:auto}.uiReputation .info .description{color:#c0c3cf;height:calc(100% - 36px - 25px);text-align:justify}.uiReputation .info .bar-outer{width:100%;margin:auto;height:25px;position:relative}.uiReputation .info .bar-outer .back{width:100%;height:100%;background-color:#533399}.uiReputation .info .bar-outer .front{width:50%;height:100%;position:absolute;left:0px;top:0px;background-color:#7a3ad3}.uiReputation .info .bar-outer .tier{width:100%;height:100%;color:#f2f5f5;text-align:center;position:absolute;left:0px;top:5px;filter:drop-shadow(0 -2px 0 #312136) drop-shadow(0 2px 0 #312136) drop-shadow(2px 0 0 #312136) drop-shadow(-2px 0 0 #312136);-moz-filter:drop-shadow(0 -2px 0 #312136) drop-shadow(0 2px 0 #312136) drop-shadow(2px 0 0 #312136) drop-shadow(-2px 0 0 #312136)}.uiReputation .list:empty{display:none}.uiReputation .list:empty+.info{width:100%}.mobile .uiReputation{z-index:2}
+.uiReputation {
+  display: none;
+  width: 600px;
+  height: 385px;
+  border: 5px solid rgba(60, 63, 76, 0.9);
+  text-align: center;
+}
+.uiReputation > .heading {
+  color: #48edff;
+  width: 100%;
+  height: 36px;
+  background-color: rgba(60, 63, 76, 0.9);
+}
+.uiReputation > .heading .heading-text {
+  padding-top: 8px;
+  margin: auto;
+}
+.uiReputation .list,
+.uiReputation .info {
+  background-color: rgba(55, 48, 65, 0.9);
+  float: left;
+  height: calc(100% - 36px);
+}
+.uiReputation .list {
+  width: 40%;
+  padding: 15px 15px 15px 15px;
+}
+.uiReputation .list .faction {
+  width: 100%;
+  padding: 5px 10px;
+  background-color: #69696e;
+  color: #f2f5f5;
+  margin-bottom: 15px;
+  cursor: pointer;
+}
+.uiReputation .list .faction.selected {
+  color: #80f643;
+}
+.uiReputation .list .faction:hover {
+  background-color: #929398;
+}
+.uiReputation .info {
+  width: 60%;
+  padding: 15px 15px 15px 0px;
+}
+.uiReputation .info .heading {
+  width: 100%;
+  height: 36px;
+  color: #3fa7dd;
+}
+.uiReputation .info .heading .heading-bottom {
+  margin: auto;
+}
+.uiReputation .info .description {
+  color: #c0c3cf;
+  height: calc(100% - 36px - 25px);
+  text-align: justify;
+}
+.uiReputation .info .bar-outer {
+  width: 100%;
+  margin: auto;
+  height: 25px;
+  position: relative;
+}
+.uiReputation .info .bar-outer .back {
+  width: 100%;
+  height: 100%;
+  background-color: #533399;
+}
+.uiReputation .info .bar-outer .front {
+  width: 50%;
+  height: 100%;
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  background-color: #7a3ad3;
+}
+.uiReputation .info .bar-outer .tier {
+  width: 100%;
+  height: 100%;
+  color: #f2f5f5;
+  text-align: center;
+  position: absolute;
+  left: 0px;
+  top: 5px;
+  filter: drop-shadow(0px -2px 0px #312136) drop-shadow(0px 2px 0px #312136) drop-shadow(2px 0px 0px #312136) drop-shadow(-2px 0px 0px #312136);
+  -moz-filter: drop-shadow(0px -2px 0px #312136) drop-shadow(0px 2px 0px #312136) drop-shadow(2px 0px 0px #312136) drop-shadow(-2px 0px 0px #312136);
+}
+.uiReputation .list:empty {
+  display: none;
+}
+.uiReputation .list:empty + .info {
+  width: 100%;
+}
+.mobile .uiReputation {
+  z-index: 2;
+}

src/client/ui/templates/reputation/styles.less

@@ -40,7 +40,7 @@
 			cursor: pointer;
 
 			&.selected {
-				color: @green;
+				color: @greenA;
 			}
 
 			&:hover {

src/client/ui/templates/spells/styles.css

@@ -1 +1,84 @@
-.uiSpells{position:absolute;right:10px;top:10px;height:72px;box-shadow:0 -2px 0 #2d2136,0 2px 0 #2d2136,2px 0 0 #2d2136,-2px 0 0 #2d2136}.uiSpells .spell{width:64px;height:64px;float:left;margin-left:10px;background-color:#2d2136;cursor:pointer;position:relative;box-sizing:content-box;border:5px solid rgba(58,59,74,0.9);transition-property:filter;transition-duration:.1s}.uiSpells .spell:first-child{margin-left:0px}.uiSpells .spell:hover{filter:brightness(160%);-moz-filter:brightness(160%)}.uiSpells .spell.active .hotkey{color:#80f643}.uiSpells .spell .icon{position:absolute;left:0px;top:0px;width:100%;height:100%}.uiSpells .spell .cooldown{position:absolute;left:0px;top:0px;width:0px;height:100%;background-color:rgba(212,51,70,0.75)}.uiSpells .spell .hotkey{position:absolute;left:-2px;bottom:-6px;color:#f2f5f5;font-size:18px;z-index:2;text-shadow:2px 2px 0 #2d2136,-2px -2px 0 #2d2136,2px -2px 0 #2d2136,-2px 2px 0 #2d2136,2px 2px 0 #2d2136}.uiSpells .spell .hotkey.no-mana{color:#d43346}.mobile .uiSpells{top:auto;bottom:10px;padding:0px;height:auto;background-color:transparent;display:flex;flex-direction:column-reverse}.mobile .uiSpells .spell{position:relative;margin:10px 0px 0px 0px;background-color:rgba(58,59,74,0.9);border:none}.mobile .uiSpells .spell .hotkey{display:none}.mobile .uiSpells .spell.active:before{content:'';width:5px;height:100%;left:-5px;top:0%;background-color:#4ac441;position:absolute}
+.uiSpells {
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  height: 72px;
+  box-shadow: 0 -2px 0 #2d2136, 0 2px 0 #2d2136, 2px 0 0 #2d2136, -2px 0 0 #2d2136;
+}
+.uiSpells .spell {
+  width: 64px;
+  height: 64px;
+  float: left;
+  margin-left: 10px;
+  background-color: #2d2136;
+  cursor: pointer;
+  position: relative;
+  box-sizing: content-box;
+  border: 5px solid rgba(58, 59, 74, 0.9);
+  transition-property: filter;
+  transition-duration: 0.1s;
+}
+.uiSpells .spell:first-child {
+  margin-left: 0px;
+}
+.uiSpells .spell:hover {
+  filter: brightness(160%);
+  -moz-filter: brightness(160%);
+}
+.uiSpells .spell.active .hotkey {
+  color: #80f643;
+}
+.uiSpells .spell .icon {
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  width: 100%;
+  height: 100%;
+}
+.uiSpells .spell .cooldown {
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  width: 0px;
+  height: 100%;
+  background-color: rgba(212, 51, 70, 0.75);
+}
+.uiSpells .spell .hotkey {
+  position: absolute;
+  left: -2px;
+  bottom: -6px;
+  color: #f2f5f5;
+  font-size: 18px;
+  z-index: 2;
+  text-shadow: 2px 2px 0 #2d2136, -2px -2px 0 #2d2136, 2px -2px 0 #2d2136, -2px 2px 0 #2d2136, 2px 2px 0 #2d2136;
+}
+.uiSpells .spell .hotkey.no-mana {
+  color: #d43346;
+}
+.mobile .uiSpells {
+  top: auto;
+  bottom: 10px;
+  padding: 0px;
+  height: auto;
+  background-color: transparent;
+  display: flex;
+  flex-direction: column-reverse;
+}
+.mobile .uiSpells .spell {
+  position: relative;
+  margin: 10px 0px 0px 0px;
+  background-color: rgba(58, 59, 74, 0.9);
+  border: none;
+}
+.mobile .uiSpells .spell .hotkey {
+  display: none;
+}
+.mobile .uiSpells .spell.active:before {
+  content: '';
+  width: 5px;
+  height: 100%;
+  left: -5px;
+  top: 0%;
+  background-color: #4ac441;
+  position: absolute;
+}

src/client/ui/templates/spells/styles.less

@@ -32,7 +32,7 @@
 		}
 
 		&.active .hotkey {
-			color: @green;
+			color: @greenA;
 		}
 
 		.icon {
@@ -49,7 +49,7 @@
 			top: 0px;
 			width: 0px;
 			height: 100%;
-			background-color: fade(@red, 75%);
+			background-color: fade(@redB, 75%);
 		}
 
 		.hotkey {
@@ -62,7 +62,7 @@
 			text-shadow: 2px 2px 0 #2d2136, -2px -2px 0 #2d2136, 2px -2px 0 #2d2136, -2px  2px 0 #2d2136, 2px  2px 0 #2d2136;
 
 			&.no-mana {
-				color: @red;
+				color: @redB;
 			}
 
 		}

src/client/ui/templates/target/styles.css

@@ -1 +1,92 @@
-.uiTarget{position:absolute;left:406px;top:10px;width:calc(200px + (8px * 2));padding:8px;background-color:rgba(58,59,74,0.9);display:none}.uiTarget .boxes{width:100%;float:left;height:100%}.uiTarget .boxes .infoBox{color:#f2f5f5;width:100%;height:18px;margin-bottom:5px;position:relative}.uiTarget .boxes .infoBox>*{float:left}.uiTarget .boxes .infoBox .infoName{width:70%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.uiTarget .boxes .infoBox .infoLevel{width:30%;text-align:right}.uiTarget .boxes .infoBox .infoLevel.high-level{text-shadow:2px 0 #d43346,-2px 0 #d43346,0 -2px #d43346,0 2px #d43346,-2px -2px #d43346,-2px 2px #d43346,2px -2px #d43346,2px 2px #d43346}.uiTarget .boxes .statBox{width:100%;height:18px;margin-bottom:5px;position:relative}.uiTarget .boxes .statBox:nth-child(3){margin-bottom:0px}.uiTarget .boxes .statBox:last-child{display:none;position:absolute;margin-left:-8px;margin-top:13px;background-color:#69696e}.uiTarget .boxes .statBox [class^="stat"]{position:absolute;left:0px;top:0px;height:100%}.uiTarget .boxes .statBox .text{position:absolute;left:0px;top:0px;width:100%;height:100%;text-align:center;color:#f2f5f5;padding:2px 0px;text-shadow:2px 0 #2d2136,-2px 0 #2d2136,0 -2px #2d2136,0 2px #2d2136,-2px -2px #2d2136,-2px 2px #2d2136,2px -2px #2d2136,2px 2px #2d2136}.uiTarget .boxes .statBox:nth-child(2){background-color:#802343}.uiTarget .boxes .statBox:nth-child(3){background-color:#42548d}.uiTarget .boxes .statBox:nth-child(4){background-color:#763b3b}.uiTarget .boxes .statBox .statHp{background-color:#d43346}.uiTarget .boxes .statBox .statMana{background-color:#3fa7dd}.uiTarget .boxes .statBox .statCasting{background-color:#faac45}.mobile .uiTarget{left:10px;top:100px}
+.uiTarget {
+  position: absolute;
+  left: 406px;
+  top: 10px;
+  width: calc(200px + (8px * 2));
+  padding: 8px;
+  background-color: rgba(58, 59, 74, 0.9);
+  display: none;
+}
+.uiTarget .boxes {
+  width: 100%;
+  float: left;
+  height: 100%;
+}
+.uiTarget .boxes .infoBox {
+  color: #f2f5f5;
+  width: 100%;
+  height: 18px;
+  margin-bottom: 5px;
+  position: relative;
+}
+.uiTarget .boxes .infoBox > * {
+  float: left;
+}
+.uiTarget .boxes .infoBox .infoName {
+  width: 70%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.uiTarget .boxes .infoBox .infoLevel {
+  width: 30%;
+  text-align: right;
+}
+.uiTarget .boxes .infoBox .infoLevel.high-level {
+  text-shadow: 2px 0 #d43346, -2px 0 #d43346, 0 -2px #d43346, 0 2px #d43346, -2px -2px #d43346, -2px 2px #d43346, 2px -2px #d43346, 2px 2px #d43346;
+}
+.uiTarget .boxes .statBox {
+  width: 100%;
+  height: 18px;
+  margin-bottom: 5px;
+  position: relative;
+}
+.uiTarget .boxes .statBox:nth-child(3) {
+  margin-bottom: 0px;
+}
+.uiTarget .boxes .statBox:last-child {
+  display: none;
+  position: absolute;
+  margin-left: -8px;
+  margin-top: 13px;
+  background-color: #69696e;
+}
+.uiTarget .boxes .statBox [class^="stat"] {
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  height: 100%;
+}
+.uiTarget .boxes .statBox .text {
+  position: absolute;
+  left: 0px;
+  top: 0px;
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  color: #f2f5f5;
+  padding: 2px 0px;
+  text-shadow: 2px 0px #2d2136, -2px 0px #2d2136, 0px -2px #2d2136, 0px 2px #2d2136, -2px -2px #2d2136, -2px 2px #2d2136, 2px -2px #2d2136, 2px 2px #2d2136;
+}
+.uiTarget .boxes .statBox:nth-child(2) {
+  background-color: #802343;
+}
+.uiTarget .boxes .statBox:nth-child(3) {
+  background-color: #42548d;
+}
+.uiTarget .boxes .statBox:nth-child(4) {
+  background-color: #763b3b;
+}
+.uiTarget .boxes .statBox .statHp {
+  background-color: #d43346;
+}
+.uiTarget .boxes .statBox .statMana {
+  background-color: #3fa7dd;
+}
+.uiTarget .boxes .statBox .statCasting {
+  background-color: #faac45;
+}
+.mobile .uiTarget {
+  left: 10px;
+  top: 100px;
+}

src/client/ui/templates/target/styles.less

@@ -38,7 +38,7 @@
 				text-align: right;
 
 				&.high-level {
-					text-shadow: 2px 0 @red, -2px 0 @red, 0 -2px @red, 0 2px @red, -2px -2px @red, -2px 2px @red, 2px -2px @red, 2px 2px @red;
+					text-shadow: 2px 0 @redB, -2px 0 @redB, 0 -2px @redB, 0 2px @redB, -2px -2px @redB, -2px 2px @redB, 2px -2px @redB, 2px 2px @redB;
 				}
 
 			}
@@ -95,7 +95,7 @@
 			}
 
 			.statHp {
-				background-color: @red;
+				background-color: @redB;
 			}
 
 			.statMana {

src/client/ui/templates/tooltipItem/buildTooltip/buildTooltip.js

@@ -0,0 +1,66 @@
+define([
+	'js/input',
+	'js/misc/statTranslations',
+	'ui/templates/tooltipItem/buildTooltip/lineBuilders',
+	'ui/templates/tooltipItem/buildTooltip/getCompareItem'
+], function (
+	input,
+	statTranslations,
+	lineBuilders,
+	getCompareItem
+) {
+	const { init: initLineBuilders, lineBuilders: g } = lineBuilders;
+
+	const buildTooltipHtml = ({ quality }) => {
+		const html = [
+			g.div(`name q${quality}`, g.name()),
+			g.div('type', g.type()),
+			g.div('power', g.power()),
+			g.div('implicitStats', g.implicitStats()),
+			g.div('stats', g.stats()),
+			g.div('material', g.material()),
+			g.div('quest', g.quest()),
+			g.spellName(),
+			g.div('damage', g.damage()),
+			g.div('effects', g.effects()),
+			g.div('cd', g.cd()),
+			g.div('uses', g.uses()),
+			g.div('description', g.description()),
+			g.div('worth', g.worth()),
+			g.requires('requires'),
+			g.requireLevel('level'),
+			g.requireStats('stats'),
+			g.requireFaction('faction'),
+			g.div('info', g.info())
+		]
+			.filter(t => t !== null)
+			.join('');
+
+		return html;
+	};
+
+	const buildTooltip = (ui, item, pos, canCompare, bottomAlign) => {
+		let shiftDown = input.isKeyDown('shift', true);
+		const equipErrors = window.player.inventory.equipItemErrors(item);
+
+		const msg = {
+			item,
+			compare: null
+		};
+		getCompareItem(msg);
+
+		const useItem = item = msg.item;
+		if (isMobile && useItem === ui.item)
+			shiftDown = true;
+
+		const compare = canCompare ? msg.compare : null;
+
+		initLineBuilders(item, compare, shiftDown, equipErrors);
+
+		const contents = buildTooltipHtml(item);
+
+		return contents;
+	};
+
+	return buildTooltip;
+});

src/client/ui/templates/tooltipItem/helpers.js → src/client/ui/templates/tooltipItem/buildTooltip/lineBuilders.js

@@ -1,54 +1,15 @@
 define([
-	'js/input',
-	'js/system/events',
 	'js/misc/statTranslations',
-	'ui/templates/tooltipItem/getCompareItem'
+	'ui/templates/tooltipItem/buildTooltip/stringifyStatValue'
 ], function (
-	input,
-	events,
 	statTranslations,
-	getCompareItem
+	stringifyStatValue
 ) {
 	let item = null;
 	let compare = null;
 	let shiftDown = null;
 	let equipErrors = null;
 
-	const percentageStats = [
-		'addCritChance',
-		'addCritemultiplier',
-		'addAttackCritChance',
-		'addAttackCritemultiplier',
-		'addSpellCritChance',
-		'addSpellCritemultiplier',
-		'sprintChance',
-		'xpIncrease',
-		'blockAttackChance',
-		'blockSpellChance',
-		'dodgeAttackChance',
-		'dodgeSpellChance',
-		'attackSpeed',
-		'castSpeed',
-		'itemQuantity',
-		'magicFind',
-		'catchChance',
-		'catchSpeed',
-		'fishRarity',
-		'fishWeight',
-		'fishItems'
-	];
-
-	const getStatStringValue = (statName, statValue) => {
-		let res = statValue;
-		if (statName.indexOf('CritChance') > -1)
-			res = res / 20;
-
-		if (percentageStats.includes(statName) || statName.indexOf('Percent') > -1 || (statName.indexOf('element') === 0 && statName.indexOf('Resist') === -1))
-			res += '%';
-
-		return res + '';
-	};
-
 	const init = (_item, _compare, _shiftDown, _equipErrors) => {
 		item = _item;
 		compare = _compare;
@@ -56,11 +17,17 @@ define([
 		equipErrors = _equipErrors;
 	};
 
-	const helpers = {
-		div: (className, children = '') => {
+	const lineBuilders = {
+		div: (className, children) => {
+			if (!children)
+				return null;
+
 			if (children.join)
 				children = children.join('');
 
+			if (!children.length)
+				return null;
+
 			return `<div class="${className}">${children}</div>`;
 		},
 
@@ -74,21 +41,21 @@ define([
 
 		type: () => {
 			if (!item.type || item.type === item.name)
-				return;
+				return null;
 
 			return item.type;
 		},
 
 		power: () => {
 			if (!item.power)
-				return;
+				return null;
 
 			return (new Array(item.power + 1)).join('+');
 		},
 
 		implicitStats: () => {
 			if (!item.implicitStats)
-				return;
+				return null;
 
 			const tempImplicitStats = $.extend(true, [], item.implicitStats);
 
@@ -127,7 +94,7 @@ define([
 				.map(({ stat, value }) => {
 					let statName = statTranslations.translate(stat);
 
-					const prettyValue = getStatStringValue(statName, value);
+					const prettyValue = stringifyStatValue(statName, value);
 
 					let rowClass = '';
 
@@ -142,7 +109,12 @@ define([
 				})
 				.join('');
 
-			return html;
+			const result = (
+				lineBuilders.div('space', ' ') +
+				html
+			);
+
+			return result;
 		},
 
 		stats: () => {
@@ -186,7 +158,7 @@ define([
 					if (isEnchanted)
 						statName = statName.substr(1);
 
-					const prettyValue = getStatStringValue(statName, tempStats[s]);
+					const prettyValue = stringifyStatValue(statName, tempStats[s]);
 					statName = statTranslations.translate(statName);
 
 					let rowClass = '';
@@ -215,15 +187,21 @@ define([
 				})
 				.join('');
 
-			return html;
+			const result = (
+				lineBuilders.div('space', ' ') +
+				lineBuilders.div('line', ' ') +
+				lineBuilders.div('smallSpace', ' ') +
+				html + 
+				lineBuilders.div('smallSpace', ' ') +
+				lineBuilders.div('line', ' ')
+			);
+
+			return result;
 		},
 
 		effects: () => {
-			if (item.description)
-				return item.description;
-
 			if (!item.effects || !item.effects.length || !item.effects[0].text || item.type === 'mtx')
-				return;
+				return null;
 
 			let html = '';
 
@@ -248,14 +226,17 @@ define([
 
 		spellName: () => {
 			if (!item.spell || item.ability)
-				return;
+				return null;
 
-			return helpers.div(`spellName q${item.spell.quality}`, item.spell.name);
+			return (
+				lineBuilders.div('space', ' ') +
+				lineBuilders.div(`spellName q${item.spell.quality}`, item.spell.name)
+			);
 		},
 
 		damage: () => {
 			if (!item.spell || !item.spell.values)
-				return;
+				return null;
 
 			const abilityValues = Object.entries(item.spell.values)
 				.map(([k, v]) => {
@@ -287,41 +268,44 @@ define([
 
 		requires: (className, children) => {
 			if (!item.requires && !item.level && (!item.factions || !item.factions.length))
-				return;
+				return null;
 
 			if (equipErrors.length)
 				className += ' high-level';
 
-			return helpers.div(className, children);
+			return (
+				lineBuilders.div('space', ' ') +
+				lineBuilders.div(className, 'requires')
+			);
 		},
 
 		requireLevel: className => {
 			if (!item.level)
-				return;
+				return null;
 
 			if (equipErrors.includes('level'))
 				className += ' high-level';
 
 			const level = item.level.push ? `${item.level[0]} - ${item.level[1]}` : item.level;
 
-			return helpers.div(className, `level: ${level}`);
+			return lineBuilders.div(className, `level: ${level}`);
 		},
 
 		requireStats: className => {
 			if (!item.requires || !item.requires[0])
-				return;
+				return null;
 
 			if (equipErrors.includes('stats'))
 				className += ' high-level';
 			
 			let html = `${item.requires[0].stat}: ${item.requires[0].value}`;
 
-			return helpers.div(className, html);
+			return lineBuilders.div(className, html);
 		},
 
 		requireFaction: () => {
 			if (!item.factions)
-				return;
+				return null;
 
 			let htmlFactions = '';
 
@@ -340,28 +324,58 @@ define([
 
 		worth: () => {
 			if (!item.worthText)
-				return;
+				return null;
 
 			return `<br />value: ${item.worthText}`;
 		},
 
 		info: () => {
-			if (item.material || item.quest || item.eq || item.ability)
-				return;
-
-			if (item.cd)
-				return `cooldown: ${item.cd}`;
-			else if (item.uses)
-				return `uses: ${item.uses}`;
-			else if (!shiftDown && compare)
-				return '[shift] to compare'; 
+			if (!item.slot)
+				return null;
+
+			let text = null;
+
+			if (!shiftDown && compare)
+				text = '[shift] to compare'; 
 			else if (isMobile && compare && !shiftDown)
-				return 'tap again to compare';
+				text = 'tap again to compare';
+
+			if (!text)
+				return null;
+
+			return (
+				lineBuilders.div('space', ' ') +
+				text
+			);
+		},
+
+		description: () => {
+			if (!item.description)
+				return null;
+
+			return (
+				lineBuilders.div('space', ' ') +
+				item.description
+			);
+		},
+
+		cd: () => {
+			if (!item.cd)
+				return null;
+
+			return `cooldown: ${item.cd}`;
+		},
+
+		uses: () => {
+			if (!item.uses)
+				return null;
+			
+			return `uses: ${item.uses}`;
 		}
 	};
 
 	return {
 		init,
-		helpers
+		lineBuilders
 	};
 });

src/client/ui/templates/tooltipItem/buildTooltip/stringifyStatValue.js

@@ -0,0 +1,42 @@
+define([
+
+], function (
+
+) {
+	const percentageStats = [
+		'addCritChance',
+		'addCritemultiplier',
+		'addAttackCritChance',
+		'addAttackCritemultiplier',
+		'addSpellCritChance',
+		'addSpellCritemultiplier',
+		'sprintChance',
+		'xpIncrease',
+		'blockAttackChance',
+		'blockSpellChance',
+		'dodgeAttackChance',
+		'dodgeSpellChance',
+		'attackSpeed',
+		'castSpeed',
+		'itemQuantity',
+		'magicFind',
+		'catchChance',
+		'catchSpeed',
+		'fishRarity',
+		'fishWeight',
+		'fishItems'
+	];
+
+	const stringifyStatValue = (statName, statValue) => {
+		let res = statValue;
+		if (statName.indexOf('CritChance') > -1)
+			res = res / 20;
+
+		if (percentageStats.includes(statName) || statName.indexOf('Percent') > -1 || (statName.indexOf('element') === 0 && statName.indexOf('Resist') === -1))
+			res += '%';
+
+		return res + '';
+	};
+
+	return stringifyStatValue;
+});

src/client/ui/templates/tooltipItem/onShowItemTooltip.js

@@ -1,97 +0,0 @@
-define([
-	'js/input',
-	'js/system/events',
-	'js/misc/statTranslations',
-	'ui/templates/tooltipItem/helpers',
-	'ui/templates/tooltipItem/getCompareItem'
-], function (
-	input,
-	events,
-	statTranslations,
-	helpers,
-	getCompareItem,
-	tplTooltip
-) {
-	const { init: initHelpers, helpers: g } = helpers;
-
-	const buildTooltipHtml = ({ quality }) => {
-		const html = [
-			g.div(`name q${quality}`, [
-				g.div('text', g.name()),
-				g.div('type', g.type()),
-				g.div('power', g.power())
-			]),
-			g.div('implicitStats', g.implicitStats()),
-			g.div('stats', g.stats()),
-			g.div('effects', g.effects()),
-			g.div('material', g.material()),
-			g.div('quest', g.quest()),
-			g.spellName(),
-			g.div('damage', g.damage()),
-			g.requires('requires', [
-				'requires',
-				g.requireLevel('level'),
-				g.requireStats('stats'),
-				g.requireFaction('faction')
-			]),
-			g.div('worth', g.worth()),
-			g.div('info', g.info())
-		]
-			.filter(t => t !== null)
-			.join('');
-
-		return html;
-	};
-
-	const onShowItemTooltip = (ui, item, pos, canCompare, bottomAlign) => {
-		let shiftDown = input.isKeyDown('shift', true);
-		const equipErrors = window.player.inventory.equipItemErrors(item);
-
-		const msg = {
-			item,
-			compare: null
-		};
-		getCompareItem(msg);
-
-		const useItem = item = msg.item;
-		if (isMobile && useItem === ui.item)
-			shiftDown = true;
-		ui.item = useItem;
-
-		const compare = canCompare ? msg.compare : null;
-
-		ui.item = item;
-		ui.removeButton();
-
-		initHelpers(item, compare, shiftDown, equipErrors);
-
-		const contents = buildTooltipHtml(item);
-
-		const el = ui.tooltip;
-		el.html(contents);
-		el.show();
-
-		if (pos) {
-			if (bottomAlign)
-				pos.y -= el.height();
-
-			//correct tooltips that are appearing offscreen
-			// arbitrary constant -30 is there to stop resize code
-			// completely squishing the popup
-			if ((pos.x + el.width()) > window.innerWidth)
-				pos.x = window.innerWidth - el.width() - 30;
-
-			if ((pos.y + el.height()) > window.innerHeight)
-				pos.y = window.innerHeight - el.height() - 30;
-
-			el.css({
-				left: pos.x,
-				top: pos.y
-			});
-		}
-
-		events.emit('onBuiltItemTooltip', ui.tooltip);
-	};
-
-	return onShowItemTooltip;
-});

src/client/ui/templates/tooltipItem/styles.css

@@ -3,6 +3,7 @@
 }
 .uiTooltipItem .tooltip {
   display: none;
+  flex-direction: column;
   position: absolute;
   margin-left: -4px;
   margin-top: -4px;
@@ -10,24 +11,44 @@
   pointer-events: none;
   padding: 10px;
   color: #f2f5f5;
-  text-align: center;
+  align-items: center;
   line-height: 18px;
   max-width: 300px;
 }
-.uiTooltipItem .tooltip .name {
-  margin-bottom: 8px;
+.uiTooltipItem .tooltip > *:not(:empty) {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.uiTooltipItem .tooltip > *:not(:empty) + * {
+  margin-top: 2px;
+}
+.uiTooltipItem .tooltip > *:empty {
+  display: none;
+}
+.uiTooltipItem .tooltip .line {
+  height: 2px;
+  width: 100%;
+  background-color: #69696e;
+}
+.uiTooltipItem .tooltip .space {
+  height: 6px;
+}
+.uiTooltipItem .tooltip .smallSpace {
+  height: 2px;
 }
-.uiTooltipItem .tooltip .name .type {
-  color: #7f9c9c;
+.uiTooltipItem .tooltip .type {
+  color: #929398;
 }
-.uiTooltipItem .tooltip .name .power {
+.uiTooltipItem .tooltip .power {
   color: #80f643;
 }
 .uiTooltipItem .tooltip > .implicitStats {
-  color: #b8c9c9;
-  margin-bottom: 8px;
-  padding-bottom: 8px;
-  border-bottom: 2px solid #505360;
+  width: 100%;
+  color: #c0c3cf;
+}
+.uiTooltipItem .tooltip > .implicitStats > * + * {
+  margin-top: 2px;
 }
 .uiTooltipItem .tooltip > .implicitStats .gainStat {
   color: #80f643;
@@ -36,10 +57,11 @@
   color: #d43346;
 }
 .uiTooltipItem .tooltip > .stats {
-  color: #b8c9c9;
-  margin-bottom: 8px;
-  padding-bottom: 8px;
-  border-bottom: 2px solid #505360;
+  width: 100%;
+  color: #c0c3cf;
+}
+.uiTooltipItem .tooltip > .stats > * + * {
+  margin-top: 2px;
 }
 .uiTooltipItem .tooltip > .stats .gainStat {
   color: #80f643;
@@ -52,33 +74,21 @@
 }
 .uiTooltipItem .tooltip .effects {
   color: #f2f5f5;
-  margin-bottom: 8px;
 }
 .uiTooltipItem .tooltip .faction {
-  color: #7f9c9c;
-  margin-bottom: 8px;
+  color: #929398;
 }
-.uiTooltipItem .tooltip .requires {
-  margin-top: 8px;
-  color: #7f9c9c;
-}
-.uiTooltipItem .tooltip .requires.high-level {
+.uiTooltipItem .tooltip .high-level {
   color: #d43346;
 }
-.uiTooltipItem .tooltip .requires .high-level {
-  color: #d43346;
-}
-.uiTooltipItem .tooltip .requires > *:not(.high-level) {
-  color: #7f9c9c;
-}
 .uiTooltipItem .tooltip .material {
-  color: #7f9c9c;
+  color: #929398;
 }
 .uiTooltipItem .tooltip .quest {
-  color: #7f9c9c;
+  color: #929398;
 }
 .uiTooltipItem .tooltip .info {
-  color: #4f6666;
+  color: #69696e;
 }
 .uiTooltipItem .tooltip .damage .gainDamage {
   color: #80f643;
@@ -86,6 +96,9 @@
 .uiTooltipItem .tooltip .damage .loseDamage {
   color: #d43346;
 }
+.uiTooltipItem .tooltip .description {
+  color: #ca752f;
+}
 .uiTooltipItem .tooltip .worth.no-afford {
   color: #d43346;
 }

src/client/ui/templates/tooltipItem/styles.less

@@ -1,4 +1,5 @@
 @import "../../../css/colors.less";
+@marginBetweenItems: 2px;
 
 .uiTooltipItem {
 	> * {
@@ -7,6 +8,7 @@
 
 	.tooltip {
 		display: none;
+		flex-direction: column;
 		position: absolute;
 		margin-left: -4px;
 		margin-top: -4px;
@@ -14,51 +16,79 @@
 		pointer-events: none;
 		padding: 10px;
 		color: @white;
-		text-align: center;
+		align-items: center;
 		line-height: 18px;
 		max-width: 300px;
 
-		.name {
-			margin-bottom: 8px;
+		> *:not(:empty) {
+			display: flex;
+			flex-direction: column;
+			align-items: center;
 
-			.type {
-				color: darken(@white, 40%);
+			& + * {
+				margin-top: @marginBetweenItems;
 			}
 
-			.power {
-				color: @green;
-			}
+		}
+
+		> *:empty {
+			display: none;
+		}
+
+		.line {
+			height: 2px;
+			width: 100%;
+			background-color: @grayD;
+		}
+
+		.space {
+			height: 6px;
+		}
+
+		.smallSpace {
+			height: 2px;
+		}
+
+		.type {
+			color: @grayC;
+		}
 
+		.power {
+			color: @greenA;
 		}
 
 		> .implicitStats {
-			color: darken(@white, 20%);
-			margin-bottom: 8px;
-			padding-bottom: 8px;
-			border-bottom: 2px solid @blackA;
+			width: 100%;
+			color: @grayB;
+
+			> * + * {
+				margin-top: @marginBetweenItems;
+			}
 
 			.gainStat {
-				color: @green;
+				color: @greenA;
 			}
 
 			.loseStat {
-				color: @red;
+				color: @redB;
 			}
 
 		}
 
 		> .stats {
-			color: darken(@white, 20%);
-			margin-bottom: 8px;
-			padding-bottom: 8px;
-			border-bottom: 2px solid @blackA;
+			width: 100%;
+			color: @grayB;
+
+			> * + * {
+				margin-top: @marginBetweenItems;
+			}
 
 			.gainStat {
-				color: @green;
+				color: @greenA;
 			}
 
 			.loseStat {
-				color: @red;
+				color: @redB;
 			}
 
 			.enchanted {
@@ -69,58 +99,46 @@
 
 		.effects {
 			color: @white;
-			margin-bottom: 8px;
 		}
 
 		.faction {
-			color: darken(@white, 40%);
-			margin-bottom: 8px;
+			color: @grayC;
 		}
 
-		.requires {
-			margin-top: 8px;
-			color: darken(@white, 40%);
-
-			&.high-level {
-				color: @red;
-			}
-
-			.high-level {
-				color: @red;
-			}
-
-			> *:not(.high-level) {
-				color: darken(@white, 40%);
-			}
-
+		.high-level {
+			color: @redB;
 		}
 
 		.material {
-			color: darken(@white, 40%);
+			color: @grayC;
 		}
 
 		.quest {
-			color: darken(@white, 40%);
+			color: @grayC;
 		}
 
 		.info {
-			color: darken(@white, 60%);
+			color: @grayD;
 		}
 
 		.damage {
 			.gainDamage {
-				color: @green;
+				color: @greenA;
 			}
 
 			.loseDamage {
-				color: @red;
+				color: @redB;
 			}
 
 		}
 
+		.description {
+			color: @brownB;
+		}
+
 		.worth {
 			&.no-afford {
-				color: @red;
+				color: @redB;
 			}
 
 		}

src/client/ui/templates/tooltipItem/tooltipItem.js

@@ -1,11 +1,13 @@
 define([
-	'ui/templates/tooltipItem/onShowItemTooltip',
+	'ui/templates/tooltipItem/buildTooltip/buildTooltip',
 	'css!ui/templates/tooltipItem/styles',
-	'html!ui/templates/tooltipItem/template'
+	'html!ui/templates/tooltipItem/template',
+	'js/system/events'
 ], function (
-	onShowItemTooltip,
+	buildTooltip,
 	styles,
-	template
+	template,
+	events
 ) {
 	return {
 		tpl: template,
@@ -17,7 +19,7 @@ define([
 		postRender: function () {
 			this.tooltip = this.el.find('.tooltip');
 
-			this.onEvent('onShowItemTooltip', onShowItemTooltip.bind(null, this));
+			this.onEvent('onShowItemTooltip', this.onShowItemTooltip.bind(this));
 			this.onEvent('onHideItemTooltip', this.onHideItemTooltip.bind(this));
 		},
 
@@ -28,6 +30,38 @@ define([
 				this.tooltip.find('.worth').addClass('no-afford');
 		},
 
+		onShowItemTooltip: function (item, pos, canCompare, bottomAlign) {
+			this.item = item;
+			this.removeButton();
+
+			const html = buildTooltip(this, item, pos, canCompare, bottomAlign);
+
+			const el = this.tooltip;
+			el.html(html);
+			el.css({ display: 'flex' });
+
+			if (pos) {
+				if (bottomAlign)
+					pos.y -= el.height();
+
+				//correct tooltips that are appearing offscreen
+				// arbitrary constant -30 is there to stop resize code
+				// completely squishing the popup
+				if ((pos.x + el.width()) > window.innerWidth)
+					pos.x = window.innerWidth - el.width() - 30;
+
+				if ((pos.y + el.height()) > window.innerHeight)
+					pos.y = window.innerHeight - el.height() - 30;
+
+				el.css({
+					left: pos.x,
+					top: pos.y
+				});
+			}
+
+			events.emit('onBuiltItemTooltip', this.tooltip);
+		},
+
 		onHideItemTooltip: function (item) {
 			if (
 				(!this.item) ||

src/client/ui/templates/trade/styles.css

@@ -1 +1,20 @@
-.uiTrade{width:auto}.uiTrade .no-afford{position:absolute;left:5px;top:5px;width:calc(100% - 10px);height:calc(100% - 10px);background-color:rgba(212,51,70,0.15)}.uiTrade .grid .item .icon.skin{width:16px;height:16px;transform:scale(4);transform-origin:0 0;image-rendering:optimizeSpeed;image-rendering:pixelated;image-rendering:crisp-edges}
+.uiTrade {
+  width: auto;
+}
+.uiTrade .no-afford {
+  position: absolute;
+  left: 5px;
+  top: 5px;
+  width: calc(100% - 10px);
+  height: calc(100% - 10px);
+  background-color: rgba(212, 51, 70, 0.15);
+}
+.uiTrade .grid .item .icon.skin {
+  width: 16px;
+  height: 16px;
+  transform: scale(4);
+  transform-origin: 0 0;
+  image-rendering: optimizeSpeed;
+  image-rendering: pixelated;
+  image-rendering: crisp-edges;
+}

src/client/ui/templates/trade/styles.less

@@ -9,7 +9,7 @@
 		top: 5px;
 		width: calc(100% - 10px);
 		height: calc(100% - 10px);
-		background-color: fade(@red, 15%);
+		background-color: fade(@redB, 15%);
 	}
 
 	.grid .item .icon.skin {
@@ -21,4 +21,5 @@
 		image-rendering: pixelated;
 		image-rendering: crisp-edges;
 	}
+
 }

src/client/ui/templates/wardrobe/styles.css

@@ -1 +1,112 @@
-.uiWardrobe{display:none;width:600px;height:350px;border:5px solid #3c3f4c;text-align:center;background-color:#373041}.uiWardrobe>.heading{color:#48edff;width:100%;height:36px;background-color:#3c3f4c;position:relative}.uiWardrobe>.heading .heading-text{padding-top:8px;margin:auto}.uiWardrobe .bottom{height:calc(100% - 36px)}.uiWardrobe .bottom .left,.uiWardrobe .bottom .right{float:left;height:100%}.uiWardrobe .bottom .left{width:calc(100% * .4)}.uiWardrobe .bottom .left .heading{width:100%;height:30px;color:#ffeb38;padding-top:7px}.uiWardrobe .bottom .left .list{width:100%;height:calc(100% - 30px);overflow:auto}.uiWardrobe .bottom .left .list .skinName{width:100%;cursor:pointer;color:white;padding:5px}.uiWardrobe .bottom .left .list .skinName:hover{background-color:#3c3f4c}.uiWardrobe .bottom .left .list .skinName.active{color:#48edff}.uiWardrobe .bottom .left .list .skinName.current:after{content:' (x)'}.uiWardrobe .bottom .right{width:calc(100% * .6);position:relative;background-color:#2d2136}.uiWardrobe .bottom .right .heading{width:100%;height:30px;color:#ffeb38;padding-top:7px}.uiWardrobe .bottom .right .preview{padding-left:calc((100% - (8 * 16px)) / 2);position:relative;height:calc(100% - 80px)}.uiWardrobe .bottom .right .preview .sprite{width:8px;height:8px;position:absolute;left:calc((100% - (8 * 16px)) / 2);top:calc((100% - (8 * 16px)) / 2);transform:scale(16);transform-origin:0% 0%;image-rendering:optimizeSpeed;image-rendering:pixelated;image-rendering:crisp-edges}.uiWardrobe .bottom .right .buttons{width:100%;padding:0px 10px;height:50px}.uiWardrobe .bottom .right .buttons .btn{float:left;width:calc((100% - 50px) / 2);height:40px;padding-top:12px;color:white;cursor:pointer}.uiWardrobe .bottom .right .buttons .btn:first-child{margin-right:50px}.uiWardrobe .bottom .right .buttons .btnCancel{background-color:#d43346}.uiWardrobe .bottom .right .buttons .btnCancel:hover{background-color:#ff4252}.uiWardrobe .bottom .right .buttons .btnApply{background-color:#4ac441}.uiWardrobe .bottom .right .buttons .btnApply:hover{background-color:#80f643}
+.uiWardrobe {
+  display: none;
+  width: 600px;
+  height: 350px;
+  border: 5px solid #3c3f4c;
+  text-align: center;
+  background-color: #373041;
+}
+.uiWardrobe > .heading {
+  color: #48edff;
+  width: 100%;
+  height: 36px;
+  background-color: #3c3f4c;
+  position: relative;
+}
+.uiWardrobe > .heading .heading-text {
+  padding-top: 8px;
+  margin: auto;
+}
+.uiWardrobe .bottom {
+  height: calc(100% - 36px);
+}
+.uiWardrobe .bottom .left,
+.uiWardrobe .bottom .right {
+  float: left;
+  height: 100%;
+}
+.uiWardrobe .bottom .left {
+  width: calc(100% * 0.4);
+}
+.uiWardrobe .bottom .left .heading {
+  width: 100%;
+  height: 30px;
+  color: #ffeb38;
+  padding-top: 7px;
+}
+.uiWardrobe .bottom .left .list {
+  width: 100%;
+  height: calc(100% - 30px);
+  overflow: auto;
+}
+.uiWardrobe .bottom .left .list .skinName {
+  width: 100%;
+  cursor: pointer;
+  color: white;
+  padding: 5px;
+}
+.uiWardrobe .bottom .left .list .skinName:hover {
+  background-color: #3c3f4c;
+}
+.uiWardrobe .bottom .left .list .skinName.active {
+  color: #48edff;
+}
+.uiWardrobe .bottom .left .list .skinName.current:after {
+  content: ' (x)';
+}
+.uiWardrobe .bottom .right {
+  width: calc(100% * 0.6);
+  position: relative;
+  background-color: #2d2136;
+}
+.uiWardrobe .bottom .right .heading {
+  width: 100%;
+  height: 30px;
+  color: #ffeb38;
+  padding-top: 7px;
+}
+.uiWardrobe .bottom .right .preview {
+  padding-left: calc((100% - (8 * 16px)) / 2);
+  position: relative;
+  height: calc(100% - 80px);
+}
+.uiWardrobe .bottom .right .preview .sprite {
+  width: 8px;
+  height: 8px;
+  position: absolute;
+  left: calc((100% - (8 * 16px)) / 2);
+  top: calc((100% - (8 * 16px)) / 2);
+  transform: scale(16);
+  transform-origin: 0% 0%;
+  image-rendering: optimizeSpeed;
+  image-rendering: pixelated;
+  image-rendering: crisp-edges;
+}
+.uiWardrobe .bottom .right .buttons {
+  width: 100%;
+  padding: 0px 10px;
+  height: 50px;
+}
+.uiWardrobe .bottom .right .buttons .btn {
+  float: left;
+  width: calc((100% - 50px) / 2);
+  height: 40px;
+  padding-top: 12px;
+  color: white;
+  cursor: pointer;
+}
+.uiWardrobe .bottom .right .buttons .btn:first-child {
+  margin-right: 50px;
+}
+.uiWardrobe .bottom .right .buttons .btnCancel {
+  background-color: #d43346;
+}
+.uiWardrobe .bottom .right .buttons .btnCancel:hover {
+  background-color: #ff4252;
+}
+.uiWardrobe .bottom .right .buttons .btnApply {
+  background-color: #4ac441;
+}
+.uiWardrobe .bottom .right .buttons .btnApply:hover {
+  background-color: #80f643;
+}

src/client/ui/templates/wardrobe/styles.less

@@ -19,12 +19,14 @@
 			padding-top: 8px;
 			margin: auto;
 		}
+
 	}
 
 	.bottom {
 		height: calc(100% - 36px);
 
-		.left, .right {
+		.left,
+		.right {
 			float: left;
 			height: 100%;
 		}
@@ -35,7 +37,7 @@
 			.heading {
 				width: 100%;
 				height: 30px;
-				color: @yellow;
+				color: @yellowA;
 				padding-top: 7px;
 			}
 
@@ -47,7 +49,7 @@
 				.skinName {
 					width: 100%;
 					cursor: pointer;
-					color: white; 
+					color: white;
 					padding: 5px;
 
 					&:hover {
@@ -62,9 +64,13 @@
 						&:after {
 							content: ' (x)';
 						}
+
 					}
+
 				}
+
 			}
+
 		}
 
 		.right {
@@ -75,7 +81,7 @@
 			.heading {
 				width: 100%;
 				height: 30px;
-				color: @yellow;
+				color: @yellowA;
 				padding-top: 7px;
 			}
 
@@ -96,6 +102,7 @@
 					image-rendering: pixelated;
 					image-rendering: crisp-edges;
 				}
+
 			}
 
 			.buttons {
@@ -114,6 +121,7 @@
 					&:first-child {
 						margin-right: 50px;
 					}
+
 				}
 
 				.btnCancel {
@@ -122,16 +130,22 @@
 					&:hover {
 						background-color: @redA;
 					}
+
 				}
 
 				.btnApply {
 					background-color: @greenB;
 
 					&:hover {
-						background-color: @green;
+						background-color: @greenA;
 					}
+
 				}
+
 			}
+
 		}
+
 	}
+
 }

src/server/items/generator.js

@@ -108,6 +108,9 @@ module.exports = {
 		if (blueprint.uses)
 			item.uses = blueprint.uses;
 
+		if (blueprint.description)
+			item.description = blueprint.description;
+
 		return item;
 	},