More eww styling

tree/.config/eww/eww.scss

@@ -1,9 +1,9 @@
-$text: #f6daa8;
+$text: #e0c1c1;
-$highlight1: #4e8172;
+$highlight1: #fdab70;
-$highlight2: #679a8b;
+$highlight2: white;
-$background: #23231b;
+$background: #0f0f0f;
+$lowlight2: #272727;
 $lowlight1: black;
-$lowlight2: #1d1f21;
 $transparent: rgba(#000000, 0.0);
 
 *{
@@ -13,19 +13,24 @@ $transparent: rgba(#000000, 0.0);
 }
 
 window {
-	background: rgba($background, 0.85);
+}
-	border-radius: 15px;
+
+.sidebar {
+	margin-top: 10px;
+	margin-left: 5px;
+	background: rgba($background, 1.0);
+	border-radius: 30px;
+	margin-bottom: 10px;
 }
 
 .workspace {
 	font-size: 18px;
-	font-weight: 300;
+	font-weight: 400;
-	border: solid $highlight1 1px;
+	border: dashed $highlight1 1px;
 	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;
@@ -42,22 +47,22 @@ window {
 }
 
 .bottom {
-	background-image: linear-gradient(to right, $transparent 40%, $highlight1 40%, $highlight1 60%, $transparent 60% );
+	//background-image: linear-gradient(to right, $transparent 40%, $highlight1 40%, $highlight1 60%, $transparent 60% );
 	margin-bottom: 2px;
 }
 
 .thingy {
-	border: solid $highlight1 2px;
+	//border: solid $highlight1 2px;
-	border-top: solid $highlight1 1px;
+	//border-top: solid $highlight1 1px;
-	border-bottom: solid $highlight2 3px;
+	//border-bottom: solid $highlight2 3px;
 	//border-bottom: dotted $highlight1 6px;
-	color: $highlight1;
+	//color: $highlight1;
-	background: $lowlight1;
+	//background: $lowlight1;
-	border-radius: 30px;
+	//border-radius: 30px;
 	padding-top: 0.5em;
-	padding-bottom: 0.4em;
+	padding-bottom: 0.5em;
-	margin-top: 10px;
 	min-height: 20px;
+	border-top: solid $highlight1 2px;
 }
 
 scale trough {
@@ -89,16 +94,15 @@ scale trough {
 
 .vpn {
 	font-size: 40px;
-	color: $highlight1;
-	border-color: green;
 	margin: 2px;
 	margin-top: -10px;
-	transition: all 0.2s;
 }
 
 .vpn label {
 	margin-top: -5px;
 	margin-bottom: -5px;
+	transition: color 0.5s;
+	color: green;
 }
 
 .vpn:hover {
@@ -109,35 +113,48 @@ scale trough {
 	background-color: $highlight1;
 }
 
-.vpn.connecting {
+.vpn.connecting label {
-	border-color: orange;
+	color: orange;
 }
 
-.vpn.disconnected {
+.vpn.disconnected label {
-	border-color: red;
+	color: red;
 }
 
 .calendar {
 	background: $lowlight2;
 }
 
-.date {
+.clickable {
-	transition: all 0.2s;
+	transition: background-color 0.2s;
 }
-.date:hover {
+.clickable:hover {
 	background-color: $lowlight2;
 }
-.date:active {
+.clickable:active {
 	background-color: $highlight1;
 }
 
+.date {
+	transition: all 0.2s;
+}
+
 .clock {
-	font-size: 30px;
+	font-size: 25px;
 	font-weight: 400;
 	color: $highlight1;
 	margin-bottom: -1px;
+	padding-top: 18px;
 }
 .clock label {
 	padding: 0;
-	margin-top: -11px;
+	margin-top: -8px;
+}
+
+.pwrbtn {
+	font-size: 35px;
+	font-weight: 400;
+	border-bottom-left-radius: 30px;
+	border-bottom-right-radius: 30px;
+	margin-bottom: -2px;
 }

tree/.config/eww/eww.yuck

@@ -1,13 +1,11 @@
 (defwindow bar0
 	:monitor 0
-	:geometry (geometry :y "0%"
+	:geometry (geometry :height "100%"
-	                    :x "3px"
+	                    :width "40px"
-	                    :height "90%"
-	                    :width "50px"
 	                    :anchor "center left")
 	:stacking "fg"
 	:exclusive true
-	(centerbox :orientation "v"
+	(centerbox :orientation "v" :active true :class "sidebar"
 		(workspaces)
 		(middle)
 		(bottom)
@@ -15,15 +13,14 @@
 
 (defwindow bar1
 	:monitor 1
-	:geometry (geometry :y "0%"
+	:geometry (geometry :height "100%"
-	                    :x "3px"
-	                    :height "90%"
 	                    :width "50px"
 	                    :anchor "center left")
 	:stacking "fg"
 	:exclusive true
-	(box :orientation "v" :space-evenly: false
+	(centerbox :orientation "v" :active true :class "sidebar"
 		(workspaces)
+		(middle)
 		(bottom)
 ))
 
@@ -45,6 +42,7 @@
 		(box :class "thingy" (systray :orientation "v"))
 		(date)
 		(clock)
+		(pwr)
 ))
 
 (defwidget workspaces []
@@ -111,7 +109,7 @@
 		(calendar :class "calendar")
 		(button :onclick "ba gnome-calendar"
 		        :hexpand true
-		        :class "thingy date"
+		        :class "thingy date clickable"
 			(box :orientation "v"
 				(label :text current_month)
 				(label :text current_day)
@@ -125,7 +123,32 @@
 		(label :text current_minute)
 ))
 
+(defwidget pwr []
+	(button :orientation "v"
+		    :valign "end"
+		    :class "thingy pwrbtn clickable"
+			:onclick "${EWW_CMD} open --toggle pwrctl"
+		(label :text "⏻")
+))
+
+(defwindow pwrctl
+	:monitor 0
+	:geometry (geometry :y "5%"
+	                    :x "20px"
+	                    :height "200px"
+	                    :width "300px"
+	                    :anchor "bottom left")
+	:stacking "fg"
+	;:exclusive true
+	(box :orientation "v"
+	     :valign "end"
+	     :class "thingy"
+		(label :text "SLEEP")
+		(label :text "OFF")
+))
+
 (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")

tree/.config/hypr/hyprland.conf.tpl

@@ -59,13 +59,7 @@ general {
     # See https://wiki.hyprland.org/Configuring/Variables/ for more
 
     gaps_in = 5
-{% if hostname == "sputnik" %}
-    gaps_out = 10
-{% elif hostname == "buran" %}
     gaps_out = 5
-{% else %}
-    gaps_out = 20
-{% end %}
     border_size = 2
     col.active_border = rgba(f5deb3ff) rgba(f5deb3ee) 45deg
     col.inactive_border = rgba(595959aa)