Volume and mute controls

src/scss/components/_snapcast.scss

@@ -1,24 +1,63 @@
 
 .snapcast {
 
-	.mute-button {
-		display: inline-block;
-		padding: 10px;
-		cursor: pointer;
-
-		&:hover {
-			color: $turquoise;
-		}
-	}
-
 	.group {
-		padding: 10px 0;
-		border-bottom: 1px solid $grey;
+		& > .inner {
+			padding-bottom: 5px;
+			border-bottom: 1px solid $grey;
+
+			& > .name {
+				font-weight: bold;
+			}
+		}
 
 		.clients {
 			.client {
-				padding: 10px 0 10px 20px;
-				border-top: 1px solid $grey;
+
+				&.disconnected {
+					opacity: 0.5;
+				}
+
+				& > .inner {
+					padding: 5px 5px 5px 20px;
+					border-bottom: 1px solid $grey;
+				}
+
+				.name {
+					padding: 6px 0 5px 0;
+					display: block;
+					width: 100%;
+					box-sizing: border-box;
+					border: 0;
+
+					&.editing {
+						background: transparent;
+						color: inherit;
+						font-family: inherit;
+						font-size: 14px;
+						letter-spacing: -0.01rem;
+						text-shadow: 1px 1px 1px rgba(0, 0, 0, 0.004);
+					}
+				}
+
+				.volume-control {
+					.mute-control {
+						display: inline-block;
+						float: left;
+						padding: 0 10px;
+						border: 0;
+					}
+
+					.slider-wrapper {
+						padding-left: 30px;
+					}
+
+					&.muted {
+						.slider .progress {
+							background: $mid_grey;
+						}
+					}
+				}
 			}
 		}
 	}