feat: nice stuff

swaync/style.css

@@ -6,12 +6,13 @@
   --noti-bg-alpha: 0.85;
   --noti-bg-darker: rgb(38, 38, 38);
   --noti-bg-hover: rgb(56, 56, 56);
-  --noti-bg-focus: #9e2238dd;
+  --noti-bg-focus: transparent;
+  --noti-bg-selection: #9e2238dd;
   --noti-close-bg: rgb(78, 78, 78);
   --noti-close-bg-hover: rgb(94, 94, 94);
   --text-color: #FFe8EE;
   --text-color-disabled: rgb(150, 150, 150);
-  --bg-selected: #d14781;
+  --bg-selected: #b12761;
   --notification-icon-size: 64px;
   --notification-app-icon-size: calc(var(--notification-icon-size) / 3);
   --notification-group-icon-size: 32px;
@@ -22,6 +23,14 @@
   font-size: 16px;
 }
 
+button {
+  background: var(--noti-border-color);
+}
+
+button:hover {
+  background: var(--noti-bg-selection)
+}
+
 .close-button {
   /* The notification Close Button */
   background: var(--noti-close-bg);
@@ -49,10 +58,6 @@
   outline: none;
 }
 
-.notification-row:focus {
-  background: var(--noti-bg-focus);
-}
-
 .notification-row .notification-background {
   padding: 6px 12px;
 }
@@ -90,6 +95,9 @@
   border-radius: 12px;
 }
 
+.notification-row:focus .notification-background .notification .notification-default-action {
+  background-color: red;
+}
 .notification-row .notification-background .notification .notification-default-action:hover {
   -gtk-icon-filter: none;
   background: var(--noti-bg-hover);
@@ -224,8 +232,8 @@
   /* The groups close button */
 }
 
-.notification-group:focus {
-  background: var(--noti-bg-focus);
+.notification-group:focus .notification-row .notification-background .notification {
+    background-color: var(--noti-bg-selection);
 }
 
 .notification-group.low {
@@ -339,13 +347,14 @@
 
 /*** Widgets ***/
 /* Title widget */
+
 .widget-title > label {
-  margin: 8px;
-  font-size: 1.5rem;
+  margin: 0 0px;
+  font-size: 16px;
 }
 
 .widget-title > button {
-  margin: 8px;
+  margin: 0px;
   border-radius: 12px;
 }
 
@@ -362,7 +371,7 @@
 }
 
 .widget-dnd switch:checked {
-  background: var(--noti-bg-focus);
+  background: var(--noti-bg-selection);
 }
 
 
@@ -456,12 +465,13 @@
 }
 
 .widget-buttons-grid flowboxchild > button.toggle > * {
-  font-size: 36px;
+  font-size: 45px;
+  font-family: "Iosevka Nerd Font Mono";
 }
 
 .widget-buttons-grid flowboxchild > button.toggle:checked {
   /* style given to the active toggle button */
-  background-color: var(--noti-bg-focus);
+  background-color: var(--noti-bg-selection);
 }
 
 .widget-buttons-grid flowboxchild > button.toggle:hover {
@@ -496,20 +506,32 @@
 }
 
 .widget-menubar > .menu-button-bar > .start {
-  margin-left: 8px;
+  margin-left: 0px;
 }
 
 .widget-menubar > .menu-button-bar > .end {
-  margin-right: 8px;
+  margin-right: 0px;
 }
 
 .widget-menubar > .menu-button-bar > .widget-menubar-container button {
   border-radius: 12px;
   margin: 0 4px;
+  background-color: var(--noti-bg-selection);
+}
+
+.widget-menubar > .menu-button-bar > .widget-menubar-container button:hover {
+  background-color: var(--bg-selected);
+}
+  
+.widget-menubar > .menu-button-bar > .widget-menubar-container button > * {
+  font-size: 24px;
+  font-family: "Iosevka Nerd Font Mono";
 }
 
 .widget-menubar > revealer {
-  margin-top: 8px;
+  margin-top: 0px;
+  display: flex;
+  flex-direction: right;
 }
 
 .widget-menubar > revealer button {
@@ -518,6 +540,10 @@
   margin-top: 0;
 }
 
+.widget-menubar > revealer button:hover {
+  background: var(--bg-selected);
+}
+
 /* Volume widget */
 :root {
   --widget-volume-row-icon-size: 24px;
@@ -529,12 +555,12 @@
   border-radius: 12px;
 }
 
-.widget-volume label {
+.widget-volume label:first-child {
   font-size: 28px;
 }
 
 .widget-volume trough highlight {
-  background: var(--noti-bg-focus);
+  background: var(--noti-bg-selection);
 }
 
 /* Each row app icon */
@@ -557,7 +583,7 @@
 }
 
 .widget-slider trough highlight {
-  background: var(--noti-bg-focus);
+  background: var(--noti-bg-selection);
 }
 
 .widget-slider label {
@@ -581,3 +607,8 @@
   margin: 8px;
   border-radius: 12px;
 }
+
+.notification-row:parent {
+  background: none
+}
+