[gnome-software: 1/2] featured-carousel: Add an inset box shadow to the carousel

[Adrien Plazas <aplazas src gnome org>]

commit 85640a039e414d9eed98182d3ebc6631fbdb02b7
Author: Adrien Plazas <kekun plazas laposte net>
Date:   Wed Feb 9 18:06:21 2022 +0100

    featured-carousel: Add an inset box shadow to the carousel
    
    This matches other cards. For some reason this can't be set on the
    carousel itself, so it's applied on an overlay box.
    
    Fixes https://gitlab.gnome.org/GNOME/gnome-software/-/issues/1380

 src/gs-featured-carousel.ui | 14 ++++++++++++++
 src/style.css               |  6 ++++++
 2 files changed, 20 insertions(+)
---
diff --git a/src/gs-featured-carousel.ui b/src/gs-featured-carousel.ui
index 6298534c3..03ae312aa 100644
--- a/src/gs-featured-carousel.ui
+++ b/src/gs-featured-carousel.ui
@@ -25,6 +25,20 @@
             </style>
           </object>
         </child>
+        <!-- As children are drawn above the parent's inset box-shadow and as
+             the carousel's children have opaque backgrounds, we can't an inset
+             box shadow set on the carousel (or any parent) and expect them to
+             be visible. To work around this (it isn't a bug) and have the
+             effect we want, we can overlay a widget above the carousel and give
+             it the wanted inset box shadow. -->
+        <child type="overlay">
+          <object class="GtkBox">
+            <property name="can-target">False</property>
+            <style>
+              <class name="inset-shadow"/>
+            </style>
+          </object>
+        </child>
         <child type="overlay">
           <object class="GtkButton" id="previous_button">
             <property name="use-underline">True</property>
diff --git a/src/style.css b/src/style.css
index 3f919b22d..ddd38c33c 100644
--- a/src/style.css
+++ b/src/style.css
@@ -19,6 +19,12 @@ screenshot-carousel button,
        margin: 12px;
 }
 
+.featured-carousel .inset-shadow {
+  /* The border radius mimicks .card from Adwaita. */
+  border-radius: 12px;
+  box-shadow: inset 0 0 0 1px alpha(black, 0.13);
+}
+
 .screenshot-image-main .image1, .screenshot-image-main .image2 {
        margin-top: 6px;
        margin-bottom: 12px;