waybar: refinement

diff --git a/dot-config/waybar/style.css b/dot-config/waybar/style.css
index a2b2d26797a512eeff3fb8766bd805d7bc3f7cc4..c39c3416c03863c4d0dd178b8ec5d2aeb12a3075 100644 (file)
--- 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);
 }