1@import "macchiato.css";
  2
  3* {
  4  font-family: "JetBrainsMono NF", "Berkely Mono";
  5  font-size: 13px;
  6}
  7
  8window#waybar {
  9  background-color: @base;
 10  color: @text;
 11  transition-property: background-color;
 12  transition-duration: 0.5s;
 13}
 14
 15window#waybar.hidden {
 16  opacity: 0.2;
 17}
 18
 19button {
 20  /* Use box-shadow instead of border so the text isn't offset */
 21  box-shadow: inset 0 -3px transparent;
 22  border-radius: 0;
 23}
 24
 25#workspaces button {
 26  padding: 0 5px;
 27  background-color: @surface0;
 28  margin: 5px 0;
 29  color: @text;
 30}
 31
 32#workspaces button:hover {
 33  background: shade(@base, 0.8);
 34}
 35
 36#workspaces button.active {
 37  background-color: @overlay0;
 38}
 39
 40#workspaces button.urgent {
 41  background-color: @red;
 42  color: @base;
 43}
 44
 45#workspaces button:first-child {
 46  border-radius: 12px 0 0 12px;
 47}
 48
 49#workspaces button:last-child {
 50  border-radius: 0 12px 12px 0;
 51}
 52
 53#clock,
 54#battery,
 55#cpu,
 56#memory,
 57#disk,
 58#temperature,
 59#backlight,
 60#network,
 61#pulseaudio,
 62#wireplumber,
 63#custom-media,
 64#tray,
 65#mode,
 66#idle_inhibitor,
 67#scratchpad,
 68#mpd {
 69  border-radius: 12px;
 70  padding: 3px 13px 3px 8px;
 71  margin: 5px 0;
 72  color: @text;
 73  background-color: @surface0;
 74}
 75
 76#window,
 77#workspaces {
 78  margin: 0 4px;
 79}
 80
 81@keyframes blink {
 82  to {
 83    background-color: @base;
 84  }
 85}
 86
 87#battery.critical:not(.charging) {
 88  background-color: @red;
 89  color: @base;
 90  animation-name: blink;
 91  animation-duration: 0.5s;
 92  animation-timing-function: linear;
 93  animation-iteration-count: infinite;
 94  animation-direction: alternate;
 95}
 96
 97#network.disconnected {
 98  background-color: @red;
 99  color: @base;
100}
101
102#temperature.critical {
103  background-color: @red;
104  color: @base;
105}
106
107#tray {
108  padding-right: 9px;
109}
110
111#tray > .passive {
112  -gtk-icon-effect: dim;
113}
114
115#tray > .needs-attention {
116  -gtk-icon-effect: highlight;
117  background-color: @red;
118  color: @base;
119}
120
121#idle_inhibitor.activated {
122  background-color: @pink;
123  color: @base;
124}