Improve ewwbar

tree/.config/eww/eww.scss

@@ -1,9 +1,9 @@
-//$text: wheat;
 $text: #f6daa8;
 $highlight1: #4e8172;
 $highlight2: #679a8b;
-$background: #1d2021;
 $background: #23231b;
+$lowlight1: black;
+$lowlight2: #1d1f21;
 
 *{
 	all: unset;
@@ -20,21 +20,19 @@ window {
 	font-size: 18px;
 	font-weight: 300;
 	border: solid $highlight1 1px;
-	background: black;
+	background: $lowlight1;
 	border-radius: 30px;
 	padding-top: 3px;
 	padding-bottom: 5px;
 	margin: 8px;
 	margin-top: 3px;
 	margin-bottom: 3px;
-    box-shadow: 0 0px 5px 1px #06060b;
+	box-shadow: 0 0px 5px 1px #06060b;
 	transition: all 1s;
 }
 
 .workspace.active {
-	font-weight: 600;
+	border: solid $highlight2 2px;
-	background: $text;
-	color: black;
 }
 
 .workspaces {
@@ -47,21 +45,29 @@ window {
 	border-top: solid $highlight1 1px;
 	border-bottom: dotted $highlight1 6px;
 	color: $highlight1;
-	background: black;
+	background: $lowlight1;
 	border-radius: 30px;
 	padding-top: 0.5em;
 	padding-bottom: 0.3em;
-    box-shadow: 0 0px 5px 1px #06060b;
+	margin-top: 20px;
 }
 
 scale trough {
-  all: unset;
+	all: unset;
-  background-color: #22242b;
+	background-color: #22242b;
-  box-shadow: 0 0px 5px 1px #06060b;
+	box-shadow: 0 0px 5px 1px #06060b;
-  border-radius: 16px;
+	border-radius: 16px;
-  min-width: 16px;
+	min-width: 16px;
-  min-height: 70px;
+	min-height: 70px;
-  margin: 0px 0px 0px 0px;
+	margin: 0px 0px 0px 0px;
+}
+
+.volbox {
+	transition: all 0.5s;
+}
+
+.volbox.active {
+	background-color: $lowlight2;
 }
 
 .volume {
@@ -69,8 +75,8 @@ scale trough {
 }
 
 .volume trough highlight {
-    background-image: linear-gradient(to right, $highlight2 30%, $highlight1 50%, $highlight1 100% *50);
+	background-image: linear-gradient(to right, $highlight2 30%, $highlight1 50%, $highlight1 100% *50);
-    border-radius: 10px;
+	border-radius: 10px;
 }
 
 .battery {
@@ -84,8 +90,7 @@ scale trough {
 	border-color: green;
 	margin: 2px;
 	margin-top: 20px;
-	transition: border-color 1s;
+	transition: all 0.2s;
-	transition: all 1s;
 }
 
 .vpn label {
@@ -94,7 +99,11 @@ scale trough {
 }
 
 .vpn:hover {
-	border-top: dotted 6px;
+	background-color: $lowlight2;
+}
+
+.vpn:active {
+	background-color: $highlight1;
 }
 
 .vpn.connecting {
@@ -105,6 +114,10 @@ scale trough {
 	border-color: red;
 }
 
+.calendar {
+	background: $lowlight2;
+}
+
 .clock {
 	font-size: 30px;
 	font-weight: 400;

tree/.config/eww/eww.yuck

@@ -7,8 +7,9 @@
 	                    :anchor "center left")
 	:stacking "fg"
 	:exclusive true
-	(box :orientation "v"
+	(centerbox :orientation "v"
 		(workspaces)
+		(middle)
 		(bottom)
 ))
 
@@ -21,18 +22,27 @@
 	                    :anchor "center left")
 	:stacking "fg"
 	:exclusive true
-	(box :orientation "v"
+	(box :orientation "v" :space-evenly: false
 		(workspaces)
 		(bottom)
 ))
 
+(defwidget middle []
+	(box :orientation "v"
+	     :space-evenly false
+	     :valign "center"
+))
+
 (defwidget bottom []
 	(box :orientation "v"
 	     :space-evenly false
 	     :valign "end"
-		(speaker)
 		(vpn)
+		(speaker)
+		(temperature)
 		(battery)
+		(box :class "boxed" (systray :orientation "v"))
+		(date)
 		(clock)
 ))
 
@@ -40,37 +50,69 @@
 	(box :orientation "v"
 	     :valign "start"
 	     :class "workspaces"
+		 :space-evenly: false
 		(for workspace in workspaces_json
-			(label :class 'workspace ${workspace.class}' :text '${workspace.id}')
+			(button :class 'workspace ${workspace.class}' (label :text '${workspace.id}'))
 )))
 
 (defwidget speaker []
-	(box :class "volume"
+	(eventbox
-	     :orientation "v"
+	          :onhover "${EWW_CMD} update show_volume=true"
-	     :valign "end"
+	          :onhoverlost "${EWW_CMD} update show_volume=false"
-		(scale :orientation "v"
+		(box :orientation "v"
-		       :flipped true
+		     :class "boxed volbox ${show_volume ? "active" : ""}"
-		       :min 0
+			 :space-evenly false
-		       :max 100
+			(revealer :transition "slidedown"
-		       :value volume_out
+			          :reveal show_volume
-		       :onchange "pamixer --set-volume {} && volshow")
+				(scale :orientation "v"
-))
+				       :class "volume"
+				       :flipped true
+				       :min 0
+				       :max 100
+				       :value volume_out
+				       :onchange "pamixer --set-volume {} && volshow"
+			))
+			(label :text "VOL")
+			(revealer :transition "slideup"
+			          :reveal {!show_volume}
+				(label :text volume_out)
+			)
+)))
 
 (defwidget vpn []
 	(button :valign "end"
 	        :class "vpn boxed ${vpn_status.class}"
 	        :onclick "${vpn_status.on_click}"
+			:tooltip "${vpn_status.tooltip}"
 		(label :text "${vpn_status.icon}")
 ))
 
+(defwidget temperature []
+	(box :orientation "v"
+	     :valign "end"
+	     :class "battery boxed"
+		(label :text "TMP")
+		(label :text "99C")
+))
+
 (defwidget battery []
 	(box :orientation "v"
 	     :valign "end"
 	     :class "battery boxed"
+		 :visible {current_battery != ""}
 		(label :text "BAT")
 		(label :text "${current_battery}%")
 ))
 
+(defwidget date []
+	(tooltip :class "boxed date" :halign "fill"
+		(calendar :class "calendar")
+		
+		(box :orientation "v" :hexpand true
+			(label :text current_month)
+			(label :text current_day)
+)))
+
 (defwidget clock []
 	(box :orientation "v"
 	     :valign "end"
@@ -79,6 +121,7 @@
 		(label :text current_minute)
 ))
 
+(defvar show_volume false)
 (defpoll workspaces_json :interval "1s" "eww-workspaces")
 (defpoll volume_out      :interval "1s" "pamixer --get-volume")
 (defpoll vpn_status      :interval "1s" "mullvad-status")