hulthe/df
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Improve eww bar

Browse Source
This commit is contained in:
Joakim Hulthe
2024-05-07 22:54:24 +02:00
parent 388856418f
commit 0867bbae0f
2 changed files with 113 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
tree/.config/eww/eww.scss
View File

@ -1,36 +1,26 @@
$black: #1D2021; //$text: wheat;
$black1: #282828; $text: #f6daa8;
$white: #FBF1C7; $highlight1: #4e8172;
$grey: #A89984; $highlight2: #679a8b;
$blue: #458588; $background: #1d2021;
$cyan: #8EC07C; $background: #23231b;
$pink: #D3869B;
$yellow: #FABD2F;
$purple: #B12686;
$teal: #8EC07C;
$darkteal: #689D6A;
$green: #B8BB26;
$orange: #FE8019;
$red: #FB4934;
$bluealt: $black1;
$blackdark: $black;
*{ *{
all: unset; all: unset;
font-family: "Sauce Code Pro Nerd Font Mono"; font-family: "Sauce Code Pro Nerd Font Mono";
color: $text;
} }
window { window {
background: $blackdark; background: rgba($background, 0.85);
border-radius: 15px; border-radius: 15px;
} }
.workspace { .workspace {
font-size: 18px; font-size: 18px;
font-weight: 300; font-weight: 300;
border: solid wheat 1px; border: solid $highlight1 1px;
background: black; background: black;
color: wheat;
border-radius: 30px; border-radius: 30px;
padding-top: 3px; padding-top: 3px;
padding-bottom: 5px; padding-bottom: 5px;
@ -42,7 +32,8 @@ window {
} }
.workspace.active { .workspace.active {
background: wheat; font-weight: 600;
background: $text;
color: black; color: black;
} }
@ -51,6 +42,18 @@ window {
margin-bottom: 10px; 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 { scale trough {
all: unset; all: unset;
background-color: #22242b; background-color: #22242b;
@ -66,17 +69,23 @@ scale trough {
} }
.volume trough highlight { .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; border-radius: 10px;
} }
.battery {
margin-top: 20px;
padding-bottom: 0.6em;
}
.vpn { .vpn {
font-size: 40px; font-size: 40px;
color: wheat; color: $highlight1;
border-bottom: dotted green 6px; border-color: green;
margin: 2px; margin: 2px;
margin-top: 20px; margin-top: 20px;
transition: border-color 1s; transition: border-color 1s;
transition: all 1s;
} }
.vpn label { .vpn label {
@ -84,6 +93,10 @@ scale trough {
margin-bottom: -5px; margin-bottom: -5px;
} }
.vpn:hover {
border-top: dotted 6px;
}
.vpn.connecting { .vpn.connecting {
border-color: orange; border-color: orange;
} }
@ -95,7 +108,7 @@ scale trough {
.clock { .clock {
font-size: 30px; font-size: 30px;
font-weight: 400; font-weight: 400;
color: wheat; color: $highlight1;
margin-top: 20px; margin-top: 20px;
margin-bottom: 20px; margin-bottom: 20px;
} }

50
tree/.config/eww/eww.yuck
View File

@ -1,8 +1,22 @@
(defwindow bar (defwindow bar0
:monitor 0 :monitor 0
:geometry (geometry :y "0%" :geometry (geometry :y "0%"
:x "10px" :x "3px"
:height "90%" :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" :width "50px"
:anchor "center left") :anchor "center left")
:stacking "fg" :stacking "fg"
@ -18,6 +32,7 @@
:valign "end" :valign "end"
(speaker) (speaker)
(vpn) (vpn)
(battery)
(clock) (clock)
)) ))
@ -27,16 +42,13 @@
:class "workspaces" :class "workspaces"
(for workspace in workspaces_json (for workspace in workspaces_json
(label :class 'workspace ${workspace.class}' :text '${workspace.id}') (label :class 'workspace ${workspace.class}' :text '${workspace.id}')
) )))
))
(defwidget speaker [] (defwidget speaker []
(box (box :class "volume"
:class "volume"
:orientation "v" :orientation "v"
:valign "end" :valign "end"
(scale (scale :orientation "v"
:orientation "v"
:flipped true :flipped true
:min 0 :min 0
:max 100 :max 100
@ -45,17 +57,24 @@
)) ))
(defwidget vpn [] (defwidget vpn []
(button (button :valign "end"
:valign "end" :class "vpn boxed ${vpn_status.class}"
:class "vpn ${vpn_status.class}"
:onclick "${vpn_status.on_click}" :onclick "${vpn_status.on_click}"
(label :text '${vpn_status.icon}') (label :text "${vpn_status.icon}")
))
(defwidget battery []
(box :orientation "v"
:valign "end"
:class "battery boxed"
(label :text "BAT")
(label :text "${current_battery}%")
)) ))
(defwidget clock [] (defwidget clock []
(box :orientation "v" (box :orientation "v"
:valign "end" :valign "end"
:class "clock" :class "clock boxed"
(label :text current_hour) (label :text current_hour)
(label :text current_minute) (label :text current_minute)
)) ))
@ -65,3 +84,6 @@
(defpoll vpn_status :interval "1s" "mullvad-status") (defpoll vpn_status :interval "1s" "mullvad-status")
(defpoll current_minute :interval "1s" "date +%M") (defpoll current_minute :interval "1s" "date +%M")
(defpoll current_hour :interval "1s" "date +%H") (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")