linuxbox/config/waybar/style.css

/* =============================================================================
 *
 * Waybar configuration
 *
 * Configuration reference: https://github.com/Alexays/Waybar/wiki/Configuration
 *
 * =========================================================================== */

/* -----------------------------------------------------------------------------
 * Keyframes
 * -------------------------------------------------------------------------- */

@keyframes blink-warning {
  70% {
    color: white;
  }

  to {
    color: white;
    background-color: orange;
  }
}

@keyframes blink-critical {
  70% {
    color: white;
  }

  to {
    color: white;
    background-color: red;
  }
}

/* -----------------------------------------------------------------------------
 * Base styles
 * -------------------------------------------------------------------------- */
/* Reset all styles */
* {
  border: none;
  border-radius: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
}

/* The whole bar */
#waybar {
  background: #000000;
  color: #eeeeee;
  font-family: CodeNewRoman Nerd Font Mono;
  font-size: 12pt;
}

/* Each module */
#clock,
#cpu,
#memory,
#network,
#pulseaudio,
#wireplumber,
#custom-separator,
#tray {
  padding-left: 0px;
  padding-right: 10px;
}

/* -----------------------------------------------------------------------------
 * Module styles
 * -------------------------------------------------------------------------- */

#clock {
}

#wireplumber {
  color: #afd787;
}

#wireplumber.muted {
  color: #d7af5f;
}

#cpu {
  color: #afd787;
}

#cpu.warning {
  color: #d7af5f;
}

#cpu.critical {
  color: #d75400;
}

#memory {
  color: #afd787;
}

#memory.warning {
  color: #d7af5f;
}

#memory.critical {
  color: #d75400;
}

#network {
  color: #afd787;
}

#network.linked {
  color: #d7af5f;
}

#network.disconnected {
  color: #d75400;
}

#network.disabled {
  color: #d75400;
}

#temperature {
  color: #afd787;
}

#temperature.critical {
  color: #d75400;
}

#custom-separator {
  color: #eeeeee;
}

#tray {
  /* opacity: 0.7; */
}

#tray menu {
  margin-top: 30px;
  padding-top: 10px;
  padding-bottom: 10px;
  color: #eeeeee; /* white text */
  background-color: #000000; /* dark gray hover background */
  border: 1px solid #333333;
  border-radius: 5px;
}

#tray menu menuitem {
  padding: 2px 2px 2px 2px;
}

#tray menu menuitem:hover {
  background-color: #6c6c6c; /* dark gray hover background */
}

#window {
}

#workspaces {
  margin-left: 2px;
}

#workspaces button {
  margin-top: 4px;
  margin-bottom: 4px;
  padding-left: 0px;
  padding-right: 0px;
  color: #eeeeee;
}

#workspaces button.active {
  border-color: #000000;
  color: #000000;
  background-color: #afd787;
}