Better fit the user icon in the Stockholm chat theme

resources/chat/styles/Stockholm/css/base.css

@@ -66,8 +66,9 @@ body
 .x-container .x-buddyicon
 {
 	background-color: rgba(255, 255, 255, 1) !important;
-	height: 38px;
-	width: 38px;
+	height: 36px;
+	width: 36px;
+	margin: 1px;
 	position: absolute;
 	visibility: visible;
 }
@@ -369,33 +370,49 @@ a
 
 .x-container:not(.mention) .x-iconoverlay
 {
-	background: /* top corners, top dark border, left dark gradient, left light gradient, right dark gradient, right light gradient, top light edge, bottom light edge, bodyx2 */
-		-webkit-gradient(linear, left top, left bottom, from(hsla(0, 0%, 63%, 1)), to(hsla(0, 0%, 63%, 1))) left top no-repeat,
-		-webkit-gradient(linear, left top, right top, from(hsla(0, 0%, 58%, 1)), to(hsla(0, 0%, 48%, 1))) left top no-repeat,
-		-webkit-gradient(linear, left top, left bottom, from(hsla(0, 0%, 48%, 1)), to(hsla(0, 0%, 73%, 1))) left top no-repeat,
-		-webkit-gradient(linear, left top, left bottom, from(hsla(0, 0%, 90%, .3)), to(hsla(0, 0%, 100%, .7))) left top no-repeat,
+	background:
+		/* top left corner */
+		-webkit-gradient(linear, left top, right top, from(hsla(0, 0%, 63%, 1)), to(hsla(0, 0%, 63%, 1))) left top no-repeat,
+
+		/* dark border: top, left, right */
+		-webkit-gradient(linear, left top, right top,   from(hsla(0, 0%, 58%, 1)), to(hsla(0, 0%, 48%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(0, 0%, 58%, 1)), to(hsla(0, 0%, 73%, 1))) left 2px no-repeat,
 		-webkit-gradient(linear, left top, left bottom, from(hsla(0, 0%, 48%, 1)), color-stop(.3, hsla(0, 0%, 48%, 1)), to(hsla(0, 0%, 58%, 1))) right bottom no-repeat,
-		-webkit-gradient(linear, left top, left bottom, from(hsla(0, 0%, 90%, .3)), to(hsla(0, 0%, 100%, .7))) right bottom no-repeat,
-		-webkit-gradient(linear, left top, left bottom, from(hsla(0, 0%, 90%, .5)), to(hsla(0, 0%, 90%, .5))) left top no-repeat,
-		-webkit-gradient(linear, left top, left bottom, from(hsla(0, 0%, 100%, .5)), to(hsla(0, 0%, 100%, .5))) right bottom no-repeat,
-		-webkit-gradient(linear, left top, right top, from(hsla(0, 0%, 0%, .1)), color-stop(.15, hsla(0, 0%, 100%, 0)), color-stop(.85, hsla(0, 0%, 100%, 0)), to(hsla(0, 0%, 0%, .1))),
+
+		/* light border: top, bottom, left, right */
+		-webkit-gradient(linear, left top, left bottom, from(hsla(0, 0%, 100%, .8)), to(hsla(0, 0%, 100%, .8))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(0, 0%, 100%, .7)), to(hsla(0, 0%, 100%, .7))) left bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(0, 0%, 100%, .8)), to(hsla(0, 0%, 100%, .8))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(0, 0%, 100%, .8)), to(hsla(0, 0%, 100%, .8))) right top no-repeat,
+
+		/* body gradient x2 */
+		-webkit-gradient(linear, left top, right top,   from(hsla(0, 0%, 0%, .1)), color-stop(.15, hsla(0, 0%, 100%, 0)), color-stop(.85, hsla(0, 0%, 100%, 0)), to(hsla(0, 0%, 0%, .1))),
 		-webkit-gradient(linear, left top, left bottom, from(hsla(0, 0%, 0%, .1)), color-stop(.17, hsla(0, 0%, 100%, 0)), color-stop(.52, hsla(0, 0%, 100%, 0)), to(hsla(0, 0%, 0%, .1))) !important;
-	-webkit-background-size: 2px 2px, 100% 1px, 1px 100%, 2px 100%, 1px 100%, 2px 100%, 100% 2px, 100% 1px, 100% 100%, 100% 100% !important;
+
+	-webkit-background-size: 2px 2px, 100% 1px, 1px 100%, 1px 100%, 100% 2px, 100% 1px, 2px 100%, 2px 100%, 100% 100%, 100% 100% !important;
 }
 
 .x-container.mention .x-iconoverlay
 {
-	background: /* top corners, top dark border, left dark gradient, left light gradient, right dark gradient, right light gradient, top light edge, bottom light edge, bodyx2 */
-		-webkit-gradient(linear, left top, left bottom, from(hsla(0, 0%, 63%, 1)), to(hsla(0, 0%, 63%, 1))) left top no-repeat,
-		-webkit-gradient(linear, left top, right top, from(hsla(0, 0%, 58%, 1)), to(hsla(0, 0%, 48%, 1))) left top no-repeat,
-		-webkit-gradient(linear, left top, left bottom, from(hsla(0, 0%, 48%, 1)), to(hsla(0, 0%, 73%, 1))) left top no-repeat,
-		-webkit-gradient(linear, left top, left bottom, from(hsla(0, 0%, 90%, .3)), to(hsla(0, 0%, 100%, .7))) left top no-repeat,
+	background:
+		/* top left corner */
+		-webkit-gradient(linear, left top, right top, from(hsla(0, 0%, 63%, 1)), to(hsla(0, 0%, 63%, 1))) left top no-repeat,
+
+		/* dark border: top, left, right */
+		-webkit-gradient(linear, left top, right top,   from(hsla(0, 0%, 58%, 1)), to(hsla(0, 0%, 48%, 1))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(0, 0%, 58%, 1)), to(hsla(0, 0%, 73%, 1))) left 2px no-repeat,
 		-webkit-gradient(linear, left top, left bottom, from(hsla(0, 0%, 48%, 1)), color-stop(.3, hsla(0, 0%, 48%, 1)), to(hsla(0, 0%, 58%, 1))) right bottom no-repeat,
-		-webkit-gradient(linear, left top, left bottom, from(hsla(0, 0%, 90%, .3)), to(hsla(0, 0%, 100%, 7))) right bottom no-repeat,
-		-webkit-gradient(linear, left top, left bottom, from(hsla(0, 0%, 90%, .5)), to(hsla(0, 0%, 90%, .5))) left top no-repeat,
-		-webkit-gradient(linear, left top, left bottom, from(hsla(0, 0%, 100%, .5)), to(hsla(0, 0%, 100%, .5))) right bottom no-repeat,
-		-webkit-gradient(linear, left top, right top, from(hsla(0, 0%, 0%, .1)), color-stop(.15, hsla(0, 0%, 100%, 0)), color-stop(.85, hsla(0, 0%, 100%, 0)), to(hsla(0, 0%, 0%, .1))),
+
+		/* light border: top, bottom, left, right */
+		-webkit-gradient(linear, left top, left bottom, from(hsla(0, 0%, 100%, .8)), to(hsla(0, 0%, 100%, .8))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(0, 0%, 100%, .7)), to(hsla(0, 0%, 100%, .7))) left bottom no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(0, 0%, 100%, .8)), to(hsla(0, 0%, 100%, .8))) left top no-repeat,
+		-webkit-gradient(linear, left top, left bottom, from(hsla(0, 0%, 100%, .8)), to(hsla(0, 0%, 100%, .8))) right top no-repeat,
+
+		/* body gradient x2 */
+		-webkit-gradient(linear, left top, right top,   from(hsla(0, 0%, 0%, .1)), color-stop(.15, hsla(0, 0%, 100%, 0)), color-stop(.85, hsla(0, 0%, 100%, 0)), to(hsla(0, 0%, 0%, .1))),
 		-webkit-gradient(linear, left top, left bottom, from(hsla(0, 0%, 90%, 1)), color-stop(.12, hsla(0, 0%, 100%, 1)), color-stop(.62, hsla(0, 0%, 100%, 1)), to(hsla(0, 0%, 91%, 1))) !important;
-	-webkit-background-size: 2px 2px, 100% 1px, 1px 100%, 2px 100%, 1px 100%, 2px 100%, 100% 2px, 100% 1px, 100% 100%, 100% 100% !important;
+
+	-webkit-background-size: 2px 2px, 100% 1px, 1px 100%, 1px 100%, 100% 2px, 100% 1px, 2px 100%, 2px 100%, 100% 100%, 100% 100% !important;
 }