diff --git a/eww/.config/eww/eww.scss b/eww/.config/eww/eww.scss index 6be7e14..5a808dd 100644 --- a/eww/.config/eww/eww.scss +++ b/eww/.config/eww/eww.scss @@ -29,160 +29,100 @@ $anim-transition: 150ms; * { all: unset; //Unsets everything so you can style everything from scratch - font-family: "Fira Code"; - // color: $fg-color; + font-family: "Lato Mono"; } tooltip { color: $fg-alt-color; background-color: $bg-alt-color; + border-radius: 12px; } .bar-1, .bar-2 { - background-color: $bg-color; - color: $fg-alt-color; - border-right: solid 1px $border-color; -} - -.segment-end { -} - -// Styles on classes (see eww.yuck for more information) -button { - transition-property: opacity, color; - transition-duration: $anim-transition; + background-color: rgba(0, 0, 0, 0.65); } -// Workspaces -.workspaces { - padding: .3rem; +.main-cont { + padding-left: 1.5rem; + padding-right: 1.5rem; + padding-bottom: 0; + padding-top: 4px; } -.workspaces > button { - font-size: $font-size; - margin: 4px; +.segment-start, +.segment-middle, +.segment-end { } -.workspaces > button:hover { - color: $fg-sel-color; - opacity: 0.8; +.icon { + opacity: 1; + transition: opacity $anim-transition; } -button.active { - // font-weight: bold; - color: $fg-sel-color; +.icon:hover { + opacity: 0.6; } -button.inactive { - color: $fg-desel-color; +.inactive, +.active { + font-size: 1.28rem; } -// Generic stuff -scale trough { - all: unset; - background-color: $bg-alt-color; - border-radius: 5px; - min-height: 60px; - min-width: 4px; - margin: 0.3rem 0 0.3rem 0; -} - -// Menu -.powermenu { +.inactive { + color: $fg-color; transition: color $anim-transition; - // border-right: solid 1px $border-color; - padding: 0.5rem 0.2rem 0.3rem 0.2rem; + color: $fg-color; } - -.quit, -.lock, -.reboot, -.poweroff { - // padding: .5rem .2rem .3rem .2rem; +.active { + color: $fg-color; } -// Colors for the buttons -.lock:hover { - color: $blue; -} -.quit:hover { - color: $green; -} -.reboot:hover { - color: $yellow; -} -.poweroff:hover { - color: $red; +.pm-inner { + padding-left: 6px; + padding-right: 6px; + padding-top: 0; + padding-bottom: 0; } -.pm-active { - // background-color: $bg-alt-color; - // border-radius: 5px; +.icon { + font-size: 1.2rem; + padding-left: 6px; + padding-right: 6px; } -.pm-inner { - padding: 0.2rem 0; +.logo { + font-weight: 600; } -// Control -.control { - margin-bottom: $logo-size; - margin-bottom: 0.5rem; - font-family: Material Icons; - font-size: 1.6em; +.logo-seperator { + border-left: 2px solid $fg-color; } -.icon { - margin: 0 0.2rem; - font-size: $icon-size; - font-family: Material Icons; - padding: 0 1px; +.time { + font-size: 1rem; + font-weight: 600; } -.icon:hover { - opacity: 0.6; +// Volume stuff +.vol { + padding-left: 0; } -// Volume stuff .volbar trough highlight { background-color: $fg-accent; - border-radius: 5px; -} - -// Time -.time { - // color: $fg-alt-color; - font-size: 11px; - font-weight: bold; - border-top: solid 2px $fg-alt-color; - padding-top: 1rem; - margin-bottom: 0.5rem; + border-radius: 8px; } -// Logo button -.logo { - margin: 0 0.8rem; - margin-top: 6px; - font-size: $logo-size; -} - -.logo-seperator { - border-bottom: 2px solid $border-color; - padding-bottom: 0.4rem; +scale trough { + all: unset; + background-color: $bg-alt-color; + border-radius: 8px; + min-height: 6px; + min-width: 70px; + margin: 0px 8px 0px 0px; } -// Color overrides .red { color: $red; - opacity: 0.8; -} - -// Music widget -.musicmenu { - // background-color: $bg-alt-color; -} - -.mm-inner { - color: $blue; } diff --git a/eww/.config/eww/eww.yuck b/eww/.config/eww/eww.yuck index 597360a..4a7c8b8 100644 --- a/eww/.config/eww/eww.yuck +++ b/eww/.config/eww/eww.yuck @@ -1,81 +1,63 @@ -(defwidget bar [screen] - (box :orientation "v" - :vexpand "false" - :hexpand "false" - (box :class "segment-start" - :valign "start" - :halign "center" - :space-evenly false - :orientation "v" - :space-evenly false - (power :screen screen) - ) - (box :class "segment-mid" - :valign "center" - :halign "center" - :orientation "v" - :space-evenly false - (workspaces :wsp workspaces-data :screen screen) - ) - (box :class "segment-end" - :valign "end" - :halign "center" - :orientation "v" - :space-evenly true - (control :screen screen) - ) - ) +(defwidget bar-1 [screen] + (box :class "main-cont" + :orientation "h" + (box :class "segment-start" + :halign "start" + :valign "center" + (start-control :screen screen) + ) + (box :class "segment-middle" + :halign "center" + :valign "center" + :space-evenly true + (mid-control) + ) + (box :class "segment-end" + :halign "end" + :valign "center" + (end-control) + ) + ) ) (defwidget bar-2 [screen] - (box :orientation "v" - :vexpand "false" - :hexpand "false" - (box :class "segment-start" - :valign "start" - :halign "center" - :space-evenly false - :orientation "v" - :space-evenly false - ;; (power :screen screen) - ) - (box :class "segment-mid" - :valign "center" - :halign "center" - :orientation "v" - :space-evenly false - (workspaces :wsp workspaces-data :screen screen) - ) - (box :class "segment-end" - :valign "end" - :halign "center" - :orientation "v" - :space-evenly true - (control-2 :screen screen) - ) - ) + (box :class "main-cont" + :orientation "h" + (box :class "segment-start" + :halign "start" + :valign "center" + (start-control :screen screen) + ) + (box :class "segment-middle" + :halign "center" + :valign "center" + :space-evenly true + (mid-control) + ) + (box :class "segment-end" + :halign "end" + :valign "center" + ) + ) ) ;; Powermenu widget (defwidget power [] (eventbox ;;:onhover "${EWW_CMD} update power=true" :onhoverlost "${EWW_CMD} update power=false" - (box :orientation "v" + (box :orientation "h" :space-evenly "false" :vexpand "false" :class "powermenu ${power ? 'pm-active' : ''}" ;; Open menu button - (button :class "icon logo ${power ? 'logo-seperator' : ''}" - :tooltip "Open menu" - :onclick "${EWW_CMD} update power=true" "Λ") - (revealer :transition "slidedown" + (revealer :transition "slideleft" :reveal power :duration "450ms" - (box :orientation "v" + (box :orientation "h" :class "pm-inner" :space-evenly true - :halign "middle" - :spacing 6 + :valign "middle" + :spacing 16 ;; Lock screen (button :class "icon lock" @@ -98,72 +80,64 @@ :onclick "poweroff" "") )) + (button :class "icon logo ${power ? 'logo-seperator' : ''}" + :tooltip "Open menu" + :onclick "${EWW_CMD} update power=true" "Λ") ))) (defvar power false) ;; Control widget (container) -(defwidget control [] - (box :class "control" :spacing 12 :space-evenly false :orientation "v" - ;; (wifi) - ;; (bat) - (music) - (volume) - (time) +(defwidget start-control [screen] + (box :class "control" :spacing 16 :space-evenly false :orientation "h" + (workspaces :wsp workspaces-data :screen screen) ) ) - -(defwidget control-2 [] - (box :class "control" :spacing 12 :space-evenly false :orientation "v" - ;; (wifi) - ;; (bat) - ;; (music) - ;; (volume) +(defwidget mid-control [] + (box :class "control" :spacing 16 :space-evenly false :orientation "h" (time) ) ) +(defwidget end-control [] + (box :class "control" :spacing 16 :space-evenly false :orientation "h" + (music) + (volume) + (power) + ) + ) ;; Clock Widget (defwidget time [] - (box :orientation "v" + (box :orientation "h" :class "time" - :valign "end" - (button :onclick "scripts/popup calendar" - :class "hour" hour) - (button :onclick "scripts/popup calendar" - :class "min" min) + :space-evenly "false" + :halign "middle" (button :onclick "scripts/popup calendar" - :class "sec" sec) + :class "day" full-time) )) -(defpoll hour :interval "1s" "date '+%H'") -(defpoll min :interval "1s" "date '+%M'") -(defpoll sec :interval "1s" "date '+%S'") +(defpoll full-time :interval "1s" "date +'%d %B (%m), %Y - %A %H:%M:%S'") ;; Volume widget (defwidget volume [] - (eventbox :onhover "${EWW_CMD} update volume=true" - :onhoverlost "${EWW_CMD} update volume=false" - (box :orientation "v" - :space-evenly "false" - :spacing 2 - (revealer :transition "slideup" - :reveal volume - :duration "450ms" - (scale :class "volbar" - :value current-volume - :orientation "v" - :flipped true - :tooltip "Volume: ${current-volume}%" - :max 101 - :min 0 - :onchange "amixer -D pulse sset Master {}%" - ) - ) - (button :onclick "amixer -D pulse set Master 1+ toggle" - :class "icon volume + ${muted-volume != 'on' ? 'red' : ''}" - :tooltip "Volume: ${current-volume}%" - {muted-volume != "on" ? "󰝟" : "󰕾"} - ) - ))) + (eventbox :onhover "${EWW_CMD} update volume=true" + :onhoverlost "${EWW_CMD} update volume=false" + (box :class "" :space-evenly "false" :orientation "h" :spacing "4" + (revealer :transition "slideleft" + :reveal volume + :duration "350ms" + (scale :class "volbar" + :value current-volume + :flipped true + :orientation "h" + :max 100 + :min 0 + :onchange "amixer -D pulse sset Master {}%" ) + ) + (button :onclick "amixer -D pulse set Master 1+ toggle" + :class "icon vol" {muted-volume != "on" ? "󰝟" : "󰕾"} + ) + ) + ) +) (defvar volume false) (defpoll current-volume :interval "1ms" "amixer -D pulse sget Master | grep 'Left:' | awk -F'[][]' '{ print $2 }' | tr -d '%'") (defpoll muted-volume :interval "1ms" "amixer -D pulse sget Master | grep 'Left:' | awk -F'[][]' '{ print $4 }' | tr -d '%'") @@ -191,7 +165,7 @@ ;; Workspaces container (defwidget workspaces [wsp] - (box :space-evenly true :spacing 4 :orientation "v" :class "workspaces" + (box :space-evenly true :spacing 16 :orientation "h" :class "workspaces" (for ws in wsp (workspace :data ws) ))) @@ -200,48 +174,47 @@ (defwidget workspace [data] (button :onclick "wmctrl -s ${data['index']}" :class {data["iscurrent"] == true ? "active" : "inactive"} - "${data['name']}" + ;; "${data['name']}" + :tooltip "Switch to workspace ${data['name']}" + {data["iscurrent"] == true ? "" : ""} )) (deflisten workspaces-data "scripts/workspace.py") ;; Music widget (defwidget music [] - (revealer :reveal {music-active == "true"} - (eventbox :onhover "${EWW_CMD} update music=true" - :onhoverlost "${EWW_CMD} update music=false" - (box :orientation "v" + (revealer :reveal {music-active == "true"} + (eventbox :onhover "${EWW_CMD} update music=true" + :onhoverlost "${EWW_CMD} update music=false" + (box :orientation "h" :space-evenly "false" - :vexpand "false" :class "musicmenu ${music ? 'mm-active' : ''}" - (revealer :transition "slideup" + (revealer :transition "slideleft" :reveal music :flipped true :duration "450ms" - (box :orientation "v" + (box :orientation "h" :class "mm-inner" :space-evenly true - :halign "middle" - :spacing 4 + :valign "center" + :spacing 8 - ;; Next - (button :class "icon next" + ;; Pause + (button :class "icon prev" :tooltip "Pause/play" - :onclick "playerctl next" "") + :onclick "playerctl previous" "") ;; Pause (button :class "icon pause" :tooltip "Pause/play" - :onclick "playerctl play-pause" {music-status == "Playing" ? "󰏤" : ""}) - - ;; Pause - (button :class "icon prev" + :onclick "playerctl play-pause" {music-status == "Playing" ? "󰏤" : "󰐊"}) + ;; Next + (button :class "icon next" :tooltip "Pause/play" - :onclick "playerctl previous" "") - + :onclick "playerctl next" "") )) ;; Open menu button (button :class "icon" - :tooltip "${title} - ${artist}" - :onclick "${EWW_CMD} update music=true" "") + :tooltip "Music" + :onclick "${EWW_CMD} update music=true" "󰎈") ) ))) @@ -261,23 +234,24 @@ :windowtype "dock" :geometry (geometry :x "0%" :y "0%" - :width "42px" - :height "100%" - :anchor "left center") - :reserve (struts :side "left" :distance "42px") + :width "100%" + :height "32px" + :anchor "top center") + :reserve (struts :side "top" :distance "32px") :hexpand "false" :vexpand "false" - (bar :screen 1)) + (bar-1 :screen 1)) (defwindow bar-2 :monitor 1 :windowtype "dock" :geometry (geometry :x "0%" :y "0%" - :width "42px" - :height "100%" - :anchor "left center") - :reserve (struts :side "left" :distance "42px") + :width "100%" + :height "32px" + :anchor "top center") + :reserve (struts :side "top" :distance "32px") :hexpand "false" :vexpand "false" (bar-2 :screen 2)) +