Added notification center with styling, some wallpapers.

hyprland.conf

@@ -23,6 +23,7 @@ exec-once = swww-daemon
 exec-once = waypaper --restore
 exec-once = wal -R -n
 exec-once = waybar
+exec-once = GDK_BACKEND=wayland swaync
 exec-once = hyprctl setcursor Adwaita 24 # Needed on NixOS
 exec-once = mkdir -p $HOME/Pictures/Screenshots
 
@@ -198,6 +199,9 @@ bind = $mainMod, RETURN, exec, wlogout
 # App launcher
 bind = $mainMod, R, exec, $menu
 
+# Notification center
+bind = $mainMod, N, exec, swaync-client -t -sw
+
 # App launch binds
 bind = $mainMod, Q, exec, $terminal
 bind = $mainMod, F, exec, $fileManager

swaync/config.json

@@ -0,0 +1,46 @@
+{
+  "$schema": "/etc/xdg/swaync/configSchema.json",
+  "positionX": "right",
+  "positionY": "top",
+  "layer": "overlay",
+  "control-center-layer": "overlay",
+  "layer-shell": true,
+  "cssPriority": "application",
+  "control-center-margin-top": 10,
+  "control-center-margin-bottom": 10,
+  "control-center-margin-right": 10,
+  "control-center-margin-left": 0,
+  "notification-2fa-action": true,
+  "notification-inline-replies": false,
+  "notification-icon-size": 48,
+  "notification-body-image-height": 100,
+  "notification-body-image-width": 200,
+  "timeout": 5,
+  "timeout-low": 3,
+  "timeout-critical": 0,
+  "fit-to-screen": true,
+  "control-center-width": 400,
+  "control-center-height": 600,
+  "notification-window-width": 400,
+  "keyboard-shortcuts": true,
+  "image-visibility": "when-available",
+  "transition-time": 500,
+  "hide-on-clear": false,
+  "hide-on-action": true,
+  "script-fail-notify": true,
+  "widgets": [
+    "title",
+    "dnd",
+    "notifications"
+  ],
+  "widget-config": {
+    "title": {
+      "text": "Notifications",
+      "clear-all-button": true,
+      "button-text": "Clear All"
+    },
+    "dnd": {
+      "text": "Do Not Disturb"
+    }
+  }
+}

swaync/style.css

@@ -0,0 +1,183 @@
+* {
+  font-family: "CodeNewRoman Nerd Font Propo";
+  font-size: 14px;
+  font-weight: 500;
+}
+
+.notification-row {
+  outline: none;
+}
+
+.notification-row:focus,
+.notification-row:hover {
+  background: rgba(255, 255, 255, 0.05);
+}
+
+.notification {
+  border-radius: 13px;
+  margin: 6px 12px;
+  box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.6);
+  padding: 0;
+  background: #0a0a0a;
+  border: 1px solid rgba(255, 255, 255, 0.5);
+  animation: slideInNotification 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+@keyframes slideInNotification {
+  from {
+    transform: translateX(100px);
+    opacity: 0;
+  }
+  to {
+    transform: translateX(0);
+    opacity: 1;
+  }
+}
+
+.notification-content {
+  background: transparent;
+  padding: 10px;
+  border-radius: 13px;
+}
+
+.close-button {
+  background: rgba(255, 255, 255, 0.1);
+  color: #ffffff;
+  text-shadow: none;
+  padding: 4px;
+  border-radius: 8px;
+  margin-top: 8px;
+  margin-right: 8px;
+  border: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.close-button:hover {
+  background: rgba(255, 0, 0, 0.3);
+  border: 1px solid rgba(255, 0, 0, 0.5);
+}
+
+.notification-default-action,
+.notification-action {
+  padding: 6px;
+  margin: 4px;
+  box-shadow: none;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 8px;
+  color: #ffffff;
+}
+
+.notification-default-action:hover,
+.notification-action:hover {
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+.summary {
+  font-size: 15px;
+  font-weight: 700;
+  background: transparent;
+  color: #ffffff;
+  text-shadow: none;
+}
+
+.time {
+  font-size: 12px;
+  font-weight: 400;
+  background: transparent;
+  color: rgba(255, 255, 255, 0.6);
+  text-shadow: none;
+  margin-right: 8px;
+}
+
+.body {
+  font-size: 13px;
+  font-weight: 400;
+  background: transparent;
+  color: rgba(255, 255, 255, 0.8);
+  text-shadow: none;
+}
+
+.control-center {
+  background: #0a0a0a;
+  border: 1px solid rgba(255, 255, 255, 0.5);
+  border-radius: 13px;
+  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
+  transition: margin-right 0.5s cubic-bezier(0.05, 0.9, 0.1, 1.05), opacity 0.5s cubic-bezier(0.05, 0.9, 0.1, 1.05);
+}
+
+.control-center.closing {
+  margin-right: -420px;
+  opacity: 0;
+}
+
+.control-center-list {
+  background: transparent;
+}
+
+.control-center-list-placeholder {
+  opacity: 0.5;
+}
+
+.floating-notifications {
+  background: transparent;
+}
+
+.blank-window {
+  background: transparent;
+}
+
+.widget-title {
+  margin: 10px;
+  font-size: 16px;
+  font-weight: 700;
+  color: #ffffff;
+}
+
+.widget-title > button {
+  font-size: 13px;
+  color: rgba(255, 255, 255, 0.7);
+  text-shadow: none;
+  background: rgba(255, 255, 255, 0.05);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 8px;
+  padding: 6px 12px;
+}
+
+.widget-title > button:hover {
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.3);
+}
+
+.widget-dnd {
+  margin: 10px;
+  font-size: 14px;
+  font-weight: 600;
+  color: #ffffff;
+}
+
+.widget-dnd > switch {
+  font-size: 14px;
+  background: rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(255, 255, 255, 0.2);
+  border-radius: 13px;
+}
+
+.widget-dnd > switch:checked {
+  background: rgba(255, 100, 100, 0.3);
+  border: 1px solid rgba(255, 100, 100, 0.5);
+}
+
+.widget-dnd > switch slider {
+  background: rgba(255, 255, 255, 0.8);
+  border-radius: 10px;
+}
+
+.widget-label {
+  margin: 10px;
+}
+
+.widget-label > label {
+  font-size: 14px;
+  color: #ffffff;
+}