feat(waybar): add battery module and styles

This commit is contained in:
2026-03-23 14:25:53 -04:00
parent 1f7ed68ce7
commit 7c7b0dbb47
3 changed files with 144 additions and 22 deletions

View File

@@ -23,6 +23,7 @@
"pulseaudio",
"cpu",
"memory",
"battery",
"tray",
"custom/power"
],
@@ -34,6 +35,27 @@
"interval": 5,
"format": "󰻠 {usage}%"
},
"battery": {
"states": {
"warning": 30,
"critical": 15
},
"format": "{icon} {capacity}%",
"format-charging": "󰂄 {capacity}%",
"format-plugged": " {capacity}%",
"format-full": "󰁹 100%",
"format-icons": [
"󰂎",
"󰁺",
"󰁼",
"󰁾",
"󰂀",
"󰂂",
"󰁹"
],
"interval": 10,
"tooltip": true
},
"tray": {
"icon-size": 18,
"spacing": 6,
@@ -83,7 +105,7 @@
}
},
"clock": {
"format": "{:%a %d %b}",
"format": "{:%a %d %b - %H:%m}",
"rotate": 0,
"tooltip-format": "<tt>{calendar}</tt>",
"calendar": {

View File

@@ -1,51 +1,81 @@
<?xml version="1.0" encoding="UTF-8"?>
<interface>
<object class="GtkMenu" id="menu">
<child>
<object class="GtkMenuItem" id="section-session">
<property name="label">Session</property>
<property name="sensitive">False</property>
<property name="can-focus">False</property>
<style>
<class name="section-header"/>
</style>
</object>
</child>
<!-- Session controls -->
<child>
<object class="GtkMenuItem" id="lock">
<property name="label"> Lock</property>
<property name="label">󰌾 Lock</property>
</object>
</child>
<child>
<object class="GtkMenuItem" id="logout">
<property name="label">󰍃 Logout</property>
<property name="label">󰍃 Log Out</property>
</object>
</child>
<child>
<object class="GtkSeparatorMenuItem" id="sep1" />
<object class="GtkSeparatorMenuItem" id="sep1"/>
</child>
<child>
<object class="GtkMenuItem" id="section-sleep">
<property name="label">Sleep</property>
<property name="sensitive">False</property>
<property name="can-focus">False</property>
<style>
<class name="section-header"/>
</style>
</object>
</child>
<!-- Power controls -->
<child>
<object class="GtkMenuItem" id="suspend">
<property name="label"> Suspend</property>
</object>
</child>
<child>
<object class="GtkMenuItem" id="hibernate">
<property name="label">⏾ Hibernate</property>
<property name="label">󰤄 Suspend</property>
</object>
</child>
<child>
<object class="GtkSeparatorMenuItem" id="sep2" />
<object class="GtkMenuItem" id="hibernate">
<property name="label">󰒲 Hibernate</property>
</object>
</child>
<child>
<object class="GtkSeparatorMenuItem" id="sep2"/>
</child>
<child>
<object class="GtkMenuItem" id="section-power">
<property name="label">Power</property>
<property name="sensitive">False</property>
<property name="can-focus">False</property>
<style>
<class name="section-header"/>
</style>
</object>
</child>
<child>
<object class="GtkMenuItem" id="reboot">
<property name="label">󰜉 Reboot</property>
</object>
</child>
<child>
<object class="GtkMenuItem" id="shutdown">
<property name="label"> Shutdown</property>
<property name="label">󰐥 Shut Down</property>
</object>
</child>
<child>
<object class="GtkMenuItem" id="reboot">
<property name="label"> Reboot</property>
</object>
</child>
</object>
</interface>

View File

@@ -44,6 +44,7 @@ tooltip {
#pulseaudio,
#cpu,
#memory,
#battery,
#tray,
#custom-power {
background: @background;
@@ -100,7 +101,7 @@ tooltip {
#clock {
border-color: alpha(@accent, 0.35);
color: @foreground;
font-weight: 700;
font-weight: 400;
padding: 0 18px;
}
@@ -121,6 +122,23 @@ tooltip {
color: @warning;
}
#battery {
color: @accent-soft;
}
#battery.charging,
#battery.plugged {
color: @accent;
}
#battery.warning:not(.charging) {
color: @warning;
}
#battery.critical:not(.charging) {
color: @danger;
}
#tray {
padding: 0 14px;
}
@@ -137,6 +155,7 @@ tooltip {
#pulseaudio:hover,
#cpu:hover,
#memory:hover,
#battery:hover,
#tray:hover,
#custom-power:hover,
#clock:hover {
@@ -152,3 +171,54 @@ tooltip {
.hidden {
opacity: 0;
}
menu#menu {
background: @background;
border: 1px solid alpha(@accent-alt, 0.24);
border-radius: 14px;
padding: 8px;
}
menu#menu menuitem {
border-radius: 10px;
margin: 2px 4px;
padding: 6px 12px;
}
menu#menu menuitem:hover {
background: @background-alt;
}
menu#menu menuitem.section-header {
color: @foreground-muted;
font-size: 12px;
margin-top: 4px;
padding: 4px 12px;
}
menu#menu menuitem#lock {
color: @accent;
}
menu#menu menuitem#logout {
color: @accent-soft;
}
menu#menu menuitem#suspend,
menu#menu menuitem#hibernate {
color: @type;
}
menu#menu menuitem#reboot {
color: @warning;
}
menu#menu menuitem#shutdown {
color: @danger;
font-weight: 700;
}
menu#menu separator {
background: alpha(@accent-alt, 0.24);
margin: 6px 10px;
}