✨ feat(swaync): add new buttons to buttons-grid and fix others

swaync/style.css

@@ -51,18 +51,20 @@ tooltip {
 
 .notification-row .notification-background .notification .notification-content .body {
   color: @foreground;
+  margin-bottom: .6em;
 }
 
 .notification-row .notification-background .notification > *:last-child > * {
   min-height: 3.4em;
 }
 
-.notification-row .notification .notification-action {
+.notification .notification-action {
   border-radius: 16px;
   color: @text;
-  background-color: @button-bg;
+  font-weight: 600;
+  background-color: @bg-button;
   border: .6px solid @background;
-  margin: 5px;
+  margin: .3em 0;
 }
 
 .notification-row .notification .notification-action:hover {
@@ -76,11 +78,11 @@ tooltip {
 
 .close-button {
   border-radius: 8px;
-  margin: 6px;
+  margin: 4px;
   padding: 2.5px;
   border-radius: 8px;
   color: @crust;
-  background-color: @button-bg;
+  background-color: @bg-button;
 }
 
 .close-button:hover {
@@ -233,7 +235,7 @@ tooltip {
 }
 
 .widget-mpris .widget-mpris-title {
-    font-family: "Cantarell";
+    font-family: "Cantarell", "Noto Sans";
     font-weight: 700;
     font-size: 1.2rem;
     text-shadow: 1px 1px 2px black;
@@ -278,10 +280,6 @@ tooltip {
     margin: 2px;
 }
 
-.widget-buttons-grid button.active {
-    background: @active;
-}
-
 .widget-buttons-grid button:hover {
     background: @hover;
 }
@@ -296,28 +294,32 @@ tooltip {
     font-weight: 600;
 }
 
+.toggle:checked {
+    color: blue;
+}
+
 .widget-volume trough,
 .widget-backlight trough { /* slider's background */
-    margin: 0rem 1rem;
+    margin: 0 1.2rem;
     background-color: @background-alt;
     min-height: 8px;
     min-width: 70px;
-    border-radius: 10px;
-    padding: 2px;
+    border-radius: 14px;
+    padding: 4px;
 }
 
 .widget-volume trough:hover, 
 .widget-volume trough:active,
 .widget-backlight trough:hover,
 .widget-backlight trough:active {
-    padding: 4px;
+    padding: 6px;
     border-radius: 10.5px;
 }
 .widget-volume trough slider,
 .widget-backlight trough slider { /* slider's dot indicator */
     background: shade(@text, .9);
     border-radius: 50%;
-    padding: 8px;
+    padding: 10px;
     box-shadow: inset 0 0 1px .5px @background-alt;
 }
 .widget-volume trough slider:active,
@@ -328,8 +330,8 @@ tooltip {
 
 .widget-volume trough highlight,
 .widget-backlight trough highlight { /* slider bar */
-    border-top-left-radius: 8px;
-    border-bottom-left-radius: 8px;
+    border-top-left-radius: 14px;
+    border-bottom-left-radius: 14px;
     background: shade(@highlight, .9);
 }