waybar: theme, remove unused code

homeConfigurations/vinzenz/waybar.css

@@ -1,18 +1,28 @@
+/* #region stylix overrides*/
+.modules-left #workspaces button,
+.modules-left #workspaces button.focused,
+.modules-left #workspaces button.active,
+.modules-center #workspaces button,
+.modules-center #workspaces button.focused,
+.modules-center #workspaces button.active,
+.modules-right #workspaces button,
+.modules-right #workspaces button.focused,
+.modules-right #workspaces button.active {
+  border-bottom: unset;
+}
+/* #endregion */
+
 * {
-  /* `otf-font-awesome` is required to be installed for icons */
   font-family: sans-serif;
-  font-size: 10pt;
-  color: #dcdfe1;
 }
 
 window#waybar {
-  background: black;
+  /*   background: black;
-  /* border: none; */
+   border: none;
-  box-shadow: none;
+  box-shadow: none; */
-
-  color: #ffffff;
   transition-property: background-color;
   transition-duration: 0.5s;
+  background: transparent;
 }
 
 window#waybar.hidden {
@@ -27,47 +37,36 @@ window#waybar.chromium {
   background-color: #000000;
   border: none;
 }
-/*
+
-window#waybar .modules-left,
+.modules-left,
-window#waybar .modules-center,
+.modules-center,
-window#waybar .modules-right {
+.modules-right {
-    border: 1px solid;
+  border: 0px solid #fff;
-    border-radius: 15px;
+  padding-bottom: 5px;
-    border-image-source: linear-gradient(90deg, #d162a4, #5BCEFA);
+  background-clip: content-box, padding-box;
+  background-image:
+    linear-gradient(90deg, @base01, @base01),
+    linear-gradient(90deg, #a30262, #4a6bb1);
 }
- */
+
-box.horizontal {
+.modules-center,
-  padding: 4px 4px 0px 4px;
+.modules-left {
+  border-bottom-right-radius: 15px;
+  padding-right: 5px;
+}
+
+.modules-center,
+.modules-right {
+  border-bottom-left-radius: 15px;
+  padding-left: 5px;
 }
 
 #workspaces,
 #window,
 #tray {
-  background-color: rgba(15, 27, 53, 0.9);
   padding: 4px 6px;
   margin-left: 6px;
   margin-right: 6px;
-  border-radius: 15px;
-  border-width: 0px;
-}
-
-button {
-  /* Use box-shadow instead of border so the text isn't offset */
-  box-shadow: inset 0 -3px transparent;
-  /* Avoid rounded borders under each button name */
-  border: none;
-  border-radius: 0;
-}
-
-/* https://github.com/Alexays/Waybar/wiki/FAQ#the-workspace-buttons-have-a-strange-hover-effect */
-button:hover {
-  background: inherit;
-  box-shadow: inset 0 -3px #ffffff;
-}
-
-/* you can set a style on hover for any module like this */
-#pulseaudio:hover {
-  background-color: #a37800;
 }
 
 #workspaces button {
@@ -83,7 +82,7 @@ button:hover {
 
 #workspaces button.focused,
 #workspaces button.active {
-  background-color: #64727d;
+  background-color: @base03;
 }
 
 #workspaces button.urgent {
@@ -129,22 +128,7 @@ button:hover {
 .modules-right > widget:last-child > #workspaces {
   margin-right: 0;
 }
-/*
-#clock {
-    background-color: #64727D;
-}
 
-#battery {
-    background-color: #ffffff;
-    color: #000000;
-}
-
-#battery.charging,
-#battery.plugged {
-    color: #ffffff;
-    background-color: #26A65B;
-}
- */
 @keyframes blink {
   to {
     background-color: #ffffff;
@@ -178,81 +162,7 @@ button:hover {
 #power-profiles-daemon.power-saver {
   color: #2ecc71;
 }
-/*
-label:focus {
-    background-color: #000000;
-}
 
-#cpu {
-    background-color: #2ecc71;
-    color: #000000;
-}
-
-#memory {
-    background-color: #9b59b6;
-}
-
-#disk {
-    background-color: #964B00;
-}
-
-#backlight {
-    background-color: #90b1b1;
-}
-
-#network {
-    background-color: #2980b9;
-}
-
-#network.disconnected {
-    background-color: #f53c3c;
-}
-
-#pulseaudio {
-    background-color: #f1c40f;
-    color: #000000;
-}
-
-#pulseaudio.muted {
-    background-color: #90b1b1;
-    color: #2a5c45;
-}
-
-#wireplumber {
-    background-color: #fff0f5;
-    color: #000000;
-}
-
-#wireplumber.muted {
-    background-color: #f53c3c;
-}
-#custom-media {
-    background-color: #66cc99;
-    color: #2a5c45;
-    min-width: 100px;
-}
-
-#custom-media.custom-spotify {
-    background-color: #66cc99;
-}
-
-#custom-media.custom-vlc {
-    background-color: #ffa000;
-}
-
-#temperature {
-    background-color: #f0932b;
-}
-
-#temperature.critical {
-    background-color: #eb4d4b;
-}
-
-#tray {
-    background-color: #2980b9;
-}
-
- */
 #tray > .passive {
   -gtk-icon-effect: dim;
 }
@@ -261,47 +171,14 @@ label:focus {
   -gtk-icon-effect: highlight;
   background-color: #eb4d4b;
 }
-/*
-#idle_inhibitor {
-    background-color: #2d3436;
-}
-
-#idle_inhibitor.activated {
-    background-color: #ecf0f1;
-    color: #2d3436;
-}
-
-#mpd {
-    background-color: #66cc99;
-    color: #2a5c45;
-}
-
-#mpd.disconnected {
-    background-color: #f53c3c;
-}
-
-#mpd.stopped {
-    background-color: #90b1b1;
-}
-
-#mpd.paused {
-    background-color: #51a37a;
-}
-*/
 
 #language {
-  /*
-    background: #00b093;
-    color: #740864; */
   padding: 0 5px;
   margin: 0 5px;
   min-width: 16px;
 }
 
 #keyboard-state {
-  /*
-    background: #97e1ad;
-    color: #000000; */
   padding: 0 0px;
   margin: 0 5px;
   min-width: 16px;