Unify all default widget margins and padding

data/style/style.scss

@@ -361,6 +361,12 @@ $margin: 8px;
 }
 
 /*** Widgets ***/
+.widget {
+  margin: $margin;
+  padding: $margin;
+  border-radius: var(--border-radius);
+}
+
 /* Title widget */
 @import "widgets/title";
 /* DND widget */

data/style/widgets/backlight.scss

 .widget-backlight {
-  padding: $margin;
-  margin: $margin;
-  border-radius: var(--border-radius);
-}
\ No newline at end of file
+}

data/style/widgets/buttons.scss

 .widget-buttons-grid {
-  padding: $margin;
-  margin: $margin;
-  border-radius: var(--border-radius);
-
   & flowboxchild>button {
     border-radius: var(--border-radius);
 
@@ -12,4 +8,4 @@
 
     &:hover {}
   }
-}
\ No newline at end of file
+}

data/style/widgets/dnd.scss

 .widget-dnd {
   label {
     color: var(--text-color);
-    margin: $margin;
+    margin-right: $margin;
     font-size: 1.1rem;
   }
 
   switch {
     border-radius: var(--border-radius);
-    margin: $margin;
+    margin-left: $margin;
 
     &:checked {}
 
@@ -15,4 +15,4 @@
       border-radius: var(--border-radius);
     }
   }
-}
\ No newline at end of file
+}

data/style/widgets/inhibitors.scss

 .widget-inhibitors {
-  &>label {
-    margin: $margin;
+  & > label {
+    margin-right: $margin;
     font-size: 1.5rem;
   }
 
-  &>button {
-    margin: $margin;
+  & > button {
+    margin-left: $margin;
     border-radius: var(--border-radius);
   }
-}
\ No newline at end of file
+}
+

data/style/widgets/label.scss

 .widget-label {
-  margin: $margin;
-
   & > label {
     font-size: 1.1rem;
   }

data/style/widgets/menubar.scss

 .widget-menubar {
-  &>.menu-button-bar {
-
+  & > .menu-button-bar {
     /* The left button container */
-    &>.start {
+    & > .start {
       margin-left: $margin;
     }
 
     /* The right button container */
-    &>.end {
+    & > .end {
       margin-right: $margin;
     }
 
     /* The left and right button container */
-    &>.widget-menubar-container {
+    & > .widget-menubar-container {
       button {
         border-radius: var(--border-radius);
         margin: 0 $margin / 2;
@@ -21,13 +20,19 @@
   }
 
   /* The revealer buttons */
-  &>revealer {
-    margin-top: $margin;
+  & > revealer {
+    * {
+      margin-top: $margin;
+
+      button {
+        border-radius: var(--border-radius);
+        margin: $margin;
+        margin-top: 0;
 
-    button {
-      border-radius: var(--border-radius);
-      margin: $margin;
-      margin-top: 0;
+        &:last-child {
+          margin-bottom: 0;
+        }
+      }
     }
   }
 
@@ -46,4 +51,5 @@
   .AnyName>button:hover {
     background-color: var(--noti-bg-hover);
   } */
-}
\ No newline at end of file
+}
+

data/style/widgets/mpris.scss

@@ -6,7 +6,7 @@
 }
 
 .widget-mpris {
-  margin: $margin;
+  padding: 0;
 
   /* The parent to all players */
   .widget-mpris-player {

data/style/widgets/slider.scss

 .widget-slider {
-  padding: $margin;
-  margin: $margin;
-  border-radius: var(--border-radius);
-
   label {
     font-size: inherit;
   }
-}
\ No newline at end of file
+}

data/style/widgets/title.scss

 .widget-title {
-  &>label {
-    margin: $margin;
+  & > label {
+    margin-right: $margin;
     font-size: 1.5rem;
   }
 
-  &>button {
-    margin: $margin;
+  & > button {
+    margin-left: $margin;
     border-radius: var(--border-radius);
   }
-}
\ No newline at end of file
+}
+

data/style/widgets/volume.scss

@@ -3,9 +3,6 @@
 }
 
 .widget-volume {
-  padding: $margin;
-  margin: $margin;
-  border-radius: var(--border-radius);
 }
 
 .widget-volume>box>button {}
@@ -17,7 +14,7 @@
 
 .per-app-volume {
   background-color: var(--noti-bg-alt);
-  padding: $margin/2 $margin $margin $margin;
-  margin: 0px $margin $margin $margin;
+  margin: $margin;
+  margin-bottom: 0;
   border-radius: var(--border-radius);
-}
\ No newline at end of file
+}

data/ui/control_center.blp

@@ -20,8 +20,18 @@ template $SwayNotificationCenterControlCenter: ApplicationWindow {
         orientation: vertical;
         vexpand: true;
 
+        styles [
+          "widgets",
+        ]
+
         Box notifications_box {
           orientation: vertical;
+          overflow: hidden;
+
+          styles [
+            "widget",
+            "widget-notifications",
+          ]
 
           Stack stack {
             hhomogeneous: true;

src/controlCenter/widgets/baseWidget.vala

@@ -34,6 +34,8 @@ namespace SwayNotificationCenter.Widgets {
             this.swaync_daemon = swaync_daemon;
             this.noti_daemon = noti_daemon;
 
+            set_overflow (Gtk.Overflow.HIDDEN);
+            add_css_class ("widget");
             add_css_class (css_class_name);
             if (suffix.length > 0) add_css_class (suffix);
         }