feat #1779: Done

src/client/css/colors.less

@@ -56,11 +56,11 @@
 @blackB: #3c3f4c;
 @blackC: #373041;
 @blackD: #312136;
+////Misc
+@white: @grayA;
 ////Qualities
 @qualityCommon: @white;
 @qualityMagic: @greenB;
 @qualityRare: @blueB;
 @qualityEpic: @purpleA;
 @qualityLegendary: @orangeA;
-////Misc
-@white: @grayA;

src/client/css/main.css

@@ -123,7 +123,7 @@ body {
   width: 16px;
 }
 ::-webkit-scrollbar-track {
-  background-color: #c0c3cf;
+  background-color: #3c3f4c;
   -webkit-border-radius: 0px;
   border-radius: 0px;
 }
@@ -133,9 +133,9 @@ body {
   background: #929398;
 }
 :root {
-  scrollbar-color: #929398 #c0c3cf !important;
+  scrollbar-color: #929398 #3c3f4c !important;
   scrollbar-width: thin !important;
-  --color-element-default: #f2f5f5;
+  --color-element-default: #fcfcfc;
   --color-element-arcane: #fc66f7;
   --color-element-frost: #48edff;
   --color-element-fire: #ff4252;
@@ -143,7 +143,7 @@ body {
   --color-element-poison: #51fc9a;
 }
 .q0 {
-  color: #f2f5f5;
+  color: #fcfcfc;
 }
 .q1 {
   color: #4ac441;
@@ -185,7 +185,7 @@ body {
   color: #763b3b !important;
 }
 .color-grayA {
-  color: #f2f5f5 !important;
+  color: #fcfcfc !important;
 }
 .color-grayB {
   color: #c0c3cf !important;
@@ -235,7 +235,7 @@ body {
   left: 6px;
   bottom: 3px;
   position: absolute;
-  color: #f2f5f5;
+  color: #fcfcfc;
   filter: drop-shadow(0px -2px 0px #312136) drop-shadow(0px 2px 0px #312136) drop-shadow(2px 0px 0px #312136) drop-shadow(-2px 0px 0px #312136);
   -moz-filter: drop-shadow(0px -2px 0px #312136) drop-shadow(0px 2px 0px #312136) drop-shadow(2px 0px 0px #312136) drop-shadow(-2px 0px 0px #312136);
 }

src/client/css/main.less

@@ -160,7 +160,7 @@ body {
 }
 
 ::-webkit-scrollbar-track {
-	background-color: @grayB;
+	background-color: @blackB;
 	-webkit-border-radius: 0px;
 	border-radius: 0px;
 }
@@ -172,7 +172,7 @@ body {
 }
 
 :root {
-	scrollbar-color: @grayC @grayB !important;
+	scrollbar-color: @grayC @blackB !important;
 	scrollbar-width: thin !important;
 	--color-element-default: @white;
 	--color-element-arcane: @pinkA;

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

@@ -1,13 +1,13 @@
 .uiDeath {
   display: none;
   width: 400px;
-  background-color: #c0c3cf;
+  background-color: #3c3f4c;
   border: 4px solid #929398;
   text-align: center;
   padding: 16px 16px 0px 16px;
 }
 .uiDeath .msg {
-  color: #f2f5f5;
+  color: #fcfcfc;
 }
 .uiDeath .msg .inner {
   display: inline-block;
@@ -18,7 +18,7 @@
   margin-top: 15px;
 }
 .uiDeath .btn {
-  color: #f2f5f5;
+  color: #fcfcfc;
   width: 100%;
   height: 32px;
   background-color: #3fa7dd;

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

@@ -3,7 +3,7 @@
 .uiDeath {
 	display: none;
 	width: 400px;
-	background-color: @grayB;
+	background-color: @blackB;
 	border: 4px solid @grayC;
 	text-align: center;
 	padding: 16px 16px 0px 16px;

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

@@ -53,7 +53,7 @@
   color: #c0c3cf;
 }
 .uiMessages .list .list-message.q0 {
-  color: #f2f5f5;
+  color: #fcfcfc;
 }
 .uiMessages .list .list-message.q1 {
   color: #4ac441;
@@ -101,7 +101,7 @@
   display: flex;
   justify-content: center;
   align-items: center;
-  color: #f2f5f5;
+  color: #fcfcfc;
   background-color: #3a71ba;
   cursor: pointer;
   padding: 0px 10px;
@@ -116,11 +116,11 @@
 .uiMessages .bottom .el {
   flex: 1;
   width: 100%;
-  color: #f2f5f5;
+  color: #fcfcfc;
 }
 .uiMessages .bottom .el.textbox.message {
   display: none;
-  background-color: #c0c3cf;
+  background-color: #3c3f4c;
   text-align: left;
   padding: 5px 10px;
 }
@@ -130,7 +130,7 @@
   padding-left: 10px;
   background-color: transparent;
   height: 35px;
-  color: #f2f5f5;
+  color: #fcfcfc;
   text-align: left;
   filter: drop-shadow(0px -2px 0px #312136) drop-shadow(0px 2px 0px #312136) drop-shadow(2px 0px 0px #312136) drop-shadow(-2px 0px 0px #312136);
   -moz-filter: drop-shadow(0px -2px 0px #312136) drop-shadow(0px 2px 0px #312136) drop-shadow(2px 0px 0px #312136) drop-shadow(-2px 0px 0px #312136);
@@ -161,7 +161,7 @@
 .uiMessages .bottom.channelOptions .option:hover,
 .uiMessages .bottom.channelOptions .option.selected {
   background-color: #69696e;
-  color: #f2f5f5;
+  color: #fcfcfc;
 }
 .uiMessages.typing {
   box-shadow: 0 -2px 0 #2d2136, 0 2px 0 #2d2136, 2px 0 0 #2d2136, -2px 0 0 #2d2136;
@@ -266,7 +266,7 @@
 .mobile .uiMessages.typing .keyboard .key {
   flex: 1;
   background-color: #505360;
-  color: #f2f5f5;
+  color: #fcfcfc;
   padding: 8px 10px;
   text-align: center;
 }

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

@@ -160,7 +160,7 @@
 
 			&.textbox.message {
 				display: none;
-				background-color: @grayB;
+				background-color: @blackB;
 				text-align: left;
 				padding: 5px 10px;
 			}

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

@@ -11,7 +11,7 @@
 .uiParty .party .list .member {
   width: 160px;
   background-color: #3a3b4a;
-  color: #f2f5f5;
+  color: #fcfcfc;
   cursor: pointer;
 }
 .uiParty .party .list .member + .member {
@@ -29,7 +29,7 @@
 .uiParty .party .list .member .statBox {
   width: 100%;
   height: 20px;
-  background-color: #c0c3cf;
+  background-color: #3c3f4c;
   position: relative;
   display: flex;
   justify-content: center;
@@ -45,7 +45,7 @@
   height: 100%;
 }
 .uiParty .party .list .member .statBox .text {
-  color: #f2f5f5;
+  color: #fcfcfc;
   z-index: 1;
   padding: 0px 2px;
   overflow: hidden;
@@ -70,7 +70,7 @@
   bottom: 10px;
   background-color: rgba(55, 48, 65, 0.9);
   padding: 10px;
-  color: #f2f5f5;
+  color: #fcfcfc;
   display: flex;
   flex-direction: column;
 }
@@ -98,7 +98,7 @@
 }
 .uiParty .invite .buttons .btn .text {
   pointer-events: none;
-  color: #f2f5f5;
+  color: #fcfcfc;
   text-shadow: 2px 0px #2d2136, -2px 0px #2d2136, 0px -2px #2d2136, 0px 2px #2d2136, -2px -2px #2d2136, -2px 2px #2d2136, 2px -2px #2d2136, 2px 2px #2d2136;
 }
 .uiParty .invite .buttons .btn + .btn {

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

@@ -41,7 +41,7 @@
 				.statBox {
 					width: 100%;
 					height: 20px;
-					background-color: @grayB;
+					background-color: @blackB;
 					position: relative;
 					display: flex;
 					justify-content: center;

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

@@ -187,6 +187,9 @@ define([
 				})
 				.join('');
 
+			if (!html)
+				return null;
+
 			const result = (
 				lineBuilders.div('space', ' ') +
 				lineBuilders.div('line', ' ') +

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

@@ -10,7 +10,7 @@
   background-color: rgba(60, 63, 76, 0.95);
   pointer-events: none;
   padding: 10px;
-  color: #f2f5f5;
+  color: #fcfcfc;
   align-items: center;
   line-height: 18px;
   max-width: 300px;
@@ -73,7 +73,7 @@
   color: #44cb95 !important;
 }
 .uiTooltipItem .tooltip .effects {
-  color: #f2f5f5;
+  color: #fcfcfc;
 }
 .uiTooltipItem .tooltip .faction {
   color: #929398;
@@ -98,6 +98,7 @@
 }
 .uiTooltipItem .tooltip .description {
   color: #ca752f;
+  text-align: center;
 }
 .uiTooltipItem .tooltip .worth.no-afford {
   color: #d43346;
@@ -105,7 +106,7 @@
 .uiTooltipItem > .btn {
   position: absolute;
   background-color: #3fa7dd;
-  color: #f2f5f5;
+  color: #fcfcfc;
   padding: 10px;
   text-align: center;
 }

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

@@ -134,6 +134,7 @@
 
 		.description {
 			color: @brownB;
+			text-align: center;
 		}
 
 		.worth {

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(' ');