some refactore

resources/bar.css

@@ -23,11 +23,13 @@ window {
 
 .material-icons {
 	font-family: var(--icon-font-material);
-	font-size: 18px;
+}
+
+.icon-button {
+	font-size: 16px;
 }
 
 .tab-icon {
-	font-family: var(--icon-font-material);
 	font-size: 20px;
 	margin-right: 6px;
 	border-radius: 4px;
@@ -35,13 +37,7 @@ window {
 	padding: 2px 4px;
 }
 
-.tab-icon:hover {
-	background-color: rgba(255, 255, 255, 0.1);
-	border: 1px solid rgba(255, 255, 255, 0.2);
-}
-
 .control-center-tab-row {
-	/* mordern and sleek */
 	background-color: rgba(50, 50, 50, 0.8);
 	border-radius: 8px;
 	padding: 2px 4px;
@@ -58,7 +54,6 @@ window {
 popover {
 	margin-top: 4px;
 	font-family: var(--text-font);
-	/* padding: 6px;  TODO: create better padding*/
 	border-radius: 8px;
 
 	background: rgba(25, 25, 25, 0.8);
@@ -105,8 +100,6 @@ popover {
 }
 
 .control-center-seek-bar {
-	min-height: 6px;
-	min-width: 120px;
 	margin: 0 6px;
 	border-bottom: 1px solid var(--color-border);
 }
@@ -139,8 +132,14 @@ tooltip {
 }
 
 button {
-	font-size: 20px;
-	padding: 3px 6px;
+	font-size: 14px;
+	padding: 4px 8px;
+	border-radius: 4px;
+	color: #ffffff;
+	transition:
+		background-color 0.2s,
+		color 0.2s,
+		border-color 0.2s;
 }
 
 #spacer {
@@ -151,14 +150,8 @@ button {
 }
 
 .button:hover {
-	background-color: #111111;
-}
-
-.flat-button {
-	background-color: #333333;
-	color: #ffffff;
-	padding: 2px 4px;
-	border-radius: 10px;
+	background-color: rgba(255, 255, 255, 0.1);
+	box-shadow: none;
 }
 
 .workspace-pill {