updated waybar and added settings for cn-mate

.config/waybar/style.css##hostname.cn-arch

@@ -1,3 +1,22 @@
+
+/*base background color*/
+@define-color bg_main rgba(25, 25, 25, 0.65);
+@define-color bg_main_tooltip rgba(0, 0, 0, 0.7);
+
+
+/*base background color of selections */
+@define-color bg_hover rgba(200, 200, 200, 0.3);
+/*base background color of active elements */
+@define-color bg_active rgba(100, 100, 100, 0.5);
+
+/*base border color*/
+@define-color border_main rgba(255, 255, 255, 0.2);
+
+/*text color for entries, views and content in general */
+@define-color content_main white;
+/*text color for entries that are unselected */
+@define-color content_inactive rgba(255, 255, 255, 0.25);
+
 * {
     text-shadow: none;
     box-shadow: none;
@@ -14,6 +33,7 @@ window#waybar {
 }
 
 tooltip {
+    font-size: 14px;
     background: @bg_main_tooltip;
     border-radius: 5px;
     border-width: 1px;
@@ -24,6 +44,11 @@ tooltip label{
     color: @content_main;
 }
 
+.module {
+    margin-left: 2px;
+    margin-right: 2px;
+}
+
 #workspaces {
     color: transparent;
     margin-right: 1.5px;
@@ -32,18 +57,16 @@ tooltip label{
 #workspaces button {
     padding: 3px;
     color: @content_inactive;
-    transition: all 0.25s cubic-bezier(0.165, 0.84, 0.44, 1);
 }
 #workspaces button.active {
-    color: @content_main;
-    border-bottom: 3px solid white;
+    color: whitesmoke;
+    background: @bg_active;
 }
 #workspaces button.focused {
     color: @bg_active;
 }
 #workspaces button.urgent {
-    background:  rgba(255, 200, 0, 0.35);
-    border-bottom: 3px dashed @warning_color;
+    background: rgba(255, 200, 0, 0.35);
     color: @warning_color;
 }
 #workspaces button:hover {
@@ -52,26 +75,9 @@ tooltip label{
 }
 
 #cpu, #disk, #memory {
-    padding: 5px;
-}
-
-#temperature {
-    color: transparent;
-    font-size: 0px;
-    transition: all 0.25s cubic-bezier(0.165, 0.84, 0.44, 1);
-}
-#temperature.critical {
-    padding-right: 3px;
-    color: @warning_color;
-    font-size: initial;
-    border-bottom: 3px dashed @warning_color;
-    transition: all 0.25s cubic-bezier(0.165, 0.84, 0.44, 1);
-}
-
-#window {
-    border-radius: 10px;
-    margin-left: 20px;
-    margin-right: 20px;
+    border-bottom: 1px solid grey;
+    padding-right: 5px;
+    padding-left: 5px;
 }
 
 #tray{
@@ -95,9 +101,9 @@ tooltip label{
 }
 
 #pulseaudio {
-    font-family: "Inconsolata Go Nerd Font";
+    border-bottom: 1px solid grey;
+    padding-right: 5px;
     padding-left: 5px;
-    padding-right: 1rem;
     transition: all 0.25s cubic-bezier(0.165, 0.84, 0.44, 1);
 }
 #pulseaudio:hover {
@@ -105,13 +111,9 @@ tooltip label{
 }
 
 #network {
-    padding-left: 5px;
+    border-bottom: 1px solid grey;
     padding-right: 5px;
-}
-
-#language {
     padding-left: 5px;
-    padding-right: 5px;
 }
 
 #clock {
@@ -122,3 +124,79 @@ tooltip label{
 #clock:hover {
     background: @bg_hover;
 }
+
+#privacy {
+}
+#privacy-item {
+    padding-left: 5px;
+    padding-right: 5px;
+}
+#privacy-item.screenshare {
+    background: #850404;
+}
+#privacy-item.audio-in {
+    background: #6c045e;
+}
+#privacy-item.audio-out {
+    background: #02605b;
+}
+
+#mpris {
+    padding-left: 5px;
+    padding-right: 5px;
+}
+#mpris.playing {
+}
+#mpris.paused {
+}
+#mpris.stopped {
+}
+#mpris.firefox {
+    border-bottom: 1px solid #fd8728;
+}
+#mpris.spotify {
+    border-bottom: 1px solid #17d860;
+}
+#mpris.mpv {
+    border-bottom: 1px solid #420042;
+}
+#mpris.chromium {
+    border-bottom: 1px solid #1a73e8;
+}
+
+#bluetooth {
+    padding-right: 5px;
+    padding-left: 5px;
+}
+#bluetooth.disabled {
+    border-bottom: 1px solid grey;
+}
+#bluetooth.off {
+    border-bottom: 1px solid grey;
+}
+#bluetooth.on {
+    border-bottom: 1px solid #0059fd;
+}
+#bluetooth.connected {
+    border-bottom: 1px solid #00b7fa;
+}
+#bluetooth.discoverable {
+}
+#bluetooth.discovering {
+}
+#bluetooth.pairable {
+}
+#bluetooth.no-controller {
+    background: darkred;
+}
+
+#custom-alhp {
+    padding-left: 5px;
+    padding-right: 5px;
+}
+#custom-alhp.good {
+    border-bottom: 1px solid greenyellow;
+}
+#custom-alhp.bad {
+    border-bottom: 1px solid orangered;
+}