108 lines
2.4 KiB
CSS
108 lines
2.4 KiB
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("../ml4w/cache/blurred_wallpaper.png");
|
|
background-size: cover;
|
|
font-size: 16pt;
|
|
color: #cdd6f4;
|
|
}
|
|
|
|
button {
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-size: 20%;
|
|
background-color: rgba(200, 220, 255, 0);
|
|
animation: gradient_f 20s ease-in infinite;
|
|
border-radius: 80px; /* Increased border radius for a more rounded look */
|
|
border:0px;
|
|
transition: all 0.3s cubic-bezier(.55, 0.0, .28, 1.682), box-shadow 0.2s ease-in-out, background-color 0.2s ease-in-out;
|
|
}
|
|
|
|
button:focus {
|
|
background-size: 22%;
|
|
border: 0px;
|
|
}
|
|
|
|
button:hover {
|
|
background-color: @color11;
|
|
opacity: 0.8;
|
|
color: #cdd6f4;
|
|
background-size: 30%;
|
|
margin: 30px;
|
|
border-radius: 80px;
|
|
box-shadow: 0 0 50px @color7;
|
|
}
|
|
|
|
/* Adjust the size of the icon or content inside the button */
|
|
button span {
|
|
font-size: 1.2em; /* Increase the font size */
|
|
}
|
|
|
|
/*
|
|
-----------------------------------------------------
|
|
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"));
|
|
}
|