Can I make an inline container with labels and buttons?

[purrion]

I’d like to place the title, the DnD button, and the Clear button on the same line — similar to this image created by someone else using HyprPaper.

Is this possible in SwayNC?

Thanks in advance!

[purrion]

Update: I've already found a way to mimic that UI, by removing three built-in widgets and using a buttons-grid widget with some lines of CSS. However, the downside is I can not use keybindings for DnD & Clear buttons anymore.

Here is my config:

  "widgets": [
    "inhibitors",
    "buttons-grid#notifications-topbar",
    "notifications",
    "mpris"
  ],
  "widget-config": {
    "buttons-grid#notifications-topbar": {
      "actions": [
        {
          "label": "Notifications"
        },
        {
          "label": "",
          "command": "swaync-client -d",
          "type": "toggle"
        },
        {
          "label": "⌫",
          "command": "swaync-client -C",
          "type": "normal"
        }
      ]
    }

     (...)
  }

CSS:

.widget-buttons-grid.notifications-topbar,
.widget-buttons-grid.notifications-topbar button {
  all: unset;
  /* border: 1px solid red; */
  font-size: 1.4rem;
}

.widget-buttons-grid.notifications-topbar > flowbox > flowboxchild:first-child {
  margin-left: 10px;
  margin-right: 150px;
}

.widget-buttons-grid.notifications-topbar > flowbox > flowboxchild:first-child > button {
  font-weight: bold;
}

.widget-buttons-grid.notifications-topbar > flowbox > flowboxchild:not(:first-child) > button {
  border-radius: 20px;
}

.widget-buttons-grid.notifications-topbar > flowbox > flowboxchild:nth-child(2) > button {
  /* Do not disturb: false (default) */
  color: @dnd-btn-color-disabled;
}

.widget-buttons-grid.notifications-topbar > flowbox > flowboxchild:nth-child(2) > button.toggle:checked {
  /* Do not disturb: true */
  color: @dnd-btn-color-enabled;
}

.widget-buttons-grid.notifications-topbar > flowbox > flowboxchild:last-child > button {
  color: @noti-border-color; 
}

Preview: