update swaync theme for gtk4

configs/hyprland/swaync/config.json

 {
 	"$schema": "/etc/xdg/swaync/configSchema.json",
+
 	"positionX": "right",
 	"positionY": "top",
 	"layer": "overlay",
 	"layer-shell": true,
 	"cssPriority": "user",
 
-	"control-center-width": 380,
+	"control-center-width": 335,
 	"control-center-height": 760,
-	"control-center-margin-top": 2,
-	"control-center-margin-bottom": 2,
-	"control-center-margin-right": 1,
+	"control-center-margin-top": 8,
+	"control-center-margin-bottom": 8,
+	"control-center-margin-right": 8,
 	"control-center-margin-left": 0,
 
 	"notification-2fa-action": true,
@@ -36,7 +37,7 @@
 
 	"widgets": [
 		"menubar#label",
-		"buttons-grid",
+		"volume",
 		"mpris",
 		"title",
 		"dnd",
@@ -46,7 +47,7 @@
 		"title": {
 			"text": "Уведомления",
 			"clear-all-button": true,
-			"button-text": " 󰎟 "
+			"button-text": "   Очистить "
 		},
 		"dnd": {
 			"text": "Не беспокоить"
@@ -78,7 +79,7 @@
 				"position": "right",
 				"actions": [
 					{
-						"label": " ",
+						"label": "",
 						"command": "wlogout -b 5 -T 300 -B 300"
 					}
 				]
@@ -102,10 +103,10 @@
 					"label": "󰂯",
 					"command": "blueman-manager"
 				},
-		        {
-		        	"label": "",
-		        	"command": "loginctl lock-session"
-		        }
+				{
+					"label": "",
+					"command": "loginctl lock-session"
+				}
 			]
 		}
 	}

configs/hyprland/swaync/style.css

@@ -3,294 +3,210 @@
 @define-color hover_bg #191b27;
 @define-color text #D8E2EA;
 @define-color selected_text #a6a7ac;
-@define-color border #7E01FF;
+@define-color border #5e647d;
 @define-color error #bd2828;
 @define-color success #e89b0b;
 @define-color accent #7E01FF;
 @define-color unfocused #f85656;
 
+@define-color priority_low #74e3b4;
+@define-color priority_normal #86e8ff;
+@define-color priority_critical #f26476;
+
 * {
 	color: @text;
-
-	all: unset;
-	font-size: 14px;
+	font-size: 15px;
 	transition: 200ms;
 }
 
-.blank-window {
-	background: transparent;
-}
-
-/* CONTROL CENTER ------------------------------------------------------------------------ */
-
+/* ---------- ЦЕНТР УПРАВЛЕНИЯ ---- CONTROL CENTER */
 .control-center {
 	background: @bg;
 	border-radius: 15px;
-	-gtk-outline-radius: 1.705rem;
-	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.6);
-	margin: 18px;
-	padding: 12px;
-}
-
-/* Notifications  */
-.control-center .notification-row .notification-background,
-.control-center
-	.notification-row
-	.notification-background
-	.notification.critical {
-	background-color: @selected_bg;
-	border-radius: 15px;
-	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.6);
-	margin: 4px 0px;
-	padding: 5px;
+	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.9);
+	padding: 10px;
 }
 
-.control-center
-	.notification-row
-	.notification-background
-	.notification.critical {
-	color: @unfocused;
+.notification-row {
+	background: none;
 }
 
-.control-center
-	.notification-row
-	.notification-background
-	.notification
-	.notification-content {
-	margin: 2px;
-	padding: 2px;
+.notification-row:focus,
+.notification-group:focus,
+.notification-group {
+	background: @bg;
 }
 
-.control-center
-	.notification-row
-	.notification-background
-	.notification
-	> *:last-child
-	> * {
-	min-height: 3.4em;
+.blank-window,
+.floating-notifications {
+	background: none;
 }
 
-.control-center
-	.notification-row
-	.notification-background
-	.notification
-	> *:last-child
-	> *
-	.notification-action {
-	background: @bg;
-	color: @text;
-	border-radius: 15px;
-	margin: 6px;
-}
 
-.control-center
-	.notification-row
-	.notification-background
-	.notification
-	> *:last-child
-	> *
-	.notification-action:hover {
+/* ---------- ГРУППА УВЕДОМЛЕНИЙ ---- NOTIFICATION GROUP */
+.notification-group .notification-group-close-button .close-button {
 	background: alpha(@bg, 0.6);
-	border: 0.5px solid @border;
+	box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.4);
+	margin: 15px 20px;
 }
 
-.control-center
-	.notification-row
-	.notification-background
-	.notification
-	> *:last-child
-	> *
-	.notification-action:active {
-	background: @selected_bg;
-	border: 0.5px solid @border;
+.notification-group .notification-group-close-button .close-button:hover {
+	background: alpha(@bg, 0.4);
 }
 
-/* Buttons */
-
-.control-center .notification-row .notification-background .close-button {
+.notification-group .notification-group-buttons,
+.notification-group .notification-group-headers {
 	background: transparent;
-	border-radius: 6px;
+	margin: 0 15px;
 	color: @text;
-	margin: 0px;
-	padding: 4px;
-}
-
-.control-center .notification-row .notification-background .close-button:hover {
-	background: alpha(@bg, 0.6);
-	border: 0.5px solid @border;
 }
 
-.control-center
-	.notification-row
-	.notification-background
-	.close-button:active {
-	background: alpha(@bg, 0.6);
-	border: 0.5px solid @border;
-}
-
-/* Notifications expanded-group */
-
-.notification-group {
-	margin: 2px 8px 2px 8px;
-}
-.notification-group-headers {
-	font-weight: bold;
-	font-size: 1.25rem;
+.notification-group .notification-group-headers .notification-group-icon {
 	color: @text;
-	letter-spacing: 2px;
 }
 
-.notification-group-icon {
-	color: @selected_text;
-}
-
-.notification-group-collapse-button,
-.notification-group-close-all-button {
-	background: transparent;
+.notification-group .notification-group-headers .notification-group-header {
+	font-size: 18px;
 	color: @text;
-	margin: 4px;
-	border-radius: 6px;
-	padding: 4px;
 }
 
-.notification-group-collapse-button:hover,
-.notification-group-close-all-button:hover {
-	background: @selected_bg;
-	border: 0.5px solid @border;
+.notification-group .notification-group-buttons {
+	padding: 5px;
 }
 
-/* WIDGETS --------------------------------------------------------------------------- */
-
-/* Notification clear button */
-.widget-title {
-	padding: 0.341rem;
-	margin: unset;
+/* ---------- УВЕДОМЛЕНИЕЯ ---- NOTIFICATIONS */
+.notification-row .notification-background .notification {
+	background: @selected_bg;
+	transition: background 0.15s ease-in-out;
+	box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.8);
+	border-radius: 8px;
+	border: none;
+	border-left: 1.5px;
+	padding: 5px;
 }
 
-.widget-title button {
-	border: unset;
-	background-color: unset;
-	border-radius: 1.159rem;
-	-gtk-outline-radius: 1.159rem;
-	padding: 0.141rem 0.141rem;
-	margin-right: 0.841rem;
+/* ----- НИЗКИЙ ПРИОРИТЕТ --- LOW */
+.notification-row .notification-background .notification.low {
+	border-left: 3px solid @priority_low;
 }
 
-
-.widget-title button:hover {
-	background-color: @selected_bg;
-	border: 0.5px solid @border;
-
+/* ----- ОБЫЧНЫЙ ПРИОРИТЕТ --- NORMAL */
+.notification-row .notification-background .notification.normal {
+	border-left: 3px solid @priority_normal;
 }
 
-.widget-title button:active {
-	background-color: @selected_bg;
-	border: 0.5px solid @border;
+/* ----- ВЫСОКИЙ ПРИОРИТЕТ --- CRITICAL */
+.notification-row .notification-background .notification.critical {
+	border-left: 3px solid @priority_critical;
 }
 
-.widget-dnd > switch {
-	background: @selected_bg;
-	font-size: initial;
-	border-radius: 8px;
-	box-shadow: none;
-	padding: 2px;
+/* ----- ДЕЙСТВИЕ ПО УМОЛЧАНИЮ --- DEFAULT ACTION */
+.notification-default-action {
+	background: transparent;
+	padding: 10px;
+	margin: 0;
+	border: none;
 }
 
-.widget-dnd > switch:hover {
-	background: @selected_bg;
+/* ----- СОДЕРЖИМОЕ --- CONTENT */
+.notification-content {
+	background: transparent;
+	border: none;
+	padding: 0;
 }
 
-.widget-dnd > switch:checked {
-	background: @selected_bg;
+.notification-content .image {
+	border-radius: 15px;
+	margin: 0px 15px 0px 0px;
 }
 
-.widget-dnd > switch:checked:hover {
-	background: @selected_bg;
+.notification-content .app-icon {
+	margin: 6px;
 }
 
-.widget-dnd > switch slider {
-	background: @selected_text;
-	border-radius: 6px;
+.notification-content progressbar,
+.notification-content .body-image {
+	margin-top: 4px;
+	background: transparent;
 }
 
-.widget-dnd > switch slider:checked {
-	background: @border;
-	border-radius: 6px;
+/* ----- ТЕКСТ --- TEXT */
+.notification-content .text-box .summary,
+.notification-content .text-box .time,
+.notification-content .text-box .body {
+	background: transparent;
+	font-weight: normal;
+	font-size: 14px;
+	color: @text;
 }
 
-
-/* Buttons menu */
-.widget-buttons-grid {
-	font-size: x-large;
-	padding: 6px 2px;
-	margin: 6px;
-	border-radius: 12px;
-	background: alpha(@selected_bg, 0.80);
-	font-family: FiraCode Nerd Font;
+.notification-content .text-box .summary,
+.notification-content .text-box .time {
+	font-weight: bold;
 }
 
-.widget-buttons-grid > flowbox > flowboxchild > button {
-	border: none;
-	margin: 4px 10px;
-	padding: 6px 12px;
-	background: transparent;
-	border-radius: 8px;
+.notification-content .text-box .time {
+	margin-right: 30px;
+	font-size: 12px;
 }
 
-.widget-buttons-grid > flowbox > flowboxchild > button:hover {
-	background: alpha(@bg, 0.80);
+.notification-content .text-box .summary {
+	font-size: 16px;
 }
 
-/* Music player */
-.widget-mpris {
-	background: @selected_bg;
-	border-radius: 15px;
+/* ----- КНОПКА ЗАКРЫТИЯ --- CLOSE BUTTON */
+.close-button {
+	background: alpha(@bg, 0.8);
 	color: @text;
-	margin: 20px 6px;
 }
 
-/* NOTE: Background need *opacity 1* otherwise will turn into the album art blurred  */
-.widget-mpris-player {
-	background: @selected_bg;
-	border-radius: 15px;
-	border: 0px;
-	padding: 10px;
-	margin: 0px;
+.close-button:hover {
+	background: alpha(@bg, 0.4);
 }
 
-.widget-mpris button {
-	color: alpha(@text, 0.9);
+/* ----- КНОПКА --- BUTTON */
+.notification-alt-actions {
+	background: transparent;
 }
 
-.widget-mpris button:hover {
-	color: alpha(@text, 0.5);
+.notification-action {
+	background: transparent;
 }
 
-.widget-mpris-album-art {
-	border-radius: 15px;
+.notification-action>button {
+	background: alpha(@bg, 0.8);
+	box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.4);
+	border-radius: 12px;
+	font-size: 12px;
+	padding: 8px;
 }
 
-.widget-mpris-title {
-	font-weight: bold;
-	font-size: 18px;
+.notification-action>button:hover {
+	background: alpha(@bg, 0.4);
 }
 
-.widget-mpris-subtitle {
-	font-size: 15px;
-}
+/* ---------- ВИДЖЕТЫ ---- WIDGETS */
 
-.widget-menubar {
+/* ----- МЕНЮ --- MENU */
+.widget-menubar .text-button {
 	font-family: FiraCode Nerd Font;
+	background: transparent;
+	margin: 0px;
+	padding: 3px;
 }
 
 .powermode-buttons {
-	background: alpha(@selected_bg, 0.80);
+	all: unset;
+	background: @selected_bg;
+	border-radius: 12px;
 	padding: 10px;
 	margin: 8px;
 	border-radius: 15px;
+	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.75);
 }
 
 .powermode-buttons>button {
+	all: unset;
 	background: transparent;
 	border: none;
 	padding: 5px;
@@ -300,79 +216,83 @@
 	color: @selected_text;
 }
 
-.notification-row {
-  outline: none;
-  margin: 0;
-  padding: 0px;
+/* ----- ГРОМКОСТЬ --- VOLUME */
+.widget-volume {
+	background: @selected_bg;
+	border-radius: 12px;
+	padding: 5px;
+	margin: 5px;
+	border-radius: 15px;
+	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.75);
 }
 
-.floating-notifications.background .notification-row .notification-background {
-  background: @bg;
-  box-shadow: 0 0 8px 0 rgba(0,0,0,.6);
-  border-radius: 15px;
-  margin: 16px;
-  padding: 0;
+/* ----- ПРЕЕР --- MPRIS */
+.widget-mpris {
+	margin: 5px;
 }
 
-.floating-notifications.background .notification-row .notification-background .notification {
-  padding: 6px;
-  border-radius: 12px;
+.widget-mpris .widget-mpris-player {
+	margin: 5px;
+	border-radius: 12px;
+	box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.75);
 }
 
-.floating-notifications.background .notification-row .notification-background .notification .notification-content {
-  margin: 13px;
+.widget-mpris .widget-mpris-player .mpris-background {
+	filter: blur(10px);
 }
 
-.floating-notifications.background .notification-row .notification-background .notification > *:last-child > * {
-  min-height: 3.4em;
+.widget-mpris .widget-mpris-player .mpris-overlay {
+	padding: 15px;
 }
 
-.floating-notifications.background .notification-row .notification-background .notification > *:last-child > * .notification-action {
-  border-radius: 15px;
-  background: alpha(@selected_bg, 0.40);
-  margin: 6px;
-  border: 1px solid transparent;
+.widget-mpris .widget-mpris-player .mpris-overlay .widget-mpris-album-art {
+	border: 1.3px solid @border;
+	border-radius: 12px;
+	box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.75);
 }
 
-.floating-notifications.background .notification-row .notification-background .notification > *:last-child > * .notification-action:hover {
-  background: alpha(@selected_bg, 0.80);
-  border: 1px solid @border;
+.widget-mpris .widget-mpris-player .mpris-overlay .widget-mpris-title {
+	font-weight: bold;
+	font-size: 16px;
 }
 
-.floating-notifications.background .notification-row .notification-background .notification > *:last-child > * .notification-action:active {
-  background: alpha(@selected_bg, 0.80);
-  color: @text;
+.widget-mpris .widget-mpris-player .mpris-overlay .widget-mpris-subtitle {
+	font-size: 12px;
 }
 
-.image {
-  margin: 10px 20px 10px 0px;
+.widget-mpris .widget-mpris-player .mpris-overlay>box>button {
+	margin: 10px 0px 0px;
 }
 
-.summary {
-  font-weight: 800;
-  font-size: 1rem;
+.widget-mpris .widget-mpris-player .mpris-overlay>box>button:hover {
+	background: alpha(@bg, 0.50);
 }
 
-.body {
-  font-size: 0.8rem;
+/* ----- ЗАГОЛОВОК --- TITLE */
+.widget-title {
+	background: transparent;
 }
 
-.floating-notifications.background .notification-row .notification-background .close-button {
-  margin: 6px;
-  padding: 2px;
-  border-radius: 6px;
-  background-color: transparent;
-  border: 1px solid transparent;
+.widget-title>label {
+	margin: 0px 5px;
+	font-size: 20px;
 }
 
-.floating-notifications.background .notification-row .notification-background .close-button:hover {
-  background: alpha(@selected_bg, 0.80);
-    border: 1px solid @border;
+.widget-title>button {
+	background: @selected_bg;
+	border: 0.5px solid @border;
+	border-radius: 15px;
+	padding: 3px;
+	margin-right: 5px;
 }
 
-.floating-notifications.background .notification-row .notification-background .close-button:active {
-	background: alpha(@selected_bg, 0.80);
-	border: 1px solid @border;
-	color: @text;
+.widget-title>button:hover {
+	background: alpha(@selected_bg, 0.5);
+	border: 1px solid alpha(@border, 0.5);
 }
 
+/* ----- НЕ БЕСПОКОИТЬ --- DND */
+.widget-dnd label {
+	margin: 0px 15px;
+	font-size: 16px;
+}