From 0867bbae0fdcdfeecd1c6e5679631bc1c615bf08 Mon Sep 17 00:00:00 2001 From: Joakim Hulthe Date: Tue, 7 May 2024 22:54:24 +0200 Subject: [PATCH] Improve eww bar --- tree/.config/eww/eww.scss | 61 +++++++++++------- tree/.config/eww/eww.yuck | 130 ++++++++++++++++++++++---------------- 2 files changed, 113 insertions(+), 78 deletions(-) diff --git a/tree/.config/eww/eww.scss b/tree/.config/eww/eww.scss index a5f9fa3..d3bc50f 100644 --- a/tree/.config/eww/eww.scss +++ b/tree/.config/eww/eww.scss @@ -1,36 +1,26 @@ -$black: #1D2021; -$black1: #282828; -$white: #FBF1C7; -$grey: #A89984; -$blue: #458588; -$cyan: #8EC07C; -$pink: #D3869B; -$yellow: #FABD2F; -$purple: #B12686; -$teal: #8EC07C; -$darkteal: #689D6A; -$green: #B8BB26; -$orange: #FE8019; -$red: #FB4934; -$bluealt: $black1; -$blackdark: $black; +//$text: wheat; +$text: #f6daa8; +$highlight1: #4e8172; +$highlight2: #679a8b; +$background: #1d2021; +$background: #23231b; *{ all: unset; font-family: "Sauce Code Pro Nerd Font Mono"; + color: $text; } window { - background: $blackdark; + background: rgba($background, 0.85); border-radius: 15px; } .workspace { font-size: 18px; font-weight: 300; - border: solid wheat 1px; + border: solid $highlight1 1px; background: black; - color: wheat; border-radius: 30px; padding-top: 3px; padding-bottom: 5px; @@ -42,7 +32,8 @@ window { } .workspace.active { - background: wheat; + font-weight: 600; + background: $text; color: black; } @@ -51,6 +42,18 @@ window { margin-bottom: 10px; } +.boxed { + border: solid $highlight1 2px; + border-top: solid $highlight1 1px; + border-bottom: dotted $highlight1 6px; + color: $highlight1; + background: black; + border-radius: 30px; + padding-top: 0.5em; + padding-bottom: 0.3em; + box-shadow: 0 0px 5px 1px #06060b; +} + scale trough { all: unset; background-color: #22242b; @@ -66,17 +69,23 @@ scale trough { } .volume trough highlight { - background-image: linear-gradient(to right, #6b4f73 30%, #5b3f63 50%, #5b3f63 100% *50); + background-image: linear-gradient(to right, $highlight2 30%, $highlight1 50%, $highlight1 100% *50); border-radius: 10px; } +.battery { + margin-top: 20px; + padding-bottom: 0.6em; +} + .vpn { font-size: 40px; - color: wheat; - border-bottom: dotted green 6px; + color: $highlight1; + border-color: green; margin: 2px; margin-top: 20px; transition: border-color 1s; + transition: all 1s; } .vpn label { @@ -84,6 +93,10 @@ scale trough { margin-bottom: -5px; } +.vpn:hover { + border-top: dotted 6px; +} + .vpn.connecting { border-color: orange; } @@ -95,7 +108,7 @@ scale trough { .clock { font-size: 30px; font-weight: 400; - color: wheat; + color: $highlight1; margin-top: 20px; margin-bottom: 20px; } diff --git a/tree/.config/eww/eww.yuck b/tree/.config/eww/eww.yuck index 13ca811..a362809 100644 --- a/tree/.config/eww/eww.yuck +++ b/tree/.config/eww/eww.yuck @@ -1,67 +1,89 @@ -(defwindow bar - :monitor 0 - :geometry (geometry :y "0%" - :x "10px" - :height "90%" - :width "50px" - :anchor "center left") - :stacking "fg" - :exclusive true - (box :orientation "v" - (workspaces) - (bottom) - )) +(defwindow bar0 + :monitor 0 + :geometry (geometry :y "0%" + :x "3px" + :height "70%" + :width "50px" + :anchor "center left") + :stacking "fg" + :exclusive true + (box :orientation "v" + (workspaces) + (bottom) +)) + +(defwindow bar1 + :monitor 1 + :geometry (geometry :y "0%" + :x "3px" + :height "70%" + :width "50px" + :anchor "center left") + :stacking "fg" + :exclusive true + (box :orientation "v" + (workspaces) + (bottom) +)) (defwidget bottom [] - (box :orientation "v" - :space-evenly false - :valign "end" - (speaker) - (vpn) - (clock) + (box :orientation "v" + :space-evenly false + :valign "end" + (speaker) + (vpn) + (battery) + (clock) )) (defwidget workspaces [] - (box :orientation "v" - :valign "start" - :class "workspaces" - (for workspace in workspaces_json - (label :class 'workspace ${workspace.class}' :text '${workspace.id}') - ) - )) + (box :orientation "v" + :valign "start" + :class "workspaces" + (for workspace in workspaces_json + (label :class 'workspace ${workspace.class}' :text '${workspace.id}') +))) (defwidget speaker [] - (box - :class "volume" - :orientation "v" - :valign "end" - (scale - :orientation "v" - :flipped true - :min 0 - :max 100 - :value volume_out - :onchange "pamixer --set-volume {} && volshow") - )) + (box :class "volume" + :orientation "v" + :valign "end" + (scale :orientation "v" + :flipped true + :min 0 + :max 100 + :value volume_out + :onchange "pamixer --set-volume {} && volshow") +)) (defwidget vpn [] - (button - :valign "end" - :class "vpn ${vpn_status.class}" - :onclick "${vpn_status.on_click}" - (label :text '${vpn_status.icon}') - )) + (button :valign "end" + :class "vpn boxed ${vpn_status.class}" + :onclick "${vpn_status.on_click}" + (label :text "${vpn_status.icon}") +)) + +(defwidget battery [] + (box :orientation "v" + :valign "end" + :class "battery boxed" + (label :text "BAT") + (label :text "${current_battery}%") +)) (defwidget clock [] - (box :orientation "v" - :valign "end" - :class "clock" - (label :text current_hour) - (label :text current_minute) - )) + (box :orientation "v" + :valign "end" + :class "clock boxed" + (label :text current_hour) + (label :text current_minute) +)) (defpoll workspaces_json :interval "1s" "eww-workspaces") -(defpoll volume_out :interval "1s" "pamixer --get-volume") -(defpoll vpn_status :interval "1s" "mullvad-status") -(defpoll current_minute :interval "1s" "date +%M") -(defpoll current_hour :interval "1s" "date +%H") +(defpoll volume_out :interval "1s" "pamixer --get-volume") +(defpoll vpn_status :interval "1s" "mullvad-status") +(defpoll current_minute :interval "1s" "date +%M") +(defpoll current_hour :interval "1s" "date +%H") +(defpoll current_day :interval "60s" "date +%d") +(defpoll current_month :interval "60s" "date +%b") +(defpoll current_battery :interval "15s" "cat /sys/class/power_supply/BAT0/capacity")