waybar style tweak

config/waybar/style/style-default.css

@@ -1,17 +1,17 @@
 *{
-font-family: "JetBrainsMono Nerd Font";
+  font-family: "JetBrainsMono Nerd Font";
-font-weight: bold;
+  font-weight: bold;
-min-height: 0;
+  min-height: 0;
-/* set font-size to 100% if font scaling is set to 1.00 using nwg-look */
+  /* set font-size to 100% if font scaling is set to 1.00 using nwg-look */
-font-size: 98%;
+  font-size: 98%;
-font-feature-settings: '"zero", "ss01", "ss02", "ss03", "ss04", "ss05", "cv31"';
+  font-feature-settings: '"zero", "ss01", "ss02", "ss03", "ss04", "ss05", "cv31"';
-padding: 0px;
+  padding: 0px;
-margin-top: 1px;
+  margin-top: 1px;
-margin-bottom: 1px;
+  margin-bottom: 1px;
-}
+  }
-
+  
-
+  
-window#waybar {
+  window#waybar {
     /* background-color: rgba(26, 27, 38, 0.5); */
     background-color: transparent;
     color: #ffffff;
@@ -21,35 +21,35 @@ window#waybar {
     border-radius: 0px;
     transition-duration: 0.5s;
     margin: 0px 0px;
-}
+  }
-window#waybar.empty {
+  window#waybar.empty {
     background-color: transparent;
-}
+  }
-window#waybar.empty #window {
+  window#waybar.empty #window {
     padding: 0px;
     margin: 0px;
     border: 0px;
-/*  background-color: rgba(66,66,66,0.5); */ /* transparent */
+  /*  background-color: rgba(66,66,66,0.5); */ /* transparent */
     background-color: transparent;
-}
+  }
   
-window#waybar.hidden {
+  window#waybar.hidden {
     opacity: 0.1;
-}
+  }
   
-tooltip {
+  tooltip {
       background: #1e1e2e;
       opacity: 0.8;
       border-radius: 10px;
       border-width: 2px;
       border-style: solid;
       border-color: #11111b;
-}
+  }
   
-tooltip label{
+  tooltip label{
       color: #cdd6f4;
-}
+  }
-#workspaces button {
+  #workspaces button {
     padding: 0 0px;
     color: #7984a4;
     background-color: transparent;
@@ -58,263 +58,264 @@ tooltip label{
     /* Avoid rounded borders under each workspace name */
     border: none;
     border-radius: 0;
-}
+  }
   
-#workspaces button.focused {
+  #workspaces button.focused {
     background-color: transparent;
-}
+  }
-#workspace button.hover {
+  #workspace button.hover {
     background-color: transparent;
-}
+  }
-#workspaces button.active {
+  #workspaces button.active {
     color: white;
-}
+  }
   
-#workspaces button.urgent {
+  #workspaces button.urgent {
     background-color: #eb4d4b;
-}
+  }
-
+  
-#clock,
+  #clock,
-#battery,
+  #battery,
-#cpu,
+  #cpu,
-#memory,
+  #memory,
-#disk,
+  #disk,
-#temperature,
+  #temperature,
-#backlight,
+  #backlight,
-#network,
+  #network,
-#pulseaudio,
+  #pulseaudio,
-#wireplumber,
+  #wireplumber,
-#mode,
+  #mode,
-#tray,
+  #tray,
-#idle_inhibitor,
+  #idle_inhibitor,
-#keyboard-state,
+  #keyboard-state,
-#mpd,
+  #mpd,
-#cava,
+  #cava,
-#bluetooth,
+  #bluetooth,
-#taskbar,
+  #taskbar,
-#workspaces,
+  #workspaces,
-#custom-light_dark,
+  #custom-light_dark,
-#custom-updater,
+  #custom-updater,
-#custom-power,
+  #custom-power,
-#custom-lock,
+  #custom-lock,
-#custom-weather,
+  #custom-weather,
-#window,
+  #window,
-#custom-weather.severe,
+  #custom-weather.severe,
-#custom-weather.sunnyDay,
+  #custom-weather.sunnyDay,
-#custom-weather.clearNight,
+  #custom-weather.clearNight,
-#custom-weather.cloudyFoggyDay,
+  #custom-weather.cloudyFoggyDay,
-#custom-weather.cloudyFoggyNight,
+  #custom-weather.cloudyFoggyNight,
-#custom-weather.rainyDay,
+  #custom-weather.rainyDay,
-#custom-weather.rainyNight,
+  #custom-weather.rainyNight,
-#custom-weather.showyIcyDay,
+  #custom-weather.showyIcyDay,
-#custom-weather.snowyIcyNight,
+  #custom-weather.snowyIcyNight,
-#custom-weather.default {
+  #custom-weather.default {
-  padding: 0px 10px;
+    padding: 0px 6px;
     color: #e5e5e5;
     /* color: #bf616a; */
     border-radius: 8px;
     background-color: rgba(50, 50, 50, 0.1);
     border: 1px solid #b4befe;
-}
+  }
   
-#workspaces {
+  #workspaces {
     border-radius: 6px;
-  padding: 0px 10px;
+    padding: 0px 6px;
     border: 1px solid #b4befe;
-}
+  }
   
-#cpu {
+  #cpu {
     color: #fb958b;
     padding: 3px;
     border-radius: 8px;
     background-color: rgba(50, 50, 50, 0.1);
     border: 1px solid #b4befe;
-}
+  }
   
-#custom-cycle_wall,
+  #custom-cycle_wall,
-#custom-updater {
+  #custom-updater {
     color: #cba7f7;
     padding: 3px;
     border-radius: 8px;
     background-color: rgba(50, 50, 50, 0.1);
     border: 1px solid #b4befe;
     
-}
+  }
   
-#custom-menu {
+  #custom-menu {
     color: #FFFFFF;
     padding: 6px;
-  padding-right: 10px;
+    padding-right: 6px;
     border-radius: 8px;
     background-color: rgba(50, 50, 50, 0.1);
     border: 1px solid #b4befe;
-}
+  }
     
-#memory {
+  #memory {
     color: #ebcb8b;
-}
+  }
   
-#custom-power {
+  #custom-power {
     color: #cc3436;
-}
+  }
   
-#custom-launcher {
+  #custom-launcher {
     background-color: #1b242b;
     color: #6a92d7;
     border-radius: 6px;
     padding: 0 0px;
-}
+  }
   
-#custom-weather.severe {
+  #custom-weather.severe {
     color: #eb937d;
-}
+  }
   
-#custom-weather.sunny {
+  #custom-weather.sunny {
     color: #c2ca76;
-}
+  }
   
-#custom-weather.clearNight {
+  #custom-weather.clearNight {
     color: #cad3f5;
-}
+  }
   
-#custom-weather.cloudyFoggyDay,
+  #custom-weather.cloudyFoggyDay,
-#custom-weather.cloudyFoggyNight {
+  #custom-weather.cloudyFoggyNight {
     color: #c2ddda;
-}
+  }
   
-#custom-weather.rainyDay,
+  #custom-weather.rainyDay,
-#custom-weather.rainyNight {
+  #custom-weather.rainyNight {
     color: #5aaca5;
-}
+  }
   
-#custom-weather.showyIcyDay,
+  #custom-weather.showyIcyDay,
-#custom-weather.snowyIcyNight {
+  #custom-weather.snowyIcyNight {
     color: #d6e7e5;
-}
+  }
   
-#custom-weather.default {
+  #custom-weather.default {
     color: #ebecf0;
-}
+  }
   
-/* If workspaces is the leftmost module, omit left margin */
+  /* If workspaces is the leftmost module, omit left margin */
-.modules-left > widget:first-child > #workspaces {
+  .modules-left > widget:first-child > #workspaces {
     margin-left: 0;
-}
+  }
   
-/* If workspaces is the rightmost module, omit right margin */
+  /* If workspaces is the rightmost module, omit right margin */
-.modules-right > widget:last-child > #workspaces {
+  .modules-right > widget:last-child > #workspaces {
     margin-right: 0;
-}
+  }
   
-#pulseaudio {
+  #pulseaudio {
     color: #FFD580;
-}
+  }
   
-#wireplumber {
+  #wireplumber {
     color: #FFD580;
-}
+  }
-#backlight {
+  #backlight {
     /* color: #EBCB8B; */
     color: #8fbcbb;
-}
+  }
   
-#clock {
+  #clock {
     color: #90EE90;
     /* background-color: #14141e; */
-}
+  }
   
-#battery {
+  #battery {
     color: #c0caf5;
     /* background-color: #90b1b1; */
-}
+  }
   
-#battery.charging,
+  #battery.charging,
-#battery.full,
+  #battery.full,
-#battery.plugged {
+  #battery.plugged {
     color: #26a65b;
     /* background-color: #26a65b; */
-}
+  }
   
-@keyframes blink {
+  @keyframes blink {
     to {
       background-color: rgba(30, 34, 42, 0.5);
       color: #abb2bf;
     }
-}
+  }
   
-#battery.critical:not(.charging) {
+  #battery.critical:not(.charging) {
     color: #f53c3c;
     animation-name: blink;
     animation-duration: 0.5s;
     animation-timing-function: linear;
     animation-iteration-count: infinite;
     animation-direction: alternate;
-}
+  }
   
-label:focus {
+  label:focus {
     background-color: #000000;
-}
+  }
   
-#disk {
+  #disk {
     color: #f38ba8;
-}
+  }
   
-#bluetooth {
+  #bluetooth {
     color: #7287fd;
-}
+  }
   
-#bluetooth.disconnected {
+  #bluetooth.disconnected {
     color: #f53c3c;
-}
+  }
   
-#network {
+  #network {
     color: #b48ead;
-}
+  }
   
-#network.disconnected {
+  #network.disconnected {
     color: #f53c3c;
-}
+  }
   
-#custom-media {
+  #custom-media {
     background-color: #66cc99;
     color: #2a5c45;
     min-width: 100px;
-}
+  }
   
-#custom-media.custom-spotify {
+  #custom-media.custom-spotify {
     background-color: #66cc99;
-}
+  }
   
-#custom-media.custom-vlc {
+  #custom-media.custom-vlc {
     background-color: #ffa000;
-}
+  }
   
-#temperature.critical {
+  #temperature.critical {
     background-color: #eb4d4b;
-}
+  }
   
-#tray > .passive {
+  #tray > .passive {
     -gtk-icon-effect: dim;
-}
+  }
   
-#tray > .needs-attention {
+  #tray > .needs-attention {
     -gtk-icon-effect: highlight;
     background-color: #eb4d4b;
-}
+  }
   
-#idle_inhibitor {
+  #idle_inhibitor {
     /*background-color: #2d3436;*/
-}
+  }
   
-#idle_inhibitor.activated {
+  #idle_inhibitor.activated {
     /*background-color: #ecf0f1;*/
     color: #2dcc36;
-}
+  }
   
-#temperature {
+  #temperature {
     color: #ADD8E6;
-}
+  }
   
-#taskbar button.active {
+  #taskbar button.active {
     background-color: #7f849c;
-}
+  }
+  

config/waybar/style/style-default_alter.css

@@ -132,8 +132,8 @@ tooltip label{
 #custom-cycle_wall,
 #custom-screen_locker,
 #custom-weather {
-    padding: 1px 6px 0px 6px;
+    padding: 0px 6px;
-    margin: 4px 3px 5px 3px;
+    /*margin: 4px 3px 5px 3px;*/
     /*color: @fgcolor;*/
     /* background-color: #bbccdd; */
     background-color:transparent;
@@ -193,7 +193,7 @@ label:focus {
 
 #custom-menu{
     color: #FFFFFF;
-    padding: 3px;
+    /*padding: 3px;*/
 }
 
 #cpu {