From 778adc967aa79a7b88e260903ed40b349177a671 Mon Sep 17 00:00:00 2001
From: Andre Ramnitz <tux.rising@gmail.com>
Date: Mon, 11 Nov 2024 23:17:51 +0100
Subject: [PATCH] waybar: refinement

---
 dot-config/waybar/laststyle-20241111.css | 336 +++++++++++++++++++++++
 dot-config/waybar/style.css              | 178 ++++++++----
 2 files changed, 454 insertions(+), 60 deletions(-)
 create mode 100644 dot-config/waybar/laststyle-20241111.css

diff --git a/dot-config/waybar/laststyle-20241111.css b/dot-config/waybar/laststyle-20241111.css
new file mode 100644
index 00000000..a2b2d267
--- /dev/null
+++ b/dot-config/waybar/laststyle-20241111.css
@@ -0,0 +1,336 @@
+/* -----------------------------------  import ----------------------------------- */
+@import "base16-colors.css";
+
+/* -----------------------------------  window ----------------------------------- */
+* {
+  font-family: "Iosevka Nerd Font Propo";
+  font-size: 16px;
+  min-height: 11px;
+  padding: 0;
+  margin: 0;
+}
+
+/* -----------------------------------  waybar ----------------------------------- */
+#waybar {
+  border-radius: 0px 0px 8px 8px;
+  border: 1px @base00;
+  color: @base05;
+  background-color: transparent;
+}
+
+#waybar > box {
+  padding-left: 4px;
+  padding-right: 4px;
+  background: none;
+}
+
+tooltip {
+  background: @base00;
+  border: 1px solid @base02;
+  border-radius: 4px;
+}
+tooltip label {
+  padding: 8px;
+  color: @base05;
+}
+
+/* ------------------------------------ modules left ------------------------------- */
+#custom-launcher {
+  padding-left: 10px;
+  padding-right: 10px;
+  margin-top: 2px;
+  margin-left: 1px;
+  margin-right: 1px;
+  margin-bottom: 3px;
+  color: @base00;
+  background: @base0D;
+  border: 1px solid alpha(@base02, 0.9);
+  border-radius: 4px 8px 4px 8px;
+}
+
+#workspaces {
+  border-radius: 0px;
+  padding-left: 5px;
+  padding-right: 5px;
+  margin-top: 2px;
+  margin-left: 0px;
+  margin-right: 0px;
+  margin-bottom: 2px;
+  background: none;
+}
+
+#workspaces button {
+  border-radius: 8px;
+  background: @base03;
+  color: @base00;
+  border: 1px solid @base02;
+  padding: 0 8px;
+  margin-top: 1px;
+  margin-left: 1px;
+  margin-right: 1px;
+  margin-bottom: 2px;
+  transition: all 0.3s ease;
+}
+
+#workspaces button:hover {
+  background: alpha(@base07, 0.7);
+}
+
+#workspaces button.focused:hover,
+#workspaces button.active:hover {
+  background: alpha(@base07, 0.7);
+  border-color: @base07;
+}
+
+#workspaces button.focused,
+#workspaces button.active {
+  border-radius: 8px;
+  background: @base0C;
+  border: 1px solid @base02;
+  padding: 0 8px;
+  color: @base00;
+  transition: all 0.3s ease;
+}
+
+#workspaces button.urgent {
+  border-radius: 8px;
+  background: @base0A;
+  border: 1px solid @base02;
+  color: @base00;
+  transition: all 0.3s ease;
+}
+
+#mpd {
+  border-radius: 0px;
+  padding-left: 8px;
+  padding-right: 8px;
+  margin-top: 2px;
+  margin-left: 1px;
+  margin-right: 1px;
+  margin-bottom: 2px;
+  color: @base05;
+  background: none;
+  border: none;
+}
+
+#mpris {
+  padding-left: 8px;
+  padding-right: 8px;
+  color: @base00;
+  background: none;
+  border: none;
+}
+
+/* ------------------------------------ modules center ----------------------------- */
+#window {
+  border-radius: 0px;
+  color: @base05;
+  background: alpha(@base03, 0.3);
+  padding-left: 10px;
+  padding-right: 10px;
+  border: none;
+  border-radius: 4px;
+  margin: 2px;
+}
+
+window#waybar {
+  border-top: 0px solid @base01;
+  border-left: 2px solid @base01;
+  border-right: 2px solid @base01;
+  border-bottom: 2px solid @base01;
+  background-color: alpha(@base00, 0.92);
+  transition-property: background-color;
+  transition-duration: 0.5s;
+  /*background-image: url("/home/andy/dotfiles/config/waybar/textures/D_0.65.png");
+  background-position: topleft;
+  background-repeat: repeat-x;
+  */
+}
+
+#submap {
+    color: @base00;
+    background-color: @base08;
+}
+
+/* ------------------------------------ modules right ------------------------------ */
+#wireplumber {
+  padding-left: 8px;
+  padding-right: 8px;
+  color: @base0C;
+  background-color: alpha(@base0C, 0.1);
+  border: none;
+  border-radius: 8px;
+  margin: 2px;
+}
+
+#cpu {
+  padding-left: 8px;
+  padding-right: 4px;
+  color: @base0B;
+  background-color: alpha(@base0B, 0.1);
+  border: none;
+  border-radius: 8px;
+  margin: 2px;
+}
+
+#memory {
+  padding-left: 4px;
+  padding-right: 8px;
+  color: @base0A;
+  background-color: alpha(@base0A, 0.1);
+  border: none;
+    border-radius: 8px;
+    margin-top: 2px;
+    margin-bottom: 2px;
+}
+
+#network {
+  padding-left: 4px;
+  padding-right: 8px;
+  color: @base0E;
+  background-color: alpha(@base0E, 0.1);
+  border: none;
+    border-radius: 8px;
+    margin-top: 2px;
+    margin-bottom: 2px;
+}
+
+#language {
+  padding-left: 4px;
+  padding-right: 8px;
+  color: @base09;
+  background-color: alpha(@base09, 0.1);
+    border-radius: 8px;
+    margin-top: 2px;
+    margin-bottom: 2px;
+}
+
+#temperature,
+#temperature#cpu,
+#temperature#chipset,
+#temperature#vrm,
+#temperature#gpu {
+  padding-left: 8px;
+  padding-right: 8px;
+  color: @base0D;
+  background-color: alpha(@base0D, 0.1);
+    border-radius: 8px;
+    margin-top: 2px;
+    margin-bottom: 2px;
+}
+
+#temperature.critical,
+#temperature#cpu.critical,
+#temperature#chipset.critical,
+#temperature#vrm.critical,
+#temperature#gpu.critical {
+  padding-left: 8px;
+  padding-right: 8px;
+  color: @base08;
+  background-color: alpha(@base08, 0.1);
+    border-radius: 8px;
+    margin-top: 2px;
+    margin-bottom: 2px;
+}
+
+#custom-gammarelay-temperature,
+#custom-gammarelay-gamma,
+#custom-gammarelay-brightness {
+  padding-left: 8px;
+  padding-right: 8px;
+  color: @base08;
+  background-color: alpha(@base08, 0.1);
+    border-radius: 8px;
+    margin-top: 2px;
+    margin-bottom: 2px;
+}
+
+#custom-powermenu {
+  padding-left: 8px;
+  padding-right: 8px;
+  color: @base09;
+  background-color: alpha(@base09, 0.3);
+    border-radius: 8px;
+    margin-top: 2px;
+    margin-bottom: 2px;
+}
+
+#custom-pipespacer {
+  background: none;
+  border: none;
+  color: @base04;
+}
+
+#custom-notification {
+  padding-left: 10px;
+  padding-right: 10px;
+  margin-top: 2px;
+  margin-left: 1px;
+  margin-right: 1px;
+  margin-bottom: 3px;
+  color: @base00;
+  background: @base0E;
+  border: 1px solid alpha(@base02, 0.5);
+  border-radius: 8px 4px 8px 4px;
+}
+
+#cpu:hover,
+#memory:hover,
+#clock:hover,
+#custom-gammarelay-brightness:hover,
+#custom-gammarelay-gamma:hover,
+#custom-gammarelay-temperature:hover,
+#language:hover,
+#temperature#chipset.critical:hover,
+#temperature#chipset:hover,
+#temperature#cpu.critical:hover,
+#temperature#cpu:hover,
+#temperature#gpu.critical:hover,
+#temperature#gpu:hover,
+#temperature#vrm.critical:hover,
+#temperature#vrm:hover,
+#temperature.critical:hover,
+#temperature:hover,
+#wireplumber:hover,
+#custom-wallpaper:hover,
+#idle_inhibitor:hover {
+    background-color: alpha(@base07, 0.3);
+}
+
+#custom-launcher:hover,
+#custom-notification:hover {
+    background-color: alpha(@base07, 0.7);
+}
+
+#idle_inhibitor,
+#custom-wallpaper {
+  padding-left: 8px;
+  padding-right: 8px;
+  color: @base0D;
+  background-color: alpha(@base0D, 0.3);
+    border-radius: 8px;
+    margin-top: 4px;
+    margin-bottom: 4px;
+}
+
+#tray {
+  padding-left: 8px;
+  padding-right: 8px;
+  color: @base00;
+  background-color: alpha(@base02, 0.3);
+  border: none;
+  border-radius: 8px;
+  margin: 2px;
+}
+
+#clock {
+  font-size: 18px;
+  padding-left: 8px;
+  padding-right: 12px;
+  color: @base0C;
+  background-color: alpha(@base0C, 0.3);
+    border-radius: 8px;
+    margin-top: 4px;
+    margin-bottom: 4px;
+}
+
diff --git a/dot-config/waybar/style.css b/dot-config/waybar/style.css
index a2b2d267..c39c3416 100644
--- a/dot-config/waybar/style.css
+++ b/dot-config/waybar/style.css
@@ -34,7 +34,7 @@ tooltip label {
   color: @base05;
 }
 
-/* ------------------------------------ modules left ------------------------------- */
+/* ------------------------------------ modules individual config  ------------------------------- */
 #custom-launcher {
   padding-left: 10px;
   padding-right: 10px;
@@ -44,10 +44,23 @@ tooltip label {
   margin-bottom: 3px;
   color: @base00;
   background: @base0D;
-  border: 1px solid alpha(@base02, 0.9);
+  border: 1px solid @base03;
   border-radius: 4px 8px 4px 8px;
 }
 
+#custom-notification {
+  padding-left: 10px;
+  padding-right: 10px;
+  margin-top: 2px;
+  margin-left: 1px;
+  margin-right: 1px;
+  margin-bottom: 3px;
+  color: @base00;
+  background: @base0E;
+  border: 1px solid @base03;
+  border-radius: 8px 4px 8px 4px;
+}
+
 #workspaces {
   border-radius: 0px;
   padding-left: 5px;
@@ -63,7 +76,7 @@ tooltip label {
   border-radius: 8px;
   background: @base03;
   color: @base00;
-  border: 1px solid @base02;
+  border: 1px solid @base03;
   padding: 0 8px;
   margin-top: 1px;
   margin-left: 1px;
@@ -79,14 +92,14 @@ tooltip label {
 #workspaces button.focused:hover,
 #workspaces button.active:hover {
   background: alpha(@base07, 0.7);
-  border-color: @base07;
+  border-color: alpha(@base07, 0.9);
 }
 
 #workspaces button.focused,
 #workspaces button.active {
   border-radius: 8px;
   background: @base0C;
-  border: 1px solid @base02;
+  border: 1px solid @base03;
   padding: 0 8px;
   color: @base00;
   transition: all 0.3s ease;
@@ -121,7 +134,19 @@ tooltip label {
   border: none;
 }
 
-/* ------------------------------------ modules center ----------------------------- */
+#tray {
+  padding-left: 8px;
+  padding-right: 8px;
+  color: @base00;
+  background-color: alpha(@base02, 0.8);
+  border: none;
+  border-radius: 8px;
+  margin-top: 2px;
+  margin-left: 1px;
+  margin-right: 1px;
+  margin-bottom: 2px;
+}
+
 #window {
   border-radius: 0px;
   color: @base05;
@@ -152,15 +177,21 @@ window#waybar {
     background-color: @base08;
 }
 
-/* ------------------------------------ modules right ------------------------------ */
+/* ------------------------------------ modules bulk config ------------------------------ */
 #wireplumber {
   padding-left: 8px;
   padding-right: 8px;
   color: @base0C;
   background-color: alpha(@base0C, 0.1);
   border: none;
-  border-radius: 8px;
-  margin: 2px;
+    border-radius: 0px 0px 4px 4px;
+    margin-top: 0px;
+    margin-bottom: 2px;
+    border-top: 0px solid;
+    border-left: 1px solid;
+    border-right: 1px solid;
+    border-bottom: 1px solid;
+    border-color: alpha(@base0C, 0.4);
 }
 
 #cpu {
@@ -169,8 +200,14 @@ window#waybar {
   color: @base0B;
   background-color: alpha(@base0B, 0.1);
   border: none;
-  border-radius: 8px;
-  margin: 2px;
+    border-radius: 0px 0px 4px 4px;
+    margin-top: 0px;
+    margin-bottom: 2px;
+    border-top: 0px solid;
+    border-left: 1px solid;
+    border-right: 1px solid;
+    border-bottom: 1px solid;
+    border-color: alpha(@base0B, 0.4);
 }
 
 #memory {
@@ -179,30 +216,45 @@ window#waybar {
   color: @base0A;
   background-color: alpha(@base0A, 0.1);
   border: none;
-    border-radius: 8px;
-    margin-top: 2px;
+    border-radius: 0px 0px 4px 4px;
+    margin-top: 0px;
     margin-bottom: 2px;
+    border-top: 0px solid;
+    border-left: 1px solid;
+    border-right: 1px solid;
+    border-bottom: 1px solid;
+    border-color: alpha(@base0A, 0.4);
 }
 
 #network {
   padding-left: 4px;
-  padding-right: 8px;
+  padding-right: 4px;
   color: @base0E;
   background-color: alpha(@base0E, 0.1);
   border: none;
-    border-radius: 8px;
-    margin-top: 2px;
+    border-radius: 0px 0px 4px 4px;
+    margin-top: 0px;
     margin-bottom: 2px;
+    border-top: 0px solid;
+    border-left: 1px solid;
+    border-right: 1px solid;
+    border-bottom: 1px solid;
+    border-color: alpha(@base0E, 0.4);
 }
 
 #language {
-  padding-left: 4px;
-  padding-right: 8px;
+  padding-left: 2px;
+  padding-right: 2px;
   color: @base09;
   background-color: alpha(@base09, 0.1);
-    border-radius: 8px;
-    margin-top: 2px;
+    border-radius: 0px 0px 4px 4px;
+    margin-top: 0px;
     margin-bottom: 2px;
+    border-top: 0px solid;
+    border-left: 1px solid;
+    border-right: 1px solid;
+    border-bottom: 1px solid;
+    border-color: alpha(@base09, 0.4);
 }
 
 #temperature,
@@ -214,9 +266,14 @@ window#waybar {
   padding-right: 8px;
   color: @base0D;
   background-color: alpha(@base0D, 0.1);
-    border-radius: 8px;
-    margin-top: 2px;
+    border-radius: 0px 0px 4px 4px;
+    margin-top: 0px;
     margin-bottom: 2px;
+    border-top: 0px solid;
+    border-left: 1px solid;
+    border-right: 1px solid;
+    border-bottom: 1px solid;
+    border-color: alpha(@base0D, 0.4);
 }
 
 #temperature.critical,
@@ -228,9 +285,14 @@ window#waybar {
   padding-right: 8px;
   color: @base08;
   background-color: alpha(@base08, 0.1);
-    border-radius: 8px;
-    margin-top: 2px;
+    border-radius: 0px 0px 4px 4px;
+    margin-top: 0px;
     margin-bottom: 2px;
+    border-top: 0px solid;
+    border-left: 1px solid;
+    border-right: 1px solid;
+    border-bottom: 1px solid;
+    border-color: alpha(@base08, 0.4);
 }
 
 #custom-gammarelay-temperature,
@@ -240,9 +302,14 @@ window#waybar {
   padding-right: 8px;
   color: @base08;
   background-color: alpha(@base08, 0.1);
-    border-radius: 8px;
-    margin-top: 2px;
+    border-radius: 0px 0px 4px 4px;
+    margin-top: 0px;
     margin-bottom: 2px;
+    border-top: 0px solid;
+    border-left: 1px solid;
+    border-right: 1px solid;
+    border-bottom: 1px solid;
+    border-color: alpha(@base08, 0.4);
 }
 
 #custom-powermenu {
@@ -250,9 +317,14 @@ window#waybar {
   padding-right: 8px;
   color: @base09;
   background-color: alpha(@base09, 0.3);
-    border-radius: 8px;
-    margin-top: 2px;
+    border-radius: 0px 0px 4px 4px;
+    margin-top: 0px;
     margin-bottom: 2px;
+    border-top: 0px solid;
+    border-left: 1px solid;
+    border-right: 1px solid;
+    border-bottom: 1px solid;
+    border-color: alpha(@base09, 0.4);
 }
 
 #custom-pipespacer {
@@ -261,19 +333,6 @@ window#waybar {
   color: @base04;
 }
 
-#custom-notification {
-  padding-left: 10px;
-  padding-right: 10px;
-  margin-top: 2px;
-  margin-left: 1px;
-  margin-right: 1px;
-  margin-bottom: 3px;
-  color: @base00;
-  background: @base0E;
-  border: 1px solid alpha(@base02, 0.5);
-  border-radius: 8px 4px 8px 4px;
-}
-
 #cpu:hover,
 #memory:hover,
 #clock:hover,
@@ -304,33 +363,32 @@ window#waybar {
 
 #idle_inhibitor,
 #custom-wallpaper {
-  padding-left: 8px;
-  padding-right: 8px;
+  padding-left: 4px;
+  padding-right: 4px;
   color: @base0D;
   background-color: alpha(@base0D, 0.3);
-    border-radius: 8px;
-    margin-top: 4px;
-    margin-bottom: 4px;
-}
-
-#tray {
-  padding-left: 8px;
-  padding-right: 8px;
-  color: @base00;
-  background-color: alpha(@base02, 0.3);
-  border: none;
-  border-radius: 8px;
-  margin: 2px;
+    border-radius: 0px 0px 4px 4px;
+    margin-top: 0px;
+    margin-bottom: 2px;
+    border-top: 0px solid;
+    border-left: 1px solid;
+    border-right: 1px solid;
+    border-bottom: 1px solid;
+    border-color: alpha(@base0D, 0.4);
 }
 
 #clock {
-  font-size: 18px;
   padding-left: 8px;
   padding-right: 12px;
   color: @base0C;
   background-color: alpha(@base0C, 0.3);
-    border-radius: 8px;
-    margin-top: 4px;
-    margin-bottom: 4px;
+    border-radius: 0px 0px 4px 4px;
+    margin-top: 0px;
+    margin-bottom: 2px;
+    border-top: 0px solid;
+    border-left: 1px solid;
+    border-right: 1px solid;
+    border-bottom: 1px solid;
+    border-color: alpha(@base0C, 0.4);
 }
 
-- 
2.51.2