waybar: remove backgrounds, border radius

homeConfigurations/vinzenz/waybar.css

@@ -2,18 +2,14 @@
     /* `otf-font-awesome` is required to be installed for icons */
     font-family: FontAwesome, sans-serif;
     font-size: 13px;
-    border: none;
-    border-radius: 0;
     color: #dcdfe1;
 }
 
-#waybar {
-    background-color: rgba(0, 0, 0, 0);
-    border: none;
-    box-shadow: none;
-}
-
 window#waybar {
+    background: black;
+    /* border: none; */
+    box-shadow: none;
+
     color: #ffffff;
     transition-property: background-color;
     transition-duration: .5s;
@@ -31,20 +27,30 @@ window#waybar.chromium {
     background-color: #000000;
     border: none;
 }
+/*
+window#waybar .modules-left,
+window#waybar .modules-center,
+window#waybar .modules-right {
+    border: 1px solid;
+    border-radius: 15px;
+    border-image-source: linear-gradient(90deg, #d162a4, #5BCEFA);
+}
+ */
+box.horizontal {
+    padding: 4px 4px 0px 4px;
+}
 
 #workspaces,
 #window,
 #tray {
     background-color: rgba(15, 27, 53, 0.9);
     padding: 4px 6px;
-    margin-top: 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;
@@ -68,6 +74,7 @@ button:hover {
     padding: 0 5px;
     background-color: transparent;
     color: #ffffff;
+    border-radius: 15px;
 }
 
 #workspaces button:hover {
@@ -77,7 +84,6 @@ button:hover {
 #workspaces button.focused,
 #workspaces button.active {
     background-color: #64727D;
-    box-shadow: inset 0 -3px #ffffff;
 }
 
 #workspaces button.urgent {
@@ -100,7 +106,6 @@ button:hover {
 #pulseaudio,
 #wireplumber,
 #custom-media,
-#tray,
 #mode,
 #idle_inhibitor,
 #scratchpad,
@@ -124,7 +129,7 @@ button:hover {
 .modules-right>widget:last-child>#workspaces {
     margin-right: 0;
 }
-
+/*
 #clock {
     background-color: #64727D;
 }
@@ -139,7 +144,7 @@ button:hover {
     color: #ffffff;
     background-color: #26A65B;
 }
-
+ */
 @keyframes blink {
     to {
         background-color: #ffffff;
@@ -163,20 +168,17 @@ button:hover {
 }
 
 #power-profiles-daemon.performance {
-    background-color: #f53c3c;
-    color: #ffffff;
+    color:  #f53c3c;
 }
 
 #power-profiles-daemon.balanced {
-    background-color: #2980b9;
-    color: #ffffff;
+    color: #2980b9;
 }
 
 #power-profiles-daemon.power-saver {
-    background-color: #2ecc71;
-    color: #000000;
+    color: #2ecc71;
 }
-
+/*
 label:focus {
     background-color: #000000;
 }
@@ -224,7 +226,6 @@ label:focus {
 #wireplumber.muted {
     background-color: #f53c3c;
 }
-
 #custom-media {
     background-color: #66cc99;
     color: #2a5c45;
@@ -251,6 +252,7 @@ label:focus {
     background-color: #2980b9;
 }
 
+ */
 #tray>.passive {
     -gtk-icon-effect: dim;
 }
@@ -259,7 +261,7 @@ label:focus {
     -gtk-icon-effect: highlight;
     background-color: #eb4d4b;
 }
-
+/*
 #idle_inhibitor {
     background-color: #2d3436;
 }
@@ -285,18 +287,19 @@ label:focus {
 #mpd.paused {
     background-color: #51a37a;
 }
+*/
 
-#language {
+#language {/*
     background: #00b093;
-    color: #740864;
+    color: #740864; */
     padding: 0 5px;
     margin: 0 5px;
     min-width: 16px;
 }
 
-#keyboard-state {
+#keyboard-state {/*
     background: #97e1ad;
-    color: #000000;
+    color: #000000; */
     padding: 0 0px;
     margin: 0 5px;
     min-width: 16px;