dotfiles/dot_config/waybar/style.css

* {
    border: none;
    font-family: JetBrains Mono,Ubuntu Nerd Font,Weather Icons,sans-serif;
    font-size: 14px;
    font-weight: bold;
    min-height: 0;
  }
  
  window#waybar {
    background-color: transparent;
    
  }
  
  window > box {
    background: #181818;
    border-radius: 12px;
    min-width: 35px;
    margin: 3px;
    background-clip: border-box;
    transition-property: background-color;
    transition-duration: .5s;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18), 0 1px 2px 1px rgba(0, 0, 0, 0.18), 0 2px 4px 2px rgba(0, 0, 0, 0.18);
  }
  
  #disk,
  #custom-memory,
  #cpu,
  #custom-gputmp
  #custom-uptime,
  #temperature,
  #custom-weather,
  #cpu, #custom-gputmp {
    background-color: #1f1f1f;
    padding: 0 7px;
    margin: 5px 0px;
  }
  #disk, #custom-memory {
    background-color: #1f1f1f;
    padding: 0 7px;
    margin: 5px 0px;
  }
  
  #disk {
    color: #5dbbc1;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
  }
  
  #custom-memory {
    color: #9841bb;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
  }
  
  #cpu {
    color: #f5c211;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
  }
  
  #custom-gputmp {
    color: #8FBF7F;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
  }
  
  #custom-uptime, #temperature, #custom-weather {
    background-color: #1f1f1f;
    padding: 0px 7px;
    margin: 5px 0px;
  }
  
  #custom-uptime {
    color: #2ec27e;
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
  }
  
  #temperature {
    color: #9841bb;
    
  }
  
  #pulseaudio {
    color: #f5c211;
    background-color: #1f1f1f;
    padding: 0px 8px;
    margin: 5px 5px 5px 4px;
    border-radius: 8px;
  }
  
  #pulseaudio.muted {
    background-color: #e06c75;
  }
  
  #custom-kernel {
    color: #51a1ff;
    background-color: #1f1f1f;
    padding: 0px 7px;
    margin: 5px 5px 5px 5px;
    border-radius: 8px;
  }
  
  #custom-weather {
    color: #5dbbc1;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
  }
  
  #temperature {
    color: #9841bb;
  }
  
  #temperature.critical {
    background-color: #e06c75;
    color: #1f1f1f;
  }
  
  @keyframes gradient {
      0% {
          background-position: 0% 50%;
      }
      50% {
          background-position: 100% 50%;
      }
      100% {
          background-position: 0% 50%;
      }
  }
  
  #workspaces{
    background-color: #1f1f1f;
    border-radius: 8px;
  }
  
  #workspaces,
  #custom-media,
  #custom-fans,
  #clock,
  #network,
  #custom-power,
  #mpd,
  #custom-gentoo,
  #custom-network,
  #window,
  #memory,
  #battery,
  #backlight,
  #temperature,
  #custom-wl-gammarelay-temperature,
  #custom-wl-gammarelay-brightness,
  #custom-wl-gammarelay-gamma,
  #custom-events,
  #custom-wvkbd,
  #custom-notification,
  #tray {
    background-color: #1f1f1f;
    padding: 0 7px;
    margin: 5px 5px 5px 5px;
    border-radius: 8px;
    background-clip: padding-box;
  }
  
  #idle_inhibitor,
  #idle_inhibitor.activated,
  #workspaces button {
    padding: 0 6px;
    min-width: 10px;
    color: #51a1ff;
  }
  
  #custom-network {
    color: #e06c75;
    background-color: #1f1f1f;
  
  }
  
  #custom-dunst {
    color: #9841bb;
  }
  
  #custom-dot{
    color: #38384d;
    font-size: 15px;
    background-color: transparent;
  }
  
  #custom-dot2{
    color: #38384d;
    font-size: 15px;
    background-color: transparent;
  }
  
  #custom-dot3{
    color: #38384d;
    font-size: 15px;
    background-color: transparent;
  }
  
  #workspaces button:hover {
    background-color: rgba(0, 0, 0, 0.2);
  }
  
  #workspaces button.active {
    color: #9841bb;
    
  }
  
  #workspaces button.focused {
    color: #9841bb;
  }
  
  #workspaces button.urgent {
    color: #e06c75;
  }
  
  #memory {
    color: #9841bb;
  }
  
  #custom-media {
    background-color: #9841bb;
    color: #1f1f1f;
  }
  
  #custom-fans {
    color: #e06c75;
  }
  
  #clock {
    color: #51a1ff;
  }
  
  #mode {
    color: #0fa4bf;
  }
  
  #window {
    color: #c0bfbc;
    background-color: transparent;
  }
  
  #custom-power {
    color: #f65866;
    background-color: #1f1f1f;
  }
  
  #custom-gentoo {
    font-size: 15px;
    color: #9841bb;
    background-color: transparent;
  }
  
  @keyframes blink {
      to {
          background-color: #1f1f1f;
          color: #e06c75;
      }
  }
  
  #network {
      color: #9841bb
  }
  
  #network.disconnected {
      background-color: #e06c75;
      color: #1f1f1f;
  }