swaync.org

Sway Notification Center

As Deadd doesn’t work correctly at least on my convertible and brings problems on desktop too, I decided to try something else. And found Sway Notification Center.

So far it is working directly from Guix, so I just added "swaynotificationcenter" to list of packages.

Config

{
  "$schema": "/etc/xdg/swaync/configSchema.json",
  "positionX": "right",
  "positionY": "top",
  "control-center-margin-top": 10,
  "control-center-margin-bottom": 10,
  "control-center-margin-right": 10,
  "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": false,
  "control-center-width": 500,
  "control-center-height": 1033,
  "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,
  "text-empty": "Nothing here",
  "notification-visibility": {
    "element-x-from-mobile": {
      "state": "ignored",
      "app-name": "KDE Connect",
      "summary": "Element X"
    }
  },
  "widgets": [
    "buttons-grid",
    "volume",
    "backlight",
    "mpris"
  ],
  "widget-config": {
    "title": {
      "text": "Notification Center",
      "clear-all-button": true,
      "button-text": "󰆴 Clear"
    },
    "dnd": {
      "text": "Do Not Disturb"
    },
    "label": {
      "max-lines": 1,
      "text": "Notification Center"
    },
    "mpris": {
      "image-size": 100,
      "image-radius": 0,
      "blacklist": [
        "kew",
        "firefox",
        "spotify"
      ]
    },
    "volume": {
      "label": "󰕾"
    },
    "backlight": {
      "label": "󰃟"
    },
    "buttons-grid": {
      "actions": [
        {
          "label": "󰐥",
          "command": "systemctl poweroff"
        },
        {
          "label": "󰜉",
          "command": "systemctl reboot"
        },
        {
          "label": "󰌾",
          "command": "swaylock-corrupter"
        },
        {
          "label": "󰍃",
          "command": "swaymsg exit"
        },
        {
          "label": "󰆴",
          "command": "swaync-client -C"
        },
        {
          "label": "󰕾",
          "command": "pactl set-sink-mute @DEFAULT_SINK@ toggle",
          "type": "toggle"
        },
        {
          "label": "󰍬",
          "command": "pactl set-source-mute @DEFAULT_SOURCE@ toggle",
          "type": "toggle"
        },
        {
          "label": "󰖩",
          "command": "iwgtk"
        },
        {
          "label": "󰂯",
          "command": "blueman-manager"
        },
        {
          "label": "",
          "command": "kooha"
        }
      ]
    }
  }
}

Style

@define-color cc-bg #16161d;
@define-color noti-border-color #dcd7ba;
@define-color noti-bg #11111b;
@define-color noti-bg-darker #2b2b39;
@define-color noti-bg-hover #1b1b2b;
@define-color noti-bg-focus #1b1b1b;
@define-color noti-close-bg #dcd7ba;
@define-color noti-close-bg-hover #dcd7ba;
@define-color text-color #dcd7ba;
@define-color text-color-disabled #828282;
@define-color bg-selected #7e9cd8;
@define-color border-green #76946a;
@define-color red-base #c34043;
@define-color red-hover #e46876;
@define-color green-base #98bb6c;
@define-color blue-base #7e9cd8;

 * {
    font-family: "JetBrainsMono NFM SemiBold", monospace;
    border-radius: 0;
}

.control-center .notification-row:focus,
.control-center .notification-row:hover {
    background: @noti-bg-darker;
}

.notification-row {
    outline: none;
    margin: 0;
    padding: 0;
}

.notification,
.notification-content,
.notification-action,
.notification-default-action,
.inline-reply-entry,
.inline-reply-button,
.widget-title,
.widget-title > button,
.widget-dnd,
.widget-dnd > switch,
.widget-dnd > switch slider,
.widget-label > label,
.widget-buttons-grid,
.widget-buttons-grid > flowbox > flowboxchild > button,
.widget-volume,
.widget-backlight,
.widget-mpris,
.widget-mpris > box > button,
.widget-mpris-player,
.widget-mpris-album-art {
    border-radius: 0;
}

.notification {
    background: @cc-bg;
    border: 2px solid @border-green;
    margin: 3px -2px 3px 0;
}

.close-button {
    background: @red-base;
    color: @cc-bg;
    text-shadow: none;
    padding: 0;
    margin-top: 5px;
    margin-right: 5px;
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    border-radius: 0;
    border: none;
}

.notification:hover .close-button {
    opacity: 1;
}

.close-button:hover {
    background: @red-hover;
    box-shadow: none;
    transition: all 0.15s ease-in-out;
}

.notification-action {
    border: 2px solid @border-green;
    border-top: none;
}

.notification-default-action:hover,
.notification-action:hover {
    color: @blue-base;
    background: @cc-bg;
}

.inline-reply-entry {
    background: @noti-bg-darker;
    color: @text-color;
    caret-color: @text-color;
    border: 1px solid @noti-border-color;
}

.inline-reply-button {
    margin-top: 4px;
    margin-left: 4px;
    background: @noti-bg;
    border: 1px solid @noti-border-color;
    color: @text-color;
}

.inline-reply-button:disabled {
    background: transparent;
    color: @text-color-disabled;
    border: 1px solid transparent;
}

.inline-reply-button:hover {
    background: @noti-bg-hover;
}

.summary {
    font-size: 16px;
    font-weight: 700;
    background: transparent;
    color: @green-base;
    text-shadow: none;
}

.time {
    font-size: 16px;
    font-weight: 700;
    background: transparent;
    color: @text-color;
    text-shadow: none;
    margin-right: 18px;
}

.body {
    font-size: 15px;
    font-weight: 400;
    background: transparent;
    color: @text-color;
    text-shadow: none;
}

.control-center {
    background: @cc-bg;
    border: 2px solid @border-green;
}

.widget-title {
    color: @blue-base;
    background: @noti-bg-darker;
    padding: 5px 10px;
    margin: 10px;
    font-size: 1.5rem;
}

.widget-title > button {
    font-size: 1rem;
    color: @text-color;
    background: @noti-bg;
    box-shadow: none;
}

.widget-title > button:hover {
    background: @red-base;
    color: @cc-bg;
}

.widget-dnd {
    background: @noti-bg-darker;
    padding: 5px 10px;
    margin: 5px 10px;
    font-size: large;
    color: @blue-base;
}

.widget-dnd > switch {
    background: @blue-base;
    border-radius: 0;
}

.widget-dnd > switch:checked {
    background: @red-base;
    border: 1px solid @red-base;
}

.widget-label > label {
    font-size: 1rem;
    color: @text-color;
    margin: 10px;
}

.widget-buttons-grid {
    font-size: x-large;
    padding: 5px;
    margin: 10px;
    background: @noti-bg-darker;
}

.widget-buttons-grid > flowbox > flowboxchild > button {
    margin: 3px;
    background: @cc-bg;
    color: @text-color;
    transition: background-color 0.15s ease-in-out;
}

.widget-buttons-grid > flowbox > flowboxchild > button:hover {
    background: @blue-base;
    color: @cc-bg;
}

.widget-buttons-grid > flowbox > flowboxchild > button:checked {
    background: @green-base;
    color: @cc-bg;
}

.widget-volume,
.widget-backlight {
    background: @noti-bg-darker;
    padding: 5px;
    margin: 5px 10px;
    font-size: 2rem;
    color: @blue-base;
}

.widget-mpris {
    color: @text-color;
    background: @noti-bg-darker;
    padding: 5px 10px;
    margin: 5px 10px 5px 10px;
    box-shadow: none;
}

.widget-mpris > box > button,
.widget-mpris-player,
.widget-mpris-album-art {
    border-radius: 0;
    box-shadow: none;
    padding: 5px 10px;
    margin: 10px 0 0 0;
}