library: Add Overlay entry (#251)

Author: AkshayWarrier

src/Library/demos/Overlay/image.png

@@ -0,0 +1,56 @@
+using Gtk 4.0;
+using Adw 1;
+
+Adw.StatusPage {
+  title: "Overlay";
+  description: "Overlay widgets on top of a each other";
+
+  Adw.Clamp{
+    Overlay {
+      Picture picture {
+      }
+
+      [overlay]
+      Box toolbar{
+        margin-start: 24;
+        margin-end: 24;
+        margin-bottom:18;
+        valign: end;
+
+        Button {
+          icon-name: "skip-backwards-10-symbolic";
+        }
+
+        Button {
+          icon-name: "play-large-symbolic";
+        }
+
+        Button {
+          icon-name: "skip-forward-10-symbolic";
+        }
+
+        Scale {
+          hexpand: true;
+          orientation: horizontal;
+          show-fill-level: true;
+          adjustment:
+          Adjustment {
+            lower: 0;
+            upper: 100;
+            value:50;
+          };
+        }
+
+        Button {
+          icon-name: "audio-volume-muted-symbolic";
+        }
+
+        styles [
+          "toolbar",
+          "osd",
+          "darken",
+        ]
+      }
+    }
+  }
+}

src/Library/demos/Overlay/main.blp

@@ -0,0 +1,7 @@
+.darken {
+  transition: background-color 0.3s ease-in-out;
+}
+
+.darken:hover {
+  background-color: black;
+}

src/Library/demos/Overlay/main.css

@@ -0,0 +1,11 @@
+import Gtk from "gi://Gtk";
+import Gio from "gi://Gio";
+import GLib from "gi://GLib";
+
+const file = Gio.File.new_for_path(pkg.pkgdatadir).resolve_relative_path(
+  "Library/demos/Overlay/image.png",
+);
+
+const picture = workbench.builder.get_object("picture");
+picture.file = file;
+

src/Library/demos/Overlay/main.js

@@ -0,0 +1,10 @@
+{
+  "name": "Overlay",
+  "category": "user_interface",
+  "description": "Overlay widgets on top of each other",
+  "panels": [
+    "ui",
+    "preview"
+  ],
+  "autorun": true
+}