add: gtk3 ts popover example

closes #224
closes #157

1 files changed, 56 insertions, 0 deletions

diff --git a/examples/gtk3/js/media-player/widget/MediaPlayer.scss b/examples/gtk3/js/media-player/widget/MediaPlayer.scss
new file mode 100644
index 0000000..e1597c2
--- /dev/null
+++ b/examples/gtk3/js/media-player/widget/MediaPlayer.scss
@@ -0,0 +1,56 @@
+// https://gitlab.gnome.org/GNOME/gtk/-/blob/gtk-3-24/gtk/theme/Adwaita/_colors-public.scss
+$fg-color: #{"@theme_fg_color"};
+$bg-color: #{"@theme_bg_color"};
+
+window {
+    all: unset;
+}
+
+box.MediaPlayer {
+    padding: .6rem;
+    background-color: $bg-color;
+
+    box.cover-art {
+        min-width: 120px;
+        min-height: 120px;
+        border-radius: 9px;
+        margin-right: .6rem;
+        background-size: contain;
+        background-position: center;
+    }
+
+    box.title {
+        label {
+            font-weight: bold;
+            font-size: 1.1em;
+        }
+    }
+
+    scale {
+        padding: 0;
+        margin: .4rem 0;
+
+        trough {
+            min-height: 8px;
+        }
+
+        highlight {
+            background-color: $fg-color;
+        }
+
+        slider {
+            all: unset;
+        }
+    }
+
+    centerbox.actions {
+        min-width: 220px;
+
+        button {
+            min-width: 0;
+            min-height: 0;
+            padding: .4rem;
+            margin: 0 .2rem;
+        }
+    }
+}