Hyprland-dotfiles/wlogout/style.css

/*
          _                         _    
__      _| | ___   __ _  ___  _   _| |_  
\ \ /\ / / |/ _ \ / _` |/ _ \| | | | __| 
 \ V  V /| | (_) | (_| | (_) | |_| | |_  
  \_/\_/ |_|\___/ \__, |\___/ \__,_|\__| 
                  |___/                  
 
by Stephan Raabe (2023) 
----------------------------------------------------- 
*/

/* -----------------------------------------------------
 * Import Pywal colors 
 * ----------------------------------------------------- */
@import '../../.cache/wal/colors-wlogout.css';

/* -----------------------------------------------------
 * General 
 * ----------------------------------------------------- */

* {
    font-family: "Fira Sans Semibold", FontAwesome, Roboto, Helvetica, Arial, sans-serif;
	background-image: none;
	transition: 20ms;
	box-shadow: none;
}

window {
	background: url("../../.cache/blurred_wallpaper.png");
	background-size: cover;
}

button {
	color: #FFFFFF;
    font-size:20px;

    background-repeat: no-repeat;
	background-position: center;
	background-size: 25%;

	border-style: solid;
	background-color: rgba(12, 12, 12, 0.3);
	border: 3px solid #FFFFFF;

    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

button:focus,
button:active,
button:hover {
    color: @color11;
	background-color: rgba(12, 12, 12, 0.5);
	border: 3px solid @color11;
}

/* 
----------------------------------------------------- 
Buttons
----------------------------------------------------- 
*/

#lock {
	margin: 10px;
	border-radius: 20px;
	background-image: image(url("icons/lock.png"));
}

#logout {
	margin: 10px;
	border-radius: 20px;
	background-image: image(url("icons/logout.png"));
}

#suspend {
	margin: 10px;
	border-radius: 20px;
	background-image: image(url("icons/suspend.png"));
}

#hibernate {
	margin: 10px;
	border-radius: 20px;
	background-image: image(url("icons/hibernate.png"));
}

#shutdown {
	margin: 10px;
	border-radius: 20px;
	background-image: image(url("icons/shutdown.png"));
}

#reboot {
	margin: 10px;
	border-radius: 20px;
	background-image: image(url("icons/reboot.png"));
}