Merge branch 'master' into 'release'

polish #1784: Fixed an issue with th elogin fields' backgroud colors being too...

See merge request Isleward/isleward!548

.gitlab-ci.yml

@@ -1,4 +1,4 @@
-image: node:12
+image: node:lts
 
 stages:
   - test

Dockerfile

@@ -1,5 +1,5 @@
-# Base image on Node.js 10.x LTS (dubnium)
-FROM node:12-alpine
+# Base image on Node.js latest LTS
+FROM node:lts-alpine
 
 # Create app directory
 WORKDIR /usr/src/isleward

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}.hidden{display: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

@@ -86,6 +86,10 @@ body {
 	pointer-events: none !important;
 }
 
+.hidden {
+	display: none !important;
+}
+
 [class^="ui"] {
 	input,
 	textarea {
@@ -160,7 +164,7 @@ body {
 }
 
 ::-webkit-scrollbar-track {
-	background-color: @gray;
+	background-color: @blackB;
 	-webkit-border-radius: 0px;
 	border-radius: 0px;
 }
@@ -168,18 +172,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 +207,7 @@ body {
 }
 
 .color-red {
-	color: @red !important;
+	color: @redB !important;
 }
 
 .color-redA {
@@ -228,7 +231,7 @@ body {
 }
 
 .color-green {
-	color: @green !important;
+	color: @greenA !important;
 }
 
 .color-brownC {
@@ -331,14 +334,14 @@ body {
 
 	&.eq {
 		.quantity {
-			color: @yellow;
+			color: @yellowA;
 		}
 
 	}
 
 	&.new {
 		.quantity {
-			color: @green;
+			color: @greenA;
 		}
 
 	}

src/client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "isleward_client",
-  "version": "0.9.0",
+  "version": "0.9.1",
   "description": "isleward",
   "dependencies": {},
   "devDependencies": {

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

@@ -38,7 +38,7 @@
 				-webkit-user-select: none;
 
 				&:active {
-					background-color: darken(@gray, 20%);
+					background-color: @blackC;
 				}
 
 			}
@@ -120,8 +120,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;
 		}
@@ -191,7 +191,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/fame.js

@@ -1,23 +0,0 @@
-define([
-	'js/system/events',
-	'js/system/client',
-	'html!ui/templates/fame/template',
-	'css!ui/templates/fame/styles'
-], function (
-	events,
-	client,
-	template,
-	styles
-) {
-	return {
-		tpl: template,
-		text: [],
-
-		centeredX: true,
-		modal: true,
-
-		postRender: function () {
-			
-		}
-	};
-});

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

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

src/client/ui/templates/fame/template.html

@@ -1,7 +0,0 @@
-<div class="uiFame">
-	<div class="top">
-		<div class="rank"></div>
-		<div class="fame"></div>
-	</div>
-	<div class="bottom"></div>
-</div>

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{background-color:#2d2136;color:#fcfcfc;-webkit-text-fill-color:#fcfcfc;margin-bottom:16px;filter:none}.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;
@@ -66,11 +66,11 @@
 		/* We duplicate this for firefox which doesn't like the webkit selector */
 		input,
 		.textbox {
-			-webkit-appearance: none;
-			box-shadow: 0 0 0px 20px darken(@gray, 15%) inset;
+			background-color: @black;
 			color: @white;
 			-webkit-text-fill-color: @white;
 			margin-bottom: @boxPadding;
+			filter: none;
 		}
 
 		.message {
@@ -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/login/template.html

@@ -11,11 +11,11 @@
 		</div>
 		<div class="message"></div>
 	</div>
-	<div class="news" location="https://gitlab.com/Isleward/play.isleward.com/-/wikis/v0.9.0-Release-Notes">[ Latest Release Notes ]</div>
+	<div class="news" location="https://gitlab.com/Isleward/play.isleward.com/-/wikis/v0.9.1-Release-Notes">[ Latest Release Notes ]</div>
 	<div class="extra">
 		<div class="el btn btnPatreon monetization" location="https://patreon.com/bigbadwaffle">Pledge on Patreon</div>
 		<div class="el btn btnPaypal monetization" location="https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=BR2CC82WUAVEA">Donate on Paypal</div>
 		<div class="el btn btnWiki" location="http://wiki.isleward.com/Main_Page">Access the Wiki</div>
 	</div>
-	<div class="version" location="https://gitlab.com/Isleward/play.isleward.com/-/wikis/v0.9.0-Release-Notes">v0.9.0</div>
+	<div class="version" location="https://gitlab.com/Isleward/play.isleward.com/-/wikis/v0.9.1-Release-Notes">v0.9.1</div>
 </div>

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/target/target.js

@@ -71,6 +71,8 @@ define([
 						});
 					});
 
+					events.emit('onBeforePlayerContext', target, inspectContext);
+
 					events.emit('onContextMenu', inspectContext, originalEvent);
 				}
 
@@ -92,6 +94,8 @@ define([
 				});
 			});
 
+			events.emit('onBeforeNpcContext', target, talkContext);
+
 			events.emit('onContextMenu', talkContext, originalEvent);
 
 			//Cancel the default right click action on desktop

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/buildTooltip/getCompareItem.js

@@ -0,0 +1,82 @@
+define([
+	'js/input'
+], function (
+	input
+) {
+	const getCompareItem = msg => {
+		const shiftDown = input.isKeyDown('shift', true);
+
+		let item = msg.item;
+		let items = window.player.inventory.items;
+
+		let compare = null;
+		if (item.slot) {
+			compare = items.find(i => i.eq && i.slot === item.slot);
+
+			// check special cases for mismatched weapon/offhand scenarios (only valid when comparing)
+			if (!compare) {
+				let equippedTwoHanded = items.find(i => i.eq && i.slot === 'twoHanded');
+				let equippedOneHanded = items.find(i => i.eq && i.slot === 'oneHanded');
+				let equippedOffhand = items.find(i => i.eq && i.slot === 'offHand');
+
+				if (item.slot === 'twoHanded') {
+					if (!equippedOneHanded) 
+						compare = equippedOffhand;
+					else if (!equippedOffhand) 
+						compare = equippedOneHanded;
+					else {
+						// compare against oneHanded and offHand combined by creating a virtual item that is the sum of the two
+						compare = $.extend(true, {}, equippedOneHanded);
+						compare.refItem = equippedOneHanded;
+
+						for (let s in equippedOffhand.stats) {
+							if (!compare.stats[s])
+								compare.stats[s] = 0;
+
+							compare.stats[s] += equippedOffhand.stats[s];
+						}
+
+						if (!compare.implicitStats)
+							compare.implicitStats = [];
+
+						(equippedOffhand.implicitStats || []).forEach(s => {
+							let f = compare.implicitStats.find(i => i.stat === s.stat);
+							if (!f) {
+								compare.implicitStats.push({
+									stat: s.stat,
+									value: s.value
+								});
+							} else
+								f.value += s.value;
+						});
+					}
+				}
+
+				if (item.slot === 'oneHanded') 
+					compare = equippedTwoHanded;
+
+				// this case is kind of ugly, but we don't want to go in when comparing an offHand to (oneHanded + empty offHand) - that should just use the normal compare which is offHand to empty
+				if (item.slot === 'offHand' && equippedTwoHanded && shiftDown) {
+					// since we're comparing an offhand to an equipped Twohander, we need to clone the 'spell' values over (setting damage to zero) so that we can properly display how much damage
+					// the player would lose by switching to the offhand (which would remove the twoHander)
+					// keep a reference to the original item for use in onHideToolTip
+					let spellClone = $.extend(true, {}, equippedTwoHanded.spell);
+					spellClone.name = '';
+					spellClone.values.damage = 0;
+
+					let clone = $.extend(true, {}, item, {
+						spell: spellClone
+					});
+					clone.refItem = item;
+					msg.item = clone;
+
+					compare = equippedTwoHanded;
+				}
+			}
+		}
+
+		msg.compare = compare;
+	};
+
+	return getCompareItem;
+});

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

@@ -0,0 +1,387 @@
+define([
+	'js/misc/statTranslations',
+	'ui/templates/tooltipItem/buildTooltip/stringifyStatValue'
+], function (
+	statTranslations,
+	stringifyStatValue
+) {
+	let item = null;
+	let compare = null;
+	let shiftDown = null;
+	let equipErrors = null;
+
+	const init = (_item, _compare, _shiftDown, _equipErrors) => {
+		item = _item;
+		compare = _compare;
+		shiftDown = _shiftDown;
+		equipErrors = _equipErrors;
+	};
+
+	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>`;
+		},
+
+		name: () => {
+			let itemName = item.name;
+			if (item.quantity > 1)
+				itemName += ' x' + item.quantity;
+
+			return itemName; 
+		},
+
+		type: () => {
+			if (!item.type || item.type === item.name)
+				return null;
+
+			return item.type;
+		},
+
+		power: () => {
+			if (!item.power)
+				return null;
+
+			return (new Array(item.power + 1)).join('+');
+		},
+
+		implicitStats: () => {
+			if (!item.implicitStats)
+				return null;
+
+			const tempImplicitStats = $.extend(true, [], item.implicitStats);
+
+			if (compare && shiftDown && !item.eq) {
+				const compareImplicitStats = (compare.implicitStats || []);
+
+				tempImplicitStats.forEach(s => {
+					const { stat, value } = s;
+
+					const f = compareImplicitStats.find(c => c.stat === stat);
+
+					if (!f) {
+						s.value = `+${value}`;
+						return;
+					}
+
+					const delta = value - f.value;
+					if (delta > 0)
+						s.value = `+${delta}`;
+					else if (delta < 0)
+						s.value = delta;
+				});
+
+				compareImplicitStats.forEach(s => {
+					if (tempImplicitStats.some(f => f.stat === s.stat))
+						return;
+
+					tempImplicitStats.push({
+						stat: s.stat,
+						value: -s.value
+					});
+				});
+			}
+
+			const html = tempImplicitStats
+				.map(({ stat, value }) => {
+					let statName = statTranslations.translate(stat);
+
+					const prettyValue = stringifyStatValue(stat, value);
+
+					let rowClass = '';
+
+					if (compare) {
+						if (prettyValue.indexOf('-') > -1)
+							rowClass = 'loseStat';
+						else if (prettyValue.indexOf('+') > -1)
+							rowClass = 'gainStat';
+					}
+
+					return `<div class="${rowClass}">${prettyValue} ${statName}</div>`;
+				})
+				.join('');
+
+			const result = (
+				lineBuilders.div('space', ' ') +
+				html
+			);
+
+			return result;
+		},
+
+		stats: () => {
+			const tempStats = $.extend(true, {}, item.stats);
+			const enchantedStats = item.enchantedStats || {};
+
+			if (compare && shiftDown) {
+				if (!item.eq) {
+					const compareStats = compare.stats;
+					for (let s in tempStats) {
+						if (compareStats[s]) {
+							const delta = tempStats[s] - compareStats[s];
+							if (delta > 0)
+								tempStats[s] = '+' + delta;
+							else if (delta < 0)
+								tempStats[s] = delta;
+						} else
+							tempStats[s] = '+' + tempStats[s];
+					}
+					for (let s in compareStats) {
+						if (!tempStats[s]) 
+							tempStats[s] = -compareStats[s];
+					}
+				}
+			} else {
+				Object.keys(tempStats).forEach(s => {
+					if (enchantedStats[s]) {
+						tempStats[s] -= enchantedStats[s];
+						if (tempStats[s] <= 0)
+							delete tempStats[s];
+
+						tempStats['_' + s] = enchantedStats[s];
+					}
+				});
+			}
+
+			const html = Object.keys(tempStats)
+				.map(s => {
+					const isEnchanted = (s[0] === '_');
+					let statName = s;
+					if (isEnchanted)
+						statName = statName.substr(1);
+
+					const prettyValue = stringifyStatValue(statName, tempStats[s]);
+					statName = statTranslations.translate(statName);
+
+					let rowClass = '';
+
+					if (compare) {
+						if (prettyValue.indexOf('-') > -1)
+							rowClass = 'loseStat';
+						else if (prettyValue.indexOf('+') > -1)
+							rowClass = 'gainStat';
+					}
+					if (isEnchanted)
+						rowClass += ' enchanted';
+
+					return `<div class="${rowClass}">${prettyValue} ${statName}</div>`;
+				})
+				.sort((a, b) => {
+					return (a.replace(' enchanted', '').length - b.replace(' enchanted', '').length);
+				})
+				.sort((a, b) => {
+					if (a.indexOf('enchanted') > -1 && b.indexOf('enchanted') === -1)
+						return 1;
+					else if (a.indexOf('enchanted') === -1 && b.indexOf('enchanted') > -1)
+						return -1;
+
+					return 0;
+				})
+				.join('');
+
+			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.effects || !item.effects.length || !item.effects[0].text || item.type === 'mtx')
+				return null;
+
+			let html = '';
+
+			item.effects.forEach((e, i) => {
+				html += e.text;
+				if (i < item.effects.length - 1)
+					html += '<br />';
+			});
+
+			return html;
+		},
+
+		material: () => {
+			if (item.material)
+				return 'crafting material';
+		},
+
+		quest: () => {
+			if (item.quest)
+				return 'quest item';
+		},
+
+		spellName: () => {
+			if (!item.spell || item.ability)
+				return null;
+
+			return (
+				lineBuilders.div('space', ' ') +
+				lineBuilders.div(`spellName q${item.spell.quality}`, item.spell.name)
+			);
+		},
+
+		damage: () => {
+			if (!item.spell || !item.spell.values)
+				return null;
+
+			const abilityValues = Object.entries(item.spell.values)
+				.map(([k, v]) => {
+					if (!compare || !shiftDown)
+						return `${k}: ${v}<br/>`;
+
+					let delta = v - compare.spell.values[k];
+					// adjust by EPSILON to handle float point imprecision, otherwise 3.15 - 2 = 1.14 or 2 - 3.15 = -1.14
+					// have to move away from zero by EPSILON, not a simple add
+					if (delta >= 0) 
+						delta += Number.EPSILON;
+					else 
+						delta -= Number.EPSILON;
+					delta = ~~((delta) * 100) / 100;
+
+					let rowClass = '';
+					if (delta > 0) {
+						rowClass = 'gainDamage';
+						delta = '+' + delta;
+					} else if (delta < 0) 
+						rowClass = 'loseDamage';
+						
+					return `<div class="${rowClass}">${k}: ${delta}</div>`;
+				})
+				.join('');
+
+			return abilityValues;
+		},
+
+		requires: (className, children) => {
+			if (!item.requires && !item.level && (!item.factions || !item.factions.length))
+				return null;
+
+			if (equipErrors.length)
+				className += ' high-level';
+
+			return (
+				lineBuilders.div('space', ' ') +
+				lineBuilders.div(className, 'requires')
+			);
+		},
+
+		requireLevel: className => {
+			if (!item.level)
+				return null;
+
+			if (equipErrors.includes('level'))
+				className += ' high-level';
+
+			const level = item.level.push ? `${item.level[0]} - ${item.level[1]}` : item.level;
+
+			return lineBuilders.div(className, `level: ${level}`);
+		},
+
+		requireStats: className => {
+			if (!item.requires || !item.requires[0])
+				return null;
+
+			if (equipErrors.includes('stats'))
+				className += ' high-level';
+			
+			let html = `${item.requires[0].stat}: ${item.requires[0].value}`;
+
+			return lineBuilders.div(className, html);
+		},
+
+		requireFaction: () => {
+			if (!item.factions)
+				return null;
+
+			let htmlFactions = '';
+
+			item.factions.forEach((f, i) => {
+				let htmlF = f.name + ': ' + f.tierName;
+				if (f.noEquip)
+					htmlF = '<font class="color-red">' + htmlF + '</font>';
+
+				htmlFactions += htmlF;
+				if (i < item.factions.length - 1)
+					htmlFactions += '<br />';
+			});
+
+			return htmlFactions;
+		},
+
+		worth: () => {
+			if (!item.worthText)
+				return null;
+
+			return (
+				lineBuilders.div('space', ' ') +
+				`value: ${item.worthText}`
+			);
+		},
+
+		info: () => {
+			if (!item.slot)
+				return null;
+
+			let text = null;
+
+			if (!shiftDown && compare)
+				text = '[shift] to compare'; 
+			else if (isMobile && compare && !shiftDown)
+				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,
+		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/styles.css

@@ -1 +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;display:none}.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;display:none}.uiTooltipItem .tooltip .quest{color:#7f9c9c;display:none}.uiTooltipItem .tooltip .info{color:#4f6666}.uiTooltipItem .tooltip .damage .gainDamage{color:#80f643}.uiTooltipItem .tooltip .damage .loseDamage{color:#d43346}.uiTooltipItem .tooltip .worth{display:none}.uiTooltipItem .tooltip .worth.no-afford{color:#d43346}.uiTooltipItem .tooltip.no-compare .info{display:none}.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;text-align:center}.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,119 +16,135 @@
 		pointer-events: none;
 		padding: 10px;
 		color: @white;
-		text-align: center;
+		align-items: center;
 		line-height: 18px;
 		max-width: 300px;
+		text-align: center;
 
-		.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;
-				display: none;
-			}
+		}
+
+		> *: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 {
 				color: @tealC !important;
 			}
+
 		}
 
 		.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%);
-			display: none;
+			color: @grayC;
 		}
 
 		.quest {
-			color: darken(@white, 40%);
-			display: none;
-		}		
+			color: @grayC;
+		}
 
 		.info {
-			color: darken(@white, 60%);
+			color: @grayD;
 		}
 
 		.damage {
 			.gainDamage {
-				color: @green;
+				color: @greenA;
 			}
 
 			.loseDamage {
-				color: @red;
+				color: @redB;
 			}
+
 		}
 
-		.worth {
-			display: none;
+		.description {
+			color: @brownB;
+			text-align: center;
+		}
 
+		.worth {
 			&.no-afford {
-				color: @red;
+				color: @redB;
 			}
-		}
 
-		&.no-compare .info {
-			display: none;
 		}
+
 	}
 
 	> .btn {
@@ -136,6 +154,7 @@
 		padding: 10px;
 		text-align: center;
 	}
+
 }
 
 .mobile .uiTooltipItem {
@@ -144,4 +163,5 @@
 	> * {
 		z-index: 9999999999;
 	}
+
 }

src/client/ui/templates/tooltipItem/templateTooltip.html

@@ -1,20 +0,0 @@
-<div class="name q$QUALITY$">
-	<div class="text">$NAME$</div>
-	<div class="type">$TYPE$</div>
-	<div class="power">$POWER$</div>
-</div>
-<div class="implicitStats">$IMPLICITSTATS$</div>
-<div class="stats">$STATS$</div>
-<div class="effects">$EFFECTS$</div>
-<div class="material">crafting material</div>
-<div class="quest">quest item</div>
-<div class="spellName">$SPELLNAME$</div>
-<div class="damage">$DAMAGE$</div>
-<div class="requires">
-	requires:
-	<div class="level">level: $LEVEL$</div>
-	<div class="stats">$ATTRIBUTE$: $ATTRIBUTEVALUE$</div>
-	<div class="faction">faction: $faction$</div>
-</div>
-<div class="worth"></div>
-<div class="info"><br />[shift] to compare</div>

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

@@ -1,42 +1,14 @@
 define([
-	'js/system/events',
+	'ui/templates/tooltipItem/buildTooltip/buildTooltip',
 	'css!ui/templates/tooltipItem/styles',
 	'html!ui/templates/tooltipItem/template',
-	'html!ui/templates/tooltipItem/templateTooltip',
-	'js/misc/statTranslations',
-	'js/input'
+	'js/system/events'
 ], function (
-	events,
+	buildTooltip,
 	styles,
 	template,
-	tplTooltip,
-	statTranslations,
-	input
+	events
 ) {
-	let percentageStats = [
-		'addCritChance',
-		'addCritMultiplier',
-		'addAttackCritChance',
-		'addAttackCritMultiplier',
-		'addSpellCritChance',
-		'addSpellCritMultiplier',
-		'sprintChance',
-		'xpIncrease',
-		'blockAttackChance',
-		'blockSpellChance',
-		'dodgeAttackChance',
-		'dodgeSpellChance',
-		'attackSpeed',
-		'castSpeed',
-		'itemQuantity',
-		'magicFind',
-		'catchChance',
-		'catchSpeed',
-		'fishRarity',
-		'fishWeight',
-		'fishItems'
-	];
-
 	return {
 		tpl: template,
 		type: 'tooltipItem',
@@ -51,79 +23,43 @@ define([
 			this.onEvent('onHideItemTooltip', this.onHideItemTooltip.bind(this));
 		},
 
-		getCompareItem: function (msg) {
-			const shiftDown = input.isKeyDown('shift', true);
-
-			let item = msg.item;
-			let items = window.player.inventory.items;
-
-			let compare = null;
-			if (item.slot) {
-				compare = items.find(i => i.eq && i.slot === item.slot);
-
-				// check special cases for mismatched weapon/offhand scenarios (only valid when comparing)
-				if (!compare) {
-					let equippedTwoHanded = items.find(i => i.eq && i.slot === 'twoHanded');
-					let equippedOneHanded = items.find(i => i.eq && i.slot === 'oneHanded');
-					let equippedOffhand = items.find(i => i.eq && i.slot === 'offHand');
-
-					if (item.slot === 'twoHanded') {
-						if (!equippedOneHanded) 
-							compare = equippedOffhand;
-						else if (!equippedOffhand) 
-							compare = equippedOneHanded;
-						else {
-							// compare against oneHanded and offHand combined by creating a virtual item that is the sum of the two
-							compare = $.extend(true, {}, equippedOneHanded);
-							compare.refItem = equippedOneHanded;
+		showWorth: function (canAfford) {
+			this.tooltip.find('.worth').show();
 
-							for (let s in equippedOffhand.stats) {
-								if (!compare.stats[s])
-									compare.stats[s] = 0;
+			if (!canAfford)
+				this.tooltip.find('.worth').addClass('no-afford');
+		},
 
-								compare.stats[s] += equippedOffhand.stats[s];
-							}
+		onShowItemTooltip: function (item, pos, canCompare, bottomAlign) {
+			this.item = item;
+			this.removeButton();
 
-							if (!compare.implicitStats)
-								compare.implicitStats = [];
+			const html = buildTooltip(this, item, pos, canCompare, bottomAlign);
 
-							(equippedOffhand.implicitStats || []).forEach(s => {
-								let f = compare.implicitStats.find(i => i.stat === s.stat);
-								if (!f) {
-									compare.implicitStats.push({
-										stat: s.stat,
-										value: s.value
-									});
-								} else
-									f.value += s.value;
-							});
-						}
-					}
+			const el = this.tooltip;
+			el.html(html);
+			el.css({ display: 'flex' });
 
-					if (item.slot === 'oneHanded') 
-						compare = equippedTwoHanded;
+			if (pos) {
+				if (bottomAlign)
+					pos.y -= el.height();
 
-					// this case is kind of ugly, but we don't want to go in when comparing an offHand to (oneHanded + empty offHand) - that should just use the normal compare which is offHand to empty
-					if (item.slot === 'offHand' && equippedTwoHanded && shiftDown) {
-						// since we're comparing an offhand to an equipped Twohander, we need to clone the 'spell' values over (setting damage to zero) so that we can properly display how much damage
-						// the player would lose by switching to the offhand (which would remove the twoHander)
-						// keep a reference to the original item for use in onHideToolTip
-						let spellClone = $.extend(true, {}, equippedTwoHanded.spell);
-						spellClone.name = '';
-						spellClone.values.damage = 0;
+				//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;
 
-						let clone = $.extend(true, {}, item, {
-							spell: spellClone
-						});
-						clone.refItem = item;
-						msg.item = clone;
+				if ((pos.y + el.height()) > window.innerHeight)
+					pos.y = window.innerHeight - el.height() - 30;
 
-						compare = equippedTwoHanded;
-					}
-				}
+				el.css({
+					left: pos.x,
+					top: pos.y
+				});
 			}
 
-			msg.compare = compare;
+			events.emit('onBuiltItemTooltip', this.tooltip);
 		},
 
 		onHideItemTooltip: function (item) {
@@ -143,371 +79,6 @@ define([
 			this.removeButton();
 		},
 
-		onShowItemTooltip: function (item, pos, canCompare, bottomAlign) {
-			this.removeButton();
-
-			let shiftDown = input.isKeyDown('shift', true);
-
-			let msg = {
-				item: item,
-				compare: null
-			};
-			this.getCompareItem(msg);
-
-			let useItem = item = msg.item;
-			if (isMobile && useItem === this.item)
-				shiftDown = true;
-			this.item = useItem;
-
-			let compare = canCompare ? msg.compare : null;
-
-			let tempStats = $.extend(true, {}, item.stats);
-			let tempImplicitStats = $.extend(true, [], item.implicitStats);
-			let enchantedStats = item.enchantedStats || {};
-
-			if (compare && shiftDown) {
-				if (!item.eq) {
-					let compareStats = compare.stats;
-					for (let s in tempStats) {
-						if (compareStats[s]) {
-							let delta = tempStats[s] - compareStats[s];
-							if (delta > 0)
-								tempStats[s] = '+' + delta;
-							else if (delta < 0)
-								tempStats[s] = delta;
-						} else
-							tempStats[s] = '+' + tempStats[s];
-					}
-					for (let s in compareStats) {
-						if (!tempStats[s]) 
-							tempStats[s] = -compareStats[s];
-					}
-
-					let compareImplicitStats = (compare.implicitStats || []);
-					tempImplicitStats.forEach(s => {
-						let statValue = s.value;
-
-						let f = compareImplicitStats.find(c => c.stat === s.stat);
-
-						if (f) {
-							let delta = statValue - f.value;
-							if (delta > 0)
-								s.value = '+' + delta;
-							else if (delta < 0)
-								s.value = delta;
-						} else
-							s.value = '+' + s.value;
-					});
-					compareImplicitStats.forEach(s => {
-						if (!tempImplicitStats.find(f => f.stat === s.stat)) { 
-							tempImplicitStats.push({
-								stat: s.stat,
-								value: -s.value
-							});
-						}
-					});
-				}
-			} else {
-				Object.keys(tempStats).forEach(function (s) {
-					if (enchantedStats[s]) {
-						tempStats[s] -= enchantedStats[s];
-						if (tempStats[s] <= 0)
-							delete tempStats[s];
-
-						tempStats['_' + s] = enchantedStats[s];
-					}
-				});
-			}
-
-			let stats = Object.keys(tempStats)
-				.map(s => {
-					let isEnchanted = (s[0] === '_');
-					let statName = s;
-					if (isEnchanted)
-						statName = statName.substr(1);
-
-					let value = this.getStatValue(statName, tempStats[s]);
-					statName = statTranslations.translate(statName);
-
-					let row = value + ' ' + statName;
-					let rowClass = '';
-
-					if (compare) {
-						if (row.indexOf('-') > -1)
-							rowClass = 'loseStat';
-						else if (row.indexOf('+') > -1)
-							rowClass = 'gainStat';
-					}
-					if (isEnchanted)
-						rowClass += ' enchanted';
-
-					row = '<div class="' + rowClass + '">' + row + '</div>';
-
-					return row;
-				})
-				.sort(function (a, b) {
-					return (a.replace(' enchanted', '').length - b.replace(' enchanted', '').length);
-				})
-				.sort(function (a, b) {
-					if ((a.indexOf('enchanted') > -1) && (b.indexOf('enchanted') === -1))
-						return 1;
-					else if ((a.indexOf('enchanted') === -1) && (b.indexOf('enchanted') > -1))
-						return -1;
-					return 0;
-				})
-				.join('');
-
-			let implicitStats = tempImplicitStats
-				.map(s => {
-					let statName = s.stat;
-					let value = this.getStatValue(statName, s.value);
-					statName = statTranslations.translate(statName);
-
-					let row = value + ' ' + statName;
-					let rowClass = '';
-
-					if (compare) {
-						if (row.indexOf('-') > -1)
-							rowClass = 'loseStat';
-						else if (row.indexOf('+') > -1)
-							rowClass = 'gainStat';
-					}
-
-					row = '<div class="' + rowClass + '">' + row + '</div>';
-
-					return row;
-				})
-				.join('');
-
-			let itemName = item.name;
-			if (item.quantity > 1)
-				itemName += ' x' + item.quantity;
-
-			let level = null;
-			if (item.level)
-				level = item.level.push ? item.level[0] + ' - ' + item.level[1] : item.level;
-
-			let html = tplTooltip
-				.replace('$NAME$', itemName)
-				.replace('$QUALITY$', item.quality)
-				.replace('$TYPE$', item.type)
-				.replace('$SLOT$', item.slot)
-				.replace('$IMPLICITSTATS$', implicitStats)
-				.replace('$STATS$', stats)
-				.replace('$LEVEL$', level);
-
-			if (item.requires && item.requires[0]) {
-				html = html
-					.replace('$ATTRIBUTE$', item.requires[0].stat)
-					.replace('$ATTRIBUTEVALUE$', item.requires[0].value);
-			}
-
-			if (item.power)
-				html = html.replace('$POWER$', ' ' + (new Array(item.power + 1)).join('+'));
-
-			if ((item.spell) && (item.spell.values)) {
-				let abilityValues = '';
-				for (let p in item.spell.values) {
-					if ((compare) && (shiftDown)) {
-						let delta = item.spell.values[p] - compare.spell.values[p];
-						// adjust by EPSILON to handle float point imprecision, otherwise 3.15 - 2 = 1.14 or 2 - 3.15 = -1.14
-						// have to move away from zero by EPSILON, not a simple add
-						if (delta >= 0) 
-							delta += Number.EPSILON;
-						else 
-							delta -= Number.EPSILON;
-						
-						delta = ~~((delta) * 100) / 100;
-						let rowClass = '';
-						if (delta > 0) {
-							rowClass = 'gainDamage';
-							delta = '+' + delta;
-						} else if (delta < 0) 
-							rowClass = 'loseDamage';
-						
-						abilityValues += '<div class="' + rowClass + '">' + p + ': ' + delta + '</div>';
-					} else 
-						abilityValues += p + ': ' + item.spell.values[p] + '<br/>';
-				}
-				if (!item.ability)
-					abilityValues = abilityValues;
-				html = html.replace('$DAMAGE$', abilityValues);
-			}
-
-			let tooltip = this.tooltip;
-
-			tooltip.html(html);
-
-			if (!item.level)
-				tooltip.find('.level').hide();
-			else
-				tooltip.find('.level').show();
-
-			if (!item.implicitStats)
-				tooltip.find('.implicitStats').hide();
-			else
-				tooltip.find('.implicitStats').show();
-
-			if (!item.requires) {
-				if (!item.level && (!item.factions || !item.factions.length))
-					tooltip.find('.requires').hide();
-				else
-					tooltip.find('.requires .stats').hide();
-			} else
-				tooltip.find('.requires .stats').show();
-
-			if (!stats.length)
-				tooltip.children('.stats').hide();
-
-			if ((!item.type) || (item.type === item.name))
-				tooltip.find('.type').hide();
-			else {
-				tooltip.find('.type')
-					.html(item.type)
-					.show();
-			}
-
-			if (item.power)
-				tooltip.find('.power').show();
-
-			let equipErrors = window.player.inventory.equipItemErrors(item);
-			equipErrors.forEach(function (e) {
-				tooltip.find('.requires').addClass('high-level');
-				tooltip.find('.requires .' + e).addClass('high-level');
-			}, this);
-
-			if ((item.material) || (item.quest)) {
-				tooltip.find('.level').hide();
-				tooltip.find('.info').hide();
-
-				if (item.material)
-					tooltip.find('.material').show();
-				else if (item.quest)
-					tooltip.find('.quest').show();
-			} else if (item.eq)
-				tooltip.find('.info').hide();
-
-			if (!item.ability) 
-				tooltip.find('.damage').hide();
-			else
-				tooltip.find('.info').hide();
-
-			if (item.spell) {
-				tooltip.find('.spellName')
-					.html(item.spell.name)
-					.addClass('q' + item.spell.quality)
-					.show();
-				tooltip.find('.damage')
-					.show();
-				if (item.ability)
-					tooltip.find('.spellName').hide();
-			} else
-				tooltip.find('.spellName').hide();
-
-			tooltip.find('.worth').html(item.worthText ? ('<br />value: ' + item.worthText) : '');
-
-			if (item.effects && item.effects[0].text && item.type !== 'mtx') {
-				let htmlEffects = '';
-
-				item.effects.forEach(function (e, i) {
-					htmlEffects += e.text;
-					if (i < item.effects.length - 1)
-						htmlEffects += '<br />';
-				});
-
-				this.find('.effects')
-					.html(htmlEffects)
-					.show();
-			} else if (item.description) {
-				this.find('.effects')
-					.html(item.description)
-					.show();
-			} else
-				this.find('.effects').hide();
-
-			if (item.type === 'Reward Card') {
-				this.find('.spellName')
-					.html('Set Size: ' + item.setSize)
-					.show();
-			}
-
-			if (item.factions) {
-				let htmlFactions = '';
-
-				item.factions.forEach(function (f, i) {
-					let htmlF = f.name + ': ' + f.tierName;
-					if (f.noEquip)
-						htmlF = '<font class="color-red">' + htmlF + '</font>';
-
-					htmlFactions += htmlF;
-					if (i < item.factions.length - 1)
-						htmlFactions += '<br />';
-				});
-
-				this.find('.faction')
-					.html(htmlFactions)
-					.show();
-			} else
-				this.find('.faction').hide();
-
-			if (shiftDown || !compare)
-				tooltip.find('.info').hide();
-			else if (isMobile && compare && !shiftDown)
-				tooltip.find('.info').html('tap again to compare');
-
-			if (item.cd) {
-				tooltip.find('.info')
-					.html('cooldown: ' + item.cd)
-					.show();
-			} else if (item.uses) {
-				tooltip.find('.info')
-					.html('uses: ' + item.uses)
-					.show();
-			}
-
-			this.tooltip
-				.show();
-
-			if (pos) {
-				if (bottomAlign)
-					pos.y -= this.tooltip.height();
-
-				//correct tooltips that are appearing offscreen
-				// arbitrary constant -30 is there to stop resize code
-				// completely squishing the popup
-				if ((pos.x + this.tooltip.width()) > window.innerWidth)
-					pos.x = window.innerWidth - this.tooltip.width() - 30;
-
-				if ((pos.y + this.tooltip.height()) > window.innerHeight)
-					pos.y = window.innerHeight - this.tooltip.height() - 30;
-
-				this.tooltip.css({
-					left: pos.x,
-					top: pos.y
-				});
-			}
-
-			events.emit('onBuiltItemTooltip', this.tooltip);
-		},
-
-		getStatValue: function (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;
-		},
-
-		showWorth: function (canAfford) {
-			this.tooltip.find('.worth').show();
-
-			if (!canAfford)
-				this.tooltip.find('.worth').addClass('no-afford');
-		},
-
 		addButton: function (label, cb) {
 			let tt = this.tooltip;
 			let pos = tt.offset();

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/auth.js

@@ -121,7 +121,10 @@ module.exports = {
 		});
 	},
 
-	simplify: function () {
+	simplify: function (self) {
+		if (!self)
+			return;
+		
 		return {
 			type: 'auth',
 			username: this.username,

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/components/social/chat.js

@@ -4,17 +4,30 @@ const profanities = require('../../misc/profanities');
 const canChat = require('./canChat');
 
 const sendRegularMessage = ({ obj }, msg) => {
-	let charname = obj.auth.charname;
+	const charname = obj.auth.charname;
+
+	const msgEvent = {
+		username: obj.account,
+		tagPrefix: '(',
+		tagSuffix: ')',
+		tags: [],
+		msgStyle: 'color-grayB'
+	};
+
+	events.emit('onBeforeGetChatStyles', msgEvent);
+
+	let usePrefix = '';
+	if (msgEvent.tags.length)
+		usePrefix = `${msgEvent.tagPrefix}${msgEvent.tags.join(' ')}${msgEvent.tagSuffix} `;
 
-	let prefix = roles.getRoleMessagePrefix(obj) || '';
-	let msgStyle = roles.getRoleMessageStyle(obj) || 'color-grayB';
+	const finalMessage = `${usePrefix}${charname}: ${msg.data.message}`;
 
 	cons.emit('event', {
 		event: 'onGetMessages',
 		data: {
 			messages: [{
-				class: msgStyle,
-				message: prefix + charname + ': ' + msg.data.message,
+				class: msgEvent.msgStyle,
+				message: finalMessage,
 				item: msg.data.item,
 				type: 'chat',
 				source: obj.name

src/server/config/serverConfig.js

@@ -1,5 +1,5 @@
 module.exports = {
-	version: '0.9.0',
+	version: '0.9.1',
 	port: 4000,
 	startupMessage: 'Server: ready',
 	defaultZone: 'fjolarok',

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

src/server/misc/mods.js

@@ -49,7 +49,7 @@ module.exports = {
 		if (mod.disabled)
 			return;
 
-		const isMapThread = !!process.send;
+		const isMapThread = global.instancer;
 		mod.isMapThread = isMapThread;
 
 		mod.events = events;

src/server/objects/objBase.js

@@ -109,7 +109,8 @@ module.exports = {
 			o = this;
 		}
 
-		let syncTypes = ['portrait', 'area'];
+		const syncTypes = ['portrait', 'area'];
+		const ignoreKeysWhenNotSelf = ['account'];
 
 		for (let p in o) {
 			let value = o[p];
@@ -119,9 +120,10 @@ module.exports = {
 			let type = typeof (value);
 			if (type === 'function')
 				continue;
-			else if (type !== 'object')
-				result[p] = value;
-			else if (type === 'undefined')
+			else if (type !== 'object') {
+				if (self || !ignoreKeysWhenNotSelf.includes(p))
+					result[p] = value;
+			} else if (type === 'undefined')
 				continue;
 			else {
 				if (value.type) {

src/server/package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "isleward_server",
-  "version": "0.9.0",
+  "version": "0.9.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
@@ -1387,9 +1387,9 @@
       }
     },
     "glob-parent": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.1.tgz",
-      "integrity": "sha512-FnI+VGOpnlGHWZxthPGR+QhR78fuiK0sNLkHQv+bL9fQi57lNNdquIbna/WrfROrolq8GK5Ek6BiMwqL/voRYQ==",
+      "version": "5.1.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-5.1.2.tgz",
+      "integrity": "sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==",
       "dev": true,
       "requires": {
         "is-glob": "^4.0.1"
@@ -2944,9 +2944,9 @@
       }
     },
     "ws": {
-      "version": "7.4.4",
-      "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.4.tgz",
-      "integrity": "sha512-Qm8k8ojNQIMx7S+Zp8u/uHOx7Qazv3Yv4q68MiWWWOJhiwG5W3x7iqmRtJo8xxrciZUY4vRxUTJCKuRnF28ZZw=="
+      "version": "7.4.6",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-7.4.6.tgz",
+      "integrity": "sha512-YmhHDO4MzaDLB+M9ym/mDA5z0naX8j7SIlT8f8z+I0VtzsRbekxEutHSme7NPS2qE8StCYQNUnfWdXta/Yu85A=="
     },
     "xmlhttprequest-ssl": {
       "version": "1.6.2",

src/server/package.json

@@ -1,6 +1,6 @@
 {
   "name": "isleward_server",
-  "version": "0.9.0",
+  "version": "0.9.1",
   "description": "isleward",
   "dependencies": {
     "axios": "^0.21.1",

src/server/server/onConnection.js

@@ -30,7 +30,13 @@ const onRequest = (socket, msg, callback) => {
 		if (!router.allowedGlobal(msg))
 			return;
 
+		const source = cons.players.find(p => p.socket.id === socket.id);
+
 		msg.socket = socket;
+
+		if (source)
+			msg.data.sourceId = source.id;
+
 		global[msg.module][msg.method](msg);
 	}
 };

src/server/world/map.js

@@ -313,11 +313,12 @@ module.exports = {
 		return cell + offset;
 	},
 
-	getCellInfo: function (gid, x, y) {
+	getCellInfo: function (gid, x, y, layerName) {
 		const cellInfoMsg = {
 			mapName: this.name,
 			x,
 			y,
+			layerName,
 			tilesets: mapFile.tilesets
 		};
 		events.emit('onBeforeGetCellInfo', cellInfoMsg);
@@ -361,7 +362,7 @@ module.exports = {
 				return;
 			}
 
-			let cellInfo = this.getCellInfo(cell, x, y);
+			let cellInfo = this.getCellInfo(cell, x, y, layerName);
 			let sheetName = cellInfo.sheetName;
 
 			const offsetCell = this.getOffsetCellPos(sheetName, cellInfo.cell);
@@ -394,7 +395,7 @@ module.exports = {
 			const y = (cell.y / mapScale) - 1;
 
 			let clientObj = (layerName === 'clientObjects');
-			let cellInfo = this.getCellInfo(cell.gid, x, y);
+			let cellInfo = this.getCellInfo(cell.gid, x, y, layerName);
 
 			let name = (cell.name || '');
 			let objZoneName = name;