So you want to learn Hyprland - from scratch!

In this video, we'll build and customize Hyprland without using any pre-made themes... this will get us accustomed to modifying and theming Hyprland helper-apps from scratch...

Here is the style.css for wofi that I couldn't fit on screen:
-----

window {
margin: 0px;
border: 2px solid #5e81ac; /* nord blue */
background-color: #1e1e2e; /* dark background */
border-radius: 8px;
font-family: "JetBrainsMono Nerd Font", monospace;
font-size: 16px;
color: #cdd6f4; /* light text */
}

#input {
margin: 8px;
padding: 6px;
border: none;
border-radius: 4px;
background-color: #313244;
color: #cdd6f4;
}

#inner-box {
margin: 8px;
background-color: transparent;
}

#outer-box {
margin: 8px;
padding: 4px;
background-color: transparent;
}

#scroll {
margin-top: 5px;
border-radius: 4px;
}

#entry {
padding: 6px;
border-radius: 4px;
background-color: transparent;
color: #cdd6f4;
}

#entry:selected {
background-color: #89b4fa; /* blue highlight */
color: #1e1e2e;
}

-----

Here is the style.css for wlogout that I couldn't fit on screen:
-----

window {
background-color: rgba(30, 30, 46, 0.95);
}

button {
background-color: #1e1e2e;
border-radius: 12px;
border: 2px solid #6c7086;
margin: 20px;
padding: 20px;
min-width: 120px;
min-height: 120px;
background-repeat: no-repeat;
background-position: center;
background-size: 30%;
color: #cdd6f4;
font-family: "JetBrainsMono Nerd Font", sans-serif;
font-size: 14px;
box-shadow: 0 0 15px rgba(111, 143, 255, 0.4);
transition: all 0.3s ease;
}

button:hover {
background-color: #6c7086;
color: #1e1e2e;
box-shadow: 0 0 15px rgba(245, 194, 231, 0.7);
}

#lock {
background-image: image(url("/usr/share/wlogout/icons/lock.png"));
}

#logout {
background-image: image(url("/usr/share/wlogout/icons/logout.png"));
}

#suspend {
background-image: image(url("/usr/share/wlogout/icons/suspend.png"));
}

#hibernate {
background-image: image(url("/usr/share/wlogout/icons/hibernate.png"));
}

#shutdown {
background-image: image(url("/usr/share/wlogout/icons/shutdown.png"));
}

#reboot {
background-image: image(url("/usr/share/wlogout/icons/reboot.png"));
}

-----
TechHeart Memberships @ https://www.youtube.com/@techheart6090/join

Discord @ https://discord.gg/zyPCdncA

Website @ https://techheart.life

Buy Me a Coffee @ https://www.buymeacoffee.com/techheart

LinkTree @ https://linktr.ee/TechHeart