Hyprland-Dots/config/waybar/style/style-default.css

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