Fix progressview css

data/Application.css

@@ -1,3 +1,125 @@
 .button-box button {
     min-width: 86px; /* https://github.com/elementary/granite/issues/577#issuecomment-1318979272 */
 }
+
+.logo {
+    animation: rainbow-bg 30s linear infinite;
+    background-image: linear-gradient(
+        to bottom,
+        alpha(@BLUEBERRY_500, 0.25),
+        alpha(@BLUEBERRY_700, 0.75)
+    );
+    border-radius: 50%;
+    box-shadow:
+        inset 0 -2px 0 0 alpha(@highlight_color, 0.2),
+        inset 0 2px 0 0 alpha(@highlight_color, 0.3),
+        inset 2px 0 0 0 alpha(@highlight_color, 0.07),
+        inset -2px 0 0 0 alpha(@highlight_color, 0.07),
+        inset 0 0 0 1px alpha(black, 0.7);
+    color: white;
+    -gtk-icon-shadow:
+        0 1px 1px alpha(black, 0.3),
+        0 2px 3px alpha(@BLUEBERRY_900, 0.2);
+    -gtk-icon-style: symbolic;
+}
+
+@keyframes rainbow-bg {
+    from {
+        background-image: linear-gradient(
+            to bottom,
+            alpha(@BLUEBERRY_500, 0.25),
+            alpha(@BLUEBERRY_700, 0.75)
+        );
+        -gtk-icon-shadow:
+            0 1px 1px alpha(black, 0.3),
+            0 2px 3px alpha(@BLUEBERRY_900, 0.2);
+    }
+
+    12.5% {
+        background-image: linear-gradient(
+            to bottom,
+            alpha(@MINT_500, 0.25),
+            alpha(@MINT_700, 0.75)
+        );
+        -gtk-icon-shadow:
+            0 1px 1px alpha(black, 0.3),
+            0 2px 3px alpha(@MINT_900, 0.2);
+    }
+
+    25% {
+        background-image: linear-gradient(
+            to bottom,
+            alpha(@LIME_500, 0.25),
+            alpha(@LIME_700, 0.75)
+        );
+        -gtk-icon-shadow:
+            0 1px 1px alpha(black, 0.3),
+            0 2px 3px alpha(@LIME_900, 0.2);
+    }
+
+    37.5% {
+        background-image: linear-gradient(
+            to bottom,
+            alpha(@BANANA_500, 0.25),
+            alpha(@BANANA_700, 0.75)
+        );
+        -gtk-icon-shadow:
+            0 1px 1px alpha(black, 0.3),
+            0 2px 3px alpha(@BANANA_900, 0.2);
+    }
+
+    50% {
+        background-image: linear-gradient(
+            to bottom,
+            alpha(@ORANGE_500, 0.25),
+            alpha(@ORANGE_700, 0.75)
+        );
+        -gtk-icon-shadow:
+            0 1px 1px alpha(black, 0.3),
+            0 2px 3px alpha(@ORANGE_900, 0.2);
+    }
+
+    62.5% {
+        background-image: linear-gradient(
+            to bottom,
+            alpha(@STRAWBERRY_500, 0.25),
+            alpha(@STRAWBERRY_700, 0.75)
+        );
+        -gtk-icon-shadow:
+            0 1px 1px alpha(black, 0.3),
+            0 2px 3px alpha(@STRAWBERRY_900, 0.2);
+    }
+
+    75% {
+        background-image: linear-gradient(
+            to bottom,
+            alpha(@BUBBLEGUM_500, 0.25),
+            alpha(@BUBBLEGUM_700, 0.75)
+        );
+        -gtk-icon-shadow:
+            0 1px 1px alpha(black, 0.3),
+            0 2px 3px alpha(@BUBBLEGUM_900, 0.2);
+    }
+
+    87.5% {
+        background-image: linear-gradient(
+            to bottom,
+            alpha(@GRAPE_500, 0.25),
+            alpha(@GRAPE_700, 0.75)
+        );
+        -gtk-icon-shadow:
+            0 1px 1px alpha(black, 0.3),
+            0 2px 3px alpha(@GRAPE_900, 0.2);
+    }
+
+    to {
+        background-image: linear-gradient(
+            to bottom,
+            alpha(@BLUEBERRY_500, 0.25),
+            alpha(@BLUEBERRY_700, 0.75)
+        );
+        -gtk-icon-shadow:
+            0 1px 1px alpha(black, 0.3),
+            0 2px 3px alpha(@BLUEBERRY_900, 0.2);
+    }
+}

data/io.elementary.installer.gresource.xml

@@ -3,7 +3,6 @@
   <gresource prefix="/io/elementary/installer">
     <file compressed="true">Application.css</file>
     <file alias="disk-bar-fallback.css" compressed="true">disk-bar-fallback.css</file>
-    <file alias="ProgressView.css" compressed="true">ProgressView.css</file>
     <file compressed="true">wallpaper.jpg</file>
   </gresource>
   <gresource prefix="/io/elementary/installer/icons">

src/Views/ProgressView.vala

@@ -25,32 +25,22 @@ public class ProgressView : AbstractInstallerView {
     private const int NUM_STEP = 5;
 
     construct {
-        var style_provider = new Gtk.CssProvider ();
-        style_provider.load_from_resource ("io/elementary/installer/ProgressView.css");
-
         var logo_icon_name = Environment.get_os_info ("LOGO");
         if (logo_icon_name == "" || logo_icon_name == null) {
             logo_icon_name = "distributor-logo";
         }
 
         var logo = new Adw.Avatar (192, "", false) {
             // In case the wallpaper can't be loaded, we don't want an icon or text
-            icon_name = "invalid-icon-name",
-            // We need this for the shadow to not get clipped by Gtk.Overlay
-            margin_top = 6,
-            margin_end = 6,
-            margin_bottom = 6,
-            margin_start = 6
+            icon_name = "invalid-icon-name"
         };
-        logo.custom_image = Gdk.Texture.from_resource ("resource://io/elementary/installer/wallpaper.jpg");
-        logo.get_style_context ().add_provider (style_provider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION);
+        logo.custom_image = Gdk.Texture.from_resource ("/io/elementary/installer/wallpaper.jpg");
 
         var icon = new Gtk.Image () {
             icon_name = logo_icon_name + "-symbolic",
             pixel_size = 192
         };
         icon.add_css_class ("logo");
-        icon.get_style_context ().add_provider (style_provider, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION);
 
         var logo_overlay = new Gtk.Overlay () {
             child = logo,