aniva
/
config
1
1
Fork 0
Code Issues 3 Pull Requests 1 Packages Projects Releases Wiki Activity

feat: Eww bar colour adjustments

This commit is contained in:
Leni Aniva 2024-06-07 14:40:46 -07:00
parent b48bfabe9a
commit a2eb17df7e
Signed by: aniva
GPG Key ID: 4D9B1C8D10EA4C50
2 changed files with 76 additions and 46 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
eww/bar/eww.scss
View File

@ -13,9 +13,13 @@ $widget_bg: rgba(40, 40, 40, 0.5);
$weather: rgba(180, 220, 235, 0.8); $weather: rgba(180, 220, 235, 0.8);
$weather_end: rgba(171, 233, 179, 0.8); $weather_end: rgba(171, 233, 179, 0.8);
$media-progress-bg: #333333; $trough: rgba(0, 0, 0, 0.5);
$media: rgba(224, 232, 224, 0.7);
$media-paused: rgba(224, 200, 200, 0.7); $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 // Dims the desktop background so status icons can be seen against darker wallpapers
$status_bg: rgba(0, 0, 0, 0.3); $status_bg: rgba(0, 0, 0, 0.3);
@ -27,23 +31,25 @@ $volume: #fae3b0;
$microphone: #e8a2af; $microphone: #e8a2af;
$network: #f8bd96; $network: #f8bd96;
$backlight: #bd93f9; $backlight: #bd93f9;
$cpu-bg: #333333;
// Unused in favour of bluetooth widget
$bluetooth: #88bbeb;
$cpu: #96cdfb; $cpu: #96cdfb;
$memory-bg: #333333; $cpu-bg: rgba(150, 205, 251, 0.3);
// previously bluetooth colour // previously bluetooth colour
$memory: #caa9c7; $memory: #caa9c7;
//$memory: #88bbeb; $memory-bg: rgba(202, 169, 199, 0.3);
$temperature-bg: rgba(180, 180, 180, 0.5); $temperature-bg: rgba(180, 180, 180, 0.5);
$temperature: #b6b2b3; $temperature: #b6b2b3;
$temperature-critical: #ff6666; $temperature-critical: #ff6666;
$battery: #ddb6f2; $battery: #ddb6f2;
$clock: rgba(171, 233, 179, 1.0); $clock: rgba(171, 233, 179, 1.0);
// Styles all scales // Styles all scales
progressbar trough { progressbar trough {
all: unset; all: unset;
background-color: #333333; background-color: $trough;
border-radius: 5px; border-radius: 5px;
min-height: 80px; min-height: 80px;
min-width: 2px; min-width: 2px;
@ -51,21 +57,20 @@ progressbar trough {
} }
trough progress { trough progress {
all: unset; all: unset;
background-color: #00ff00; background-color: #00ff00; // Diagnostics colour
border-radius: 5px; border-radius: 5px;
min-width: 2px; min-width: 2px;
} }
scale trough { scale trough {
all: unset; all: unset;
background-color: #333333; background-color: $trough;
border-radius: 5px; border-radius: 5px;
min-height: 80px; min-height: 80px;
min-width: 2px; min-width: 2px;
//margin: .3rem 0 .3rem 0;
} }
trough highlight { trough highlight {
all: unset; all: unset;
background-color: #eeeeee; background-color: #ff0000; // Diagnostics colour
border-radius: 5px; border-radius: 5px;
} }
trough slider { trough slider {
@ -119,6 +124,7 @@ box .workspaces {
box .status { box .status {
background-color: $status_bg; background-color: $status_bg;
border-radius: 5px;
} }
box .weather { box .weather {
@ -187,14 +193,21 @@ box .weather {
padding-left: 10px; padding-left: 10px;
color: $media-paused; color: $media-paused;
} }
.media-text-stopped {
padding-left: 10px;
color: $media-stopped;
}
.media-playing { .media-playing {
background-color: $media-progress-bg; background-color: $media-progress-bg;
color: $media;
} }
.media-paused { .media-paused {
background-color: $media-progress-bg; background-color: $media-paused-progress-bg;
color: $media-paused; color: $media-paused;
} }
.media-stopped {
background-color: $media-paused-progress-bg;
color: $media-stopped;
}
} }
box .temperature { box .temperature {
@ -202,6 +215,12 @@ box .temperature {
border-left: 2px solid $temperature-bg; border-left: 2px solid $temperature-bg;
margin-bottom: 1px; margin-bottom: 1px;
margin-top: 1px; margin-top: 1px;
}
.temperature-icon {
padding-left: 5px;
font-size: 20px;
color: mix($temperature, transparent, 70%);
} }
.temperature-progress-cpu trough progress { .temperature-progress-cpu trough progress {
background-color: mix($cpu, $temperature, 50%); background-color: mix($cpu, $temperature, 50%);
@ -235,7 +254,11 @@ box .clock {
background-color: transparent; background-color: transparent;
color: $clock; color: $clock;
margin-top: 1px; margin-top: 1px;
font-family: Ariel;
border-left: 2px solid $clock; border-left: 2px solid $clock;
.icon {
color: mix($clock, transparent, 50%);
}
} }
.systray { .systray {
//background-color: $tray_bg; //background-color: $tray_bg;

69
eww/bar/eww.yuck
View File

@ -65,34 +65,35 @@
:class "media" :class "media"
:orientation "v" :orientation "v"
:space-evenly false :space-evenly false
:valign "center" :valign "end"
:tooltip {media-position-text} :tooltip "${media-status == 'Paused' ? '' : media-status == 'Playing' ? '' : ''} ${media-position-text}"
(eventbox (eventbox
:onclick "playerctl play-pause" :onclick "playerctl play-pause"
(circular-progress (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 :width 20
:height 20 :height 20
:thickness 5 :thickness 5
:value {100.0 * media-position / (media-length / 1000000.0)} :value {100.0 * media-position / (media-length / 1000000.0)}
:visible {media-current != "" && media-length != 1} :visible {media-current != "" && media-status != "Stopped"}
)) ))
(label (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 :angle 270
:xalign 0.5 :xalign 0.5
:yalign 0.5 :yalign 0.5
:justify "center" :justify "center"
:limit-width 120 :limit-width 120
:text {media-current != "" ? "『${media-current}』" : "『』"}) :text "『${media-current}』"
)) )))
(deflisten media-current :initial "" (deflisten media-current :initial ""
"playerctl --follow metadata --format '{{ artist }} / {{album}} / {{ title }}' || true") "playerctl --follow metadata --format '{{ artist }} / {{album}} / {{ title }}' || true")
(deflisten media-position-text :initial "" (deflisten media-position-text :initial ""
"playerctl --follow metadata --format '{{duration(position)}} / {{duration(mpris:length)}}' || true") "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") "playerctl position")
(deflisten media-length :initial 1 (deflisten media-length :initial 1
"playerctl --follow metadata mpris:length") "playerctl --follow metadata mpris:length")
@ -168,30 +169,36 @@
(defwidget widget-temperature [] (defwidget widget-temperature []
(eventbox (eventbox
:onclick temperature-monitor :onclick temperature-monitor
(box (overlay
:class "temperature" (box
:orientation "h" :class "temperature"
:tooltip "CPU ${EWW_TEMPS[cpu-temp-key]}C; GPU ${EWW_TEMPS[gpu-temp-key]}C" :orientation "h"
:space-evenly true :tooltip "CPU ${EWW_TEMPS[cpu-temp-key]}°C; GPU ${EWW_TEMPS[gpu-temp-key]}°C"
:width 25 :space-evenly true
:halign "" :valign "center" :width 25
(progress :halign "" :valign "center"
:class { EWW_TEMPS[cpu-temp-key] > temperature-threshold ? "temperature-progress-critical" : "temperature-progress-cpu" } (progress
:halign "center" :valign "center" :class { EWW_TEMPS[cpu-temp-key] > temperature-threshold ? "temperature-progress-critical" : "temperature-progress-cpu" }
:flipped "true" :halign "center" :valign "center"
:width 3 :flipped "true"
:orientation "v" :width 3
:value {EWW_TEMPS[cpu-temp-key]} :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 (label
:class { EWW_TEMPS[gpu-temp-key] > temperature-threshold ? "temperature-progress-critical" : "temperature-progress-gpu" } :valign "end"
:halign "center" :valign "center" :class "temperature-icon"
:flipped "true" :text "")
:width 3 )))
:orientation "v"
:value {EWW_TEMPS[gpu-temp-key]}
)
)))
(defwidget widget-cpu [] (defwidget widget-cpu []
(box (box
:class "cpu" :class "cpu"