186 lines
4.1 KiB
SCSS
186 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: 7px * 1.6;
|
|
$padding: 7px;
|
|
$spacing: 12px;
|
|
$radius: 11px;
|
|
|
|
window#verification .verification {
|
|
@include floating-widget;
|
|
padding: 7px * 1.6 * 1.5;
|
|
min-width: 300px;
|
|
min-height: 80px;
|
|
font-size: 1.3em;
|
|
|
|
.text-box {
|
|
margin-bottom: $spacing;
|
|
|
|
.title {
|
|
font-size: 1.6em;
|
|
color: $maroon;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
.desc {
|
|
color: $lavender;
|
|
font-size: 1.1em;
|
|
margin-bottom: 10px;
|
|
padding: 15px 30px;
|
|
}
|
|
}
|
|
|
|
.verification-button {
|
|
background: $crust;
|
|
padding: 10px 0px;
|
|
margin: 5px 25px;
|
|
border: 2px solid;
|
|
border-color: $crust;
|
|
border-radius: $radius;
|
|
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;
|
|
}
|
|
}
|