eww/bar/eww.scss

@@ -16,7 +16,7 @@ $clock:                  rgba(171, 233, 179, 1.0);
 
 $media:           rgba(224, 232, 224, 0.7);
 
-$tray_background: rgba(204, 204, 204, 0.1);
+$tray_bg: rgba(204, 204, 204, 0.1);
 $tray:                 #c9cbff;
 $keyboard:             #f2cdcd;
 $language:             #e8a2af;
@@ -34,12 +34,18 @@ $battery:              #b6b2b3;
 
 * { all: unset; }
 
-.bar {
+.vbar {
-  //background-color: transparent;
+  background-color: transparent;
   margin-left: 5px;
   font-size: 15px;
   font-family: monospace;
 }
+.hbar {
+  background-color: transparent;
+  margin-top: 5px;
+  font-size: 15px;
+  font-family: monospace;
+}
 
 .icon {
   font-size: 20px;
@@ -105,6 +111,27 @@ box .weather {
     color: mix($weather_end, $weather, 100%);
   }
 }
+.audio .audio-scale {
+  color: $audio;
+}
+scale {
+  border-radius: 5px;
+  min-height: 80px;
+  min-width: 10px;
+  margin: .3rem 0 .3rem 0;
+}
+.volume-icon {
+  margin: 2pt 0 2pt 0;
+  color: $audio;
+}
+box .cpu {
+  color: $cpu;
+  padding: 6pt;
+}
+box .memory {
+  color: $memory;
+  padding: 6pt;
+}
 box .clock {
   background-color: $widget_bg;
   border-radius: 5;
@@ -125,6 +152,11 @@ box .clock {
   font-family: monospace;
 }
 
+.systray {
+  background-color: $tray_bg;
+  color: $tray;
+}
+
 // Styles on classes (see eww.yuck for more information)
 
 .status slider {
@@ -162,6 +194,3 @@ box .clock {
   margin-left: 10px;
   margin-right: 20px;
 }
-.label-ram {
-  font-size: large;
-}

eww/bar/eww.yuck

@@ -1,6 +1,6 @@
 (defvar eww "eww --config $HOME/.config/eww/bar")
 
-(defwindow bar
+(defwindow vbar
 	:exclusive true
 	:monitor 0
 	:windowtype "dock"
@@ -12,20 +12,47 @@
 		:anchor "center left"
 	)
 	:reserve (struts :side "left" :distance "20px")
-	(widget_bar))
+	(centerbox
-(defwidget widget_bar []
+		:orientation "v"
-	(centerbox :orientation "v"
 		(box :orientation "v" :space-evenly false :valign "start"
-			(box :class "launcher" :valign "start" "☯")
+			(box :class "launcher" :valign "start" :width "10px" :height "10px" "☯")
-			(widget_workspaces)
+			;(label :class "launcher" :valign "start" :width "20px" :height "20px" :unindent true
+			;	:text "☯")
+			(widget-workspaces)
+		)
+		(widget-media)
+		;(widget-weather :orientation "v")
+		(box :orientation "v" :space-evenly false :valign "end"
+			(widget-tray)
+			(widget-audio)
+			(widget-cpu)
+			(widget-memory)
+			(widget-clock)
 		)
-		(widget_weather :orientation "v")
-		(widget_clock)
-		;(media)
 		;(widget_status)
 	))
+(defwindow hbar
+	:exclusive true
+	:monitor 0
+	:windowtype "dock"
+	:geometry (geometry
+		:x "0%"
+		:y "0%"
+		:width "90%"
+		:height "20px"
+		:anchor "top center"
+	)
+	:reserve (struts :side "top" :distance "20px")
+	(centerbox :orientation "h"
+		(box :orientation "h")
+		(box :orientation "h")
+		(box :orientation "h" :space-evenly false :halign "end"
+			(widget-cpu)
+			(widget-memory)
+		)
+	))
 
-(defwidget widget_workspaces []
+(defwidget widget-workspaces []
 	(box
 		:class "workspaces"
 		:orientation "v"
@@ -44,7 +71,7 @@
 
 ; Weather
 
-(defwidget widget_weather [orientation]
+(defwidget widget-weather [orientation]
 	(box
 		:class "weather"
 		:orientation orientation
@@ -55,7 +82,7 @@
 		(button :onclick "scripts/popup weather" "W")
 	))
 
-(defpoll weather_text :initial "" :interval "180s"
+(defpoll weather-text :initial "" :interval "180s"
 	"curl --max-time 2 wttr.in")
 
 (defwindow weather
@@ -63,26 +90,109 @@
 						:y "50%"
 						:width "270px"
 						:height "60px")
-	(box weather_text))
+	(box weather-text))
 
 
-(defwindow calendar
+(defwidget widget-media []
-	:geometry (geometry :x "70px"
+	(box
-						:y "65%"
+		:class "media"
-						:width "270px"
+		:orientation "v"
-						:height "60px")
+		:space-evenly false
-	(cal))
+		:valign "center"
+		(circular-progress
+			:class "media"
+			:width 20
+			:height 20
+			:thickness 4
+			:tooltip {music_status_listener}
+			:value {music_position}
+			:visible {music_listener != ""}
+		)
+		(label
+			:angle 90
+			:xalign 0.5
+			:yalign 0.5
+			:text {music_listener != "" ? "『${music_listener}』" : ""})
+	))
 
-(defwidget widget_clock []
+(deflisten music_listener :initial ""
+	"playerctl --follow metadata --format '{{ artist }} / {{album}} / {{ title }}' || true")
+(deflisten music_status_listener :initial ""
+	"playerctl --follow metadata --format '{{duration(position)}} / {{duration(mpris:length)}}' || true")
+(deflisten music_position :initial 0.5
+	"playerctl --follow metadata --format '{{100.0 * position / mpris:length}}' || true")
+
+(defwidget widget-audio []
+	(scale
+		:class "audio"
+		:orientation "v"
+		:min 0
+		:max 100
+		:value 23
+	))
+(defwidget widget-audio []
+	(eventbox
+		:onhover "${eww} update show_audio=true"
+		:onhoverlost "${eww} update show_audio=false"
+		(box
+			:class "audio"
+			:orientation "v"
+			:space-evenly "false"
+			:spacing "2"
+			(revealer :transition "slideup" :reveal show_audio
+				(scale
+					:class "audio-scale"
+					:value current-volume
+					:orientation "v"
+					:flipped true
+					:tooltip "Volume: ${current-volume}%"
+					:max 101
+					:min 0
+					:onchange "amixer -D pulse sset Master {}%" ))
+			(button
+				:onclick "scripts/popup audio"
+				:class "volume-icon" ""))))
+(defpoll current-volume :interval "1s" "amixer -D pulse sget Master | grep 'Left:' | awk -F'[][]' '{ print $2 }' | tr -d '%'")
+(defvar show_audio false)
+
+(defwidget widget-cpu []
+	(circular-progress
+			:class "cpu"
+			:width 20
+			:height 20
+			:thickness 4
+			:tooltip {EWW_CPU.cores}
+			:value {EWW_CPU.avg}
+	))
+(defwidget widget-memory []
+	(circular-progress
+			:class "memory"
+			:width 20
+			:height 20
+			:thickness 4
+			:tooltip "${EWW_RAM.used_mem} / ${EWW_RAM.total_mem}"
+			:value {EWW_RAM.used_mem_perc}
+	))
+(defwidget widget-tray []
+	(systray
+		:class "systray"
+		:orientation "v"
+		:space-evenly true
+		:icon-size 20
+		:prepend-new true
+	))
+
+(defwidget widget-clock []
 	(box
 		:class "clock"
 		:orientation "v"
 		:valign "end"
 		:spacing 1
-		(box :class "icon" "")
+		:width 25
-		"${clock.H}" "${clock.M}"
 		(box :class "icon" "")
 		"${clock.m}" "${clock.d}"
+		(box :class "icon" "")
+		"${clock.H}" "${clock.M}"
 	))
 
 (defpoll clock :initial "{}" :interval "10s"
@@ -97,7 +207,7 @@
 						:y "65%"
 						:width "270px"
 						:height "60px")
-(cal))
+	(cal))
 
 
 (defwidget cal []
@@ -117,38 +227,19 @@
 
 ; Unused widgets
 
-(defwidget widget_status []
+;(defwidget widget_status []
-	(box
+;	(box
-		:class "status"
+;		:class "status"
-		:orientation "v"
+;		:orientation "v"
-		:space-evenly false
+;		:space-evenly false
-		:valign "end"
+;		:valign "end"
-		(metric :label ""
+;		(metric :label ""
-		        :value volume
+;		        :value volume
-		        :onchange "amixer -D pulse sset Master {}%")
+;		        :onchange "amixer -D pulse sset Master {}%")
-		(metric :label ""
+;		(metric :label ""
-		        :value {EWW_RAM.used_mem_perc}
+;		        :value {EWW_RAM.used_mem_perc}
-		        :onchange "")
+;		        :onchange "")
-		(widget_clock)))
+;		(widget_clock)))
-
-
-(defwidget widget_media []
-	(box :class "media"
-	     :orientation "v"
-	     :space-evenly false
-	     :valign "center"
-		{music_listener != "" ? "『${music_listener}』" : ""}
-		(box :class "music_status"
-		     :orientation "h"
-		     :space-evenly false
-		     :halign "center"
-			{music_listener != "" ? "${music_status_listener}" : ""})
-	))
-
-(deflisten music_listener :initial ""
-	"playerctl --follow metadata --format '{{ artist }} / {{album}} / {{ title }}' || true")
-(deflisten music_status_listener :initial ""
-	"playerctl --follow metadata --format '{{duration(position)}}/{{duration(mpris:length)}}' || true")
 
 
 (defwidget metric [label value onchange]

hypr/hyprland.conf

@@ -11,7 +11,7 @@ monitor=,preferred,auto,auto
 # See https://wiki.hyprland.org/Configuring/Keywords/ for more
 
 # waybar is executed after eww to have the intersection effect at top left
-exec-once = hyprpaper & swaync & fcitx5 & eww --config ~/.config/eww/bar open bar & waybar
+exec-once = hyprpaper & swaync & fcitx5 & eww --config ~/.config/eww/bar open vbar
 
 # Source a file (multi-file configs)
 # source = ~/.config/hypr/myColors.conf
@@ -52,10 +52,6 @@ decoration {
     # See https://wiki.hyprland.org/Configuring/Variables/ for more
 
     rounding = 10
-    blur = yes
-    blur_size = 3
-    blur_passes = 1
-    blur_new_optimizations = on
 
     drop_shadow = yes
     shadow_range = 4