elementary · danirabbit · Apr 11, 2025 · Apr 10, 2025 · Apr 10, 2025 · Apr 10, 2025
diff --git a/demo/GraniteDemo.vala b/demo/GraniteDemo.vala
@@ -31,6 +31,7 @@ public class Granite.Demo : Gtk.Application {
         var settings_uris_view = new SettingsUrisView ();
         var style_manager_view = new StyleManagerView ();
         var utils_view = new UtilsView ();
+        var video_view = new VideoView ();
         var placeholder = new WelcomeView ();
         var dialogs_view = new DialogsView (window);
         var application_view = new ApplicationView ();
@@ -47,6 +48,7 @@ public class Granite.Demo : Gtk.Application {
         main_stack.add_titled (hypertext_view, "hypertextview", "HyperTextView");
         main_stack.add_titled (controls_view, "controls", "Controls");
         main_stack.add_titled (maps_view, "maps", "Maps");
+        main_stack.add_titled (video_view, "video", video_view.title);
         main_stack.add_titled (overlaybar_view, "overlaybar", "OverlayBar");
         main_stack.add_titled (settings_uris_view, "settings_uris", "Settings URIs");
         main_stack.add_titled (toast_view, "toasts", "Toast");

diff --git a/demo/Views/VideoView.vala b/demo/Views/VideoView.vala
@@ -0,0 +1,23 @@
+/*
+ * Copyright 2025 elementary, Inc. (https://elementary.io)
+ * SPDX-License-Identifier: LGPL-3.0-or-later
+ */
+
+public class VideoView : DemoPage {
+    construct {
+        title = "Video";
+
+        var video = new Gtk.Video () {
+            file = File.new_for_uri ("https://download.blender.org/peach/trailer/trailer_400p.ogg"),
+            loop = true,
+            margin_top = 12,
+            margin_bottom = 12,
+            margin_start = 12,
+            margin_end = 12,
+            overflow = HIDDEN
+        };
+        video.add_css_class (Granite.CssClass.CARD);
+
+        content = video;
+    }
+}
diff --git a/demo/meson.build b/demo/meson.build
@@ -20,6 +20,7 @@ executable(
     'Views/StyleManagerView.vala',
     'Views/ToastView.vala',
     'Views/UtilsView.vala',
+    'Views/VideoView.vala',
     'Views/WelcomeView.vala',
 
     dependencies: [

diff --git a/lib/StyleManager.vala b/lib/StyleManager.vala
@@ -114,7 +114,7 @@ public class Granite.StyleManager : Object {
                 gtk_dark_provider.load_from_resource ("/io/elementary/granite/Gtk-dark.css");
             }
 
-            Gtk.StyleContext.add_provider_for_display (display, gtk_dark_provider, Gtk.STYLE_PROVIDER_PRIORITY_THEME);
+            Gtk.StyleContext.add_provider_for_display (display, gtk_dark_provider, Gtk.STYLE_PROVIDER_PRIORITY_THEME + 1);
 #endif
             Gtk.StyleContext.add_provider_for_display (display, dark_provider, Gtk.STYLE_PROVIDER_PRIORITY_THEME);
         } else {
@@ -139,7 +139,7 @@ public class Granite.StyleManager : Object {
                 gtk_base_provider.load_from_resource ("/io/elementary/granite/Gtk.css");
             }
 
-            Gtk.StyleContext.add_provider_for_display (display, gtk_base_provider, Gtk.STYLE_PROVIDER_PRIORITY_THEME);
+            Gtk.StyleContext.add_provider_for_display (display, gtk_base_provider, Gtk.STYLE_PROVIDER_PRIORITY_THEME + 1);
 #endif
             Gtk.StyleContext.add_provider_for_display (display, base_provider, Gtk.STYLE_PROVIDER_PRIORITY_THEME);
         }
@@ -175,6 +175,6 @@ public class Granite.StyleManager : Object {
 
         Gtk.StyleContext.remove_provider_for_display (display, accent_provider);
         accent_provider.load_from_string ("@define-color accent_color %s;".printf (accent_color));
-        Gtk.StyleContext.add_provider_for_display (display, accent_provider, Gtk.STYLE_PROVIDER_PRIORITY_THEME + 1);
+        Gtk.StyleContext.add_provider_for_display (display, accent_provider, Gtk.STYLE_PROVIDER_PRIORITY_THEME + 2);
     }
 }
diff --git a/lib/Styles/Granite/_classes.scss b/lib/Styles/Granite/_classes.scss
@@ -38,3 +38,8 @@ paper {
     background-size: rem(24px) rem(24px);
     background-position: 0 0, rem(12px) rem(12px);
 }
+
+.circular {
+    // Not 50% because that creates a squished ellipse for non-squares widgets
+    border-radius: 9999px;
+}
diff --git a/lib/Styles/Gtk/Button.scss b/lib/Styles/Gtk/Button.scss
@@ -70,11 +70,6 @@ button {
         }
     }
 
-    &.circular {
-        // Not 50% because that creates a squished ellipse for non-squares widgets
-        border-radius: 9999px;
-    }
-
     &.osd {
         @include control;
         @include border-interactive-roundrect;
@@ -93,9 +88,37 @@ button {
             // Intentionally not in ems since it's used as a stroke
             0 0 0 1px $shadow-border-color,
             shadow(2);
+        color: $fg-color;
+        margin: 0;
         padding: $button-spacing;
 
-        .linked.vertical &:first-child {
+        transition:
+            background duration("expand") easing(),
+            transform duration("expand") easing("ease-out-back");
+
+        &:active {
+            transform: scale(0.95);
+            transition:
+                background duration("collapse") easing(),
+                transform duration("collapse") easing();
+        }
+
+        &:disabled {
+            @include control-disabled;
+
+            box-shadow:
+                highlight(),
+                // Intentionally not in ems since it's used as a stroke
+                0 0 0 1px $shadow-border-color,
+                shadow(1);
+        }
+
+        .linked & {
+            transition: none;
+            transform: none;
+        }
+
+        .linked &.vertical &:first-child {
             box-shadow:
                 highlight("top"),
                 // Intentionally not in ems since it's used as a stroke

diff --git a/lib/Styles/Gtk/Index.scss b/lib/Styles/Gtk/Index.scss
@@ -17,5 +17,6 @@
 @import 'Spinner.scss';
 @import 'Switch.scss';
 @import 'Tooltip.scss';
+@import 'Video.scss';
 @import 'WindowControls.scss';
 @import 'Window.scss';
diff --git a/lib/Styles/Gtk/Scale.scss b/lib/Styles/Gtk/Scale.scss
@@ -19,6 +19,7 @@ scale {
 
         transition:
             box-shadow duration("expand") easing(),
+            opacity duration("expand") easing(),
             transform duration("expand") easing("ease-out-back");
     }
 
@@ -43,6 +44,14 @@ scale {
     }
 
     &.horizontal {
+        fill.top {
+            border-radius: rem(12px) 0 0 rem(12px);
+        }
+
+        fill.bottom {
+            border-radius: 0 rem(12px) rem(12px) 0;
+        }
+
         slider {
             margin: $slider-margin -1px;
         }

diff --git a/lib/Styles/Gtk/Slider.scss b/lib/Styles/Gtk/Slider.scss
@@ -3,7 +3,7 @@ slider {
 
     border: none;
 
-    border-radius: 50%;
+    border-radius: 999px;
     box-shadow:
         highlight(),
         0 0 0 1px $border-color,

diff --git a/lib/Styles/Gtk/Video.scss b/lib/Styles/Gtk/Video.scss
@@ -0,0 +1,110 @@
+video {
+    &,
+    &.card {
+        background: black;
+    }
+
+    // Play/Repeat indicator
+    image.circular.large-icons.osd {
+    	background:
+    	    rgba($SILVER_300, 0.65);
+           -gtk-icon-shadow:
+                0 1px 2px rgba(black, 0.2),
+                0 0.3rem 1rem rgba(black, 0.3);
+        padding: 1rem;
+    }
+
+    controls.osd {
+        background: linear-gradient(
+            to bottom,
+            transparent,
+            rgba(black, 0.1) 1.5rem
+        );
+        margin: 0;
+        padding: 1em;
+
+        > box {
+            border-spacing: $button-spacing;
+
+            // Play/pause button
+            > button.flat.image-button {
+                @extend .osd;
+
+                border-radius: 999px;
+            }
+
+            // Volume controls
+            > scalebutton > button {
+                -gtk-icon-shadow:
+                    0 1px 3px rgba(black, 0.4),
+                    0 0 1em rgba(black, 0.25);
+            }
+
+            box.horizontal {
+                border-spacing: $button-spacing;
+
+                // Time labels
+                > label {
+                    @extend .numeric;
+                    font-weight: bold;
+                    text-shadow:
+                        0 1px 3px rgba(black, 0.4),
+                        0 0 1rem rgba(black, 0.25);
+                }
+
+                // Playback control
+                > scale.horizontal {
+                    fill {
+                        animation: progress 1.5s easing() infinite;
+                        background-color: rgba(white, 0.15);
+                        background-repeat: no-repeat;
+                        background-size: 48px 100%;
+                        background-image:
+                            linear-gradient(
+                                to right,
+                                rgba(white, 0),
+                                rgba(white, 0.25) 60%,
+                                rgba(white, 0)
+                            );
+
+                        &:backdrop {
+                            animation: none;
+                            background-image: none;
+                        }
+                    }
+
+                    highlight {
+                        background-color: white;
+                        box-shadow: 0 1px 3px rgba(black, 0.1);
+                    }
+
+                    trough {
+                        background-color: rgba(white, 0.25);
+                        box-shadow:
+                            0 1px 1px rgba(black, 0.075),
+                            0 0.2rem 1rem -0.15rem rgba(black, 0.1);
+                    }
+
+                    slider {
+                        min-width: rem(3px);
+                        opacity: 0;
+                    }
+
+                    &:hover slider {
+                        opacity: 1;
+                    }
+                }
+            }
+        }
+    }
+
+    @keyframes progress {
+        from {
+            background-position: calc(0% - 48px), 0%;
+        }
+
+        to {
+            background-position: calc(100% + 48px), 0%;
+        }
+    }
+}
diff --git a/lib/Styles/_osd.scss b/lib/Styles/_osd.scss
@@ -1,4 +1,4 @@
-:not(button).osd {
+.osd {
     background-color: rgba($fg-color, 0.95);
     border-radius: rem($window_radius / 2);
     box-shadow: shadow(1);