User:Fraolt/Dogfooding:Pocophone F1
Setup SXMO status bar
I'm using waybar (to address the poco's enormous notch) and swaync (to have persistent notifications).
It looks like this:

The green space at the top in middle is where the notch is (I wasn't kidding when I said, it's enormous).
swaync
Install package swayncsand create a swaync superd service file called /etc/superd/services/swaync.service
:
[Unit] Description=lightweight notification daemon for Wayland compositors [Service] Type=simple Restart=always ExecStart=/usr/bin/swaync
Furthermore, let's create a service for using the poco's LED as an indicator for pending notifications. Let's call it swaync_poco_f1_led.sh
and put it in /usr/local/bin
:
#!/bin/sh
# License: MIT
# Copyright 2025 Frank Oltmanns
# This script monitors notifications from the SwayNotificationCenter using `swaync-client -s`.
# It adjusts the brightness of the LED device `white:status` to visually indicate notification states:
# - Turns the LED on when new notifications arrive.
# - Turns the LED off when the user is viewing the notification center or when there are no notifications.
#
# Sample output from `swaync-client -s`:
# { "count": 0, "dnd": false, "visible": false, "inhibited": false }
# { "count": 1, "dnd": false, "visible": false, "inhibited": false }
# { "count": 1, "dnd": false, "visible": true, "inhibited": false }
#
# Variables:
# - count: The number of current notifications.
# - visible: A boolean indicating whether the user is currently viewing the notification center.
#
last_count=0
set_led() {
if [ "$1" = "on" ]; then
brightnessctl --device='white:status' set 100%
elif [ "$1" = "off" ]; then
brightnessctl --device='white:status' set 0%
fi
}
swaync-client -s | while read -r line; do
count=$(echo "$line" | jq -r '.count')
visible=$(echo "$line" | jq -r '.visible')
if [ "$visible" = "true" ]; then
set_led off
elif [ "$count" -eq 0 ]; then
set_led off
elif [ "$count" -gt "$last_count" ]; then
set_led on
fi
last_count=$count
done
And a superctl service file /etc/superd/services/swaync_poco_f1_led.service
:
[Unit]
Description=Use LED to notify about pending notifications
[Service]
Type=simple
Restart=always
ExecStart=/usr/local/bin/swaync_poco_f1_led.sh
My SwayNC config ~/.config/swaync/config.json
looks like below. It lets the phone vibrate if a notification is received (I don't play a sound, but maybe I'll add that too at some point). Note, that the vibrate option adheres to the SXMO setting for vibration, so if you disable vibration in SXMO's config section, it will not vibrate if a notification is received (kind of what you'd expect from a "real" desktop environment).
I also added some toggles, to play with. I'm not yet sure what else I should add. Ping me at \#sxmo-offtopic with your suggestions. :)
{ "$schema": "/etc/xdg/swaync/configSchema.json", "positionX": "right", "positionY": "top", "layer": "overlay", "control-center-layer": "top", "layer-shell": true, "cssPriority": "application", "control-center-margin-top": 0, "control-center-margin-bottom": 0, "control-center-margin-right": 0, "control-center-margin-left": 0, "notification-2fa-action": true, "notification-inline-replies": false, "notification-icon-size": 64, "notification-body-image-height": 100, "notification-body-image-width": 200, "timeout": 10, "timeout-low": 5, "timeout-critical": 0, "fit-to-screen": true, "relative-timestamps": true, "control-center-width": 500, "control-center-height": 600, "notification-window-width": 500, "keyboard-shortcuts": true, "image-visibility": "when-available", "transition-time": 200, "hide-on-clear": false, "hide-on-action": true, "script-fail-notify": true, "scripts": { "vibrate-low": { "exec": "/bin/sh -c '[[ -f \"$XDG_CONFIG_HOME\"/sxmo/.novibrate ]] || /usr/bin/sxmo_vibrate 250 $SXMO_VIBRATE_STRENGTH'", "urgency": "Low" }, "vibrate-normal": { "exec": "/bin/sh -c '[[ -f \"$XDG_CONFIG_HOME\"/sxmo/.novibrate ]] || /usr/bin/sxmo_vibrate 250 $SXMO_VIBRATE_STRENGTH'", "urgency": "Normal" }, "vibrate-critical": { "exec": "/bin/sh -c '[[ -f \"$XDG_CONFIG_HOME\"/sxmo/.novibrate ]] || /usr/bin/sxmo_vibrate 500 $SXMO_VIBRATE_STRENGTH'", "urgency": "Critical" } }, "notification-visibility": { "example-name": { "state": "muted", "urgency": "Low", "app-name": "Spotify" } }, "widgets": [ "inhibitors", "title", "dnd", "buttons-grid", "notifications" ], "widget-config": { "inhibitors": { "text": "Inhibitors", "button-text": "Clear All", "clear-all-button": true }, "title": { "text": "Notifications", "clear-all-button": true, "button-text": "Clear All" }, "dnd": { "text": "Do Not Disturb" }, "label": { "max-lines": 5, "text": "Label Text" }, "mpris": { "image-size": 96, "image-radius": 12 }, "buttons-grid": { "actions": [ { "label": "", "type": "toggle", "active": true, "command": "sh -c '[[ $SWAYNC_TOGGLE_STATE == true ]] && nmcli radio wifi on || nmcli radio wifi off'", "update_command": "sh -c '[[ $(nmcli radio wifi) == \"enabled\" ]] && echo true || echo false'" }, { "label": "Ring", "type": "toggle", "active": true, "command": "sh -c '[[ $SWAYNC_TOGGLE_STATE == true ]] && rm \"$XDG_CONFIG_HOME\"/sxmo/.noring || touch \"$XDG_CONFIG_HOME\"/sxmo/.noring'", "update_command": "sh -c '[[ -f \"$XDG_CONFIG_HOME\"/sxmo/.noring ]] && echo false || echo true'" }, { "label": "Vibrate", "type": "toggle", "active": true, "command": "sh -c '[[ $SWAYNC_TOGGLE_STATE == true ]] && rm \"$XDG_CONFIG_HOME\"/sxmo/.novibrate || touch \"$XDG_CONFIG_HOME\"/sxmo/.novibrate'", "update_command": "sh -c '[[ -f \"$XDG_CONFIG_HOME\"/sxmo/.novibrate ]] && echo false || echo true'" } ] } } }
- This is the SwayNC style (
./.config/swaync/
)
@define-color cc-bg rgba(46, 46, 46, 0.7);
@define-color noti-border-color rgba(255, 255, 255, 0.15);
@define-color noti-bg rgba(48, 48, 48, 0.8);
@define-color noti-bg-opaque rgb(48, 48, 48);
@define-color noti-bg-darker rgb(38, 38, 38);
@define-color noti-bg-hover rgb(56, 56, 56);
@define-color noti-bg-hover-opaque rgb(56, 56, 56);
@define-color noti-bg-focus rgba(68, 68, 68, 0.6);
@define-color noti-close-bg rgba(255, 255, 255, 0.1);
@define-color noti-close-bg-hover rgba(255, 255, 255, 0.15);
@define-color text-color rgb(255, 255, 255);
@define-color text-color-disabled rgb(150, 150, 150);
@define-color bg-selected rgb(0, 128, 255);
.notification-row {
outline: none;
}
.notification-row:focus, .notification-row:hover {
background: @noti-bg-focus;
}
.notification-row .notification-background {
padding: 6px 12px;
}
.notification-row .notification-background .close-button {
/* The notification Close Button */
background: @noti-close-bg;
color: @text-color;
text-shadow: none;
padding: 0;
border-radius: 100%;
margin-top: 5px;
margin-right: 5px;
box-shadow: none;
border: none;
min-width: 24px;
min-height: 24px;
}
.notification-row .notification-background .close-button:hover {
box-shadow: none;
background: @noti-close-bg-hover;
transition: background 0.15s ease-in-out;
border: none;
}
.notification-row .notification-background .notification {
/* The actual notification */
border-radius: 12px;
border: 1px solid @noti-border-color;
padding: 0;
transition: background 0.15s ease-in-out;
background: @noti-bg;
}
.notification-row .notification-background .notification.low {
/* Low Priority Notification */
}
.notification-row .notification-background .notification.normal {
/* Normal Priority Notification */
}
.notification-row .notification-background .notification.critical {
/* Critical Priority Notification */
}
.notification-row .notification-background .notification .notification-action, .notification-row .notification-background .notification .notification-default-action {
padding: 4px;
margin: 0;
box-shadow: none;
background: transparent;
border: none;
color: @text-color;
transition: background 0.15s ease-in-out;
}
.notification-row .notification-background .notification .notification-action:hover, .notification-row .notification-background .notification .notification-default-action:hover {
-gtk-icon-effect: none;
background: @noti-bg-hover;
}
.notification-row .notification-background .notification .notification-default-action {
/* The large action that also displays the notification summary and body */
border-radius: 12px;
}
.notification-row .notification-background .notification .notification-default-action:not(:only-child) {
/* When alternative actions are visible */
border-bottom-left-radius: 0px;
border-bottom-right-radius: 0px;
}
.notification-row .notification-background .notification .notification-default-action .notification-content {
background: transparent;
border-radius: 12px;
padding: 4px;
}
.notification-row .notification-background .notification .notification-default-action .notification-content .image {
/* Notification Primary Image */
-gtk-icon-effect: none;
border-radius: 100px;
/* Size in px */
margin: 4px;
}
.notification-row .notification-background .notification .notification-default-action .notification-content .app-icon {
/* Notification app icon (only visible when the primary image is set) */
-gtk-icon-effect: none;
-gtk-icon-shadow: 0 1px 4px black;
margin: 6px;
}
.notification-row .notification-background .notification .notification-default-action .notification-content .text-box .summary {
/* Notification summary/title */
font-size: 16px;
font-weight: bold;
background: transparent;
color: @text-color;
text-shadow: none;
}
.notification-row .notification-background .notification .notification-default-action .notification-content .text-box .time {
/* Notification time-ago */
font-size: 16px;
font-weight: bold;
background: transparent;
color: @text-color;
text-shadow: none;
margin-right: 30px;
}
.notification-row .notification-background .notification .notification-default-action .notification-content .text-box .body {
/* Notification body */
font-size: 15px;
font-weight: normal;
background: transparent;
color: @text-color;
text-shadow: none;
}
.notification-row .notification-background .notification .notification-default-action .notification-content progressbar {
/* The optional notification progress bar */
margin-top: 4px;
}
.notification-row .notification-background .notification .notification-default-action .notification-content .body-image {
/* The "extra" optional bottom notification image */
margin-top: 4px;
background-color: white;
border-radius: 12px;
-gtk-icon-effect: none;
}
.notification-row .notification-background .notification .notification-default-action .notification-content .inline-reply {
/* The inline reply section */
margin-top: 4px;
}
.notification-row .notification-background .notification .notification-default-action .notification-content .inline-reply .inline-reply-entry {
background: @noti-bg-darker;
color: @text-color;
caret-color: @text-color;
border: 1px solid @noti-border-color;
border-radius: 12px;
}
.notification-row .notification-background .notification .notification-default-action .notification-content .inline-reply .inline-reply-button {
margin-left: 4px;
background: @noti-bg;
border: 1px solid @noti-border-color;
border-radius: 12px;
color: @text-color;
}
.notification-row .notification-background .notification .notification-default-action .notification-content .inline-reply .inline-reply-button:disabled {
background: initial;
color: @text-color-disabled;
border: 1px solid @noti-border-color;
border-color: transparent;
}
.notification-row .notification-background .notification .notification-default-action .notification-content .inline-reply .inline-reply-button:hover {
background: @noti-bg-hover;
}
.notification-row .notification-background .notification .notification-action {
/* The alternative actions below the default action */
border-top: 1px solid @noti-border-color;
border-radius: 0px;
border-right: 1px solid @noti-border-color;
}
.notification-row .notification-background .notification .notification-action:first-child {
/* add bottom border radius to eliminate clipping */
border-bottom-left-radius: 12px;
}
.notification-row .notification-background .notification .notification-action:last-child {
border-bottom-right-radius: 12px;
border-right: none;
}
.notification-group {
/* Styling only for Grouped Notifications */
}
.notification-group.low {
/* Low Priority Group */
}
.notification-group.normal {
/* Low Priority Group */
}
.notification-group.critical {
/* Low Priority Group */
}
.notification-group .notification-group-buttons, .notification-group .notification-group-headers {
margin: 0 16px;
color: @text-color;
}
.notification-group .notification-group-headers {
/* Notification Group Headers */
}
.notification-group .notification-group-headers .notification-group-icon {
color: @text-color;
}
.notification-group .notification-group-headers .notification-group-header {
color: @text-color;
}
.notification-group .notification-group-buttons {
/* Notification Group Buttons */
}
.notification-group.collapsed .notification-row .notification {
background-color: @noti-bg-opaque;
}
.notification-group.collapsed .notification-row:not(:last-child) {
/* Top notification in stack */
/* Set lower stacked notifications opacity to 0 */
}
.notification-group.collapsed .notification-row:not(:last-child) .notification-action,
.notification-group.collapsed .notification-row:not(:last-child) .notification-default-action {
opacity: 0;
}
.notification-group.collapsed:hover .notification-row:not(:only-child) .notification {
background-color: @noti-bg-hover-opaque;
}
.control-center {
/* The Control Center which contains the old notifications + widgets */
background: @cc-bg;
color: @text-color;
border-radius: 12px;
}
.control-center .control-center-list-placeholder {
/* The placeholder when there are no notifications */
opacity: 0.5;
}
.control-center .control-center-list {
/* List of notifications */
background: transparent;
}
.control-center .control-center-list .notification {
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.7), 0 2px 6px 2px rgba(0, 0, 0, 0.3);
}
.control-center .control-center-list .notification .notification-default-action,
.control-center .control-center-list .notification .notification-action {
transition: opacity 400ms ease-in-out, background 0.15s ease-in-out;
}
.control-center .control-center-list .notification .notification-default-action:hover,
.control-center .control-center-list .notification .notification-action:hover {
background-color: @noti-bg-hover;
}
.blank-window {
/* Window behind control center and on all other monitors */
background: transparent;
}
.floating-notifications {
background: transparent;
}
.floating-notifications .notification {
box-shadow: none;
}
/*** Widgets ***/
/* Title widget */
.widget-title {
color: @text-color;
margin: 8px;
font-size: 1.5rem;
}
.widget-title > button {
font-size: initial;
color: @text-color;
text-shadow: none;
background: @noti-bg;
border: 1px solid @noti-border-color;
box-shadow: none;
border-radius: 12px;
}
.widget-title > button:hover {
background: @noti-bg-hover;
}
/* DND widget */
.widget-dnd {
color: @text-color;
margin: 8px;
font-size: 1.1rem;
}
.widget-dnd > switch {
font-size: initial;
border-radius: 12px;
background: @noti-bg;
border: 1px solid @noti-border-color;
box-shadow: none;
}
.widget-dnd > switch:checked {
background: @bg-selected;
}
.widget-dnd > switch slider {
background: @noti-bg-hover;
border-radius: 12px;
}
/* Label widget */
.widget-label {
margin: 8px;
}
.widget-label > label {
font-size: 1.1rem;
}
/* Mpris widget */
@define-color mpris-album-art-overlay rgba(0, 0, 0, 0.55);
@define-color mpris-button-hover rgba(0, 0, 0, 0.50);
.widget-mpris {
/* The parent to all players */
}
.widget-mpris .widget-mpris-player {
padding: 8px;
padding: 16px;
margin: 16px 20px;
background-color: @mpris-album-art-overlay;
border-radius: 12px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.75);
}
.widget-mpris .widget-mpris-player button:hover {
/* The media player buttons (play, pause, next, etc...) */
background: @noti-bg-hover;
}
.widget-mpris .widget-mpris-player .widget-mpris-album-art {
border-radius: 12px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.75);
}
.widget-mpris .widget-mpris-player .widget-mpris-title {
font-weight: bold;
font-size: 1.25rem;
}
.widget-mpris .widget-mpris-player .widget-mpris-subtitle {
font-size: 1.1rem;
}
.widget-mpris .widget-mpris-player > box > button {
/* Change player control buttons */
}
.widget-mpris .widget-mpris-player > box > button:hover {
background-color: @mpris-button-hover;
}
.widget-mpris > box > button {
/* Change player side buttons */
}
.widget-mpris > box > button:disabled {
/* Change player side buttons insensitive */
}
/* Buttons widget */
.widget-buttons-grid {
padding: 8px;
margin: 8px;
border-radius: 12px;
background-color: @noti-bg;
}
.widget-buttons-grid > flowbox > flowboxchild > button {
background: @noti-bg;
border-radius: 12px;
color: @text-color;
}
.widget-buttons-grid > flowbox > flowboxchild > button.toggle:checked {
/* style given to the active toggle button */
background: @bg-selected;
}
/* Menubar widget */
.widget-menubar > box > .menu-button-bar > button {
border: none;
background: transparent;
}
/* .AnyName { Name defined in config after #
background-color: @noti-bg;
padding: 8px;
margin: 8px;
border-radius: 12px;
}
.AnyName>button {
background: transparent;
border: none;
}
.AnyName>button:hover {
background-color: @noti-bg-hover;
} */
.topbar-buttons > button {
/* Name defined in config after # */
border: none;
background: transparent;
}
/* Volume widget */
.widget-volume {
background-color: @noti-bg;
padding: 8px;
margin: 8px;
border-radius: 12px;
}
.widget-volume > box > button {
background: transparent;
border: none;
}
.per-app-volume {
background-color: @noti-bg-alt;
padding: 4px 8px 8px 8px;
margin: 0px 8px 8px 8px;
border-radius: 12px;
}
/* Backlight widget */
.widget-backlight {
background-color: @noti-bg;
padding: 8px;
margin: 8px;
border-radius: 12px;
}
/* Inhibitors widget */
.widget-inhibitors {
margin: 8px;
font-size: 1.5rem;
}
.widget-inhibitors > button {
font-size: initial;
color: @text-color;
text-shadow: none;
background: @noti-bg;
border: 1px solid @noti-border-color;
box-shadow: none;
border-radius: 12px;
}
.widget-inhibitors > button:hover {
background: @noti-bg-hover;
}
Copy the start hook (this command is safe and doesn't overwrite):
[ ! -d ~/.config/sxmo/hooks ] && mkdir -p ~/.config/sxmo/hooks
cp --update=none /usr/share/sxmo/default_hooks/sxmo_hook_start.sh ~/.config/sxmo/hooks/
In the start hook comment out starting the mako service and add starting the swaync service and the swaync poco f1 led service.
--- /usr/share/sxmo/default_hooks/sxmo_hook_start.sh
+++ /home/frank/.config/sxmo/hooks/sxmo_hook_start.sh
@@ -50,7 +50,9 @@
# load some other little things here too.
case "$SXMO_WM" in
sway)
- superctl start mako
+ #superctl start mako
+ superctl start swaync
+ superctl start swaync_poco_f1_led
superctl start sxmo_wob
superctl start sxmo_menumode_toggler
superctl start bonsaid
waybar
If target not already exists, copy /usr/share/sxmo/default_hooks/sxmo_hook_statusbar.sh
to ~/.config/sxmo/hooks/
:
[ ! -d ~/.config/sxmo/hooks ] && mkdir -p ~/.config/sxmo/hooks
cp --update=none /usr/share/sxmo/default_hooks/sxmo_hook_statusbar.sh ~/.config/sxmo/hooks/
Modify the following functions to immediately return and do nothing:
- settime
- setbattery
- setvolume
Replace the "bar" section in ~/.config/sxmo/sway
with
bar { swaybar_command waybar }
Create the following files (if you use a different scaling than 2 adjust the height accordingly): ~/.config/waybar/config.jsonc
:
// -*- mode: jsonc -*-
[
{
// "layer": "top", // Waybar at top layer
"position": "top", // Waybar position (top|bottom|left|right)
"height": 43, // Waybar height (to be removed for auto height)
//"width": 1800, // Waybar width
"margin-left": 20,
"margin-right": 400,
//"margin-top": 30,
"spacing": 4,
"fixed-center": true,
"modules-left": [
"clock",
"custom/notification"
],
"clock": {
// "timezone": "America/New_York",
"tooltip-format": "<big>{:%Y %B}</big>\n<tt><small>{calendar}</small></tt>",
"format-alt": "{:%Y-%m-%d}",
"locale": "C"
},
"custom/notification": {
"tooltip": false,
"format": "{} {icon}",
"format-icons": {
"notification": "<span foreground='red'><sup></sup></span>",
"none": "",
"dnd-notification": "<span foreground='red'><sup></sup></span>",
"dnd-none": "",
"inhibited-notification": "<span foreground='red'><sup></sup></span>",
"inhibited-none": "",
"dnd-inhibited-notification": "<span foreground='red'><sup></sup></span>",
"dnd-inhibited-none": ""
},
"return-type": "json",
"exec-if": "which swaync-client",
"exec": "swaync-client -swb",
"on-click": "swaync-client -t -sw",
"on-click-right": "swaync-client -d -sw",
"escape": true
},
},
{
// "layer": "top", // Waybar at top layer
"position": "top", // Waybar position (top|bottom|left|right)
"height": 43, // Waybar height (to be removed for auto height)
//"width": 1800, // Waybar width
"margin-right": 20,
"margin-left": 400,
"margin-top": -43, // Shift it to the top
"spacing": 4,
"fixed-center": true,
"modules-right": ["custom/sxmo_status"],
"custom/sxmo_status": {
"format": "{} ",
"exec": "sxmo_status_watch.sh -o pango"
},
},
{
// "layer": "top", // Waybar at top layer
// "position": "bottom", // Waybar position (top|bottom|left|right)
"height": 30, // Waybar height (to be removed for auto height)
// "width": 1280, // Waybar width
"spacing": 4, // Gaps between modules (4px)
// Choose the order of the modules
"modules-left": [
"sway/workspaces",
"sway/mode",
],
"modules-center": [
"sway/window"
],
"modules-right": [
"idle_inhibitor",
"pulseaudio",
"battery",
"tray"
],
// Modules configuration
"sway/mode": {
"format": "<span style=\"italic\">{}</span>"
},
"idle_inhibitor": {
"format": "{icon}",
"format-icons": {
"activated": "",
"deactivated": ""
}
},
"tray": {
// "icon-size": 21,
"spacing": 10
},
"battery": {
"states": {
"good": 100,
"ok": 80,
"lowish": 50,
"low": 30,
"critical": 15
},
"format": "{capacity}% {icon}",
"format-full": "{capacity}% {icon}",
"format-charging": "{capacity}% {icon} ",
"format-plugged": "{capacity}% ",
"format-alt": "{time} {icon}",
// "format-good": "", // An empty format will hide the module
// "format-full": "",
"format-icons": {
"critical": "",
"low": "",
"lowish": "",
"ok": "",
"good": ""
}
},
"pulseaudio": {
// "scroll-step": 1, // %, can be a float
"format": "{volume}% {icon} {format_source}",
"format-bluetooth": "{volume}% {icon} {format_source}",
"format-bluetooth-muted": " {icon} {format_source}",
"format-muted": " {format_source}",
"format-source": "{volume}% ",
"format-source-muted": "",
"format-icons": {
"headphone": "",
"hands-free": "",
"headset": "",
"phone": "",
"portable": "",
"car": "",
"default": ["", "", ""]
},
"on-click": "pavucontrol"
}
}
]
~/.config/waybar/style.css
:
* {
/* `otf-font-awesome` is required to be installed for icons */
font-family: FontAwesome, Roboto, Helvetica, Arial, sans-serif;
font-size: 13px;
}
window#waybar {
background: transparent;
color: #657b83; /* Grey */
transition-property: background-color;
transition-duration: 0.1s;
}
#window {
margin: 0 10px;
}
window > box {
margin: 2px 2px 0px 2px;
background: #fdf6e3; /* Solarized sun */
border: 1px solid black;
}
#battery,
#clock,
#cpu,
#language,
#memory,
#network,
#backlight,
#pulseaudio,
#tray,
#custom-power,
#idle_inhibitor {
padding: 0 10px;
color: #657b83; /* Grey */
background: #fdf6e3; /* Solarized sun */
}
#workspaces button {
color: #2aa198; /* Solarized cyan */
/*color: #657b83; Grey */
padding: 0 5px;
background-color: transparent;
}
#clock hover {
box-shadow: inherit;
text-shadow: inherit;
background: #657b83; /* Grey */
color: #fdf6e3; /* Solarized sun */
}
#workspaces button:hover {
box-shadow: inherit;
text-shadow: inherit;
background: #657b83; /* Grey */
}
#workspaces button.visible {
background: #657b83; /* Grey */
color: #fdf6e3; /* Solarized sun */
}
#workspaces button.focused {
background: #2aa198; /* Solarized cyan */
color: #fdf6e3; /* Solarized sun */
}
#workspaces button.urgent {
background-color: #eb4d4b;
color: #ffffff;
}
#mode {
padding: 2px 5px 2px 5px;
background: #657b83; /* Grey */
color: #fdf6e3; /* Solarized sun */
}
@keyframes blink {
to {
background-color: #ffffff;
color: #000000;
}
}
#battery.critical:not(.charging) {
background-color: #f53c3c;
color: #ffffff;
}
/*
#battery.warning:not(.charging) {
color: #000000;
background-color: #f1c40f;
}
*/
#battery.low {
color: #000000;
background-color: #f1c40f;
}
#battery.good.charging {
color: #ffffff;
background-color: #26A65B;
}
#battery.ok.charging,
#battery.lowish.charging,
#battery.low.charging,
#battery.critical.charging {
color: #000000;
background-color: #26A65B;
animation-name: blink;
animation-duration: 3.0s;
animation-timing-function: steps(20);
animation-iteration-count: infinite;
animation-direction: alternate;
}
#idle_inhibitor.activated {
background-color: #f53c3c;
color: #ffffff;
}
#network.disconnected {
background-color: #f53c3c;
}
#pulseaudio:not(.muted) {
background-color: #f1c40f;
color: #000000;
}
#pulseaudio:not(.source-muted) {
background-color: #f53c3c;
color: #000000;
}
#tray {
padding: 0 4px;
}
#cpu {
padding: 0 5px 0 5px;
}
#network {
padding-left: 5px;
}
label:focus {
background-color: #000000;
}