From a2eb17df7e810ffe2e46785fd0cf271e201e978d Mon Sep 17 00:00:00 2001 From: Leni Aniva Date: Fri, 7 Jun 2024 14:40:46 -0700 Subject: [PATCH] feat: Eww bar colour adjustments --- eww/bar/eww.scss | 53 ++++++++++++++++++++++++++----------- eww/bar/eww.yuck | 69 ++++++++++++++++++++++++++---------------------- 2 files changed, 76 insertions(+), 46 deletions(-) diff --git a/eww/bar/eww.scss b/eww/bar/eww.scss index 917d714..a0b7101 100644 --- a/eww/bar/eww.scss +++ b/eww/bar/eww.scss @@ -13,9 +13,13 @@ $widget_bg: rgba(40, 40, 40, 0.5); $weather: rgba(180, 220, 235, 0.8); $weather_end: rgba(171, 233, 179, 0.8); -$media-progress-bg: #333333; -$media: rgba(224, 232, 224, 0.7); -$media-paused: rgba(224, 200, 200, 0.7); +$trough: rgba(0, 0, 0, 0.5); + +$media-progress-bg: rgba(224, 232, 224, 0.1); +$media-paused-progress-bg: rgba(224, 200, 200, 0.1); +$media: rgba(224, 232, 224, 0.7); +$media-paused: rgba(224, 200, 200, 0.7); +$media-stopped: rgba(200, 200, 200, 0.5); // Dims the desktop background so status icons can be seen against darker wallpapers $status_bg: rgba(0, 0, 0, 0.3); @@ -27,23 +31,25 @@ $volume: #fae3b0; $microphone: #e8a2af; $network: #f8bd96; $backlight: #bd93f9; -$cpu-bg: #333333; + +// Unused in favour of bluetooth widget +$bluetooth: #88bbeb; $cpu: #96cdfb; -$memory-bg: #333333; +$cpu-bg: rgba(150, 205, 251, 0.3); // previously bluetooth colour $memory: #caa9c7; -//$memory: #88bbeb; +$memory-bg: rgba(202, 169, 199, 0.3); $temperature-bg: rgba(180, 180, 180, 0.5); $temperature: #b6b2b3; $temperature-critical: #ff6666; -$battery: #ddb6f2; -$clock: rgba(171, 233, 179, 1.0); +$battery: #ddb6f2; +$clock: rgba(171, 233, 179, 1.0); // Styles all scales progressbar trough { all: unset; - background-color: #333333; + background-color: $trough; border-radius: 5px; min-height: 80px; min-width: 2px; @@ -51,21 +57,20 @@ progressbar trough { } trough progress { all: unset; - background-color: #00ff00; + background-color: #00ff00; // Diagnostics colour border-radius: 5px; min-width: 2px; } scale trough { all: unset; - background-color: #333333; + background-color: $trough; border-radius: 5px; min-height: 80px; min-width: 2px; - //margin: .3rem 0 .3rem 0; } trough highlight { all: unset; - background-color: #eeeeee; + background-color: #ff0000; // Diagnostics colour border-radius: 5px; } trough slider { @@ -119,6 +124,7 @@ box .workspaces { box .status { background-color: $status_bg; + border-radius: 5px; } box .weather { @@ -187,14 +193,21 @@ box .weather { padding-left: 10px; color: $media-paused; } + .media-text-stopped { + padding-left: 10px; + color: $media-stopped; + } .media-playing { background-color: $media-progress-bg; - color: $media; } .media-paused { - background-color: $media-progress-bg; + background-color: $media-paused-progress-bg; color: $media-paused; } + .media-stopped { + background-color: $media-paused-progress-bg; + color: $media-stopped; + } } box .temperature { @@ -202,6 +215,12 @@ box .temperature { border-left: 2px solid $temperature-bg; margin-bottom: 1px; margin-top: 1px; + +} +.temperature-icon { + padding-left: 5px; + font-size: 20px; + color: mix($temperature, transparent, 70%); } .temperature-progress-cpu trough progress { background-color: mix($cpu, $temperature, 50%); @@ -235,7 +254,11 @@ box .clock { background-color: transparent; color: $clock; margin-top: 1px; + font-family: Ariel; border-left: 2px solid $clock; + .icon { + color: mix($clock, transparent, 50%); + } } .systray { //background-color: $tray_bg; diff --git a/eww/bar/eww.yuck b/eww/bar/eww.yuck index ab9ce69..be1ffa0 100644 --- a/eww/bar/eww.yuck +++ b/eww/bar/eww.yuck @@ -65,34 +65,35 @@ :class "media" :orientation "v" :space-evenly false - :valign "center" - :tooltip {media-position-text} + :valign "end" + :tooltip "${media-status == 'Paused' ? '' : media-status == 'Playing' ? '' : ''} ${media-position-text}" (eventbox :onclick "playerctl play-pause" (circular-progress - :class { media-status == "Paused" ? "media-paused" : "media-playing" } + :class { media-status == "Paused" ? "media-paused" : media-status == "Stopped" ? "media-stopped" : "media-playing" } :width 20 :height 20 :thickness 5 :value {100.0 * media-position / (media-length / 1000000.0)} - :visible {media-current != "" && media-length != 1} + :visible {media-current != "" && media-status != "Stopped"} )) (label - :class { media-status == "Paused" ? "media-text-paused" : "media-text-playing" } + :class { media-status == "Paused" ? "media-text-paused" : media-status == "Stopped" ? "media-text-stopped" : "media-text-playing" } :angle 270 :xalign 0.5 :yalign 0.5 :justify "center" :limit-width 120 - :text {media-current != "" ? "『${media-current}』" : "『』"}) - )) + :text "『${media-current}』" + ))) (deflisten media-current :initial "" "playerctl --follow metadata --format '{{ artist }} / {{album}} / {{ title }}' || true") (deflisten media-position-text :initial "" "playerctl --follow metadata --format '{{duration(position)}} / {{duration(mpris:length)}}' || true") -(defpoll media-position :interval "1s" +(defpoll media-position + :interval "1s" :run-while {media-current != ""} "playerctl position") (deflisten media-length :initial 1 "playerctl --follow metadata mpris:length") @@ -168,30 +169,36 @@ (defwidget widget-temperature [] (eventbox :onclick temperature-monitor - (box - :class "temperature" - :orientation "h" - :tooltip "CPU ${EWW_TEMPS[cpu-temp-key]}C; GPU ${EWW_TEMPS[gpu-temp-key]}C" - :space-evenly true - :width 25 - :halign "" :valign "center" - (progress - :class { EWW_TEMPS[cpu-temp-key] > temperature-threshold ? "temperature-progress-critical" : "temperature-progress-cpu" } - :halign "center" :valign "center" - :flipped "true" - :width 3 - :orientation "v" - :value {EWW_TEMPS[cpu-temp-key]} + (overlay + (box + :class "temperature" + :orientation "h" + :tooltip "CPU ${EWW_TEMPS[cpu-temp-key]}°C; GPU ${EWW_TEMPS[gpu-temp-key]}°C" + :space-evenly true + :width 25 + :halign "" :valign "center" + (progress + :class { EWW_TEMPS[cpu-temp-key] > temperature-threshold ? "temperature-progress-critical" : "temperature-progress-cpu" } + :halign "center" :valign "center" + :flipped "true" + :width 3 + :orientation "v" + :value {EWW_TEMPS[cpu-temp-key]} + ) + (progress + :class { EWW_TEMPS[gpu-temp-key] > temperature-threshold ? "temperature-progress-critical" : "temperature-progress-gpu" } + :halign "center" :valign "center" + :flipped "true" + :width 3 + :orientation "v" + :value {EWW_TEMPS[gpu-temp-key]} + ) ) - (progress - :class { EWW_TEMPS[gpu-temp-key] > temperature-threshold ? "temperature-progress-critical" : "temperature-progress-gpu" } - :halign "center" :valign "center" - :flipped "true" - :width 3 - :orientation "v" - :value {EWW_TEMPS[gpu-temp-key]} - ) - ))) + (label + :valign "end" + :class "temperature-icon" + :text "") + ))) (defwidget widget-cpu [] (box :class "cpu"