[nautilus/wip/antoniof/flow-box-preparation: 26/51] view-icon-item-ui: Tweak selection visuals

[António Fernandes <antoniof src gnome org>]

commit 157c0d0da28f3d4fe08e9d027e5c43ffc8e9dca8
Author: António Fernandes <antoniof gnome org>
Date:   Wed Sep 1 00:51:06 2021 +0100

    view-icon-item-ui: Tweak selection visuals
    
    Make it closer to the style used by the canvas view.

 src/resources/css/Adwaita.css                  | 25 ++++++++++++++++---------
 src/resources/ui/nautilus-view-icon-item-ui.ui |  6 +++---
 2 files changed, 19 insertions(+), 12 deletions(-)
---
diff --git a/src/resources/css/Adwaita.css b/src/resources/css/Adwaita.css
index 9bd235d68..4b64df2a6 100644
--- a/src/resources/css/Adwaita.css
+++ b/src/resources/css/Adwaita.css
@@ -203,6 +203,7 @@ flowbox {
 
 flowboxchild:selected {
   background-color:transparent;
+  outline-color: transparent;
 }
 
 .icon-background {
@@ -212,14 +213,20 @@ flowboxchild:selected {
   border-width:0px;
 }
 
-flowboxchild > .icon-item-background {
-  padding:4px;
+.icon-ui-labels-box {
+  padding: 2px 4px;
+  border-radius: 4px;
 }
-flowboxchild:selected > .icon-item-background {
-  padding:4px;
-  background-color:#4a90d9;
-  border-color:#4a90d9;
-  border-style:solid;
-  border-width:0px;
-  border-radius:4px 4px 4px 4px;
+
+flowboxchild:selected .icon-ui-labels-box {
+  color: @theme_selected_fg_color;
+  background-color: @theme_selected_bg_color;
+}
+
+flowboxchild:selected image {
+  -gtk-icon-effect: dim; /* GTK 3 only */
+  /* GTK 4 TODO: Replace previous line with the following one:
+  -gtk-icon-filter: opacity(0.5);
+  */
+  -gtk-icon-shadow: 0px 0px @theme_selected_bg_color;
 }
diff --git a/src/resources/ui/nautilus-view-icon-item-ui.ui b/src/resources/ui/nautilus-view-icon-item-ui.ui
index bbb929770..b266637e2 100644
--- a/src/resources/ui/nautilus-view-icon-item-ui.ui
+++ b/src/resources/ui/nautilus-view-icon-item-ui.ui
@@ -7,9 +7,6 @@
         <property name="orientation">vertical</property>
         <property name="halign">center</property>
         <property name="valign">start</property>
-        <style>
-          <class name="icon-item-background"/>
-        </style>
         <child>
           <object class="GtkBox" id="fixed_height_box">
             <property name="orientation">vertical</property>
@@ -31,6 +28,9 @@
           <object class="GtkBox">
             <property name="orientation">vertical</property>
             <property name="valign">start</property>
+            <style>
+              <class name="icon-ui-labels-box"/>
+            </style>
             <child>
               <object class="GtkLabel" id="label">
                 <property name="ellipsize">middle</property>