dotfiles/waybar/animation.css

/* <<--< PHASE 1 >-->> */

#custom-ws {
  color: transparent;
  text-shadow: none;
  animation: module_in 0.25s ease-in 0.5s forwards;
}

#custom-distro {
  color: transparent;
  font-size: 0;
  text-shadow: none;
  animation: distro_expand 0.25s ease-in 0.25s forwards,
    distro_in 0.25s ease-in 0.5s forwards;
}

#custom-power {
  font-size: 0;
  text-shadow: none;
  animation: power_expand 0.25s ease-in 0.25s forwards,
    power_in 0.25s ease-in 0.5s forwards;
}

/* <<--< PHASE 2 >-->> */

#workspaces label {
  opacity: 0;
  animation: hoverable_in 0.25s ease-in 1s forwards;
}

#cpu,
#clock.time,
#idle_inhibitor,
#battery,
#battery.warning,
#battery.critical,
#battery.charging {
  font-size: 0;
  text-shadow: none;
  animation: module_expand 0.25s ease-in 0.75s forwards,
    module_in 0.25s ease-in 1s forwards;
}

#cpu {
  animation: module_expand 0.25s ease-in 0.75s forwards,
    module_in 0.25s ease-in 1s forwards;
}

#clock.time {
  animation: module_expand 0.25s ease-in 0.75s forwards,
    module_in 0.25s ease-in 1s forwards;
}

#idle_inhibitor {
  animation: module_expand 0.25s ease-in 0.75s forwards,
    hoverable_in 0.25s ease-in 1s forwards;
}

#battery {
  animation: module_expand 0.25s ease-in 0.75s forwards,
    battery_in 0.25s ease-in 1s forwards;
}

#battery.warning {
  animation: module_expand 0.25s ease-in 0.75s forwards,
    state_warning_in 0.25s ease-in 1s forwards;
}

#battery.critical {
  animation: module_expand 0.25s ease-in 0.75s forwards,
    state_critical_in 0.25s ease-in 1s forwards;
}

#battery.charging {
  animation: module_expand 0.25s ease-in 0.75s forwards,
    state_charging_in 0.25s ease-in 1s forwards;
}

/* <<--< PHASE 3 >-->> */

#memory,
#backlight {
  color: transparent;
  font-size: 0;
  text-shadow: none;
  animation: module_expand 0.25s ease-in 1.15s forwards,
    module_in 0.25s ease-in 1.4s forwards;
}

#memory.warning {
  color: transparent;
  font-size: 0;
  text-shadow: none;
  animation: module_expand 0.25s ease-in 1.15s forwards,
    state_warning_in 0.25s ease-in 1.4s forwards;
}

#memory.critical {
  color: transparent;
  font-size: 0;
  text-shadow: none;
  animation: module_expand 0.25s ease-in 1.15s forwards,
    state_critical_in 0.25s ease-in 1.4s forwards;
}

#clock.date {
  font-size: 0;
  animation: module_expand 0.25s ease-in 1.15s forwards,
    hoverable_in 0.25s ease-in 1.4s forwards;
}

/* <<--< PHASE 4 >-->> */

#window,
#custom-media {
  opacity: 0;
  animation: hoverable_in 0.25s ease-in 1.75s forwards;
}

#custom-cpuinfo,
#custom-wifi,
#bluetooth,
#custom-update,
#pulseaudio {
  font-size: 0;
  animation: module_expand 0.25s ease-in 1.5s forwards,
    hoverable_in 0.25s ease-in 1.75s forwards;
}

/* <<--< KEYFRAMES >-->> */

/* <<--< distro icon >-->> */

@keyframes distro_expand {
  to {
    font-size: 14.6px;
  }
}

@keyframes distro_in {
  to {
    color: @distro-fg;
    text-shadow: 0 0 1.5px rgba(0, 0, 0, 1);
  }
}

/* <<--< power button >-->> */

@keyframes power_expand {
  to {
    font-size: 10px;
  }
}

@keyframes power_in {
  to {
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
  }
}

/* <<--< modules >-->> */

@keyframes module_expand {
  to {
    font-size: 10px;
  }
}

@keyframes module_in {
  to {
    color: @module-fg;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
  }
}

/* <<--< FIXES >-->> */

/* <<--< hoverables >-->> */

@keyframes hoverable_in {
  to {
    opacity: 1;
  }
}

/* <<--< battery >-->> */

@keyframes battery_in {
  to {
    color: @module-fg;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
  }
}

/* <<--< states >-->> */

@keyframes state_warning_in {
  to {
    color: @warning;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
  }
}

@keyframes state_critical_in {
  to {
    color: @critical;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
  }
}

@keyframes state_charging_in {
  to {
    color: @charging;
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
  }
}