Designs and configs

[phuhl]

Share your configs and designs here :)

[ahmubashshir]

@define-color fg #fff;
@define-color bg rgba(27, 34, 36, 1.0);
@define-color border #181C1C;

@define-color critical rgb(120, 34, 36);
@define-color low rgb(39, 41, 52);

@define-color critical_popup rgba(120, 34, 36, 0.5);
@define-color low_popup rgba(39, 41, 52, 0.5);

@define-color close rgb(20, 26, 27);
@define-color close_normal rgba(145, 90, 94, 0.75);
@define-color close_hover rgb(244, 96, 103);
@define-color close_active rgb(241, 48, 57);

.blurredBG,
#main_window,
.blurredBG.low,
.blurredBG.normal {
	background: @bg;
}

.blurredBG.notification {
	background: rgba(31, 40, 42, 0.75);
	border-radius: 5px;
}

#img_img {
	border-radius: 10px;
}

.blurredBG.notification.critical {
	background: @critical_popup;
}

.blurredBG.notification.low {
	background: @low_popup;
}

.notificationInCenter {
	border-radius: 3px;
	border: 1pt @border solid;
	margin-right: 0.75em;
	margin-left: 0.5em;
}

.notificationInCenter.critical {
	background: @critical;
}

.notificationInCenter.low {
	background: @low;
}

.undershoot.top,
.undershoot.right,
.undershoot.bottom,
.undershoot.left {
	background-image: none;
}


button.userbutton:not(:hover):not(:active),
button.delete-all:not(:hover):not(:active) {
	border: 0.1em #1A1A1A solid;
}

button.deadd-noti-center.delete-all {
	margin-bottom: 2px;
}

button.button-close {
	background: @close_normal center;
	margin-right: 0.5em;

	padding-left: 0.2em;
	padding-right: 0.2em;
	padding-top: 0.1em;
	padding-bottom: 0.1em;

	border-radius: 1em;
}

button.button-close > label {
	font-weight: bolder;
	font-family: monospace;
	padding: 0em;
	margin: -1.4em;
	font-size: 1.4em;
	color: @close;
}

button.button-close:hover {
	background: @close_hover;
}

button.button-close:active {
	background: @close_active;
}

label {
	color: #eae2e0;
}

label.notification {
	color: #fef3f6;
}

label.critical {
	color: #FFF;
}

button.buttonState1 {
	background: rgba(46, 179, 152, 0.5);
}

button.buttonState2 {
	background: rgba(255, 255, 255, 0.3);
}

.userbuttonlabel.buttonState1 {
	color: #fff;
}

.userbuttonlabel.buttonState2 {
	color: #fff;
}

button.buttonState1:hover {
	background: rgba(34, 43, 46, 0.4);
}

button.buttonState2:hover {
	background: rgba(34, 43, 46, 0.3);
}

.userbuttonlabel.buttonState1:hover {
	color: #fee;
}

.userbuttonlabel.buttonState2:hover {
	color: #fee;
}

.title {
	font-weight: bold;
	font-size: 16px;
}

.appname {
	font-size: 10px;
}

.time {
	font-size: 12px;
}

.noti-center.time {
	font-size: 32px;
}

[mikenrafter]

Standalone notification merging technique

as seen here

.notificationInCenter {
	border-radius: 10px;
	border: 0px;
}

/* merge notifications of like-type into single blob */
.notificationInCenter:not(.critical):not(:first-child) + .notificationInCenter:not(.critical),
.notificationInCenter.critical:not(:first-child) + .notificationInCenter.critical {
	margin-top: -30px;
	border-radius: 0px 0px 10px 10px;
	padding-top: 10px;
	border-top: 2px @bg dashed;
}

/* change blob-buttons to fit accordingly */
.notificationInCenter:not(.critical):not(:first-child) + .notificationInCenter:not(.critical) .button-close {
	margin-top: -15px;

}
.notificationInCenter.critical:not(:first-child) + .notificationInCenter.critical .button-close {
	margin-top: -15px;
	border-radius: 0px 0px 10px 10px;
}

/* make first-child items look proper */
.notificationInCenter:first-child {
	margin-top: 0px;
	margin-bottom: 10px;
}

[phuhl]

Script for improving Microsoft Teams notifications:

File: deadd-parse-teams-message

#!/usr/bin/node

const fs = require("fs");
const data = fs.readFileSync(0, "utf-8").replaceAll("\\\\", "\\");
const notification = JSON.parse(data);

notification.image = "";
notification["class-name"] = "Teams";
notification["app-name"] = "Teams";

console.log(
  JSON.stringify(
    {
      modify: notification,
      match: {},
    },
    undefined,
    2,
  ),
);

Config:

notification:
  modifications:
    - match:
        app-name: "Microsoft Teams - Preview"
      script: "deadd-parse-teams-message"

[phuhl]

Modification script for Spotify. Adds CSS Class, adds actions, prevents pop-up

notification:
  modifications:
    - match:
        app-name: "Spotify"
      modify:
        image-size: 80
        timeout: 1
        send-noti-closed: true
        class-name: "Spotify"
        action-icons: true
        actions:
          - previous
          - media-skip-backward
          - play
          - media-playback-start
          - next
          - media-skip-forward
        action-commands:
          play: playerctl play-pause
          previous: playerctl previous
          next: playerctl next

[Ashfaqul-Awal-Himel]

Skeuomorphic Glassy Design:

[phuhl]

Very nice! Only downside is that the contrast between the black text and the background is not very strong. Maybe try a white shadow instead?

[thelazt16]

Can someone give me the default dead.yml? I use arch and installed the binary package (the git and regular package keep failing to build) and it doesn't give me the default deadd.yml and deadd.css in ~/.config/deadd. I found the deadd.css in /etc/xdg/deadd/ but not the dead.yml. Thanks in advance.

[phuhl]

Hey, you can find the content of the default deadd.yml in the readme: https://github.com/phuhl/linux_notification_center?tab=readme-ov-file#configuration

Hope that helps