From 34e75dd9b0adfc42de4f1398bfb5a4198626a3a9 Mon Sep 17 00:00:00 2001
From: Michel Fedde <git@iedsoftworks.com>
Date: Fri, 28 Feb 2025 15:52:39 +0100
Subject: [PATCH] Adds style and config for swaync

---
 .config/swaync/config.json             |  29 ++++
 .config/swaync/style/controlpanel.scss |  93 +++++++++++
 .config/swaync/style/notification.scss | 204 +++++++++++++++++++++++++
 .config/swaync/style/style.scss        |   6 +
 .config/swaync/style/variables.scss    |   4 +
 .gitignore                             |   3 +
 6 files changed, 339 insertions(+)
 create mode 100644 .config/swaync/config.json
 create mode 100644 .config/swaync/style/controlpanel.scss
 create mode 100644 .config/swaync/style/notification.scss
 create mode 100644 .config/swaync/style/style.scss
 create mode 100644 .config/swaync/style/variables.scss

diff --git a/.config/swaync/config.json b/.config/swaync/config.json
new file mode 100644
index 0000000..3506892
--- /dev/null
+++ b/.config/swaync/config.json
@@ -0,0 +1,29 @@
+{
+  "$schema": "/etc/xdg/swaync/configSchema.json",
+  "widgets": [
+    "inhibitors",
+    "title",
+    "mpris",
+    "dnd",
+    "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"
+    },
+    "mpris": {
+      "image-size": 96,
+      "image-radius": 12
+    }
+  }
+}
diff --git a/.config/swaync/style/controlpanel.scss b/.config/swaync/style/controlpanel.scss
new file mode 100644
index 0000000..42717d6
--- /dev/null
+++ b/.config/swaync/style/controlpanel.scss
@@ -0,0 +1,93 @@
+$cc-bg: $background;
+
+.control-center {
+  /* The Control Center which contains the old notifications + widgets */
+  background: $cc-bg;
+  color: $foreground;
+  border-radius: 0;
+  border-left: 1px solid $foreground;
+  box-shadow: $box-shadow;
+  padding-left: 1rem;
+  padding-right: 1rem;
+}
+
+.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: $background;
+}
+
+.blank-window {
+  /* Window behind control center and on all other monitors */
+  background: transparent;
+}
+
+.floating-notifications {
+  background: transparent;
+}
+
+.floating-notifications .notification {
+  box-shadow: none;
+}
+
+$btn-color: $foreground;
+$btn-border-color: $foreground;
+$btn-bg: rgba($foreground, 0.2);
+$btn-bg-hover: transparent;
+
+.control-center button {
+  color: $btn-border-color;
+  border: 1px solid transparent;
+  border-radius: $border-radius;
+  background: $btn-bg;
+}
+
+.control-center button:hover {
+  background: $btn-bg-hover;
+  border: 1px solid $btn-color;
+}
+
+$switch-bg: transparent;
+$switch-handle-bg: $foreground;
+$switch-border-color: $foreground;
+$switch-selected-bg: $color2;
+
+.control-center switch {
+  font-size: initial;
+  border-radius: $border-radius;
+  background: $switch-bg;
+  border: 1px solid $switch-border-color;
+  box-shadow: none;
+}
+
+.control-center switch:checked {
+  background: $switch-selected-bg;
+}
+
+.control-center switch slider {
+  background: $switch-handle-bg;
+  border-radius: $border-radius;
+}
+
+
+.widget-title, .widget-dnd {
+  color: $foreground;
+}
diff --git a/.config/swaync/style/notification.scss b/.config/swaync/style/notification.scss
new file mode 100644
index 0000000..339b29e
--- /dev/null
+++ b/.config/swaync/style/notification.scss
@@ -0,0 +1,204 @@
+@use 'sass:color';
+
+$notify-border-color: $color6;
+
+$notify-bg: $background;
+$notify-bg-hover: $background;
+$notify-bg-darker: color.adjust($background, $lightness: -2%);
+$notify-bg-focus: color.adjust($background, $lightness: 4%);
+
+$close-bg: rgba($foreground, 0.4);
+$close-bg-hover: transparent;
+
+.notification-row {
+  outline: none;
+}
+
+.notification-row:focus, .notification-row:hover {
+  background: $notify-bg-focus;
+}
+
+.notification-row .notification-background {
+  padding: 6px 12px;
+}
+
+.notification-row .notification-background .close-button {
+  /* The notification Close Button */
+  background: $close-bg;
+  color: $foreground;
+  text-shadow: none;
+  padding: 0;
+  border-radius: $border-radius;
+  margin-top: 5px;
+  margin-right: 5px;
+  box-shadow: none;
+  border: 1px solid transparent;
+  min-width: 24px;
+  min-height: 24px;
+}
+
+.notification-row .notification-background .close-button:hover {
+  box-shadow: $box-shadow;
+  background: $close-bg-hover;
+  transition: background 0.15s ease-in-out;
+  border: 1px solid $notify-border-color;
+}
+
+.notification-row .notification-background .notification {
+  /* The actual notification */
+  border-radius: $border-radius;
+  border: 1px solid $notify-border-color;
+  padding: 0;
+  transition: background 0.15s ease-in-out;
+  background: $notify-bg;
+  box-shadow: $box-shadow;
+}
+
+.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: $foreground;
+  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: $notify-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: $foreground;
+  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: $foreground;
+  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: $foreground;
+  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: $notify-bg-darker;
+  color: $foreground;
+  caret-color: $foreground;
+  border: 1px solid $notify-border-color;
+  border-radius: 12px;
+}
+
+.notification-row .notification-background .notification .notification-default-action .notification-content .inline-reply .inline-reply-button {
+  margin-left: 4px;
+  background: $notify-bg;
+  border: 1px solid $notify-border-color;
+  border-radius: 12px;
+  color: $foreground;
+}
+
+.notification-row .notification-background .notification .notification-default-action .notification-content .inline-reply .inline-reply-button:disabled {
+  background: initial;
+  color: $foreground-disabled;
+  border: 1px solid $notify-border-color;
+  border-color: transparent;
+}
+
+.notification-row .notification-background .notification .notification-default-action .notification-content .inline-reply .inline-reply-button:hover {
+  background: $notify-bg-hover;
+}
+
+.notification-row .notification-background .notification .notification-action {
+  /* The alternative actions below the default action */
+  border-top: 1px solid $notify-border-color;
+  border-radius: 0px;
+  border-right: 1px solid $notify-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;
+}
diff --git a/.config/swaync/style/style.scss b/.config/swaync/style/style.scss
new file mode 100644
index 0000000..4be262b
--- /dev/null
+++ b/.config/swaync/style/style.scss
@@ -0,0 +1,6 @@
+@use "sass:color";
+@import "../../../.cache/wal/colors.scss";
+@import "./variables.scss";
+
+@import "./notification.scss";
+@import "./controlpanel.scss";
diff --git a/.config/swaync/style/variables.scss b/.config/swaync/style/variables.scss
new file mode 100644
index 0000000..941badc
--- /dev/null
+++ b/.config/swaync/style/variables.scss
@@ -0,0 +1,4 @@
+$foreground-disabled: color.adjust($foreground, $lightness: -0.4);
+
+$border-radius: 0.3rem;
+$box-shadow: rgba(0, 0, 0, 0.17) 0px -23px 25px 0px inset, rgba(0, 0, 0, 0.15) 0px -36px 30px 0px inset, rgba(0, 0, 0, 0.1) 0px -79px 40px 0px inset, rgba(0, 0, 0, 0.06) 0px 2px 1px, rgba(0, 0, 0, 0.09) 0px 4px 2px, rgba(0, 0, 0, 0.09) 0px 8px 4px, rgba(0, 0, 0, 0.09) 0px 16px 8px, rgba(0, 0, 0, 0.09) 0px 32px 16px;
diff --git a/.gitignore b/.gitignore
index 001a7f8..c2fd72a 100644
--- a/.gitignore
+++ b/.gitignore
@@ -15,6 +15,9 @@
 !/.config/waybar/
 !/.config/evremap/
 !/.config/sddm/
+!/.config/swaync/
+/.config/swaync/style.css
+/.config/swaync/style.css.map
 
 !/.ssh/
 /.ssh/*