Добавлены анимации при низком заряде, изменён цвет текста

This commit is contained in:
DIvan2000 2024-12-05 01:03:30 +04:00
parent 04f236a9fc
commit 00075a19f0
2 changed files with 76 additions and 55 deletions

14
config
View File

@ -2,11 +2,11 @@
"reload_style_on_change": true, "reload_style_on_change": true,
"layer": "top", // Waybar at top layer "layer": "top", // Waybar at top layer
"position": "top", // Waybar at the bottom of your screen "position": "top", // Waybar at the bottom of your screen
"height": 10, // Waybar height "height": 20, // Waybar height
// "width": 1366, // Waybar width // "width": 1366, // Waybar width
// Choose the order of the modules // Choose the order of the modules
"modules-left": ["hyprland/workspaces", "hyprland/language"], "modules-left": ["hyprland/workspaces", "tray", "hyprland/language"],
"modules-right": ["pulseaudio", "network", "cpu", "memory", "battery", "tray", "clock", "group/power"], "modules-right": ["pulseaudio", "network", "cpu", "memory", "battery", "clock", "group/power"],
"modules-center": ["hyprland/window"], "modules-center": ["hyprland/window"],
"hyprland/language": { "hyprland/language": {
@ -25,6 +25,7 @@
"spacing": 10 "spacing": 10
}, },
"clock": { "clock": {
"interval": 5,
"format-alt": "{:%Y-%m-%d}", "format-alt": "{:%Y-%m-%d}",
"tooltip-format": "<tt><small>{calendar}</small></tt>", "tooltip-format": "<tt><small>{calendar}</small></tt>",
"calendar": { "calendar": {
@ -38,7 +39,7 @@
"weeks": "<span color='#99ffdd'><b>W{}</b></span>", "weeks": "<span color='#99ffdd'><b>W{}</b></span>",
"weekdays": "<span color='#ffcc66'><b>{}</b></span>", "weekdays": "<span color='#ffcc66'><b>{}</b></span>",
"today": "<span color='#ff6699'><b><u>{}</u></b></span>" "today": "<span color='#ff6699'><b><u>{}</u></b></span>"
} }
} }
}, },
"cpu": { "cpu": {
@ -48,6 +49,7 @@
"format": "{}% " "format": "{}% "
}, },
"battery": { "battery": {
"interval": 5,
"states": { "states": {
"good": 90, "good": 90,
"warning": 30, "warning": 30,
@ -61,7 +63,7 @@
"network": { "network": {
// "interface": "wlp2s0", // (Optional) To force the use of this interface // "interface": "wlp2s0", // (Optional) To force the use of this interface
"format-wifi": "{essid} ({signalStrength}%) ", "format-wifi": "{essid} ({signalStrength}%) ",
"format-ethernet": "{ifname}: {ipaddr}/{cidr} ", "format-ethernet": "{ifname}: {ipaddr}/{cidr} ",
"format-disconnected": "Disconnected ⚠" "format-disconnected": "Disconnected ⚠"
}, },
"pulseaudio": { "pulseaudio": {
@ -111,7 +113,7 @@
"on-click": "reboot" "on-click": "reboot"
}, },
"custom/power": { "custom/power": {
"format": " ", "format": "  ",
"tooltip": false, "tooltip": false,
"on-click": "shutdown now" "on-click": "shutdown now"
} }

117
style.css
View File

@ -1,25 +1,27 @@
@import "mocha.css"; @import "mocha.css";
@define-color text @teal;
* { * {
border: none; border: none;
border-radius: 0; border-radius: 0;
font-family: "Noto Nerd Font"; font-family: "Noto Nerd Font";
font-size: 13px; font-size: 13px;
min-height: 0; min-height: 0;
} }
window#waybar { window#waybar {
background: alpha(@surface0, 0.7); background: @surface0;
color: @text; color: @text;
} }
#window { #window {
font-weight: bold; font-weight: bold;
font-family: "Noto"; font-family: "Noto";
} }
/* /*
#workspaces { #workspaces {
padding: 0 5px; padding: 0 5px;
} }
*/ */
.modules-left { .modules-left {
@ -63,65 +65,86 @@ window#waybar {
} }
#workspaces button { #workspaces button {
padding: 0 5px; padding: 0 5px;
background: transparent; background: transparent;
color: @text; color: @text;
border-top: 2px solid @surface0; border-top: 2px solid @surface0;
} }
#workspaces button.focused { #workspaces button.focused {
color: @text; color: @text;
border-top: 2px solid @text; border-top: 2px solid @text;
} }
#workspaces button.active { #workspaces button.active {
color: @green; color: @green;
border-top: 2px solid @green; border-top: 2px solid @green;
} }
#workspaces button.urgent { #workspaces button.urgent {
border-color: @red; border-color: @red;
color: @red; color: @red;
border-top: 2px solid @red; border-top: 2px solid @red;
}
#modules-right {
background: @base;
}
#language, #clock, #battery, #cpu, #memory, #network, #pulseaudio, #custom-spotify, #tray, #mode {
padding: 0 5px;
margin: 0 2px;
} }
#clock { #clock {
font-weight: bold; padding: 0 10px;
margin: 0 1px;
background: alpha(@mauve,0.2);
border-radius: 5px;
font-weight: bold;
}
#language, #battery, #cpu, #memory, #network, #pulseaudio, #custom-spotify, #tray, #mode {
padding: 0 10px;
margin: 0 1px;
}
#clock {
} }
#battery { #battery {
} }
#battery icon { #battery icon {
color: red; color: @red;
}
@keyframes critical {
to {
color: @red;
}
}
@keyframes good {
to {
color: @blue;
}
} }
#battery.charging { #battery.charging {
} color: @text;
animation-name: good;
@keyframes blink { animation-duration: 3.5s;
to { animation-timing-function: ease-out;
background-color: #ffffff; animation-iteration-count: infinite;
color: black; animation-direction: alternate;
}
} }
#battery.warning:not(.charging) { #battery.warning:not(.charging) {
color: white; color: @text;
animation-name: blink; animation-name: critical;
animation-duration: 0.5s; animation-duration: 1.5s;
animation-timing-function: linear; animation-timing-function: ease-out;
animation-iteration-count: infinite; animation-iteration-count: infinite;
animation-direction: alternate; animation-direction: alternate;
}
#battery.critical:not(.charging) {
color: @text;
animation-name: critical;
animation-duration: 0.5s;
animation-timing-function: linear;
animation-iteration-count: infinite;
animation-direction: alternate;
} }
#cpu { #cpu {
@ -134,7 +157,7 @@ window#waybar {
} }
#network.disconnected { #network.disconnected {
color: @red; color: @red;
} }
#pulseaudio { #pulseaudio {
@ -143,10 +166,6 @@ window#waybar {
#pulseaudio.muted { #pulseaudio.muted {
} }
#custom-spotify {
color: rgb(102, 220, 105);
}
#tray { #tray {
} }