more styling for #1343

src/client/js/config.js

@@ -13,7 +13,7 @@ define([
 
 	const valueChains = {
 		showQuests: ['on', 'minimal', 'off'],
-		qualityIndicators: ['corner', 'border', 'background', 'off']
+		qualityIndicators: ['border', 'bottom', 'background', 'off']
 	};
 
 	const getNextValue = key => {

src/client/ui/templates/inventory/inventory.js

@@ -147,7 +147,7 @@ define([
 		},
 
 		onToggleQualityIndicators: function (state) {
-			this.el.removeClass('quality-off quality-corner quality-border quality-background');
+			this.el.removeClass('quality-off quality-bottom quality-border quality-background');
 
 			const className = `quality-${state.toLowerCase()}`;
 			this.el.addClass(className);

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

@@ -117,40 +117,8 @@
 
 	}
 
-	&.quality-corner .grid .item:not(.empty) {
-		&:after {
-			content: '';
-			position: absolute;
-			right: 5px;
-			bottom: 5px;
-			width: 10px;
-			height: 10px;
-			opacity: 0.5;
-		}
-
-		&.quality-0:after {
-			background-color: @qualityCommon;
-		}
-
-		&.quality-1:after {
-			background-color: @qualityMagic;
-		}
-
-		&.quality-2:after {
-			background-color: @qualityRare;
-		}
-
-		&.quality-3:after {
-			background-color: @qualityEpic;
-		}
-
-		&.quality-4:after {
-			background-color: @qualityLegendary;
-		}
-
-	}
-
-	&.quality-border .grid .item:not(.empty) {
+	&.quality-border .grid .item:not(.empty),
+	&.quality-bottom .grid .item:not(.empty) {
 		&:after {
 			content: '';
 			position: absolute;
@@ -159,29 +127,35 @@
 			width: 100%;
 			height: 100%;
 			box-sizing: border-box;
-			border-width: 2px;
+			border-width: 5px;
 			border-style: solid;
-			opacity: 0.5;
 		}
 
 		&.quality-0:after {
-			border-color: @qualityCommon;
+			border: none;
 		}
 
 		&.quality-1:after {
-			border-color: @qualityMagic;
+			border-color: @greenC;
 		}
 
 		&.quality-2:after {
-			border-color: @qualityRare;
+			border-color: @blueD;
 		}
 
 		&.quality-3:after {
-			border-color: @qualityEpic;
+			border-color: @purpleC;
 		}
 
 		&.quality-4:after {
-			border-color: @qualityLegendary;
+			border-color: @orangeD;
+		}
+
+	}
+
+	&.quality-bottom .grid .item:not(.empty) {
+		&:after {
+			border-width: 0px 0px 5px 0px;
 		}
 
 	}
@@ -194,7 +168,6 @@
 			left: 0px;
 			width: 100%;
 			height: 100%;
-			opacity: 0.25;
 		}
 
 		.icon {
@@ -214,24 +187,20 @@
 
 		}
 
-		&.quality-0:before {
-			background-color: @qualityCommon;
-		}
-
 		&.quality-1:before {
-			background-color: @qualityMagic;
+			background-color: @greenC;
 		}
 
 		&.quality-2:before {
-			background-color: @qualityRare;
+			background-color: @blueD;
 		}
 
 		&.quality-3:before {
-			background-color: @qualityEpic;
+			background-color: @purpleC;
 		}
 
 		&.quality-4:before {
-			background-color: @qualityLegendary;
+			background-color: @orangeD;
 		}
 
 	}