feat: revealer widget style

hypr-configs/hyprland/eww/assets/scss/global.scss

@@ -1,5 +1,4 @@
 @mixin widget() {
-  color: $white0;
   padding: 6px;
   margin: 4px 2px;
   border-radius: 8px;
@@ -12,5 +11,48 @@
 
 .controlpanel-widget {
   @include widget;
+  margin: 6px;
+}
+
+.border {
+  border: 2px white solid;
+}
+
+button {
+  transition-duration: 0.4s;
+  border-radius: 6px;
+}
+
+button:hover {
+  background-color: $surface2;
+}
+
+.popup {
+  background-color: $base;
+  padding: 5px;
+  border-radius: 5px;
+  border-style: solid;
+  border-color: $surface2;
+  border-width: 2px;
+  margin: 10px;
+}
+
+.mainentry {
+  background-color: $surface1;
+  padding: 5px;
+  border-radius: 5px;
   margin: 5px;
 }
+
+.mainentry label {
+  font-size: 18px;
+  color: $white0;
+}
+
+.smallentry {
+  @extend .mainentry;
+
+  label {
+    font-size: 15px;
+  }
+}

hypr-configs/hyprland/eww/assets/scss/native.scss

@@ -0,0 +1,84 @@
+tooltip {
+  background-color: $surface0;
+  color: $white0;
+  border-radius: 5px;
+  border-style: solid;
+  border-width: 2px;
+  border-color: $surface2;
+}
+
+scale {
+  all: unset;
+
+  trough {
+    background-color: $surface2;
+    border-radius: 24px;
+    min-height: 80px;
+    min-width: 10px;
+    margin: 5px;
+
+    slider {
+      background-color: $white2;
+      border-radius: 25px;
+      min-height: 15px;
+      min-width: 15px;
+      margin: -10px;
+    }
+
+    highlight {
+      background-color: $white0;
+      border-radius: 24px;
+    }
+  }
+}
+
+entry {
+  // image: url('./assets/image/screenshot.png');
+  padding: 5px;
+  margin: 5px;
+  border-radius: 5px;
+  border-style: solid;
+  border-color: $surface2;
+  background-color: $surface1;
+  color: $white0;
+}
+
+calendar {
+  all: unset;
+  background-color: $surface0;
+  font-size: 20;
+  color: $white0;
+}
+
+calendar:selected {
+  color: $base;
+  background-color: $accent;
+  border-radius: 25px;
+}
+
+calendar.header {
+  color: $accent;
+  font-weight: bold;
+}
+
+calendar:indeterminate {
+  color: $surface2;
+}
+
+checkbutton {
+  border-radius: 24px;
+  background-color: $surface1;
+  padding: 4px;
+  check {
+    min-height: 15px;
+    min-width: 15px;
+    color: $white0;
+  }
+}
+
+checkbutton:checked {
+  check {
+    border-radius: 24px;
+    background-color: $white0;
+  }
+}

hypr-configs/hyprland/eww/assets/scss/widgets/revealer.scss

@@ -0,0 +1,3 @@
+.reveal-on-hover {
+  padding: 6px 0px;
+}

hypr-configs/hyprland/eww/eww.scss

@@ -1,151 +1,18 @@
-@import "./assets/scss/themes/feverblush.scss";
+@import "./assets/scss/themes/fullerene.scss";
-
 @import "./assets/scss/global.scss";
+@import "./assets/scss/native.scss";
+
+@import "./assets/scss/widgets/revealer.scss";
 
 @import "./assets/scss/windows/vbar.scss";
-
 @import "./assets/scss/windows/panel.scss";
-
 @import "./src/dashboard/styles.scss";
-
 @import "./src/dock/styles.scss";
-
 @import "./src/desktop/styles.scss";
-
 @import "./src/notification/styles.scss";
 
 * {
   all: unset;
-  color: $white0;
+  color: $white;
-  font-size: 15px;
   font-family: "Iosevka Nerd Font";
-  // font-weight: bold;
-  // font-smooth: never;
-}
-
-.border {
-  border: 2px white solid;
-}
-
-tooltip {
-  background-color: $surface0;
-  color: $white0;
-  border-radius: 5px;
-  border-style: solid;
-  border-width: 2px;
-  border-color: $surface2;
-}
-
-scale {
-  all: unset;
-
-  trough {
-    background-color: $surface2;
-    border-radius: 24px;
-    min-height: 80px;
-    min-width: 10px;
-    margin: 5px;
-
-    slider {
-      background-color: $white2;
-      border-radius: 25px;
-      min-height: 15px;
-      min-width: 15px;
-      margin: -10px;
-    }
-
-    highlight {
-      background-color: $white0;
-      border-radius: 24px;
-    }
-  }
-}
-
-button {
-  transition-duration: 0.5s;
-  border-radius: 5px;
-}
-
-button:hover {
-  background-color: $surface2;
-}
-
-calendar {
-  all: unset;
-  background-color: $surface0;
-  font-size: 20;
-  color: $white0;
-}
-
-calendar:selected {
-  color: $base;
-  background-color: $accent;
-  border-radius: 25px;
-}
-
-calendar.header {
-  color: $accent;
-  font-weight: bold;
-}
-
-calendar:indeterminate {
-  color: $surface2;
-}
-
-checkbutton {
-  border-radius: 24px;
-  background-color: $surface1;
-  padding: 4px;
-  check {
-    min-height: 15px;
-    min-width: 15px;
-    color: $white0;
-  }
-}
-
-checkbutton:checked {
-  check {
-    border-radius: 24px;
-    background-color: $white0;
-  }
-}
-
-.popup {
-  background-color: $base;
-  padding: 5px;
-  border-radius: 5px;
-  border-style: solid;
-  border-color: $surface2;
-  border-width: 2px;
-  margin: 10px;
-}
-
-entry {
-  // image: url('./assets/image/screenshot.png');
-  padding: 5px;
-  margin: 5px;
-  border-radius: 5px;
-  border-style: solid;
-  border-color: $surface2;
-  background-color: $surface1;
-  color: $white0;
-}
-
-.mainentry {
-  background-color: $surface1;
-  padding: 5px;
-  border-radius: 5px;
-  margin: 5px;
-}
-
-.mainentry label {
-  font-size: 18px;
-  color: $white0;
-}
-
-.smallentry {
-  @extend .mainentry;
-  label {
-    font-size: 15px;
-  }
 }

hypr-configs/hyprland/eww/eww.yuck

@@ -1,4 +1,4 @@
-(include "./src/utils/_revealer.yuck")
+(include "./src/widgets/_revealer.yuck")
 (include "./src/_definitions.yuck")
 
 (include "./setups/sidebar.yuck")

hypr-configs/hyprland/eww/scripts/workspace/get-workspaces

@@ -3,7 +3,7 @@
 spaces() {
     WORKSPACE_WINDOWS=$(hyprctl workspaces -j | jq 'map({key: .id | tostring, value: .windows}) | from_entries')
 
-    seq 1 6 | jq --argjson windows "${WORKSPACE_WINDOWS}" --slurp -Mc 'map(tostring) | map({id: ., windows: ($windows[.]//0)})'
+    seq 1 5 | jq --argjson windows "${WORKSPACE_WINDOWS}" --slurp -Mc 'map(tostring) | map({id: ., windows: ($windows[.]//0)})'
 }
 
 spaces

hypr-configs/hyprland/eww/src/widgets/_revealer.yuck

@@ -11,37 +11,39 @@
 
 (defwidget reveal_on_hover [var varname ?class ?duration ?transition]
  (box
-  :class "reveal_on_hover ${class}"
+  :class "${class}"
   :orientation "v"
   :space-evenly false
   :valign "end"
+
   (eventbox
    :onhover `${EWW_CMD} update ${varname}=true`
    :onhoverlost `${EWW_CMD} update ${varname}=false`
+
    (box
     :space-evenly false
     :orientation "v"
     (children :nth 0)
+
     (revealer
      :reveal var
      :transition {transition ?:"slidedown"}
      :duration "500ms"
-     (children :nth 1))))))
+     (box :class "reveal-on-hover" (children :nth 1))))))
+)
 
 
 (defwidget clickbox [var varname ?class ?duration ?transition]
  (box :class "${class} clickbox" :orientation "h" :space-evenly false
   (button :onclick "eww update ${varname}=${ var ? false : true }"
-   (children :nth 0)
+   (children :nth 0))
-  )
+
   (revealer :reveal var
    :transition {transition ?: "slideleft"}
    :duration {duration ?: "500ms"}
+
    (box :class "${class}"
     :space-evenly false
     (children :nth 1)
-    (button :onclick "eww update ${varname}=false" :class "close" (label :text "Close"))
+    (button :onclick "eww update ${varname}=false" :class "close" (label :text "Close")))))
-   )
+)
-  )
- )
- )