183 lines
4.1 KiB
SCSS
183 lines
4.1 KiB
SCSS
@import "../colors";
|
|
|
|
window#powermenu,
|
|
window#verification {
|
|
// the fraction has to be more than hyprland ignorealpha
|
|
background-color: rgba(0, 0, 0, .4);
|
|
}
|
|
|
|
$popover-padding: 0.6rem * 1.6;
|
|
|
|
window#verification .verification {
|
|
@include floating-widget;
|
|
padding: 0.5rem * 1.6 * 1.5;
|
|
min-width: 20rem;
|
|
min-height: 8rem;
|
|
font-size: 1.3em;
|
|
|
|
.text-box {
|
|
margin-bottom: 0.4rem;
|
|
|
|
.title {
|
|
font-size: 1.6em;
|
|
color: $maroon;
|
|
margin-bottom: 0.75rem;
|
|
}
|
|
|
|
.desc {
|
|
color: $lavender;
|
|
font-size: 1.1em;
|
|
margin-bottom: 0.75rem;
|
|
padding: 1.15rem 2.25rem;
|
|
}
|
|
}
|
|
|
|
.verification-button {
|
|
background: $crust;
|
|
padding: 0.75rem 0rem;
|
|
margin: 0.4rem 1.9rem;
|
|
border: 0.2rem solid;
|
|
border-color: $crust;
|
|
border-radius: 0.4rem;
|
|
opacity: 1;
|
|
transition: border-color 0.2s ease-in-out;
|
|
transition: opacity .3s ease-in-out;
|
|
|
|
&:hover {
|
|
&.bar-verification_yes{
|
|
border-color: $green;
|
|
transition: border-color 0.2s ease-in-out;
|
|
}
|
|
&.bar-verification_no {
|
|
border-color: $red;
|
|
transition: border-color 0.2s ease-in-out;
|
|
}
|
|
}
|
|
&:focus {
|
|
&.bar-verification_yes{
|
|
border-color: $green;
|
|
transition: border-color 0.2s ease-in-out;
|
|
}
|
|
&.bar-verification_no {
|
|
border-color: $red;
|
|
transition: border-color 0.2s ease-in-out;
|
|
}
|
|
}
|
|
|
|
&:active {
|
|
&.bar-verification_yes {
|
|
border-color: rgba($green, 0.4);
|
|
transition: border-color 0.2s ease-in-out;
|
|
}
|
|
&.bar-verification_no {
|
|
border-color: rgba($red, 0.4);
|
|
transition: border-color 0.2s ease-in-out;
|
|
}
|
|
|
|
image {
|
|
opacity: .3;
|
|
transition: opacity .3s ease-in-out;
|
|
}
|
|
label {
|
|
opacity: .3;
|
|
transition: opacity .3s ease-in-out;
|
|
}
|
|
}
|
|
}
|
|
.bar-verification_no label {
|
|
color: $red;
|
|
}
|
|
.bar-verification_yes label {
|
|
color: $green;
|
|
}
|
|
}
|
|
|
|
window#powermenu .powermenu {
|
|
@include floating-widget;
|
|
&.line {
|
|
padding: $popover-padding * 1.5;
|
|
}
|
|
|
|
&.box {
|
|
padding: $popover-padding * 2;
|
|
}
|
|
}
|
|
|
|
.widget-button {
|
|
border-color: $crust;
|
|
opacity: 1;
|
|
transition: border-color 0.2s ease-in-out;
|
|
transition: opacity .3s ease-in-out;
|
|
|
|
&:hover {
|
|
&.powermenu-button-shutdown {
|
|
border-color: $red;
|
|
}
|
|
&.powermenu-button-logout {
|
|
border-color: $green;
|
|
}
|
|
&.powermenu-button-sleep {
|
|
border-color: $sky;
|
|
}
|
|
&.powermenu-button-reboot {
|
|
border-color: $peach;
|
|
}
|
|
}
|
|
&:focus {
|
|
&.powermenu-button-shutdown {
|
|
border-color: $red;
|
|
}
|
|
&.powermenu-button-logout {
|
|
border-color: $green;
|
|
}
|
|
&.powermenu-button-sleep {
|
|
border-color: $sky;
|
|
}
|
|
&.powermenu-button-reboot {
|
|
border-color: $peach;
|
|
}
|
|
} &:active {
|
|
&.powermenu-button-shutdown {
|
|
border-color: rgba($red, .5);
|
|
}
|
|
&.powermenu-button-logout {
|
|
border-color: rgba($green, .5);
|
|
}
|
|
&.powermenu-button-sleep {
|
|
border-color: rgba($sky, .5);
|
|
}
|
|
&.powermenu-button-reboot {
|
|
border-color: rgba($peach, .5);
|
|
}
|
|
}
|
|
}
|
|
.system-button_icon {
|
|
&.shutdown {
|
|
color: $red;
|
|
}
|
|
&.logout {
|
|
color: $green;
|
|
}
|
|
&.reboot {
|
|
color: $peach;
|
|
}
|
|
&.sleep {
|
|
color: $sky;
|
|
}
|
|
}
|
|
|
|
.system-button_label {
|
|
&.shutdown {
|
|
color: $red;
|
|
}
|
|
&.logout {
|
|
color: $green;
|
|
}
|
|
&.reboot {
|
|
color: $peach;
|
|
}
|
|
&.sleep {
|
|
color: $sky;
|
|
}
|
|
}
|