Merge branch '1779-rebuild-item-tooltips' into 'master'

Resolve "Refactor the tooltipItem UI"

Closes #1779

See merge request Isleward/isleward!542

src/client/css/colors.less

@@ -1,52 +1,64 @@
-@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;
+////Misc
+@white: @grayA;
+////Qualities
 @qualityCommon: @white;
 @qualityMagic: @greenB;
 @qualityRare: @blueB;

src/client/css/error.css

@@ -0,0 +1 @@
+@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:0;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}.discord,.error{color:#d43346;font-size:24px;padding:10px;filter:drop-shadow(0 -6px 0 #312136) drop-shadow(0 6px 0 #312136) drop-shadow(6px 0 0 #312136) drop-shadow(-6px 0 0 #312136)}.discord{justify-self:end}.discord a:active,.discord a:hover,.discord a:link,.discord a:visited{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 @@
-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:0;width:100vw;height:100vh;background-color:#2d2136}.ui-container{width:100%;height:100%;position:absolute;left:0;top:0;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:0;top:0;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:0;background-color:transparent}[class^=ui] .textbox{border:none;outline:0;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:0;top:0;padding-top:0;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:0;border-radius:0}::-webkit-scrollbar-thumb{-webkit-border-radius:10px;border-radius:0;background:#929398}:root{scrollbar-color:#929398 #3c3f4c!important;scrollbar-width:thin!important;--color-element-default:#fcfcfc;--color-element-arcane:#fc66f7;--color-element-frost:#48edff;--color-element-fire:#ff4252;--color-element-holy:#ffeb38;--color-element-poison:#51fc9a}.q0{color:#fcfcfc}.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:#fcfcfc!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,.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:#fcfcfc;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}

src/client/css/main.less

@@ -160,7 +160,7 @@ body {
 }
 
 ::-webkit-scrollbar-track {
-	background-color: @gray;
+	background-color: @blackB;
 	-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 @blackB !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 @@
-.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:0;top:0;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:#fcfcfc;font-size:18px;background-color:rgba(49,33,54,.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:0}50%{top:4px}100%{top:0}}

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/buffs/styles.css

@@ -1 +1 @@
-.uiBuffs{position:absolute;left:16px;top:104px}.uiBuffs .icon{width:40px;height:40px;padding:4px;background-color:rgba(49,33,54,0.75);margin-right:16px;float:left}.uiBuffs .icon .inner{width:32px;height:32px;background:url('../../../images/statusIcons.png') 0 0}.mobile .uiBuffs{left:316px;top:10px}
+.uiBuffs{position:absolute;left:16px;top:104px}.uiBuffs .icon{width:40px;height:40px;padding:4px;background-color:rgba(49,33,54,.75);margin-right:16px;float:left}.uiBuffs .icon .inner{width:32px;height:32px;background:url(../../../images/statusIcons.png) 0 0}.mobile .uiBuffs{left:316px;top:10px}

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

@@ -18,7 +18,9 @@
 			height: 32px;
 			background: url('../../../images/statusIcons.png') 0px 0px;
 		}
+
 	}
+
 }
 
 .mobile .uiBuffs {

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

@@ -1 +1 @@
-.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:#fcfcfc;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:#fcfcfc;display:flex;justify-content:space-between;padding:0 10px}.uiCharacters .bottom .right .info .name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.uiCharacters .bottom .right .info .class{text-align:right;color:#bcbcbc}.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:#fcfcfc}.uiCharacters .bottom .right .buttons .btn:last-child{margin-right:0}.uiCharacters .bottom .right .buttons .btn:hover{background-color:#42548d}.uiCharacters .bottom .right .buttons .btn.deleting{background-color:#d43346;color:#fcfcfc}.uiCharacters .message{height:30px;width:100%;margin-top:30px;float:left;text-align:center;color:#fcfcfc;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}

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

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

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

@@ -1 +1 @@
-.uiContext{display:none;position:absolute;z-index:999999;border:5px solid #42548d;background-color:rgba(49,33,54,0.95);padding:5px;color:#f2f5f5;text-align:center;line-height:15px}.uiContext .list{width:100%;height:100%}.uiContext .list .option{width:100%;padding:5px;color:#f2f5f5;cursor:pointer;display:flex;justify-content:center}.uiContext .list .option:hover:not(.no-hover){background-color:#3a71ba}.uiContext .list .option.divider{line-height:2px;padding:0px;margin:5px 0px;color:transparent;background-color:#69696e}.uiContext .list .option.no-hover:not(.divider){color:#929398}.uiContext .list .option .hotkey{color:#48edff}.uiContext .list .option .hotkey:not(:empty){margin-left:10px}
+.uiContext{display:none;position:absolute;z-index:999999;border:5px solid #42548d;background-color:rgba(49,33,54,.95);padding:5px;color:#fcfcfc;text-align:center;line-height:15px}.uiContext .list{width:100%;height:100%}.uiContext .list .option{width:100%;padding:5px;color:#fcfcfc;cursor:pointer;display:flex;justify-content:center}.uiContext .list .option:hover:not(.no-hover){background-color:#3a71ba}.uiContext .list .option.divider{line-height:2px;padding:0;margin:5px 0;color:transparent;background-color:#69696e}.uiContext .list .option.no-hover:not(.divider){color:#929398}.uiContext .list .option .hotkey{color:#48edff}.uiContext .list .option .hotkey:not(:empty){margin-left:10px}

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

@@ -1 +1 @@
-.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 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:#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:0;flex-shrink:0;height:100%;display:flex;justify-content:center;align-items:center;padding:0;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:0}.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:#fcfcfc;margin-bottom:22px}.uiCreateCharacter .box-left .btn{background-color:#3a71ba;width:calc((100% - 27px)/ 2);float:left;margin-right:27px;color:#fcfcfc}.uiCreateCharacter .box-left .btn:last-child{margin-right:0}.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:#fcfcfc}.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:0;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:#fcfcfc}.uiCreateCharacter .box-right .top .list .prophecy:hover{color:#fcfcfc}.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 @@
-.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:#3c3f4c;border:4px solid #929398;text-align:center;padding:16px 16px 0 16px}.uiDeath .msg{color:#fcfcfc}.uiDeath .msg .inner{display:inline-block;color:#ff6942}.uiDeath .penalty{color:#faac45;margin-top:15px}.uiDeath .btn{color:#fcfcfc;width:100%;height:32px;background-color:#3fa7dd;margin:16px 0;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: @blackB;
+	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 @@
-.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,.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:#fcfcfc;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)}

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 @@
-.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,.9)}.uiEvents .list .event{cursor:pointer;padding:8px;background-color:rgba(58,59,74,.9)}.uiEvents .list .event:hover{background-color:rgba(92,93,117,.9)}.uiEvents .list .event .name{color:#fcfcfc;margin-bottom:3px}.uiEvents .list .event .description{color:#a3a3a3}.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,.9);margin-top:0}.mobile .uiEvents:not(.active){width:64px;height:64px}.mobile .uiEvents:not(.active):after{content:'';position:absolute;left:0;top:0;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:0;top:0}.mobile .uiEvents.active .btn{display:block;position:absolute;right:calc(100% + 10px);top:0;background-color:rgba(55,48,65,.9);width:64px;height:64px;padding-top:0}.mobile .uiEvents.active .btn .icon{width:100%;height:100%;background:url(../../../images/uiIcons.png) -448px 0}

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/fame/styles.less

@@ -1,6 +1,4 @@
 @import "../../../css/colors.less";
 
-
 .uiFame {
-	
-}
+}

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

@@ -1 +1 @@
-.uiHelp{display:none;z-index:2;border:5px solid #3c3f4c;text-align:center;flex-direction:column}.uiHelp>.heading{color:#48edff;width:100%;height:36px;background-color:#3c3f4c;position:relative}.uiHelp>.heading .heading-text{padding-top:8px;margin:auto}.uiHelp .content{overflow-y:auto;background-color:#312136;width:100%;flex:1;display:flex;flex-direction:column;padding:5px}.uiHelp .content .row{padding:5px;display:flex;justify-content:center;background-color:#373041}.uiHelp .content .row+.row{margin-top:5px}.uiHelp .content .row.mobile{display:none}.uiHelp .content .row .topic{color:#3fa7dd;text-align:right;width:30%}.uiHelp .content .row .desc{color:#c0c3cf;text-align:left;width:70%;max-width:400px;padding-left:20px}.uiHelp .content .row .toslink{color:#f2f5f5;cursor:pointer}.uiHelp .content .row .toslink:hover{color:#48edff}.mobile .uiHelp{height:80vh}.mobile .uiHelp .row{display:none}.mobile .uiHelp .row.mobile{display:flex}
+.uiHelp{display:none;z-index:2;border:5px solid #3c3f4c;text-align:center;flex-direction:column}.uiHelp>.heading{color:#48edff;width:100%;height:36px;background-color:#3c3f4c;position:relative}.uiHelp>.heading .heading-text{padding-top:8px;margin:auto}.uiHelp .content{overflow-y:auto;background-color:#312136;width:100%;flex:1;display:flex;flex-direction:column;padding:5px}.uiHelp .content .row{padding:5px;display:flex;justify-content:center;background-color:#373041}.uiHelp .content .row+.row{margin-top:5px}.uiHelp .content .row.mobile{display:none}.uiHelp .content .row .topic{color:#3fa7dd;text-align:right;width:30%}.uiHelp .content .row .desc{color:#c0c3cf;text-align:left;width:70%;max-width:400px;padding-left:20px}.uiHelp .content .row .toslink{color:#fcfcfc;cursor:pointer}.uiHelp .content .row .toslink:hover{color:#48edff}.mobile .uiHelp{height:80vh}.mobile .uiHelp .row{display:none}.mobile .uiHelp .row.mobile{display:flex}

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

@@ -65,10 +65,13 @@
 				&:hover {
 					color: @blueA;
 				}
+
 			}
+
 		}
 
 	}
+
 }
 
 .mobile .uiHelp {

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

@@ -1 +1 @@
-.uiHud{position:absolute;left:10px;top:10px}.uiHud .hudBox{position:absolute;left:0px;top:0px;width:calc(280px + (8px * 2));padding:8px;background-color:rgba(58,59,74,0.9);box-shadow:0 -2px 0 #2d2136,0 2px 0 #2d2136,2px 0 0 #2d2136,-2px 0 0 #2d2136}.uiHud .hudBox .portraitBox{float:left;margin-right:12px}.uiHud .hudBox .portraitBox .portrait{visibility:hidden;width:64px;height:64px}.uiHud .hudBox .boxes{width:calc(100% - 76px);float:left;height:100%}.uiHud .hudBox .boxes .statBox{width:100%;height:18px;margin-bottom:5px;position:relative}.uiHud .hudBox .boxes .statBox:last-child{margin-bottom:0px}.uiHud .hudBox .boxes .statBox [class^="stat"]{position:absolute;left:0px;top:0px;height:100%}.uiHud .hudBox .boxes .statBox .statManaReserve{position:absolute;right:0%;top:0px;left:auto;height:100%;background-color:#c0c3cf}.uiHud .hudBox .boxes .statBox .text{position:absolute;left:0px;top:0px;width:100%;height:100%;text-align:center;color:#f2f5f5;padding:2px 0px;line-height:16px;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}.uiHud .hudBox .boxes .statBox:nth-child(1){background-color:#802343}.uiHud .hudBox .boxes .statBox:nth-child(2){background-color:#42548d}.uiHud .hudBox .boxes .statBox:nth-child(3){background-color:#386646}.uiHud .hudBox .boxes .statBox .statHp{background-color:#d43346}.uiHud .hudBox .boxes .statBox .statMana{background-color:#3fa7dd}.uiHud .hudBox .boxes .statBox .statXp{background-color:#4ac441}.uiHud .quickBar{position:absolute;left:calc(290px + (8px * 2));top:0px;box-shadow:0 -2px 0 #2d2136,0 2px 0 #2d2136,2px 0 0 #2d2136,-2px 0 0 #2d2136}.uiHud .quickBar .quickItem{display:none;width:80px;height:80px;background-color:rgba(58,59,74,0.9);margin-bottom:8px;cursor:pointer;padding:8px;position:relative}.uiHud .quickBar .quickItem .icon{height:100%;filter:brightness(100%) drop-shadow(0 -4px 0 #373041) drop-shadow(0 4px 0 #373041) drop-shadow(4px 0 0 #373041) drop-shadow(-4px 0 0 #373041)}.uiHud .quickBar .quickItem .info{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)}.uiHud .quickBar .quickItem:hover .icon{filter:brightness(160%);-moz-filter:brightness(160%)}.uiHud .quickBar .quickItem:hover.empty{background-color:rgba(72,237,255,0.1)}
+.uiHud{position:absolute;left:10px;top:10px}.uiHud .hudBox{position:absolute;left:0;top:0;width:calc(280px + (8px * 2));padding:8px;background-color:rgba(58,59,74,.9);box-shadow:0 -2px 0 #2d2136,0 2px 0 #2d2136,2px 0 0 #2d2136,-2px 0 0 #2d2136}.uiHud .hudBox .portraitBox{float:left;margin-right:12px}.uiHud .hudBox .portraitBox .portrait{visibility:hidden;width:64px;height:64px}.uiHud .hudBox .boxes{width:calc(100% - 76px);float:left;height:100%}.uiHud .hudBox .boxes .statBox{width:100%;height:18px;margin-bottom:5px;position:relative}.uiHud .hudBox .boxes .statBox:last-child{margin-bottom:0}.uiHud .hudBox .boxes .statBox [class^=stat]{position:absolute;left:0;top:0;height:100%}.uiHud .hudBox .boxes .statBox .statManaReserve{position:absolute;right:0;top:0;left:auto;height:100%;background-color:#c0c3cf}.uiHud .hudBox .boxes .statBox .text{position:absolute;left:0;top:0;width:100%;height:100%;text-align:center;color:#fcfcfc;padding:2px 0;line-height:16px;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}.uiHud .hudBox .boxes .statBox:nth-child(1){background-color:#802343}.uiHud .hudBox .boxes .statBox:nth-child(2){background-color:#42548d}.uiHud .hudBox .boxes .statBox:nth-child(3){background-color:#386646}.uiHud .hudBox .boxes .statBox .statHp{background-color:#d43346}.uiHud .hudBox .boxes .statBox .statMana{background-color:#3fa7dd}.uiHud .hudBox .boxes .statBox .statXp{background-color:#4ac441}.uiHud .quickBar{position:absolute;left:calc(290px + (8px * 2));top:0;box-shadow:0 -2px 0 #2d2136,0 2px 0 #2d2136,2px 0 0 #2d2136,-2px 0 0 #2d2136}.uiHud .quickBar .quickItem{display:none;width:80px;height:80px;background-color:rgba(58,59,74,.9);margin-bottom:8px;cursor:pointer;padding:8px;position:relative}.uiHud .quickBar .quickItem .icon{height:100%;filter:brightness(100%) drop-shadow(0 -4px 0 #373041) drop-shadow(0 4px 0 #373041) drop-shadow(4px 0 0 #373041) drop-shadow(-4px 0 0 #373041)}.uiHud .quickBar .quickItem .info{left:6px;bottom:3px;position:absolute;color:#fcfcfc;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)}.uiHud .quickBar .quickItem:hover .icon{filter:brightness(160%);-moz-filter:brightness(160%)}.uiHud .quickBar .quickItem:hover.empty{background-color:rgba(72,237,255,.1)}

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 @@
-.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,.9);text-align:center}.uiLeaderboard>.heading{color:#48edff;width:100%;height:36px;background-color:rgba(60,63,76,.9)}.uiLeaderboard>.heading .heading-text{padding-top:8px;margin:auto}.uiLeaderboard .result{background-color:rgba(55,48,65,.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:#fcfcfc}.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:#fcfcfc;cursor:pointer;background-color:#7a3ad3}.uiLeaderboard .result .buttons .btn:hover{background-color:#a24eff}.uiLeaderboard .result .buttons .btn:last-child{margin-right:0}.uiLeaderboard .prophecies{float:left;width:calc(100% - 400px);height:calc(100% - 36px);position:relative;background-color:rgba(55,48,65,.9);padding:5px}.uiLeaderboard .prophecies .heading{width:100%;height:36px;color:#3fa7dd}.uiLeaderboard .prophecies .heading .heading-text{margin:auto}.uiLeaderboard .prophecies .btn,.uiLeaderboard .prophecies .prophecy{cursor:pointer}.uiLeaderboard .prophecies .prophecy{width:100%;padding:5px 10px;background-color:#69696e;color:#fcfcfc;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:#fcfcfc}.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 @@
-.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(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 .textbox,.uiLogin .right input,.uiLogin .right input:-webkit-autofill{-webkit-appearance:none;box-shadow:0 0 0 20px #2d2136 inset;color:#fcfcfc;-webkit-text-fill-color:#fcfcfc;margin-bottom:16px}.uiLogin .right .textbox,.uiLogin .right input{-webkit-appearance:none;box-shadow:0 0 0 20px #2d2136 inset;color:#fcfcfc;-webkit-text-fill-color:#fcfcfc;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:#fcfcfc}.uiLogin .right .top-buttons .btn:last-child{margin-right:0}.uiLogin .right .top-buttons .btn:hover{background-color:#42548d}.uiLogin .news{margin-top:40px;color:#fcfcfc;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:#fcfcfc;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:0}.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/mainMenu/styles.css

@@ -1 +1 @@
-.uiMainMenu{display:none;background-color:#373041;border:5px solid #3c3f4c;text-align:center}.uiMainMenu>.heading{color:#48edff;width:100%;height:36px;background-color:#3c3f4c;position:relative}.uiMainMenu>.heading .heading-text{padding-top:8px;margin:auto}.uiMainMenu .options{display:flex;flex-direction:column;padding:10px}.uiMainMenu .options .btn{color:#f2f5f5;width:100%;height:35px;background-color:#3a71ba;cursor:pointer;padding:0px 20px}.uiMainMenu .options .btn+.btn{margin-top:10px}.uiMainMenu .options .btn.btnNames{display:none}.uiMainMenu .options .btn:hover{background-color:#42548d}.uiMainMenu .options .btn.btn-red{background-color:#a82841}.uiMainMenu .options .btn.btn-red:hover{background-color:#802343}.uiMainMenu .options .btn.btn-orange{background-color:#b34b3a}.uiMainMenu .options .btn.btn-orange:hover{background-color:#953f36}.uiMainMenu .options .btnIssue{background-color:#a82841}.uiMainMenu .options .btnIssue:hover{background-color:#802343}.mobile .uiMainMenu .btnScreen{display:none}.mobile .uiMainMenu .btnNames{display:block}
+.uiMainMenu{display:none;background-color:#373041;border:5px solid #3c3f4c;text-align:center}.uiMainMenu>.heading{color:#48edff;width:100%;height:36px;background-color:#3c3f4c;position:relative}.uiMainMenu>.heading .heading-text{padding-top:8px;margin:auto}.uiMainMenu .options{display:flex;flex-direction:column;padding:10px}.uiMainMenu .options .btn{color:#fcfcfc;width:100%;height:35px;background-color:#3a71ba;cursor:pointer;padding:0 20px}.uiMainMenu .options .btn+.btn{margin-top:10px}.uiMainMenu .options .btn.btnNames{display:none}.uiMainMenu .options .btn:hover{background-color:#42548d}.uiMainMenu .options .btn.btn-red{background-color:#a82841}.uiMainMenu .options .btn.btn-red:hover{background-color:#802343}.uiMainMenu .options .btn.btn-orange{background-color:#b34b3a}.uiMainMenu .options .btn.btn-orange:hover{background-color:#953f36}.uiMainMenu .options .btnIssue{background-color:#a82841}.uiMainMenu .options .btnIssue:hover{background-color:#802343}.mobile .uiMainMenu .btnScreen{display:none}.mobile .uiMainMenu .btnNames{display:block}

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

@@ -1 +1 @@
-.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,.9)}.uiMenu [class^=btn]{width:64px;height:64px;margin:0 8px;float:left;cursor:pointer;position:relative}.uiMenu [class^=btn]:hover{background-color:rgba(252,252,252,.1)}.uiMenu [class^=btn] .icon{pointer-events:none;position:absolute;left:0;top:0;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:0;bottom:23px;position:absolute;color:#fcfcfc;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:0;top:0;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:0}.mobile .uiMenu.active .btnCollapse{display:block;position:absolute;right:calc(100% + 10px);top:50%;transform:translateY(-50%);background-color:rgba(55,48,65,.9);width:64px;height:64px}.mobile .uiMenu.active .btnCollapse .icon{width:100%;height:100%;background:url(../../../images/uiIcons.png) -448px 0}

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: @blackB;
 				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/middleHud/styles.css

@@ -1 +1 @@
-.uiMiddleHud{position:absolute;left:calc(50% - 12px);top:calc(50% + 31px)}.uiMiddleHud .btnGather{display:none;background-color:rgba(58,59,74,0.9);padding:8px 10px 8px 10px;width:120px;margin-top:8px;margin-left:calc(12px - 60px);text-align:center;position:absolute;left:calc(50vw - 88px);top:calc(50vh - 113px);width:64px;height:64px}.uiMiddleHud .btnGather .icon{position:absolute;left:0px;top:0px;width:100%;height:100%;background:url(../../../images/uiIcons.png) -448px -64px}.uiMiddleHud .casting{display:none;width:32px;height:5px;position:relative;background-color:#763b3b}.uiMiddleHud .casting .bar{width:0%;height:100%;background-color:#faac45}.uiMiddleHud .casting .text{position:absolute;left:0px;top:0px;padding-top:2px;width:100%;text-align:center;color:#2d2136}
+.uiMiddleHud{position:absolute;left:calc(50% - 12px);top:calc(50% + 31px)}.uiMiddleHud .btnGather{display:none;background-color:rgba(58,59,74,.9);padding:8px 10px 8px 10px;width:120px;margin-top:8px;margin-left:calc(12px - 60px);text-align:center;position:absolute;left:calc(50vw - 88px);top:calc(50vh - 113px);width:64px;height:64px}.uiMiddleHud .btnGather .icon{position:absolute;left:0;top:0;width:100%;height:100%;background:url(../../../images/uiIcons.png) -448px -64px}.uiMiddleHud .casting{display:none;width:32px;height:5px;position:relative;background-color:#763b3b}.uiMiddleHud .casting .bar{width:0%;height:100%;background-color:#faac45}.uiMiddleHud .casting .text{position:absolute;left:0;top:0;padding-top:2px;width:100%;text-align:center;color:#2d2136}

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

@@ -1 +1 @@
-.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:#fcfcfc}.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/options/styles.css

@@ -1 +1 @@
-.uiOptions{display:none;width:400px;background-color:#373041;border:5px solid #3c3f4c;flex-direction:column}.uiOptions>.heading{color:#48edff;width:100%;height:36px;background-color:#3c3f4c;position:relative;text-align:center}.uiOptions>.heading .heading-text{padding-top:8px;margin:auto}.uiOptions .bottom{padding:10px;height:100%;overflow-y:auto}.uiOptions .bottom .list{display:flex;flex-direction:column}.uiOptions .bottom .list .heading{color:#929398;border-bottom:2px solid #69696e;margin:0px 10px 5px 10px;padding-bottom:5px}.uiOptions .bottom .list .heading:not(:first-child){margin:10px 10px 5px 10px}.uiOptions .bottom .list .item{height:30px;display:flex;justify-content:space-between;align-items:center}.uiOptions .bottom .list .item .name{color:#3fa7dd;flex:1;height:100%;display:flex;align-items:center;padding:0px 10px;margin-right:10px;cursor:pointer}.uiOptions .bottom .list .item .name:hover{color:#48edff;background-color:#505360}.uiOptions .bottom .list .item .value{color:#f2f5f5;display:flex;align-items:center;justify-content:flex-end;padding-right:10px}.uiOptions .bottom .list .item.volume{flex-wrap:wrap;height:60px}.uiOptions .bottom .list .item.volume .name{pointer-events:none}.uiOptions .bottom .list .item.volume .name,.uiOptions .bottom .list .item.volume .value{width:50%;height:30px}.uiOptions .bottom .list .item.volume .slider{padding:0px 10px;width:100%;height:30px;display:flex;position:relative}.uiOptions .bottom .list .item.volume .slider .btn{width:30px;margin-top:5px;height:calc(100% - 10px);display:flex;justify-content:center;align-items:center;color:#f2f5f5;background-color:#505360;padding-top:unset}.uiOptions .bottom .list .item.volume .slider .btn:first-child{margin-right:10px}.uiOptions .bottom .list .item.volume .slider .btn:last-child{margin-left:10px}.uiOptions .bottom .list .item.volume .slider .btn:hover{background-color:#69696e}.uiOptions .bottom .list .item.volume .slider .bar{width:100%;background-color:#42548d;border-top:10px solid #373041;border-bottom:10px solid #373041;height:100%;position:relative}.uiOptions .bottom .list .item.volume .slider .bar .tick{position:absolute;width:5px;height:20px;top:-5px;left:100%;background-color:#48edff}.mobile .uiOptions{max-height:100%}.mobile .uiOptions .item.screen{display:none}
+.uiOptions{display:none;width:400px;background-color:#373041;border:5px solid #3c3f4c;flex-direction:column}.uiOptions>.heading{color:#48edff;width:100%;height:36px;background-color:#3c3f4c;position:relative;text-align:center}.uiOptions>.heading .heading-text{padding-top:8px;margin:auto}.uiOptions .bottom{padding:10px;height:100%;overflow-y:auto}.uiOptions .bottom .list{display:flex;flex-direction:column}.uiOptions .bottom .list .heading{color:#929398;border-bottom:2px solid #69696e;margin:0 10px 5px 10px;padding-bottom:5px}.uiOptions .bottom .list .heading:not(:first-child){margin:10px 10px 5px 10px}.uiOptions .bottom .list .item{height:30px;display:flex;justify-content:space-between;align-items:center}.uiOptions .bottom .list .item .name{color:#3fa7dd;flex:1;height:100%;display:flex;align-items:center;padding:0 10px;margin-right:10px;cursor:pointer}.uiOptions .bottom .list .item .name:hover{color:#48edff;background-color:#505360}.uiOptions .bottom .list .item .value{color:#fcfcfc;display:flex;align-items:center;justify-content:flex-end;padding-right:10px}.uiOptions .bottom .list .item.volume{flex-wrap:wrap;height:60px}.uiOptions .bottom .list .item.volume .name{pointer-events:none}.uiOptions .bottom .list .item.volume .name,.uiOptions .bottom .list .item.volume .value{width:50%;height:30px}.uiOptions .bottom .list .item.volume .slider{padding:0 10px;width:100%;height:30px;display:flex;position:relative}.uiOptions .bottom .list .item.volume .slider .btn{width:30px;margin-top:5px;height:calc(100% - 10px);display:flex;justify-content:center;align-items:center;color:#fcfcfc;background-color:#505360;padding-top:unset}.uiOptions .bottom .list .item.volume .slider .btn:first-child{margin-right:10px}.uiOptions .bottom .list .item.volume .slider .btn:last-child{margin-left:10px}.uiOptions .bottom .list .item.volume .slider .btn:hover{background-color:#69696e}.uiOptions .bottom .list .item.volume .slider .bar{width:100%;background-color:#42548d;border-top:10px solid #373041;border-bottom:10px solid #373041;height:100%;position:relative}.uiOptions .bottom .list .item.volume .slider .bar .tick{position:absolute;width:5px;height:20px;top:-5px;left:100%;background-color:#48edff}.mobile .uiOptions{max-height:100%}.mobile .uiOptions .item.screen{display:none}

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

@@ -1 +1 @@
-.uiOverlay{display:none;position:absolute;left:0px;top:0px;background-color:rgba(60,63,76,0.55);width:100%;height:100%;z-index:99999}
+.uiOverlay{display:none;position:absolute;left:0;top:0;background-color:rgba(60,63,76,.55);width:100%;height:100%;z-index:99999}

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

@@ -9,4 +9,4 @@
 	width: 100%;
 	height: 100%;
 	z-index: 99999;
-}
+}

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

@@ -1 +1 @@
-.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:#fcfcfc;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:0}.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:0;top:0;height:100%}.uiParty .party .list .member .statBox .text{color:#fcfcfc;z-index:1;padding:0 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,.9);padding:10px;color:#fcfcfc;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:#fcfcfc;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,.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: @blackB;
 					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/progressBar/styles.css

@@ -1 +1 @@
-.uiProgressBar{pointer-events:none;position:absolute;left:0px;top:0px;width:192px;left:calc(50% - 96px);top:calc(50% + 142px)}.uiProgressBar .barContainer{width:100%;height:28px;background-color:#42548d;border:2px solid #312136}.uiProgressBar .barContainer .bar{background-color:#3fa7dd;height:100%}.uiProgressBar .barContainer .text{padding-top:7px;color:#f2f5f5;position:absolute;left:0px;top:0px;text-align:center;width:100%;height:100%;z-index:1;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}
+.uiProgressBar{pointer-events:none;position:absolute;left:0;top:0;width:192px;left:calc(50% - 96px);top:calc(50% + 142px)}.uiProgressBar .barContainer{width:100%;height:28px;background-color:#42548d;border:2px solid #312136}.uiProgressBar .barContainer .bar{background-color:#3fa7dd;height:100%}.uiProgressBar .barContainer .text{padding-top:7px;color:#fcfcfc;position:absolute;left:0;top:0;text-align:center;width:100%;height:100%;z-index:1;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}

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

@@ -30,15 +30,9 @@
 			width: 100%;
 			height: 100%;
 			z-index: 1;
-			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;
+			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;
 		}
+
 	}
-}
+
+}

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

@@ -1 +1 @@
-.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,.9)}.uiQuests .list .quest{cursor:pointer;padding:8px;background-color:rgba(58,59,74,.9)}.uiQuests .list .quest:hover{background-color:rgba(92,93,117,.9)}.uiQuests .list .quest .zone{color:#69696e;margin-bottom:4px;text-align:right}.uiQuests .list .quest .name{color:#fcfcfc;margin-bottom:3px}.uiQuests .list .quest .description{color:#a3a3a3}.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:#fcfcfc}.uiQuests .btn{display:none}.uiQuests.minimal .quest.disabled{display:none}.mobile .uiQuests{background-color:rgba(55,48,65,.9)}.mobile .uiQuests:not(.active){width:64px;height:64px;margin-left:10px;position:relative}.mobile .uiQuests:not(.active):after{content:'';position:absolute;left:0;top:0;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:0;top:0}.mobile .uiQuests.active .btn{display:block;position:absolute;right:calc(100% + 10px);top:0;background-color:rgba(55,48,65,.9);width:64px;height:64px;padding-top:0}.mobile .uiQuests.active .btn .icon{width:100%;height:100%;background:url(../../../images/uiIcons.png) -448px 0}

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 @@
-.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,.9);text-align:center}.uiReputation>.heading{color:#48edff;width:100%;height:36px;background-color:rgba(60,63,76,.9)}.uiReputation>.heading .heading-text{padding-top:8px;margin:auto}.uiReputation .info,.uiReputation .list{background-color:rgba(55,48,65,.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:#fcfcfc;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 0}.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:0;top:0;background-color:#7a3ad3}.uiReputation .info .bar-outer .tier{width:100%;height:100%;color:#fcfcfc;text-align:center;position:absolute;left:0;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}

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 @@
-.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,.9);transition-property:filter;transition-duration:.1s}.uiSpells .spell:first-child{margin-left:0}.uiSpells .spell:hover{filter:brightness(160%);-moz-filter:brightness(160%)}.uiSpells .spell.active .hotkey{color:#80f643}.uiSpells .spell .icon{position:absolute;left:0;top:0;width:100%;height:100%}.uiSpells .spell .cooldown{position:absolute;left:0;top:0;width:0;height:100%;background-color:rgba(212,51,70,.75)}.uiSpells .spell .hotkey{position:absolute;left:-2px;bottom:-6px;color:#fcfcfc;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:0;height:auto;background-color:transparent;display:flex;flex-direction:column-reverse}.mobile .uiSpells .spell{position:relative;margin:10px 0 0 0;background-color:rgba(58,59,74,.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/stash/styles.less

@@ -8,6 +8,7 @@
 			overflow-y: auto;
 			width: 825px;
 		}
+
 	}
 
 	.footer {
@@ -15,4 +16,5 @@
 		background-color: @blackC;
 		padding-bottom: 7px;
 	}
+
 }

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

@@ -1 +1 @@
-.uiTalk{border:5px solid rgba(60,63,76,0.9);width:400px;display:none;text-align:center;position:absolute;top:10px}.uiTalk .source{padding:5px 5px;background-color:rgba(60,63,76,0.9)}.uiTalk .source .name{color:#48edff;margin-bottom:5px}.uiTalk .source .msg{color:#f2f5f5;line-height:22px}.uiTalk .options{padding:5px;background-color:rgba(55,48,65,0.9)}.uiTalk .options .option{color:#3fa7dd;padding:5px 5px;cursor:pointer;line-height:22px}.uiTalk .options .option:hover{color:#f2f5f5}
+.uiTalk{border:5px solid rgba(60,63,76,.9);width:400px;display:none;text-align:center;position:absolute;top:10px}.uiTalk .source{padding:5px 5px;background-color:rgba(60,63,76,.9)}.uiTalk .source .name{color:#48edff;margin-bottom:5px}.uiTalk .source .msg{color:#fcfcfc;line-height:22px}.uiTalk .options{padding:5px;background-color:rgba(55,48,65,.9)}.uiTalk .options .option{color:#3fa7dd;padding:5px 5px;cursor:pointer;line-height:22px}.uiTalk .options .option:hover{color:#fcfcfc}

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

@@ -21,6 +21,7 @@
 			color: @white;
 			line-height: 22px;
 		}
+
 	}
 
 	.options {
@@ -36,6 +37,9 @@
 			&:hover {
 				color: @white;
 			}
+
 		}
+
 	}
-}
+
+}

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

@@ -1 +1 @@
-.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,.9);display:none}.uiTarget .boxes{width:100%;float:left;height:100%}.uiTarget .boxes .infoBox{color:#fcfcfc;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:0}.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:0;top:0;height:100%}.uiTarget .boxes .statBox .text{position:absolute;left:0;top:0;width:100%;height:100%;text-align:center;color:#fcfcfc;padding:2px 0;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}

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/terms/styles.css

@@ -1 +1 @@
-.uiTerms{display:none;width:562px;height:700px;margin-top:-80px;display:flex;flex-direction:column;align-items:center}.uiTerms>*{flex-shrink:0}.uiTerms .logo{width:562px;height:200px;margin-bottom:24px;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)}.uiTerms .heading{color:#ff6942;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);margin-bottom:24px}.uiTerms .content{flex:1;width:100%;overflow-y:auto;background-color:#373041;border:5px solid #3c3f4c;padding:10px;color:#c0c3cf;text-align:justify}.uiTerms .content .title{color:#f2f5f5}.uiTerms .buttons{width:100%;background-color:#373041;display:flex;justify-content:space-between;border-style:solid;border-color:#3c3f4c;border-width:0px 5px 5px 5px;padding:5px}.uiTerms .buttons .btn{background-color:#3a71ba;color:#f2f5f5;height:35px;padding-left:10px;padding-right:10px}.uiTerms .buttons .btn:hover{background-color:#3fa7dd}.uiTerms a{color:#3fa7dd}.uiTerms a:hover{color:#48edff}.mobile .uiTerms{height:80%;margin-top:0px}
+.uiTerms{display:none;width:562px;height:700px;margin-top:-80px;display:flex;flex-direction:column;align-items:center}.uiTerms>*{flex-shrink:0}.uiTerms .logo{width:562px;height:200px;margin-bottom:24px;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)}.uiTerms .heading{color:#ff6942;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);margin-bottom:24px}.uiTerms .content{flex:1;width:100%;overflow-y:auto;background-color:#373041;border:5px solid #3c3f4c;padding:10px;color:#c0c3cf;text-align:justify}.uiTerms .content .title{color:#fcfcfc}.uiTerms .buttons{width:100%;background-color:#373041;display:flex;justify-content:space-between;border-style:solid;border-color:#3c3f4c;border-width:0 5px 5px 5px;padding:5px}.uiTerms .buttons .btn{background-color:#3a71ba;color:#fcfcfc;height:35px;padding-left:10px;padding-right:10px}.uiTerms .buttons .btn:hover{background-color:#3fa7dd}.uiTerms a{color:#3fa7dd}.uiTerms a:hover{color:#48edff}.mobile .uiTerms{height:80%;margin-top:0}.mobile .uiTerms .logo{display:none}

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

@@ -91,4 +91,5 @@
 	.logo {
 		display: none;
 	}
+
 }

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

@@ -1 +1 @@
-.uiTooltipInfo{position:absolute;right:11px;bottom:164px;background-color:rgba(55,48,65,0.9);padding:8px 32px;line-height:20px;color:#f2f5f5;text-align:center}
+.uiTooltipInfo{position:absolute;right:11px;bottom:164px;background-color:rgba(55,48,65,.9);padding:8px 32px;line-height:20px;color:#fcfcfc;text-align:center}

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

@@ -9,4 +9,4 @@
 	line-height: 20px;
 	color: @white;
 	text-align: center;
-}
+}

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,24 @@ define([
 				})
 				.join('');
 
-			return html;
+			if (!html)
+				return null;
+
+			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 +229,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 +271,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 +327,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

@@ -1,104 +1 @@
-.uiTooltipItem > * {
-  z-index: 999999;
-}
-.uiTooltipItem .tooltip {
-  display: none;
-  position: absolute;
-  margin-left: -4px;
-  margin-top: -4px;
-  background-color: rgba(60, 63, 76, 0.95);
-  pointer-events: none;
-  padding: 10px;
-  color: #f2f5f5;
-  text-align: center;
-  line-height: 18px;
-  max-width: 300px;
-}
-.uiTooltipItem .tooltip .name {
-  margin-bottom: 8px;
-}
-.uiTooltipItem .tooltip .name .type {
-  color: #7f9c9c;
-}
-.uiTooltipItem .tooltip .name .power {
-  color: #80f643;
-}
-.uiTooltipItem .tooltip > .implicitStats {
-  color: #b8c9c9;
-  margin-bottom: 8px;
-  padding-bottom: 8px;
-  border-bottom: 2px solid #505360;
-}
-.uiTooltipItem .tooltip > .implicitStats .gainStat {
-  color: #80f643;
-}
-.uiTooltipItem .tooltip > .implicitStats .loseStat {
-  color: #d43346;
-}
-.uiTooltipItem .tooltip > .stats {
-  color: #b8c9c9;
-  margin-bottom: 8px;
-  padding-bottom: 8px;
-  border-bottom: 2px solid #505360;
-}
-.uiTooltipItem .tooltip > .stats .gainStat {
-  color: #80f643;
-}
-.uiTooltipItem .tooltip > .stats .loseStat {
-  color: #d43346;
-}
-.uiTooltipItem .tooltip > .stats .enchanted {
-  color: #44cb95 !important;
-}
-.uiTooltipItem .tooltip .effects {
-  color: #f2f5f5;
-  margin-bottom: 8px;
-}
-.uiTooltipItem .tooltip .faction {
-  color: #7f9c9c;
-  margin-bottom: 8px;
-}
-.uiTooltipItem .tooltip .requires {
-  margin-top: 8px;
-  color: #7f9c9c;
-}
-.uiTooltipItem .tooltip .requires.high-level {
-  color: #d43346;
-}
-.uiTooltipItem .tooltip .requires .high-level {
-  color: #d43346;
-}
-.uiTooltipItem .tooltip .requires > *:not(.high-level) {
-  color: #7f9c9c;
-}
-.uiTooltipItem .tooltip .material {
-  color: #7f9c9c;
-}
-.uiTooltipItem .tooltip .quest {
-  color: #7f9c9c;
-}
-.uiTooltipItem .tooltip .info {
-  color: #4f6666;
-}
-.uiTooltipItem .tooltip .damage .gainDamage {
-  color: #80f643;
-}
-.uiTooltipItem .tooltip .damage .loseDamage {
-  color: #d43346;
-}
-.uiTooltipItem .tooltip .worth.no-afford {
-  color: #d43346;
-}
-.uiTooltipItem > .btn {
-  position: absolute;
-  background-color: #3fa7dd;
-  color: #f2f5f5;
-  padding: 10px;
-  text-align: center;
-}
-.mobile .uiTooltipItem {
-  z-index: 9999999999;
-}
-.mobile .uiTooltipItem > * {
-  z-index: 9999999999;
-}
+.uiTooltipItem>*{z-index:999999}.uiTooltipItem .tooltip{display:none;flex-direction:column;position:absolute;margin-left:-4px;margin-top:-4px;background-color:rgba(60,63,76,.95);pointer-events:none;padding:10px;color:#fcfcfc;align-items:center;line-height:18px;max-width:300px}.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 .type{color:#929398}.uiTooltipItem .tooltip .power{color:#80f643}.uiTooltipItem .tooltip>.implicitStats{width:100%;color:#c0c3cf}.uiTooltipItem .tooltip>.implicitStats>*+*{margin-top:2px}.uiTooltipItem .tooltip>.implicitStats .gainStat{color:#80f643}.uiTooltipItem .tooltip>.implicitStats .loseStat{color:#d43346}.uiTooltipItem .tooltip>.stats{width:100%;color:#c0c3cf}.uiTooltipItem .tooltip>.stats>*+*{margin-top:2px}.uiTooltipItem .tooltip>.stats .gainStat{color:#80f643}.uiTooltipItem .tooltip>.stats .loseStat{color:#d43346}.uiTooltipItem .tooltip>.stats .enchanted{color:#44cb95!important}.uiTooltipItem .tooltip .effects{color:#fcfcfc}.uiTooltipItem .tooltip .faction{color:#929398}.uiTooltipItem .tooltip .high-level{color:#d43346}.uiTooltipItem .tooltip .material{color:#929398}.uiTooltipItem .tooltip .quest{color:#929398}.uiTooltipItem .tooltip .info{color:#69696e}.uiTooltipItem .tooltip .damage .gainDamage{color:#80f643}.uiTooltipItem .tooltip .damage .loseDamage{color:#d43346}.uiTooltipItem .tooltip .description{color:#ca752f;text-align:center}.uiTooltipItem .tooltip .worth.no-afford{color:#d43346}.uiTooltipItem>.btn{position:absolute;background-color:#3fa7dd;color:#fcfcfc;padding:10px;text-align:center}.mobile .uiTooltipItem{z-index:9999999999}.mobile .uiTooltipItem>*{z-index:9999999999}

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,47 @@
 
 		.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;
+			text-align: center;
+		}
+
 		.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/tooltips/styles.css

@@ -1 +1 @@
-.uiTooltips{z-index:4}.uiTooltips .tooltip{display:none;z-index:4;background-color:rgba(58,59,74,0.85);position:absolute;padding:8px;color:#f2f5f5;text-align:justify}.uiTooltips .tooltip.bright{background-color:#c0c3cf;color:#2d2136}.uiTooltips .tooltip .hidden{display:none}
+.uiTooltips{z-index:4}.uiTooltips .tooltip{display:none;z-index:4;background-color:rgba(58,59,74,.85);position:absolute;padding:8px;color:#fcfcfc;text-align:justify}.uiTooltips .tooltip.bright{background-color:#c0c3cf;color:#2d2136}.uiTooltips .tooltip .hidden{display:none}

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

@@ -2,7 +2,7 @@
 
 .uiTooltips {
 	z-index: 4;
-	
+
 	.tooltip {
 		display: none;
 		z-index: 4;
@@ -20,5 +20,7 @@
 		.hidden {
 			display: none;
 		}
+
 	}
+
 }

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

@@ -1 +1 @@
-.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,.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 @@
-.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% * .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:#fff;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:0 10px;height:50px}.uiWardrobe .bottom .right .buttons .btn{float:left;width:calc((100% - 50px)/ 2);height:40px;padding-top:12px;color:#fff;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/client/ui/templates/workbench/styles.css

@@ -1 +1 @@
-.uiWorkbench{display:none;width:827px;height:447px;border:5px solid #3c3f4c;color:#f2f5f5;position:relative;z-index:2}.uiWorkbench>.heading,.uiWorkbench>.itemPicker>.heading{color:#ff6942;width:100%;height:36px;background-color:#3c3f4c;text-align:center}.uiWorkbench>.heading .heading-text,.uiWorkbench>.itemPicker>.heading .heading-text{padding-top:8px;margin:auto}.uiWorkbench>.bottom{background-color:#373041;height:calc(100% - 36px);width:100%}.uiWorkbench>.bottom .heading{color:#3fa7dd;margin-bottom:10px;text-align:center}.uiWorkbench>.bottom .left,.uiWorkbench>.bottom .right{float:left;height:100%;padding:10px}.uiWorkbench>.bottom .left{width:300px}.uiWorkbench>.bottom .left .list{height:calc(100% - 25px);overflow-y:auto;display:flex;flex-direction:column}.uiWorkbench>.bottom .left .list .item{width:100%;padding:5px 10px;cursor:pointer;color:#c0c3cf}.uiWorkbench>.bottom .left .list .item.selected{background-color:#3c3f4c;color:#f2f5f5}.uiWorkbench>.bottom .left .list .item:hover{background-color:#3c3f4c}.uiWorkbench>.bottom .right{width:calc(100% - 300px);display:flex;flex-direction:column;justify-content:space-between}.uiWorkbench>.bottom .right>*{width:100%}.uiWorkbench>.bottom .right .info{height:calc(100% - 100px - 35px);flex:1}.uiWorkbench>.bottom .right .info .title{color:#3fa7dd;padding-bottom:10px;text-align:center}.uiWorkbench>.bottom .right .info .description{color:#c0c3cf;text-align:justify}.uiWorkbench>.bottom .right .materialList{visibility:hidden;margin-bottom:20px}.uiWorkbench>.bottom .right .materialList .material.need{color:#d43346}.uiWorkbench>.bottom .right .needItems{display:none;margin-bottom:20px;flex-direction:column}.uiWorkbench>.bottom .right .needItems .title{color:#3fa7dd;padding-bottom:10px;text-align:center}.uiWorkbench>.bottom .right .needItems .list{display:flex;justify-content:space-around}.uiWorkbench>.bottom .right .buttons{height:40px}.uiWorkbench>.bottom .right .buttons>.btn{height:35px;width:100px;color:#f2f5f5;text-align:center;padding-top:10px;background-color:#3c3f4c;cursor:pointer;float:left}.uiWorkbench>.bottom .right .buttons>.btn:last-child{float:right}.uiWorkbench>.bottom .right .buttons>.btn:hover{background-color:#505360}.uiWorkbench>.itemPicker{display:none;position:absolute;left:0px;top:0px;width:100%;height:100%;background-color:#373041;flex-direction:column}.uiWorkbench>.itemPicker .list{display:flex;flex-wrap:wrap;overflow-y:auto}.mobile .uiWorkbench{z-index:2}
+.uiWorkbench{display:none;width:827px;height:447px;border:5px solid #3c3f4c;color:#fcfcfc;position:relative;z-index:2}.uiWorkbench>.heading,.uiWorkbench>.itemPicker>.heading{color:#ff6942;width:100%;height:36px;background-color:#3c3f4c;text-align:center}.uiWorkbench>.heading .heading-text,.uiWorkbench>.itemPicker>.heading .heading-text{padding-top:8px;margin:auto}.uiWorkbench>.bottom{background-color:#373041;height:calc(100% - 36px);width:100%}.uiWorkbench>.bottom .heading{color:#3fa7dd;margin-bottom:10px;text-align:center}.uiWorkbench>.bottom .left,.uiWorkbench>.bottom .right{float:left;height:100%;padding:10px}.uiWorkbench>.bottom .left{width:300px}.uiWorkbench>.bottom .left .list{height:calc(100% - 25px);overflow-y:auto;display:flex;flex-direction:column}.uiWorkbench>.bottom .left .list .item{width:100%;padding:5px 10px;cursor:pointer;color:#c0c3cf}.uiWorkbench>.bottom .left .list .item.selected{background-color:#3c3f4c;color:#fcfcfc}.uiWorkbench>.bottom .left .list .item:hover{background-color:#3c3f4c}.uiWorkbench>.bottom .right{width:calc(100% - 300px);display:flex;flex-direction:column;justify-content:space-between}.uiWorkbench>.bottom .right>*{width:100%}.uiWorkbench>.bottom .right .info{height:calc(100% - 100px - 35px);flex:1}.uiWorkbench>.bottom .right .info .title{color:#3fa7dd;padding-bottom:10px;text-align:center}.uiWorkbench>.bottom .right .info .description{color:#c0c3cf;text-align:justify}.uiWorkbench>.bottom .right .materialList{visibility:hidden;margin-bottom:20px}.uiWorkbench>.bottom .right .materialList .material.need{color:#d43346}.uiWorkbench>.bottom .right .needItems{display:none;margin-bottom:20px;flex-direction:column}.uiWorkbench>.bottom .right .needItems .title{color:#3fa7dd;padding-bottom:10px;text-align:center}.uiWorkbench>.bottom .right .needItems .list{display:flex;justify-content:space-around}.uiWorkbench>.bottom .right .buttons{height:40px}.uiWorkbench>.bottom .right .buttons>.btn{height:35px;width:100px;color:#fcfcfc;text-align:center;padding-top:10px;background-color:#3c3f4c;cursor:pointer;float:left}.uiWorkbench>.bottom .right .buttons>.btn:last-child{float:right}.uiWorkbench>.bottom .right .buttons>.btn:hover{background-color:#505360}.uiWorkbench>.itemPicker{display:none;position:absolute;left:0;top:0;width:100%;height:100%;background-color:#373041;flex-direction:column}.uiWorkbench>.itemPicker .list{display:flex;flex-wrap:wrap;overflow-y:auto}.mobile .uiWorkbench{z-index:2}

src/server/components/extensions/socialCommands.js

@@ -393,6 +393,9 @@ module.exports = {
 		if (config.name)
 			config.name = config.name.split('_').join(' ');
 
+		if (config.description)
+			config.description = config.description.split('_').join(' ');
+
 		if (config.spellName)
 			config.spellName = config.spellName.split('_').join(' ');
 

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;
 	},