matt1432/nixos-configs
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: add hover animations to eww modules in waybar

Browse source
This commit is contained in:
matt1432 2023-06-08 04:59:45 -04:00
parent 10efa92b8e
commit 4bbdc1e507
7 changed files with 34 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
eww/actions/actions.yuck
View file

@ -201,6 +201,7 @@
(defwindow actions-reveal (defwindow actions-reveal
:monitor "0" :monitor "0"
:stacking "overlay"
:geometry (geometry :x "10px" :geometry (geometry :x "10px"
:y "4px" :y "4px"
:width "320px" ; this isn't respected btw, so it's auto-adjusted by eww lol. :width "320px" ; this isn't respected btw, so it's auto-adjusted by eww lol.

2
eww/closer/closer.yuck
View file

@ -4,6 +4,6 @@
(defwindow closer (defwindow closer
:monitor 0 :monitor 0
:geometry (geometry :width "100%" :height "100%") :geometry (geometry :width "100%" :height "100%")
:stacking "fg" :stacking "overlay"
:focusable false :focusable false
(closer :window "")) (closer :window ""))

1
eww/date/date.yuck
View file

@ -50,6 +50,7 @@
(defwindow date-reveal (defwindow date-reveal
:monitor 0 :monitor 0
:stacking "overlay"
:geometry (geometry :x "70px" :geometry (geometry :x "70px"
:y "4px" :y "4px"
:width "0px" ; automatically generated :width "0px" ; automatically generated

2
eww/powermenu/powermenu.yuck
View file

@ -40,7 +40,7 @@
(defwindow powermenu-reveal (defwindow powermenu-reveal
:monitor 0 :monitor 0
:stacking "fg" :stacking "overlay"
:geometry (geometry :x "0px" :geometry (geometry :x "0px"
:y "0px" :y "0px"
:width "500px" :width "500px"

36
eww/traybuttons/traybuttons.scss
View file

@ -1,11 +1,14 @@
/*.tablet-toggle { .notif-panel {
background-color: $bg; /* min-width: 110px;
color: $fg; min-height: 34px; */
font-family: Product Sans; font-size: 20px;
border-radius: 30px; padding: 2px 25px 2px 35px;
border: 5px solid $contrastbg; }
padding: 10px 18px;
}*/ .tablet-toggle {
font-size: 26px;
padding: 2px 10px 2px 16px;
}
.toggle-off { .toggle-off {
background-color: $bg; background-color: $bg;
@ -13,26 +16,19 @@
color: #CBA6F7; color: #CBA6F7;
border-radius: 80px; border-radius: 80px;
border: 3px solid $contrastbg; border: 3px solid $contrastbg;
padding: 0px 6px 0px 12px;
/* Add any other styles for the "off" state */ /* Add any other styles for the "off" state */
} }
.toggle-off:hover {
background-color: rgba(127, 132, 156, 0.2);
transition: background-color 0.5s ease-in-out;
}
.toggle-on { .toggle-on {
background-color: $bg; background-color: $bg;
transition: border-color 0.5s ease-in-out; transition: border-color 0.5s ease-in-out;
color: #CBA6F7; color: #CBA6F7;
border-radius: 80px; border-radius: 80px;
border: 3px solid #CBA6F7; border: 3px solid #CBA6F7;
padding: 0px 6px 0px 12px;
/* Add any other styles for the "on" state */ /* Add any other styles for the "on" state */
} }
.notif-panel {
min-width: 110px;
min-height: 38px;
font-size: 20px;
}
.tablet-toggle {
font-size: 26px;
}

11
eww/traybuttons/traybuttons.yuck
View file

@ -1,10 +1,10 @@
(defvar toggle-state false) (defvar toggle-state false)
(defwidget tablet-toggle [] (defwidget tablet-toggle []
(button :class "tablet-toggle" (eventbox :class {toggle-state ? "toggle-on" : "toggle-off"}
:onclick {toggle-state ? "$HOME/.config/hypr/scripts/tablet/laptop-mode.sh &" : :onclick {toggle-state ? "$HOME/.config/hypr/scripts/tablet/laptop-mode.sh &" :
"$HOME/.config/hypr/scripts/tablet/tablet-mode.sh &"} "$HOME/.config/hypr/scripts/tablet/tablet-mode.sh &"}
(box :class {toggle-state ? "toggle-on" : "toggle-off"} (box :class "tablet-toggle"
:space-evenly true :space-evenly true
:spacing 6 :spacing 6
:orientation "h" :orientation "h"
@ -15,6 +15,7 @@
(defwindow tablet-toggle (defwindow tablet-toggle
:monitor 0 :monitor 0
:stacking "overlay"
:exclusive "ignore" :exclusive "ignore"
:geometry (geometry :x "78px" :geometry (geometry :x "78px"
:y "8px" :y "8px"
@ -28,10 +29,10 @@
(defvar notif-panel-state false) (defvar notif-panel-state false)
(defwidget notif-panel [] (defwidget notif-panel []
(button :class "notif-panel" (button :class {notif-panel-state ? "toggle-on" : "toggle-off"}
:onclick {notif-panel-state ? "swaync-client -cp; eww update notif-panel-state=false" : :onclick {notif-panel-state ? "swaync-client -cp; eww update notif-panel-state=false" :
"swaync-client -op; eww update notif-panel-state=true"} "swaync-client -op; eww update notif-panel-state=true"}
(box :class {notif-panel-state ? "toggle-on" : "toggle-off"} (box :class "notif-panel"
:space-evenly true :space-evenly true
:spacing 6 :spacing 6
:orientation "h" :orientation "h"
@ -45,7 +46,7 @@
:stacking "overlay" :stacking "overlay"
:exclusive "ignore" :exclusive "ignore"
:geometry (geometry :x "60px" :geometry (geometry :x "60px"
:y "9px" :y "10px"
:width "0px" :width "0px"
:height "0px" :height "0px"
:anchor "top right" :anchor "top right"

5
waybar/style.css
View file

@ -126,6 +126,7 @@
border: 6px solid rgba(0, 0, 0, 0); border: 6px solid rgba(0, 0, 0, 0);
border-radius: 80px; border-radius: 80px;
background-clip: padding-box; background-clip: padding-box;
color: rgba(0, 0, 0, 0);
} }
#custom-quicksettings { #custom-quicksettings {
@ -136,6 +137,6 @@
#custom-notif { #custom-notif {
min-width: 110px; min-width: 110px;
color: #CBA6F7; color: rgba(0, 0, 0, 0);
font-size: 26px; font-size: 20px;
} }