[gnome-software: 1/2] style: Make .view.tile mimick the style of list.content

[Philip Withnall <pwithnall src gnome org>]

commit 54dc1ac539342e55ee25c742e0f2879b89729003
Author: Adrien Plazas <kekun plazas laposte net>
Date:   Thu Aug 5 14:28:07 2021 +0200

    style: Make .view.tile mimick the style of list.content
    
    This makes the summary tiles look like other listboxes and tiles in
    GNOME.

 src/gtk-style-hc.css | 18 -----------------
 src/gtk-style.css    | 55 ++++++++++++++++++++++------------------------------
 2 files changed, 23 insertions(+), 50 deletions(-)
---
diff --git a/src/gtk-style-hc.css b/src/gtk-style-hc.css
index 447be699f..0b7a60044 100644
--- a/src/gtk-style-hc.css
+++ b/src/gtk-style-hc.css
@@ -13,24 +13,6 @@
        background-color: #999999;
 }
 
-.view.tile {
-       padding: 0;
-       border: 1px solid @theme_bg_color;
-       box-shadow: none;
-       background: mix(@theme_base_color,@theme_bg_color,0.3);
-}
-
-.view.tile:active {
-       border-color: @theme_selected_bg_color;
-       box-shadow: none;
-       color: @theme_selected_bg_color;
-}
-
-.view.tile:backdrop {
-       box-shadow: none;
-       border-color: @unfocused_borders;
-}
-
 .application-details-infobar.info {
        background-color: #d3d7cf;
        border-color: darker(#d3d7cf);
diff --git a/src/gtk-style.css b/src/gtk-style.css
index 5c303b8a7..7203e272b 100644
--- a/src/gtk-style.css
+++ b/src/gtk-style.css
@@ -149,50 +149,41 @@ summary-tile {
        min-width: 280px;
 }
 
+/* This mimicks the style of list and row from Adwaita, and of list.content from
+ * Libhandy. */
+
 .view.tile {
-       padding: 1px;
-       border: none;
-    box-shadow: inset 0 2px 0 transparent,
-                inset 0 -2px 0 transparent,
-                inset 0 0 0 1px @unfocused_borders,
-                inset 0 -3px 0 -2px transparent;
-       background: @gs_tile_bg_color;
+  background-color: @theme_base_color;
+  border-radius: 8px;
+  border: solid 1px alpha(@borders, 0.7);
+  box-shadow: none;
+  -gtk-outline-radius: 7px;
+  transition: 200ms cubic-bezier(0.25, 0.46, 0.45, 0.94);
 }
 
-.view.category-tile {
-    padding-top: 2px;
-    padding-bottom: 2px;
+.view.tile:hover {
+  background-color: mix(@theme_fg_color, @theme_base_color, 0.95);
 }
 
-.app-list {
-       background-color: @theme_base_color;
+.view.tile:backdrop:hover {
+  background-color: transparent;
 }
 
-.view.tile:hover {
-       background-color: @theme_base_color;
+.view.tile:active {
+  box-shadow: inset 0 2px 2px -2px mix(black, transparent, 0.8);
 }
 
-/* Making some shadows transparent instead of replacing multiple shadows with
-   one shadow prevents some horrendous transition animations, which happen even
-   with backdrop transition disabled. */
+.view.tile:hover:active {
+  background-color: mix(@theme_fg_color, @theme_base_color, 0.9);
+}
 
-.view.tile:active,
-.view.tile.colorful:active {
-       background: @gs_tile_bg_color;
-       box-shadow: inset 0 2px 0 transparent,
-                inset 0 -2px 0 transparent,
-                inset 0 0 0 1px @theme_selected_bg_color,
-                inset 0 -3px 0 -2px transparent;
-       color: @theme_selected_bg_color;
+.view.category-tile {
+    padding-top: 2px;
+    padding-bottom: 2px;
 }
 
-.view.tile:backdrop {
-    box-shadow: inset 0 2px 0 transparent,
-                inset 0 -2px 0 transparent,
-                inset 0 0 0 1px @unfocused_borders,
-                inset 0 -3px 0 -2px transparent;
-    /* Tile transitions are choppy for me for some reason. */
-    transition: none;
+.app-list {
+       background-color: @theme_base_color;
 }
 
 /* The rest of the featured-tile CSS is loaded at runtime in gs-feature-tile.c */