mirror of
https://github.imc.re/void-land/hyprland-void-dots
synced 2025-04-25 16:06:54 +02:00
feat: eww style changes
This commit is contained in:
parent
e78c4d3c1d
commit
caf64be4bf
8 changed files with 106 additions and 86 deletions
|
@ -1,17 +1,23 @@
|
|||
.reveal-on-hover {
|
||||
padding: 6px 0px;
|
||||
padding: 12px 0px;
|
||||
}
|
||||
|
||||
.reveal-on-click {
|
||||
color: $surface2;
|
||||
padding: 4px 0px;
|
||||
@extend .widget;
|
||||
|
||||
label {
|
||||
@extend .icon;
|
||||
|
||||
color: $surface2;
|
||||
padding: 4px 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.separator {
|
||||
padding: get-token(padding, small);
|
||||
|
||||
.dot {
|
||||
padding: 3px;
|
||||
padding: 2px;
|
||||
|
||||
border-radius: 100%;
|
||||
|
||||
|
|
|
@ -4,8 +4,8 @@
|
|||
|
||||
.widget {
|
||||
padding: get-token(padding, small);
|
||||
margin: get-token(margin, small);
|
||||
border-radius: get-token(border-radius);
|
||||
margin: get-token(margin);
|
||||
border-radius: get-token(border-radius, small);
|
||||
background-color: $surface0;
|
||||
}
|
||||
|
||||
|
|
|
@ -1,15 +1,19 @@
|
|||
.clock {
|
||||
@extend .widget;
|
||||
|
||||
font-size: get-token(font-sizes, large);
|
||||
font-weight: bolder;
|
||||
label {
|
||||
font-size: get-token(font-sizes, large);
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.language {
|
||||
@extend .widget;
|
||||
|
||||
font-size: get-token(font-sizes, small);
|
||||
font-weight: bolder;
|
||||
label {
|
||||
font-size: get-token(font-sizes);
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.logo {
|
||||
|
@ -33,18 +37,26 @@
|
|||
|
||||
.workspace {
|
||||
@extend .animation;
|
||||
border-radius: get-token(border-radius);
|
||||
min-height: 16px;
|
||||
background-color: $surface2;
|
||||
border-radius: get-token(border-radius);
|
||||
|
||||
&.current {
|
||||
min-height: 48px;
|
||||
min-height: 42px;
|
||||
|
||||
background-color: $accent;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bar-media-player {
|
||||
@extend .widget;
|
||||
|
||||
label {
|
||||
font-size: get-token(font-sizes, large);
|
||||
}
|
||||
}
|
||||
|
||||
.media-player {
|
||||
@extend .panel-widget;
|
||||
|
||||
|
|
|
@ -16,8 +16,8 @@ $design-tokens: (
|
|||
large: 6px,
|
||||
),
|
||||
border-radius: (
|
||||
small: 6px,
|
||||
default: 8px,
|
||||
small: 8px,
|
||||
default: 10px,
|
||||
large: 16px,
|
||||
),
|
||||
);
|
||||
|
|
|
@ -32,13 +32,14 @@
|
|||
:orientation "v"
|
||||
:class "widget"
|
||||
:space-evenly false
|
||||
:class "reveal-on-click"
|
||||
|
||||
(eventbox
|
||||
:cursor "pointer"
|
||||
:visible {direction == "up"}
|
||||
:onclick `${EWW_CMD} update ${varname}=${!var}`
|
||||
|
||||
(label :angle {direction == "up" ? (var ? 270 : 90) : (var ? 90 : 270)} :class "reveal-on-click" :tooltip "touch control" :text ""))
|
||||
(label :angle {direction == "up" ? (var ? 270 : 90) : (var ? 90 : 270)} :tooltip "touch control" :text ""))
|
||||
|
||||
(revealer
|
||||
:reveal var
|
||||
|
@ -52,6 +53,6 @@
|
|||
:visible {direction == "down"}
|
||||
:onclick `${EWW_CMD} update ${varname}=${!var}`
|
||||
|
||||
(label :angle {direction == "up" ? (var ? 270 : 90) : (var ? 90 : 270)} :class "reveal-on-click" :tooltip "touch control" :text ""))
|
||||
(label :angle {direction == "up" ? (var ? 270 : 90) : (var ? 90 : 270)} :tooltip "touch control" :text ""))
|
||||
|
||||
))
|
||||
|
|
|
@ -1,18 +1,20 @@
|
|||
(defwidget PlayerCtl [?cover]
|
||||
(defwidget BarMediaPlayer [?cover]
|
||||
(eventbox
|
||||
:cursor "pointer"
|
||||
|
||||
|
||||
(box
|
||||
:class "widget player-ctl"
|
||||
:class "bar-media-player"
|
||||
:orientation "v"
|
||||
:spacing spacing-default
|
||||
:space-evenly false
|
||||
|
||||
:spacing spacing-default
|
||||
|
||||
|
||||
(eventbox
|
||||
:onclick "${EWW_CMD} open MusicPlayerPopup --toggle"
|
||||
:visible cover
|
||||
|
||||
(image :path { pcover == "" ? "./assets/image/emptympd.png" : pcover } :image-width 20 :image-height 20))
|
||||
|
||||
|
||||
(button :onclick "playerctl previous"
|
||||
(label :class "icon" :text ""))
|
||||
(button :onclick "playerctl play-pause"
|
||||
|
@ -21,70 +23,70 @@
|
|||
(label :class "icon" :text "")))))
|
||||
|
||||
(defwidget MediaPlayer [h permashow]
|
||||
(box
|
||||
:class "media-player"
|
||||
(overlay
|
||||
(box
|
||||
:orientation "v"
|
||||
:halign "fill"
|
||||
:height h
|
||||
:class { pcover != "" ? "player-cover" : ""}
|
||||
:style "background-image: url('${pcover}')"
|
||||
:visible {permashow ? true : pcover != "" })
|
||||
|
||||
(box
|
||||
:orientation "h"
|
||||
:space-evenly false
|
||||
:halign "center"
|
||||
:valign "center"
|
||||
:spacing spacing-large
|
||||
|
||||
(image :image-width 100 :image-height 100 :path { pcover == "" ? "./assets/image/emptympd.png" : pcover })
|
||||
|
||||
(box
|
||||
:class "media-player"
|
||||
(overlay
|
||||
(box
|
||||
:orientation "v"
|
||||
:halign "fill"
|
||||
:height h
|
||||
:class { pcover != "" ? "player-cover" : ""}
|
||||
:style "background-image: url('${pcover}')"
|
||||
:visible {permashow ? true : pcover != "" })
|
||||
|
||||
(box
|
||||
:orientation "h"
|
||||
:space-evenly false
|
||||
:width 200
|
||||
:halign "center"
|
||||
:valign "center"
|
||||
:class "player-info"
|
||||
:spacing spacing-small
|
||||
|
||||
(box
|
||||
:orientation "v"
|
||||
:space-evenly false
|
||||
:visible true
|
||||
|
||||
(scroll
|
||||
:hscroll true
|
||||
:vscroll false
|
||||
(label :text psong))
|
||||
|
||||
(scroll
|
||||
:hscroll true
|
||||
:vscroll false
|
||||
(label :text partist))
|
||||
)
|
||||
|
||||
:spacing spacing-large
|
||||
|
||||
(image :image-width 100 :image-height 100 :path { pcover == "" ? "./assets/image/emptympd.png" : pcover })
|
||||
|
||||
(box
|
||||
:orientation "h"
|
||||
:class "player-controls"
|
||||
(button :onclick "playerctl previous"
|
||||
(label :text ""))
|
||||
(button :onclick "playerctl play-pause"
|
||||
(label :text { pstatus == "Playing" ? "" : ""} ))
|
||||
(button :onclick "playerctl next"
|
||||
(label :text ""))))))
|
||||
)
|
||||
|
||||
:orientation "v"
|
||||
:space-evenly false
|
||||
:width 200
|
||||
:halign "center"
|
||||
:valign "center"
|
||||
:class "player-info"
|
||||
:spacing spacing-small
|
||||
|
||||
(box
|
||||
:orientation "v"
|
||||
:space-evenly false
|
||||
:visible true
|
||||
|
||||
(scroll
|
||||
:hscroll true
|
||||
:vscroll false
|
||||
(label :text psong))
|
||||
|
||||
(scroll
|
||||
:hscroll true
|
||||
:vscroll false
|
||||
(label :text partist))
|
||||
)
|
||||
|
||||
(box
|
||||
:orientation "h"
|
||||
:class "player-controls"
|
||||
(button :onclick "playerctl previous"
|
||||
(label :text ""))
|
||||
(button :onclick "playerctl play-pause"
|
||||
(label :text { pstatus == "Playing" ? "" : ""} ))
|
||||
(button :onclick "playerctl next"
|
||||
(label :text ""))))))
|
||||
)
|
||||
|
||||
)
|
||||
|
||||
|
||||
(defwindow MusicPlayerPopup
|
||||
:geometry (geometry
|
||||
:width "440"
|
||||
:height "200"
|
||||
:anchor "center left")
|
||||
:width "440"
|
||||
:height "200"
|
||||
:anchor "center left")
|
||||
:stacking "overlay"
|
||||
:monitor 0
|
||||
(box
|
||||
|
@ -114,14 +116,14 @@
|
|||
:style "margin-top: 10px;"
|
||||
(button :onclick "playerctl previous"
|
||||
(label :text ""))
|
||||
(button :style "padding-right: 3px;" :onclick "playerctl play-pause"
|
||||
(button :style "padding-right: 3px;" :onclick "playerctl play-pause"
|
||||
(label :text { pstatus == "Playing" ? "" : ""}))
|
||||
(button :onclick "playerctl next" (label :text "")))
|
||||
(scale
|
||||
(scale
|
||||
:class "seektime"
|
||||
:value { ptime.position}
|
||||
:orientation "h"
|
||||
;; :onchange "playerctl position {}"
|
||||
:min 0
|
||||
:max { ptime.duration}
|
||||
:tooltip { ptime.readable})))))
|
||||
:tooltip { ptime.readable})))))
|
||||
|
|
|
@ -6,20 +6,21 @@
|
|||
:orientation "v"
|
||||
:space-evenly false
|
||||
:class "clock"
|
||||
:spacing spacing-small
|
||||
|
||||
(label :text thour)
|
||||
(label :text tmin))))
|
||||
|
||||
(defwindow CalendarPopup
|
||||
:geometry (geometry
|
||||
:width "100"
|
||||
:height "35"
|
||||
:anchor "bottom left")
|
||||
:width "100"
|
||||
:height "35"
|
||||
:anchor "bottom left")
|
||||
:stacking "overlay"
|
||||
:monitor 0
|
||||
|
||||
|
||||
(box
|
||||
:class "popup"
|
||||
|
||||
(box
|
||||
:class "widget"
|
||||
(calendar :day calendar_day :year calendar_year))))
|
||||
|
|
|
@ -48,7 +48,7 @@
|
|||
|
||||
(Separator :orientation "h" :dots "[1, 2, 3]" :visible true)
|
||||
|
||||
(PlayerCtl :cover false)
|
||||
(BarMediaPlayer :cover false)
|
||||
))
|
||||
|
||||
(defwidget BarBottom []
|
||||
|
@ -57,7 +57,6 @@
|
|||
:space-evenly false
|
||||
:valign "end"
|
||||
|
||||
|
||||
(Sliders)
|
||||
(Language)
|
||||
))
|
||||
|
@ -86,7 +85,6 @@
|
|||
:orientation "v"
|
||||
:space-evenly false
|
||||
:spacing spacing-default
|
||||
:valign "end"
|
||||
|
||||
(RevealOnHover
|
||||
:var {revealWifiEssid}
|
||||
|
|
Loading…
Add table
Reference in a new issue