style: migrate to Adwaita CSS variables for theme integration

data/style/widgets/backlight.scss

 .widget-backlight {
+  padding: 0px 10px;
+  margin: 5px 15px;
+  border-radius: var(--window-radius);
+
+  &.expanded {
+    background: var(--dialog-bg-color);
+    box-shadow: 0px 0px 10px var(--headerbar-shade-color);
+    border: 1px solid var(--border-color);
+  }
+}
+
+.widget-backlight .image-button {
+  background: transparent;
 }

data/style/widgets/inhibitors.scss

 .widget-inhibitors {
-  & > label {
-    margin-right: $margin;
+  background: transparent;
+  padding: 0px;
+  margin: 10px 15px;
+
+  &>label {
     font-size: 1.5rem;
+    margin-right: $margin;
   }
 
-  & > button {
+  &>button {
+    background: var(--dialog-bg-color);
+    border-radius: 999px;
+    border: 1px solid var(--border-color);
     margin-left: $margin;
-    border-radius: var(--border-radius);
+
+    &:hover {
+      background: unquote("alpha(var(--dialog-bg-color), 0.5)");
+      border: 1px solid var(--accent-bg-color);
+    }
   }
 }
-

data/style/widgets/label.scss

 .widget-label {
-  & > label {
+  margin: 5px 15px;
+
+  &>label {
     font-size: 1.1rem;
   }
 }

data/style/widgets/mpris.scss

 :root {
-  --mpris-album-art-overlay: rgba(0, 0, 0, 0.55);
-  --mpris-button-hover: rgba(0, 0, 0, 0.5);
-  --mpris-album-art-icon-size: 96px;
-  --mpris-album-art-shadow: 0px 0px 10px rgba(0, 0, 0, 0.75);
+  --mpris-album-art-icon-size: 64px;
 }
 
 .widget-mpris {
   padding: 0;
+  margin: 5px 10px;
 
-  /* The parent to all players */
-  .widget-mpris-player {
-    margin: 16px 20px;
-    border-radius: var(--border-radius);
-    box-shadow: var(--mpris-album-art-shadow);
+  carouselindicatordots {
+    margin: 0px;
+    padding: 0px;
+  }
+
+  .flat.image-button {
+    margin: 0px;
+    padding: 0px;
+  }
 
   .mpris-background {
-      filter: blur(10px);
+    background: transparent;
   }
 
-    .mpris-overlay {
-      padding: 16px;
-      background-color: var(--mpris-album-art-overlay);
+  .widget-mpris-player {
+    margin: 0 5px;
+    border-radius: var(--window-radius);
+    box-shadow: 0px 0px 10px var(--headerbar-shade-color);
+    border: 1px solid var(--border-color);
 
-      button:hover {
-        /* The media player buttons (play, pause, next, etc...) */
-        background: var(--noti-bg-hover);
-      }
+    .mpris-overlay {
+      background: var(--dialog-bg-color);
+      padding: 5px;
 
       .widget-mpris-album-art {
-        border-radius: var(--border-radius);
-        box-shadow: var(--mpris-album-art-shadow);
+        border-radius: var(--window-radius);
+        margin: 3px;
+        box-shadow: none;
         -gtk-icon-size: var(--mpris-album-art-icon-size);
       }
 
       .widget-mpris-title {
         font-weight: bold;
-        font-size: 1.25rem;
+        font-size: 1.1rem;
       }
 
       .widget-mpris-subtitle {
-        font-size: 1.1rem;
+        font-size: 0.9rem;
       }
 
-      &>box>button {
+      .image-button {
+        padding: 0px 5px;
 
-        /* Change player control buttons */
         &:hover {
-          background-color: var(--mpris-button-hover);
-        }
+          background: unquote("alpha(var(--window-bg-color), 0.3)");
+          border: 0.5px solid var(--border-color);
         }
       }
     }
-
-  &>box>button {
-    /* Change player side buttons */
-  }
-
-  &>box>button:disabled {
-    /* Change player side buttons insensitive */
   }
 }

data/style/widgets/quick-settings.scss

 .widget-quick-settings {
   padding: 0;
+  margin: 5px 15px;
 }
 
 .quick-settings-row {
@@ -8,7 +9,30 @@
 
 .quick-settings-tile {
   border-radius: 999px;
-  overflow: hidden;
+  background: var(--dialog-bg-color);
+  box-shadow: 0px 0px 5px var(--headerbar-shade-color);
+  border: 1px solid var(--border-color);
+
+  &:hover {
+    background: unquote("alpha(var(--dialog-bg-color), 0.7)");
+  }
+
+  &.active {
+    background: var(--accent-bg-color);
+    color: var(--accent-fg-color);
+
+    &:hover {
+      background: unquote("alpha(var(--accent-bg-color), 0.85)");
+    }
+
+    .tile-arrow {
+      background: unquote("alpha(currentColor, 0.15)");
+    }
+
+    .tile-separator {
+      background: unquote("alpha(currentColor, 0.3)");
+    }
+  }
 
   .tile-toggle {
     padding: 4px 12px;
@@ -17,17 +41,29 @@
     background: transparent;
   }
 
+  .tile-separator {
+    background: unquote("alpha(currentColor, 0.3)");
+  }
+
   .tile-arrow {
     padding: 4px;
     min-width: 24px;
     border: none;
     box-shadow: none;
-    background: transparent;
+    background: unquote("alpha(currentColor, 0.07)");
+    border-radius: 0 999px 999px 0;
+
+    &:hover {
+      background: unquote("alpha(currentColor, 0.2)");
+    }
   }
 }
 
 .quick-settings-submenu {
   border-radius: var(--border-radius);
-  margin: 4px 0;
+  margin: 5px 0;
   padding: 4px;
+  background: var(--dialog-bg-color);
+  border: 1px solid var(--border-color);
+  box-shadow: 0px 0px 10px var(--headerbar-shade-color);
 }

data/style/widgets/slider.scss

 .widget-slider {
-  label {
-    font-size: inherit;
-  }
 }

data/style/widgets/title.scss

 .widget-title {
-  & > label {
-    margin-right: $margin;
+  background: transparent;
+  padding: 0px;
+  margin: 10px 15px;
+
+  &>label {
     font-size: 1.5rem;
+    margin-right: $margin;
   }
 
-  & > button {
+  &>button {
+    background: var(--dialog-bg-color);
+    border-radius: 999px;
+    border: 1px solid var(--border-color);
     margin-left: $margin;
-    border-radius: var(--border-radius);
+
+    &:hover {
+      background: unquote("alpha(var(--dialog-bg-color), 0.5)");
+      border: 1px solid var(--accent-bg-color);
+    }
   }
 }
-

data/style/widgets/volume.scss

 .widget-volume {
+  padding: 0px 10px;
+  margin: 5px 15px;
+  border-radius: var(--window-radius);
+
+  &.expanded {
+    background: var(--dialog-bg-color);
+    box-shadow: 0px 0px 10px var(--headerbar-shade-color);
+    border: 1px solid var(--border-color);
+  }
+}
+
+.widget-volume .image-button {
+  background: transparent;
+}
+
+.widget-volume>box {
+  margin: 0 0 0 3px;
 }
 
 .widget-volume>box>button {}
 
+.widget-volume revealer {
+  padding: 0;
+  margin: 0;
+}
+
 .per-app-volume {
-  background-color: var(--noti-bg-alt);
-  margin: $margin;
-  margin-bottom: 0;
+  background: transparent;
+  padding: 0;
+  margin: 0;
   border-radius: var(--border-radius);
 }
+
+.per-app-volume row {
+  background: transparent;
+}

src/controlCenter/widgets/backlight/backlight.vala

@@ -236,6 +236,7 @@ namespace XimperShellNotificationCenter.Widgets {
 
             // Multiple sources — collapsible layout
             if (need_collapse) {
+                add_css_class ("has-collapse");
                 var topbar = new Gtk.Box (
                     Gtk.Orientation.HORIZONTAL, 6);
                 var topbar_icon = new Gtk.Image.from_icon_name (