refactor notifications

resources/bar.css

@@ -3,6 +3,14 @@
 	all: unset;
 }
 
+/* variable */
+:root {
+	--icon-font-material: "Material Icons", sans-serif;
+	--icon-font-awesome: "Font Awesome 7 Free", sans-serif;
+	--text-font: "Hack Nerd Font Mono", sans-serif;
+	--text-font-mono: "Hack Nerd Font Mono", monospace;
+}
+
 window {
 	background-color: #191919c6;
 	color: #ffffff;
@@ -11,15 +19,12 @@ window {
 	padding-top: 2px;
 	padding-bottom: 2px;
 	font-size: 14px;
-	font-family:
-		"Hack Nerd Font Mono", "Font Awesome 7 Brands", "Font Awesome 7 Free",
-		sans-serif;
+	font-family: var(--text-font);
 }
 
 popover {
 	margin-top: 4px;
-	font-family:
-		"Hack Nerd Font Mono", "Material Icons", "Font Awesome 7 Free", sans-serif;
+	font-family: var(--text-font);
 	padding: 6px;
 	border-radius: 8px;
 
@@ -38,20 +43,15 @@ tooltip {
 }
 
 button {
-	font-family: "Material Icons", sans-serif;
 	font-size: 20px;
+	padding: 3px 6px;
 }
 
 #spacer {
 	font-weight: 900;
 	padding: 0 5px;
 	text-shadow: 0 0 5px #ffffffaa;
-}
-
-.button {
-	padding: 4px 8px;
 	border-radius: 4px;
-	font-family: "Material Icons", sans-serif;
 }
 
 .button:hover {
@@ -83,12 +83,12 @@ button {
 
 .workspace-pill-alive {
 	background-color: rgba(255, 255, 255, 0.153);
+	color: #ffffff;
 }
 
 .workspace-pill-presenting {
 	background-color: #666666;
 	color: #ffffff;
-	/* animation: workspace-updown 1.2s ease-in-out infinite; */
 }
 
 .workspace-pill-focused {
@@ -111,7 +111,6 @@ button {
 	animation: workspace-updown 1.2s ease-in-out infinite;
 	margin-left: -4px;
 	margin-top: 4px;
-	font-size: 12px;
 }
 
 .workspace-pill-seven {
@@ -119,7 +118,6 @@ button {
 	animation-delay: 0.6s;
 	margin-right: -4px;
 	margin-top: 4px;
-	font-size: 12px;
 }
 
 @keyframes workspace-updown {
@@ -149,18 +147,3 @@ button {
 		opacity: 1;
 	}
 }
-
-.notification-popup {
-	border-radius: 8px;
-	padding: 8px 12px;
-	background: rgba(30, 30, 30, 0.948);
-	box-shadow: 0 4px 30px rgba(0, 0, 0, 0.2);
-	border: 1px solid rgba(80, 80, 80, 0.8);
-	font-size: 14px;
-}
-
-.notification-button-box {
-	margin-top: 8px;
-	border-top: 1px solid rgba(100, 100, 100, 0.3);
-	padding-top: 6px;
-	}