raycast-like wofi config

README.md

Wofi command to run:

wofi --width=900 --height=500 --gtk-dark -a --allow-images --show drun

hyprland.conf

layerrule = blur,wofi 

decoration {
    blur {
        enabled = true
        size = 20
        passes = 3
    }
}

style.css

window {
  color: #f5f5f5;
  background: transparent;
}

#input {
  background: transparent;
  border: none;
  font-size: 16px;
  border-radius: 0;
  padding: 7px;
  padding-left: 12px;
  padding-right: 12px;
  border-bottom: solid 1px rgba(255,255,255,0.07);
  color: #fafafa;
  font-weight: 500;
}

#input:focus {
  box-shadow: none;
}

#outer-box {
  background: rgba(20,20,20,0.75);
  border-radius: 7px;
  border: solid 1px rgba(255,255,255,0.07);
  padding-bottom: 10px;
}

#entry:selected {
  background: rgba(255,255,255,0.05);
  color: #fff;
  border: none;
  outline: none;
  box-shadow: none;
}

#entry {
  padding: 6px;
  padding-left: 5px;
  padding-right: 5px;
  border-radius: 9px;
  font-size: 14px;
  min-height: 30px;
}

#scroll {
  margin-top: 10px;
  padding-left: 7px;
  padding-right: 7px;
}

#img {
  margin-right: 5px;
  -gtk-icon-transform:scale(0.625);
}

#text {
  font-weight: 500;
  opacity: 0.9;
} 

#input > image.right {
  color: rgba(255,255,255,0.5);
}

#input > image.left {
  -gtk-icon-transform:scaleX(0);
  margin-left: -20px;
}