[gnome-software/83-weird-gray-box-behind-every-screenshot] Add 12px margin around the main screenshot image

[Milan Crha <mcrha src gnome org>]

commit ac7d353c1118f3b55b6267bfcc73b2238f916ec2
Author: Milan Crha <mcrha redhat com>
Date:   Fri Sep 18 10:01:09 2020 +0200

    Add 12px margin around the main screenshot image
    
    That way it'll look much better when the screenshot itself doesn't
    have its own margin.
    
    Closes https://gitlab.gnome.org/GNOME/gnome-software/-/issues/83
    Closes https://gitlab.gnome.org/GNOME/gnome-software/-/merge_requests/512

 src/gs-details-page.c      | 2 ++
 src/gs-screenshot-image.ui | 6 ++++++
 src/gtk-style-hc.css       | 1 +
 src/gtk-style.css          | 1 +
 4 files changed, 10 insertions(+)
---
diff --git a/src/gs-details-page.c b/src/gs-details-page.c
index 6994e6ac..345d8922 100644
--- a/src/gs-details-page.c
+++ b/src/gs-details-page.c
@@ -630,6 +630,8 @@ gs_details_page_refresh_screenshots (GsDetailsPage *self)
                        gs_screenshot_image_set_size (GS_SCREENSHOT_IMAGE (ssmain),
                                                      AS_IMAGE_NORMAL_WIDTH,
                                                      AS_IMAGE_NORMAL_HEIGHT);
+                       gtk_style_context_add_class (gtk_widget_get_style_context (ssmain),
+                                                    "screenshot-image-main");
                        gs_screenshot_image_load_async (GS_SCREENSHOT_IMAGE (ssmain), NULL);
 
                        /* when we're offline, the load will be immediate, so we
diff --git a/src/gs-screenshot-image.ui b/src/gs-screenshot-image.ui
index 5b206712..9aeb5c69 100644
--- a/src/gs-screenshot-image.ui
+++ b/src/gs-screenshot-image.ui
@@ -15,6 +15,9 @@
             <property name="visible">True</property>
             <property name="halign">center</property>
             <property name="valign">center</property>
+            <style>
+              <class name="image1"/>
+            </style>
           </object>
           <packing>
             <property name="name">image1</property>
@@ -25,6 +28,9 @@
             <property name="visible">True</property>
             <property name="halign">center</property>
             <property name="valign">center</property>
+            <style>
+              <class name="image2"/>
+            </style>
           </object>
           <packing>
             <property name="name">image2</property>
diff --git a/src/gtk-style-hc.css b/src/gtk-style-hc.css
index 1006649e..62ecc053 100644
--- a/src/gtk-style-hc.css
+++ b/src/gtk-style-hc.css
@@ -34,6 +34,7 @@
 }
 .screenshot-image { border-radius: 5px; }
 .screenshot-image-thumb { border-radius: 3px; }
+.screenshot-image-main .image1, .screenshot-image-main .image2 { margin: 12px; }
 
 .app-tile-label {
        font-size: 105%;
diff --git a/src/gtk-style.css b/src/gtk-style.css
index 4b5fcef7..57144217 100644
--- a/src/gtk-style.css
+++ b/src/gtk-style.css
@@ -163,6 +163,7 @@
 }
 .screenshot-image { border-radius: 5px; }
 .screenshot-image-thumb { border-radius: 3px; }
+.screenshot-image-main .image1, .screenshot-image-main .image2 { margin: 12px; }
 
 .app-tile-label {
        font-size: 105%;