fix(hyprlua): match notif/audio-panel theming to eww's violet/magenta look

mnotifd, mnotifhist, and audio-panel filled cards/pills with solid @violet
(border indistinguishable from fill), unlike the hollow @bg-fill +
@violet-border pills used everywhere else (eww bar, astal-menu). Flip
default-state fills to @bg, keep @accent for hover/checked/active states,
and drop the audio-panel default-device button's hardcoded green in favour
of @accent.

Also give the eww bar's drawer/notif/caffeine buttons the same circular
.icon-btn treatment as the screen-rotation buttons (touch variant only —
the laptop bar's 20px height has no room for a 40px circle), and make the
notif bell light up @accent whenever mnotifd's history cache has entries
(new notif-active-status.sh poll), rather than only matching hover.

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
main
Amir Alexander Abdelbaki 2026-07-30 20:03:18 +02:00
parent 4afba5d3ea
commit 37da84422a
13 changed files with 87 additions and 49 deletions

View File

@ -30,7 +30,7 @@ drawingarea {
} }
.sb-panel { .sb-panel {
background-color: @violet; background-color: @bg;
border: 2px solid @violet; border: 2px solid @violet;
border-radius: 12px; border-radius: 12px;
padding: 14px 16px; padding: 14px 16px;
@ -50,7 +50,7 @@ drawingarea {
.sb-tabbar { margin-bottom: 4px; margin-right: 64px; } .sb-tabbar { margin-bottom: 4px; margin-right: 64px; }
.sb-tab { .sb-tab {
color: @text; color: @text;
background-color: @violet; background-color: @bg;
border: 2px solid @violet; border: 2px solid @violet;
border-radius: 16px; border-radius: 16px;
padding: 4px 14px; padding: 4px 14px;
@ -154,7 +154,7 @@ drawingarea {
.sb-lr-toggle, .sb-lr-toggle,
.sb-default-btn { .sb-default-btn {
color: @text; color: @text;
background-color: @violet; background-color: @bg;
border: 2px solid @violet; border: 2px solid @violet;
border-radius: 14px; border-radius: 14px;
padding: 2px 10px; padding: 2px 10px;
@ -178,8 +178,8 @@ drawingarea {
color: @bg; color: @bg;
} }
.sb-default-btn:checked { .sb-default-btn:checked {
background-color: #34E27A; background-color: @accent;
border-color: #34E27A; border-color: @accent;
color: @bg; color: @bg;
} }
.sb-default-btn:disabled { opacity: 0.85; } .sb-default-btn:disabled { opacity: 0.85; }

View File

@ -30,7 +30,7 @@ drawingarea {
} }
.sb-panel { .sb-panel {
background-color: @violet; background-color: @bg;
border: 2px solid @violet; border: 2px solid @violet;
border-radius: 12px; border-radius: 12px;
padding: 14px 16px; padding: 14px 16px;
@ -50,7 +50,7 @@ drawingarea {
.sb-tabbar { margin-bottom: 4px; margin-right: 64px; } .sb-tabbar { margin-bottom: 4px; margin-right: 64px; }
.sb-tab { .sb-tab {
color: @text; color: @text;
background-color: @violet; background-color: @bg;
border: 2px solid @violet; border: 2px solid @violet;
border-radius: 16px; border-radius: 16px;
padding: 4px 14px; padding: 4px 14px;
@ -154,7 +154,7 @@ drawingarea {
.sb-lr-toggle, .sb-lr-toggle,
.sb-default-btn { .sb-default-btn {
color: @text; color: @text;
background-color: @violet; background-color: @bg;
border: 2px solid @violet; border: 2px solid @violet;
border-radius: 14px; border-radius: 14px;
padding: 2px 10px; padding: 2px 10px;
@ -178,8 +178,8 @@ drawingarea {
color: @bg; color: @bg;
} }
.sb-default-btn:checked { .sb-default-btn:checked {
background-color: #34E27A; background-color: @accent;
border-color: #34E27A; border-color: @accent;
color: @bg; color: @bg;
} }
.sb-default-btn:disabled { opacity: 0.85; } .sb-default-btn:disabled { opacity: 0.85; }

View File

@ -89,22 +89,24 @@ tooltip {
color: #E40046; color: #E40046;
} }
// astal-menu launcher button accent-coloured icon, highlight on hover // astal-menu launcher button purple by default, hot-pink accent on hover
.menu-launcher { .menu-launcher {
color: #E40046; color: #5018dd;
font-size: 15pt; font-size: 15pt;
} }
.menu-launcher:hover { .menu-launcher:hover {
color: #5018dd; color: #E40046;
} }
// notification-history launcher button (mnotifhist) magenta, matches // notification-history launcher button (mnotifhist) purple by default,
// beacon/transmitter-panel's own notification-card accent colour // hot-pink accent on hover or while any notification is cached in history
// (.notif-launcher-active, set in eww.yuck from the notif-active poll)
.notif-launcher { .notif-launcher {
color: #EB00A6; color: #5018dd;
font-size: 15pt; font-size: 15pt;
} }
.notif-launcher:hover { .notif-launcher:hover,
.notif-launcher.notif-launcher-active {
color: #E40046; color: #E40046;
} }

View File

@ -14,6 +14,12 @@
(defpoll battery :interval "2s" (defpoll battery :interval "2s"
"~/.config/scripts/batteryperc") "~/.config/scripts/batteryperc")
; notif-active poll — true while mnotifd's history cache holds any entries
; (survives past whatever's currently on screen). Drives the
; .notif-launcher-active accent highlight above.
(defpoll notif-active :interval "2s"
"~/Dotfiles/desktopenvs/hyprlua/scripts/notif-active-status.sh")
(defwidget bar [monitor_] (defwidget bar [monitor_]
@ -26,9 +32,14 @@
(box :orientation "h" :space-evenly false :halign "start" (box :orientation "h" :space-evenly false :halign "start"
(osk) (osk)
(box :class "music" {"${battery}"}) (box :class "music" {"${battery}"})
(button :class "music menu-launcher" :onclick "~/.config/scripts/menu-toggle.sh toggle top" {""}) (button :class "icon-btn menu-launcher" :valign "center" :width 26 :height 26
; notification-history launcher :orientation "h" :space-evenly false :halign "center"
(button :class "music notif-launcher" :onclick "~/.config/scripts/mnotifhist.sh" {"󰂚"}) :onclick "~/.config/scripts/menu-toggle.sh toggle top" {""})
; notification-history launcher — accent-coloured while any
; notification is cached (notif-active poll below)
(button :class {notif-active == "true" ? "icon-btn notif-launcher notif-launcher-active" : "icon-btn notif-launcher"}
:valign "center" :width 26 :height 26 :orientation "h" :space-evenly false :halign "center"
:onclick "~/.config/scripts/mnotifhist.sh" {"󰂚"})
; Volume slider — 󰓃 icon, drag to adjust, tap to open audio-panel ; Volume slider — 󰓃 icon, drag to adjust, tap to open audio-panel
; (the PipeWire mixer panel — Applications/Output/Input/General tabs) ; (the PipeWire mixer panel — Applications/Output/Input/General tabs)
(metric :label "󰓃 " (metric :label "󰓃 "
@ -184,7 +195,8 @@
; Colour tracks presence (pink accent); the glyph is coffee whenever manually ; Colour tracks presence (pink accent); the glyph is coffee whenever manually
; inhibiting, else the eye when only presence holds it, else the sleep glyph. ; inhibiting, else the eye when only presence holds it, else the sleep glyph.
(defwidget caffeine [] (defwidget caffeine []
(button :class {presence-active == "true" ? "music caffeine-presence" : "music"} (button :class {presence-active == "true" ? "icon-btn caffeine-presence" : "icon-btn"}
:valign "center" :width 26 :height 26 :orientation "h" :space-evenly false :halign "center"
:onclick "~/Dotfiles/desktopenvs/hyprlua/scripts/caffeine.sh" :onclick "~/Dotfiles/desktopenvs/hyprlua/scripts/caffeine.sh"
:tooltip {caffeine-manual == "true" :tooltip {caffeine-manual == "true"
? (presence-active == "true" ? "Caffeine: ON (manual + presence)" : "Caffeine: ON (manual)") ? (presence-active == "true" ? "Caffeine: ON (manual + presence)" : "Caffeine: ON (manual)")

View File

@ -109,21 +109,23 @@ menuitem:hover {
color: #E40046; color: #E40046;
} }
// astal-menu launcher button accent-coloured icon, highlight on hover // astal-menu launcher button purple by default, hot-pink accent on hover
.menu-launcher { .menu-launcher {
color: #E40046; color: #5018dd;
font-size: 15pt; font-size: 15pt;
} }
.menu-launcher:hover { .menu-launcher:hover {
color: #5018dd; color: #E40046;
} }
// notification-history launcher button (mnotifhist) magenta, matches // notification-history launcher button (mnotifhist) purple by default,
// beacon/transmitter-panel's own notification-card accent colour // hot-pink accent on hover or while any notification is cached in history
.notif-launcher { // (.notif-launcher-active, set in eww.yuck from the notif-active poll)
color: #EB00A6; .notif-launcher {
font-size: 15pt; color: #5018dd;
} font-size: 15pt;
.notif-launcher:hover { }
.notif-launcher:hover,
.notif-launcher.notif-launcher-active {
color: #E40046; color: #E40046;
} }

View File

@ -37,6 +37,12 @@
(defpoll battery :interval "2s" (defpoll battery :interval "2s"
"~/Dotfiles/desktopenvs/hyprland/scripts/batteryperc") "~/Dotfiles/desktopenvs/hyprland/scripts/batteryperc")
; notif-active poll — true while mnotifd's history cache holds any entries
; (survives past whatever's currently on screen). Drives the
; .notif-launcher-active accent highlight below.
(defpoll notif-active :interval "2s"
"~/Dotfiles/desktopenvs/hyprlua/scripts/notif-active-status.sh")
; defwidget bar — root bar widget. Uses centerbox to split into three zones: ; defwidget bar — root bar widget. Uses centerbox to split into three zones:
@ -56,8 +62,10 @@
(box :orientation "h" :space-evenly false :halign "start" (box :orientation "h" :space-evenly false :halign "start"
; astal-menu launcher — opens the popup control centre / app drawer ; astal-menu launcher — opens the popup control centre / app drawer
(button :class "music menu-launcher" :onclick "~/.config/scripts/menu-toggle.sh toggle top" {""}) (button :class "music menu-launcher" :onclick "~/.config/scripts/menu-toggle.sh toggle top" {""})
; notification-history launcher — opens mnotifhist ; notification-history launcher — opens mnotifhist; accent-coloured
(button :class "music notif-launcher" :onclick "~/.config/scripts/mnotifhist.sh" {"󰂚"}) ; while any notification is cached (notif-active poll above)
(button :class {notif-active == "true" ? "music notif-launcher notif-launcher-active" : "music notif-launcher"}
:onclick "~/.config/scripts/mnotifhist.sh" {"󰂚"})
; Battery percentage badge — styled as a pill with class "music" ; Battery percentage badge — styled as a pill with class "music"
(box :class "music" {"${battery}"}) (box :class "music" {"${battery}"})
; Workspace dots — one button per active workspace on this monitor ; Workspace dots — one button per active workspace on this monitor

View File

@ -34,7 +34,7 @@ drawingarea {
/* the card */ /* the card */
.mnotifd-card { .mnotifd-card {
background-color: @violet; background-color: @bg;
border: 2px solid @violet; border: 2px solid @violet;
border-radius: 12px; border-radius: 12px;
padding: 12px 14px; padding: 12px 14px;
@ -71,7 +71,7 @@ drawingarea {
/* action pills */ /* action pills */
.mnotifd-action { .mnotifd-action {
color: @text; color: @text;
background-color: @violet; background-color: @bg;
border: 2px solid @violet; border: 2px solid @violet;
border-radius: 20px; border-radius: 20px;
padding: 2px 12px; padding: 2px 12px;
@ -92,7 +92,7 @@ drawingarea {
} }
.mnotifd-toggle { .mnotifd-toggle {
background-color: @violet; background-color: @bg;
border: 2px solid @violet; border: 2px solid @violet;
border-radius: 20px; border-radius: 20px;
min-width: 40px; min-width: 40px;
@ -108,7 +108,7 @@ drawingarea {
} }
.mnotifd-slider trough { .mnotifd-slider trough {
background-color: @violet; background-color: @bg;
border: 2px solid @violet; border: 2px solid @violet;
border-radius: 20px; border-radius: 20px;
min-height: 8px; min-height: 8px;
@ -127,7 +127,7 @@ drawingarea {
.mnotifd-entry { .mnotifd-entry {
color: @text; color: @text;
background-color: @violet; background-color: @bg;
border: 2px solid @violet; border: 2px solid @violet;
border-radius: 12px; border-radius: 12px;
padding: 2px 10px; padding: 2px 10px;

View File

@ -34,7 +34,7 @@ drawingarea {
/* the card */ /* the card */
.mnotifd-card { .mnotifd-card {
background-color: @violet; background-color: @bg;
border: 2px solid @violet; border: 2px solid @violet;
border-radius: 12px; border-radius: 12px;
padding: 12px 14px; padding: 12px 14px;
@ -71,7 +71,7 @@ drawingarea {
/* action pills */ /* action pills */
.mnotifd-action { .mnotifd-action {
color: @text; color: @text;
background-color: @violet; background-color: @bg;
border: 2px solid @violet; border: 2px solid @violet;
border-radius: 20px; border-radius: 20px;
padding: 2px 12px; padding: 2px 12px;
@ -92,7 +92,7 @@ drawingarea {
} }
.mnotifd-toggle { .mnotifd-toggle {
background-color: @violet; background-color: @bg;
border: 2px solid @violet; border: 2px solid @violet;
border-radius: 20px; border-radius: 20px;
min-width: 40px; min-width: 40px;
@ -108,7 +108,7 @@ drawingarea {
} }
.mnotifd-slider trough { .mnotifd-slider trough {
background-color: @violet; background-color: @bg;
border: 2px solid @violet; border: 2px solid @violet;
border-radius: 20px; border-radius: 20px;
min-height: 8px; min-height: 8px;
@ -127,7 +127,7 @@ drawingarea {
.mnotifd-entry { .mnotifd-entry {
color: @text; color: @text;
background-color: @violet; background-color: @bg;
border: 2px solid @violet; border: 2px solid @violet;
border-radius: 12px; border-radius: 12px;
padding: 2px 10px; padding: 2px 10px;

View File

@ -29,7 +29,7 @@ drawingarea {
} }
.tx-panel { .tx-panel {
background-color: @violet; background-color: @bg;
border: 2px solid @violet; border: 2px solid @violet;
border-radius: 12px; border-radius: 12px;
padding: 14px 16px; padding: 14px 16px;
@ -46,7 +46,7 @@ drawingarea {
.tx-clear-all { .tx-clear-all {
color: @text; color: @text;
background-color: @violet; background-color: @bg;
border: 2px solid @violet; border: 2px solid @violet;
border-radius: 20px; border-radius: 20px;
padding: 4px 14px; padding: 4px 14px;

View File

@ -29,7 +29,7 @@ drawingarea {
} }
.tx-panel { .tx-panel {
background-color: @violet; background-color: @bg;
border: 2px solid @violet; border: 2px solid @violet;
border-radius: 12px; border-radius: 12px;
padding: 14px 16px; padding: 14px 16px;
@ -46,7 +46,7 @@ drawingarea {
.tx-clear-all { .tx-clear-all {
color: @text; color: @text;
background-color: @violet; background-color: @bg;
border: 2px solid @violet; border: 2px solid @violet;
border-radius: 20px; border-radius: 20px;
padding: 4px 14px; padding: 4px 14px;

View File

@ -0,0 +1,14 @@
#!/bin/bash
# Reports whether mnotifd's notification history currently holds any cached
# entries (persists across dismissed/expired cards — see mnotifd/history.py's
# HISTORY_FILE), not just whatever's live on screen right now.
#
# Prints "true" while at least one entry is cached, else "false".
HISTORY_FILE="${XDG_CACHE_HOME:-$HOME/.cache}/mnotifd/history.json"
if [[ -s "$HISTORY_FILE" ]] && jq -e 'length > 0' "$HISTORY_FILE" >/dev/null 2>&1; then
echo "true"
else
echo "false"
fi