feat(swaync): new theme

.config/swaync/config.json

@@ -1,19 +1,13 @@
 {
   "$schema": "/etc/xdg/swaync/configSchema.json",
-  "positionX": "right",
-  "positionY": "top",
   "control-center-margin-top": 12,
   "control-center-margin-bottom": 128,
   "control-center-margin-right": 8,
   "control-center-margin-left": 8,
-  "timeout": 10,
-  "timeout-low": 5,
-  "timeout-critical": 0,
-  "notification-window-width": 512,
   "keyboard-shortcuts": true,
   "image-visibility": "when-available",
   "hide-on-clear": true,
   "hide-on-action": true,
   "script-fail-notify": true,
-  "widgets": ["title", "dnd", "mpris"]
+  "widgets": ["title", "dnd", "notifications"]
 }

.config/swaync/dark.less

@@ -1,9 +1,15 @@
-@define-color border-color #a89984;
 @define-color bg #282828;
-@define-color bg-trans rgba(40, 40, 40, 0.9);
+@define-color bg-a #3c3836;
-@define-color bg-hover #3c3836;
+@define-color bg-b #504945;
-@define-color bg-focus #3c3836;
+@define-color bg-c #665c54;
-@define-color bg-selected #3c3836;
+@define-color bg-d #7c6f64;
+@define-color bg-e #928374;
+@define-color bg-h #1d2021;
 @define-color fg #ebdbb2;
 @define-color warning #d65d0e;
+@define-color warning-light #fe8019;
 @define-color primary #689d6a;
+@define-color primary-light #8ec07c;
+@define-color secondary #458588;
+@define-color secondary-light #83a598;
+@define-color gray #a89984;

.config/swaync/light.less

@@ -1,9 +1,15 @@
-@define-color border-color #928374;
 @define-color bg #fbf1c7;
-@define-color bg-trans rgba(251, 241, 199, 0.9);
+@define-color bg-a #ebdbb2;
-@define-color bg-hover #f2e5bc;
+@define-color bg-b #d5c4a1;
-@define-color bg-focus #f2e5bc;
+@define-color bg-c #bdae93;
-@define-color bg-selected #f2e5bc;
+@define-color bg-d #a89984;
+@define-color bg-e #928374;
+@define-color bg-h #f9f5d7;
 @define-color fg #3c3836;
-@define-color warning #d65d0e;
+@define-color warning #af3a03;
-@define-color primary #689d6a;
+@define-color warning-light #d65d0e;
+@define-color primary #427b58;
+@define-color primary-light #689d6a;
+@define-color secondary #076678;
+@define-color secondary-light #458588;
+@define-color gray #7c6f64;

.config/swaync/style.css

@@ -5,145 +5,380 @@
 @import "dark.less";
 
 * {
+  all: unset;
+  font-size: 14px;
+  transition: 200ms;
+}
+
+.floating-notifications.background .notification-row .notification-background {
+  box-shadow:
+    0 0 8px 0 rgba(0, 0, 0, 0.8),
+    inset 0 0 0 1px @bg-a;
+  border-radius: 12.6px;
+  margin: 18px;
+  background-color: @bg;
   color: @fg;
-  text-shadow: none;
-}
-
-.notification-row {
-  outline: none;
-  background: transparent;
-}
-.notification-row:focus,
-.notification-row:hover {
-  background: @bg-hover;
-}
-
-.notification {
-  border-radius: 2px;
-  margin: 6px 12px;
-  box-shadow: 0px 0px 4px 2px rgba(0, 0, 0, 0.3);
   padding: 0;
 }
 
-.notification-content {
+.floating-notifications.background
-  background: transparent;
+  .notification-row
-  padding: 6px;
+  .notification-background
-  border-radius: 3px;
+  .notification {
+  padding: 7px;
+  border-radius: 12.6px;
 }
 
-.close-button {
+.floating-notifications.background
-  background: black;
+  .notification-row
-  color: white;
+  .notification-background
-  text-shadow: none;
+  .notification.critical {
-  padding: 0 2px;
+  box-shadow: inset 0 0 7px 0 @warning;
-  box-shadow: 0px 2px 4px 2px rgba(0, 0, 0, 0.3);
-  border-radius: 50%;
-}
-.close-button:hover {
-  background: rgb(30, 30, 30);
-  transition: all 0.15s ease-in-out;
 }
 
-.notification-default-action,
+.floating-notifications.background
-.notification-action {
+  .notification-row
-  padding: 4px;
+  .notification-background
-  margin: 0;
+  .notification
-  box-shadow: none;
+  .notification-content {
-  background: @bg;
+  margin: 7px;
-  border: 1px solid @border-color;
 }
 
-.notification-default-action:hover,
+.floating-notifications.background
-.notification-action:hover {
+  .notification-row
-  background: @bg-hover;
+  .notification-background
-}
+  .notification
-
+  .notification-content
-.notification-default-action {
+  .summary {
-  border-radius: 3px;
-}
-
-/* When alternative actions are visible */
-.notification-default-action:not(:only-child) {
-  border-bottom-left-radius: 0px;
-  border-bottom-right-radius: 0px;
-}
-
-.notification-action {
-  border-radius: 0px;
-  border-top: none;
-  border-right: none;
-}
-
-/* add bottom border radius to eliminate clipping */
-.notification-action:first-child {
-  border-bottom-left-radius: 10px;
-}
-.notification-action:last-child {
-  border-bottom-right-radius: 10px;
-  border-right: 1px solid @border-color;
-}
-
-.body-image {
-  margin-top: 6px;
-  background-color: white;
-  border-radius: 3px;
-}
-
-.summary {
   color: @fg;
-  text-shadow: none;
 }
 
-.time {
+.floating-notifications.background
+  .notification-row
+  .notification-background
+  .notification
+  .notification-content
+  .time {
+  color: @gray;
+}
+
+.floating-notifications.background
+  .notification-row
+  .notification-background
+  .notification
+  .notification-content
+  .body {
   color: @fg;
-  text-shadow: none;
 }
 
-.body {
+.floating-notifications.background
-  background: transparent;
+  .notification-row
+  .notification-background
+  .notification
+  > *:last-child
+  > * {
+  min-height: 3.4em;
+}
+
+.floating-notifications.background
+  .notification-row
+  .notification-background
+  .notification
+  > *:last-child
+  > *
+  .notification-action {
+  border-radius: 7px;
   color: @fg;
-  text-shadow: none;
+  background-color: @bg-a;
+  box-shadow: inset 0 0 0 1px @bg-b;
+  margin: 7px;
 }
 
-.control-center-clear-all {
+.floating-notifications.background
-  color: @warning;
+  .notification-row
-  text-shadow: none;
+  .notification-background
-  background: @bg;
+  .notification
-  border: 1px solid @border-color;
+  > *:last-child
-  box-shadow: none;
+  > *
-  border-radius: 3px;
+  .notification-action:hover {
+  box-shadow: inset 0 0 0 1px @bg-b;
+  background-color: @bg-a;
+  color: @fg;
 }
-.control-center-clear-all:hover {
+
-  background: @bg-hover;
+.floating-notifications.background
+  .notification-row
+  .notification-background
+  .notification
+  > *:last-child
+  > *
+  .notification-action:active {
+  box-shadow: inset 0 0 0 1px @bg-b;
+  background-color: @primary-dark;
+  color: @fg;
+}
+
+.floating-notifications.background
+  .notification-row
+  .notification-background
+  .close-button {
+  margin: 7px;
+  padding: 2px;
+  border-radius: 6.3px;
+  color: @bg;
+  background-color: @warning;
+}
+
+.floating-notifications.background
+  .notification-row
+  .notification-background
+  .close-button:hover {
+  background-color: #eba0ac;
+  color: @bg;
+}
+
+.floating-notifications.background
+  .notification-row
+  .notification-background
+  .close-button:active {
+  background-color: @warning;
+  color: @bg;
+}
+
+.control-center {
+  box-shadow:
+    0 0 8px 0 rgba(0, 0, 0, 0.8),
+    inset 0 0 0 1px @bg-a;
+  border-radius: 12.6px;
+  margin: 18px;
+  background-color: @bg;
+  color: @fg;
+  padding: 14px;
+}
+
+.control-center .widget-title {
+  color: @fg;
+  font-size: 1.3em;
+}
+
+.control-center .widget-title button {
+  border-radius: 7px;
+  color: @fg;
+  background-color: @bg-a;
+  box-shadow: inset 0 0 0 1px @bg-b;
+  padding: 8px;
+}
+
+.control-center .widget-title button:hover {
+  box-shadow: inset 0 0 0 1px @bg-b;
+  background-color: @bg-c;
+  color: @fg;
+}
+
+.control-center .widget-title button:active {
+  box-shadow: inset 0 0 0 1px @bg-b;
+  background-color: @primary-dark;
+  color: @bg;
+}
+
+.control-center .notification-row .notification-background {
+  border-radius: 7px;
+  color: @fg;
+  background-color: @bg-a;
+  box-shadow: inset 0 0 0 1px @bg-b;
+  margin-top: 14px;
+}
+
+.control-center .notification-row .notification-background .notification {
+  padding: 7px;
+  border-radius: 7px;
+}
+
+.control-center
+  .notification-row
+  .notification-background
+  .notification.critical {
+  box-shadow: inset 0 0 7px 0 @warning;
+}
+
+.control-center
+  .notification-row
+  .notification-background
+  .notification
+  .notification-content {
+  margin: 7px;
+}
+
+.control-center
+  .notification-row
+  .notification-background
+  .notification
+  .notification-content
+  .summary {
+  color: @fg;
+}
+
+.control-center
+  .notification-row
+  .notification-background
+  .notification
+  .notification-content
+  .time {
+  color: @gray;
+}
+
+.control-center
+  .notification-row
+  .notification-background
+  .notification
+  .notification-content
+  .body {
+  color: @fg;
+}
+
+.control-center
+  .notification-row
+  .notification-background
+  .notification
+  > *:last-child
+  > * {
+  min-height: 3.4em;
+}
+
+.control-center
+  .notification-row
+  .notification-background
+  .notification
+  > *:last-child
+  > *
+  .notification-action {
+  border-radius: 7px;
+  color: @fg;
+  background-color: #11111b;
+  box-shadow: inset 0 0 0 1px @bg-b;
+  margin: 7px;
+}
+
+.control-center
+  .notification-row
+  .notification-background
+  .notification
+  > *:last-child
+  > *
+  .notification-action:hover {
+  box-shadow: inset 0 0 0 1px @bg-b;
+  background-color: @bg-a;
+  color: @fg;
+}
+
+.control-center
+  .notification-row
+  .notification-background
+  .notification
+  > *:last-child
+  > *
+  .notification-action:active {
+  box-shadow: inset 0 0 0 1px @bg-b;
+  background-color: @primary-dark;
+  color: @fg;
+}
+
+.control-center .notification-row .notification-background .close-button {
+  margin: 7px;
+  padding: 2px;
+  border-radius: 6.3px;
+  color: @bg;
+  background-color: @fg;
+}
+
+.control-center .notification-row .notification-background .close-button:hover {
+  background-color: @warning;
+  color: @bg;
+}
+
+.control-center
+  .notification-row
+  .notification-background
+  .close-button:active {
+  background-color: @warning;
+  color: @bg;
+}
+
+.control-center .notification-row .notification-background:hover {
+  box-shadow: inset 0 0 0 1px @bg-b;
+  background-color: @bg-e;
+  color: @fg;
+}
+
+.control-center .notification-row .notification-background:active {
+  box-shadow: inset 0 0 0 1px @bg-b;
+  background-color: @primary-dark;
+  color: @fg;
+}
+
+progressbar,
+progress,
+through {
+  border-radius: 12.6px;
+}
+
+progressbar {
+  box-shadow: inset 0 0 0 1px @bg-b;
+}
+
+.notification.critical progress {
+  background-color: @warning;
+}
+
+.notification.low progress,
+.notification.normal progress {
+  background-color: @secondary-dark;
+}
+
+through {
+  background-color: @bg-a;
+}
+
+.control-center through {
+  background-color: @bg-b;
 }
 
 .control-center-dnd {
-  border-radius: 3px;
+  margin-top: 5px;
-  background: @bg;
+  border-radius: 8px;
-  border: 1px solid @border-color;
+  background: @bg-a;
+  border: 1px solid @bg-b;
   box-shadow: none;
 }
 
 .control-center-dnd:checked {
-  background: @primary;
+  background: @bg-a;
 }
+
 .control-center-dnd slider {
-  border-radius: 3px;
+  background: @bg-b;
-  background: @bg-hover;
+  border-radius: 8px;
-  border: 1px solid @border-color;
 }
 
-.control-center {
+.widget-dnd {
-  background: @bg-trans;
+  margin: 0px;
-  border-radius: 5px;
+  font-size: 1.1rem;
-  border: 1px solid @border-color;
-}
-.control-center-list {
-  background: @bg-trans;
-  border: 1px @border-color;
-  border-style: dashed solid hidden solid;
 }
 
-.floating-notifications {
+.widget-dnd > switch {
-  background: transparent;
+  font-size: initial;
+  border-radius: 8px;
+  background: @bg-a;
+  border: 1px solid @bg-b;
+  box-shadow: none;
+}
+
+.widget-dnd > switch:checked {
+  background: @bg-a;
+}
+
+.widget-dnd > switch slider {
+  background: @bg-b;
+  border-radius: 8px;
+  border: 1px solid @bg-d;
 }