diff --git a/style/playbar.scss b/style/playbar.scss
index 698a2df..6209761 100644
--- a/style/playbar.scss
+++ b/style/playbar.scss
@@ -1,107 +1,86 @@
-@import 'theme.scss';
-
+@import "theme.scss";
 .playbar {
-	width: 100%;
-	height: $playbar-size;
-	background-color: $play-bar-background-color;
-	opacity: 0.9;
-	position: fixed;
-	bottom: 0;
-
-	.invisible-media-progress {
-		width: 100%;
-		height: 14px;
-		background-color: transparent;
-		position: absolute;
-		transform: translateY(-50%);
-		padding-top: 7px;
-		
-		.media-progress {
-			width: 100%;
-			height: 3px;
-			background-color: $controls-click-color;
-			
-			.media-progress-solid {
-				position: relative;
-				height: 3px;
-				background: linear-gradient(90deg, $play-grad-start, $play-grad-end);
-			}
-		}
-
-		.media-progress-solid::before {
-			content: "";
-			position: absolute;
-			height: 3px;
-			width: 100%;
-			background: linear-gradient(90deg, $play-grad-start, $play-grad-end);
-			z-index: -1;
-			filter: blur(3px);
-		}
-	}
-
-	.playbar-left-group {
-		display: flex;
-		position: absolute;
-		top: 50%;
-		transform: translateY(-50%);
-		margin-left: 10px;
-
-		.media-info-img {
-			width: 50px;
-		}
-
-		.media-info-text {
-			text-align: left;
-			margin-left: 10px;
-		}
-
-		.like-dislike {
-			margin-left: 20px;
-		}
-	}
-
-	.playcontrols {
-		display: flex;
-		flex-direction: row;
-		justify-content: center;
-		align-items: center;
-	}
-
-	.playduration {
-		position: absolute;
-		right: 10px;
-		top: 13px;
-	}
-
-	.queue-toggle {
-		position: absolute;
-		bottom: 13px;
-		top: 13px;
-		right: 90px;
-	}
-
-	button {
-		.hmirror {
-			-moz-transform: scale(-1, 1);
-			-webkit-transform: scale(-1, 1);
-			-o-transform: scale(-1, 1);
-			-ms-transform: scale(-1, 1);
-			transform: scale(-1, 1);
-		}
-
-		.controlbtn {
-			color: $text-controls-color;
-		}
-
-		.controlbtn:hover {
-			color: $controls-hover-color;
-		}
-
-		.controlbtn:active {
-			color: $controls-click-color;
-		}
-
-		background-color: transparent;
-		border: transparent;
-	}
+  width: 100%;
+  height: $playbar-size;
+  background-color: $play-bar-background-color;
+  opacity: 0.9;
+  position: fixed;
+  bottom: 0;
+  .invisible-media-progress {
+    width: 100%;
+    height: 0.875rem;
+    background-color: transparent;
+    position: absolute;
+    transform: translateY(-50%);
+    padding-top: 0.4375rem;
+    .media-progress {
+      width: 100%;
+      height: 0.1875rem;
+      background-color: $controls-click-color;
+      .media-progress-solid {
+        position: relative;
+        height: 0.1875rem;
+        background: linear-gradient(90deg, $play-grad-start, $play-grad-end);
+      }
+    }
+    .media-progress-solid::before {
+      content: "";
+      position: absolute;
+      height: 0.1875rem;
+      width: 100%;
+      background: linear-gradient(90deg, $play-grad-start, $play-grad-end);
+      z-index: -1;
+      filter: blur(0.1875rem);
+    }
+  }
+  .playbar-left-group {
+    display: flex;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+    margin-left: 0.625rem;
+    .media-info-img {
+      width: 3.125rem;
+    }
+    .media-info-text {
+      text-align: left;
+      margin-left: 0.625rem;
+    }
+    .like-dislike {
+      margin-left: 1.25rem;
+    }
+  }
+  .playcontrols {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+  }
+  .playduration {
+    position: absolute;
+    right: 0.625rem;
+    top: 0.8125rem;
+  }
+  .queue-toggle {
+    position: absolute;
+    bottom: 0.8125rem;
+    top: 0.8125rem;
+    right: 5.625rem;
+  }
+  button {
+    .hmirror {
+      transform: scale(-1, 1);
+    }
+    .controlbtn {
+      color: $text-controls-color;
+    }
+    .controlbtn:hover {
+      color: $controls-hover-color;
+    }
+    .controlbtn:active {
+      color: $controls-click-color;
+    }
+    background-color: transparent;
+    border: none;
+  }
 }