Eww: Modularized and improved CSS

modules/home/wayland/apps/eww/bar/css/_clock.scss

@@ -1,8 +1,4 @@
 .calendar-win {
-  @include window;
-  background-color: $bg1;
-  color: $fg;
-  padding: .2em;
 }
 
 calendar {
@@ -50,5 +46,6 @@ calendar {
 }
 
 .datetime {
-  padding: $border-width;
+  padding: $gaps-window;
+  
 }

modules/home/wayland/apps/eww/bar/css/_radio.scss

@@ -1,10 +1,7 @@
 
 .radio-win {
-    @include window;
+    //margin: $gaps-screen;
-    background-color: $bg1;
+    //padding: .5em;
-    color: $fg;
-    margin: $gaps-screen;
-    padding: .5em;
   }
 
 .album_art {

modules/home/wayland/apps/eww/bar/css/_sys.scss

@@ -65,11 +65,11 @@ color: $base0B;
 }
 
 .sys-win {
-    @include window;
+    // @include window;
-    background-color: $bg1;
+    // background-color: $bg1;
-    color: $fg;
+    // color: $fg;
-    margin: $gaps-screen;
+    // margin: $gaps-screen;
-    padding: .5em;
+    // padding: .5em;
   }
 
   .sys-label {

modules/home/wayland/apps/eww/bar/eww.scss

@@ -1,20 +1,26 @@
 @import 'css/colors';
 
-@mixin rounding {
+/* MIXIN */
+
+@mixin border-radius {
   border-radius: $border-radius;
 }
 
-@mixin window {
+@mixin border-inactive {
-  border: $border-width solid $base04;
+  border-width: $border-width;
-  margin: $gaps-screen $gaps-screen $gaps-screen;
+  border-style: solid;
-  @include rounding;
+  border-color: $base03;
 }
 
-@import 'css/sys';
+@mixin border-active {
-@import 'css/net';
+  border-color: $base04;
-@import 'css/clock';
+}
-@import 'css/radio';
+
-@import 'css/powermenu';
+@mixin test {
+
+}
+
+/*  GENERAL */
 
 * {
   all: unset;
@@ -22,14 +28,6 @@
   transition: 200ms ease;
 }
 
-.bar {
-  color: $fg;
-
-  label {
-    font-size: 1.2rem;
-  }
-}
-
 tooltip {
   background: $base01;
   border: $border-width solid $base04;
@@ -43,33 +41,6 @@ tooltip {
 .icon,
 .icon label { font-family: Material Design Icons; }
 
-.ws {
-  border-radius: $border-radius;
-  margin: $gaps-window;
-}
-
-.focused {
-  background-color: $bg1;
-  border-radius: 1rem;
-  margin: .3rem;
-  padding: .25rem;
-}
-
-.module {
-  background: $base01;
-  border-radius: $border-radius;
-  border-color: $base03;
-  border-style: solid;
-  border-width: $border-width;
-  border-right-style: none;
-  border-bottom-right-radius: 0;
-  border-top-right-radius: 0;
-  padding: $gaps-screen $gaps-window;
-  margin: $gaps-screen 0;
-}
-
-
-
 .grey {
   background-color: $base02;
 }
@@ -88,4 +59,74 @@ tooltip {
 
 .blue {
   background-color: $base0C;
-}
+}
+
+/* WINDOW WRAPPER CSS */
+
+.winevent {
+  background-color: $base01;
+  color: $base07;
+  @include border-radius;
+  @include border-inactive;
+}
+.winevent:hover {
+  @include border-active;
+}
+
+.wininner {
+  padding: $gaps-window;
+}
+.winouter {
+  margin: $gaps-screen;
+}
+
+/* MODULE WRAPPER CSS */
+
+.modevent {
+  background-color: $base01;
+  color: $base07;
+  @include border-radius;
+  @include border-inactive;
+  border-right-style: none;
+  border-bottom-right-radius: 0;
+  border-top-right-radius: 0;
+}
+.modevent:hover {
+  @include border-active;
+}
+
+.modinner {
+  padding: $gaps-screen 0 $gaps-screen $gaps-window;
+}
+.modouter {
+  margin: $gaps-screen 0;
+}
+
+/* IMPORTS EXTERNAL */
+
+@import 'css/sys';
+@import 'css/net';
+@import 'css/clock';
+@import 'css/radio';
+@import 'css/powermenu';
+
+
+/* BAR */
+
+.bar label {
+  font-size: 1.2rem;
+}
+
+/* WORKSPACE */
+
+.ws {
+  border-radius: $border-radius;
+  margin: $gaps-window;
+}
+
+.focused {
+  background-color: $bg1;
+  border-radius: 1rem;
+  margin: .3rem;
+  padding: .25rem;
+}

modules/home/wayland/apps/eww/bar/eww.yuck

@@ -16,7 +16,7 @@
     :orientation "v"
     :halign "end"
     :valign "start"
-    (workspaces)))
+    (workspace-mod)))
 
 (defwidget right []
   (box
@@ -24,9 +24,9 @@
     :orientation "v"
     :halign "end"
     :valign "end"
-    (sys)
+    (sys-mod)
-    (net)
+    (net-mod)
-    (clock)))
+    (clock-mod)))
 
 (defwidget center []
   (box
@@ -34,7 +34,7 @@
     :orientation "v"
     :halign "end"
     :valign "center"
-   (radio-button)))
+   (radio-mod)))
 
 (defwidget bar-box []
   (centerbox
@@ -56,3 +56,30 @@
     :stacking "fg"
     :exclusive true
   (bar-box))
+
+(defwidget window []
+  (box
+    :class "winouter"
+    (eventbox
+      :class "winevent"
+      (box
+        :class "wininner"
+        (children)
+      )
+    )
+  )
+)
+
+
+(defwidget module []
+  (box
+    :class "modouter"
+    (eventbox
+      :class "modevent"
+      (box
+        :class "modinner"
+        (children)
+      )
+    )
+  )
+)

modules/home/wayland/apps/eww/bar/modules/clock.yuck

@@ -1,20 +1,21 @@
 (defvar date_rev false)
 
-(defwidget clock []
+(defwidget clock-mod []
-  (box
+  (module
-    :class "module datetime"
     (eventbox
       :onhover "${EWW_CMD} update date_rev=true"
       :onhoverlost "${EWW_CMD} update date_rev=false"
-      (overlay
+      (box
-        (box
+        :class "datetime"
-          :orientation "v"
+        (overlay
-          (button
+          (box
-            :class "hour" hour)
+            :orientation "v"
-          (button
+            (button
-            :class "minute" minute))
+              :class "hour" hour)
-        (revealer
+            (button
-          :reveal date_rev
+              :class "minute" minute))
+          (revealer
+            :reveal date_rev
             (box
               :class "date"
               :orientation "v"
@@ -25,7 +26,13 @@
               (button
                 :onclick "${EWW_CMD} open --toggle calendar"
                 :onrightclick "${EWW_CMD} open --toggle powermenu"
-                :class "month" month)))))))
+                :class "month" month))
+          )
+        )
+      )
+    )
+  )
+)
 
 (defpoll hour	:interval "15s"	"date '+%H'")
 (defpoll minute	:interval "15s"	"date '+%M'")

modules/home/wayland/apps/eww/bar/modules/net.yuck

@@ -1,16 +1,17 @@
 (deflisten net :initial '{"name":"","icon":""}'"scripts/net/net")
 
-(defwidget net []
+(defwidget net-mod []
-  (box
+  (module
-    :class "module"
+    (box
-    :orientation "v"
+      :orientation "v"
-    (button
+      (button
-      :class "net"
+        :class "net"
-      :tooltip {net.name}
+        :tooltip {net.name}
-      {net.icon})
+        {net.icon})
 
-    (button
+      (button
-      :class "blt"
+        :class "blt"
-      (label :class "icon-text" :text "B"))
+        (label :class "icon-text" :text "B"))
+    )
   )
 )

modules/home/wayland/apps/eww/bar/modules/sys.yuck

@@ -4,38 +4,40 @@
 
 (deflisten battery :initial '{"visible":false,"percentage":0.0,"color":"#FFFFFF"}' "scripts/sys/battery")
 
-(defwidget sys []
+(defwidget sys-mod []
-  (button
+  (module
-    :onclick "${EWW_CMD} open --toggle sys"
+    (button
-    (box
       :class "module"
+      :onclick "${EWW_CMD} open --toggle sys"
+      (box
       :orientation "v"
-      (circular-progress
+        (circular-progress
-        :value {EWW_CPU.avg}
+          :value {EWW_CPU.avg}
-        :class "cpubar"
+          :class "cpubar"
-        :thickness 6
+          :thickness 6
-        (label :class "icon-text" :text "C"))
+          (label :class "icon-text" :text "C"))
 
-      (circular-progress
+        (circular-progress
-        :value {gpu.devices[0].GRBM2?.CommandProcessor-Graphics?.value?:0}
+          :value {gpu.devices[0].GRBM2?.CommandProcessor-Graphics?.value?:0}
-        :class "gpubar"
+          :class "gpubar"
-        :thickness 6
+          :thickness 6
-        (label :class "icon-text" :text "G"))
+          (label :class "icon-text" :text "G"))
 
-      (circular-progress
+        (circular-progress
-        :value {100*memory.used/memory.total}
+          :value {100*memory.used/memory.total}
-        :class "membar"
+          :class "membar"
-        :thickness 6
+          :thickness 6
-        :tooltip "${memory.human.used} / ${memory.human.total}"
+          :tooltip "${memory.human.used} / ${memory.human.total}"
-        (label :class "icon-text" :text "M"))
+          (label :class "icon-text" :text "M"))
 
-      (circular-progress
+        (circular-progress
-        :value {battery.percentage}
+          :value {battery.percentage}
-        :class "batbar"
+          :class "batbar"
-        :visible {battery.visible}
+          :visible {battery.visible}
-        :style "color: ${battery.color};"
+          :style "color: ${battery.color};"
-        :thickness 6
+          :thickness 6
-        (label :class "icon-text" :text "B"))
+          (label :class "icon-text" :text "B"))
+      )
     )
   )
 )

modules/home/wayland/apps/eww/bar/modules/workspaces.yuck

@@ -1,6 +1,7 @@
 (deflisten workspace :initial '[]' "scripts/workspaces")
 
-(defwidget workspaces []
+(defwidget workspace-mod []
+  (module
   (eventbox
 		:onscroll "echo {} | sed -e \"s/up/-1/g\" -e \"s/down/+1/g\" | xargs hyprctl dispatch workspace"
 		(box
@@ -13,4 +14,4 @@
 					; :tooltip {ws.tooltip}
 					(box
 						:class `${ws.focused ? "focused" : ""}`
-						:height 3))))))
+						:height 3)))))))

modules/home/wayland/apps/eww/bar/windows/calendar.yuck

@@ -1,8 +1,3 @@
-(defwidget calendar-win []
-  (box
-    :class "calendar-win"
-    (calendar)))
-
 (defwindow calendar
   :monitor 0
   :geometry (geometry
@@ -11,4 +6,4 @@
   	:anchor "bottom right"
     :width "0px"
     :height "0px")
-  (calendar-win))
+  (window (calendar)))

modules/home/wayland/apps/eww/bar/windows/radio.yuck

@@ -1,11 +1,6 @@
 (deflisten radio :initial '{"is_paused":1,"song":{"artist":"","song":"","image600":"https://www.radiorecord.ru/upload/stations_images/record_image600_white_fill.png"},"stations":[]}' "scripts/radio")
 (defvar radio_rev false)
 
-(defwidget radio-win []
-  (box
-    :class "radio-win"
-    (radio)))
-
 (defwindow radio
   :monitor 0
   :geometry (geometry
@@ -14,10 +9,10 @@
   	:anchor "bottom right"
     :width "0px"
     :height "0px")
-  (radio-win))
+  (window (radio-win)))
 
 
-(defwidget radio [] 
+(defwidget radio-win [] 
 	(box 
       :space-evenly false
       :orientation "h" 
@@ -100,10 +95,14 @@
   )
 )
 
-(defwidget radio-button []
+(defwidget radio-mod []
-  (button
+  (module
-    :onclick "${EWW_CMD} open --toggle --no-daemonize radio"
+    (box
-      (box
-      :class "module"
       :orientation "v"
-       "󰎆")))
+      (button
+        :onclick "${EWW_CMD} open --toggle --no-daemonize radio"
+        "󰎆"
+      )
+    )
+  )
+)

modules/home/wayland/apps/eww/bar/windows/sys.yuck

@@ -114,10 +114,11 @@
 
 (defwindow sys
   :monitor 0
+  :stacking "overlay"
   :geometry (geometry
     :x "0%"
     :y "0%"
   	:anchor "bottom right"
     :width "0px"
     :height "0px")
-  (sys-win))
+  (window (sys-win)))