💄 control-center,center-window: add background shadow, use gtk's spacing instead of margin

ags/style/_center-window.scss

@@ -2,10 +2,12 @@
 @use "./wal";
 @use "./colors";
 
-.center-window-container {
+
+.popup-window.center-window .center-window-container {
   background: colors.$bg-translucent;
-  border-radius: 18px;
+  border-radius: 24px;
   padding: 12px;
+  box-shadow: 0 0 6px colors.$bg-translucent;
 
   & .big-media {
     padding: 6px;
@@ -85,7 +87,7 @@
 
   & .calendar-box {
     & calendar {
-      $border-radius: 10px;
+      $border-radius: 14px;
       font-weight: 600;
       padding-bottom: 2px;
 

ags/style/_control-center.scss

@@ -10,6 +10,7 @@
   background: colors.$bg-translucent;
   border-radius: 28px;
   padding: 20px;
+  box-shadow: 0 0 6px 1px colors.$bg-translucent;
 
   & > * {
     margin: 9px 0;
@@ -164,10 +165,10 @@
 }
 
 box.history {
-  margin-top: 10px;
   background: colors.$bg-translucent;
+  box-shadow: 0 0 6px 1px colors.$bg-translucent;
   border-radius: 24px;
-  padding: 20px;
+  padding: 18px;
   transition: 120ms linear;
 
   &.hide {
@@ -176,7 +177,7 @@ box.history {
 
   & .notifications {
     & .notification {
-      background: colors.$bg-primary;
+      background: colors.$bg-translucent-primary;
     }
   }
 

ags/window/CenterWindow.ts

@@ -24,7 +24,9 @@ export const CenterWindow = (mon: number) => PopupWindow({
                     new Widget.Box({
                         className: "datetime",
                         orientation: Gtk.Orientation.VERTICAL,
-                        valign: Gtk.Align.START,
+                        halign: Gtk.Align.CENTER,
+                        valign: Gtk.Align.CENTER,
+                        vexpand: true,
                         children: [
                             new Widget.Label({
                                 className: "time",
@@ -56,6 +58,7 @@ export const CenterWindow = (mon: number) => PopupWindow({
                 orientation: Gtk.Orientation.HORIZONTAL,
                 cssColor: "gray",
                 margin: 5,
+                spacing: 8,
                 alpha: .3,
                 visible: bind(AstalMpris.get_default(), "players").as(players => players.length > 0),
             } as SeparatorProps),

ags/window/ControlCenter.ts

@@ -19,6 +19,7 @@ export const ControlCenter = (mon: number) => PopupWindow({
     widthRequest: 395,
     child: new Widget.Box({
         orientation: Gtk.Orientation.VERTICAL,
+        spacing: 16,
         children: [
             new Widget.Box({
                 className: "control-center-container",