[gnome-software: 12/13] style: improve CSS on category tiles

[Philip Withnall <pwithnall src gnome org>]

commit e65ffd9bcd397a997493fca7c41fa05e2ea32ee5
Author: Tobias Bernard <tbernard gnome org>
Date:   Fri Aug 6 17:54:21 2021 +0200

    style: improve CSS on category tiles
    
    - Various color, gradient, and type fixes to bring visuals in line with designs
    - Add semi-transparent box-shadow borders to tiles
    - Add hover and active states
    - High Contrast is no longer broken after Adrien's fixes in !883

 src/gs-category-tile.ui |  5 +--
 src/gtk-style.css       | 83 ++++++++++++++++++++++++++++++++++++++++---------
 2 files changed, 69 insertions(+), 19 deletions(-)
---
diff --git a/src/gs-category-tile.ui b/src/gs-category-tile.ui
index a2942474d..e8bff88f7 100644
--- a/src/gs-category-tile.ui
+++ b/src/gs-category-tile.ui
@@ -13,7 +13,7 @@
         <property name="halign">center</property>
         <property name="visible">True</property>
         <property name="orientation">horizontal</property>
-        <property name="spacing">8</property>
+        <property name="spacing">10</property>
         <child>
           <object class="GtkImage" id="image">
             <property name="visible">True</property>
@@ -29,9 +29,6 @@
           <object class="GtkLabel" id="label">
             <property name="visible">True</property>
             <property name="xalign">0</property>
-            <attributes>
-              <attribute name="weight" value="bold"/>
-            </attributes>
           </object>
         </child>
       </object>
diff --git a/src/gtk-style.css b/src/gtk-style.css
index 1183ee460..43e838888 100644
--- a/src/gtk-style.css
+++ b/src/gtk-style.css
@@ -182,8 +182,10 @@ summary-tile {
        padding: 20px 40px;
        border-radius: 8px;
        font-size: larger;
-       font-weight: bold;
+       font-weight: 900;
        text-shadow: none;
+       border: none;
+       box-shadow: inset 0 0 0 1px alpha(black, 0.13);
 }
 
 /* Disable highlight on hover as it doesn’t make these icons look good */
@@ -191,40 +193,91 @@ summary-tile {
 
 /* Styling for specific category buttons. */
 .category-tile.category-create {
-       border-color: #9072ce;
        background: linear-gradient(180deg, #ce8cd7 0%, #2861c6 100%);
-       color: #ffffff;
+       color: white;
+}
+.category-tile.category-create:hover {
+       background: linear-gradient(180deg, shade(#ce8cd7, 1.07) 0%, shade(#2861c6, 1.1) 100%);
+}
+.category-tile.category-create:active {
+       background: linear-gradient(180deg, shade(#ce8cd7, .95) 0%, shade(#2861c6, .95) 100%);
+       box-shadow: inset 0 0 0 1px alpha(black, 0.13),
+                   inset 0 4px 2px -2px mix(black, transparent, 0.8);
 }
 
 .category-tile.category-develop {
-       border-color: #353040;
        background: #5e5c64;
-       color: #ffffff;
+       color: white;
+}
+.category-tile.category-develop:hover {
+       background: shade(#5e5c64, 1.2);
+}
+.category-tile.category-develop:active {
+       background-color: shade(#5e5c64, .95);
+       box-shadow: inset 0 0 0 1px alpha(black, 0.13),
+                   inset 0 4px 2px -2px mix(black, transparent, 0.8);
 }
 
 .category-tile.category-learn {
-       border-color: #26a269;
-       background: linear-gradient(180deg, #2ec27e 0%, #27a76c 100%);
-       color: #ffffff;
+       background: linear-gradient(180deg, #2ec27e 30%, #27a66c 100%);
+       color: white;
+}
+.category-tile.category-learn:hover {
+       background: linear-gradient(180deg, shade(#2ec27e, 1.06) 30%, shade(#27a66c, 1.06) 100%);
+}
+.category-tile.category-learn:active {
+       background: linear-gradient(180deg, shade(#2ec27e, .95) 30%, shade(#27a66c, .95) 100%);
+       box-shadow: inset 0 0 0 1px alpha(black, 0.13),
+                   inset 0 4px 2px -2px mix(black, transparent, 0.8);
 }
 
 .category-tile.category-play {
-       border-color: #f1b28a;
-       background: linear-gradient(90deg, rgba(248,217,169,1) 0%, rgba(235,95,195,1) 50%, rgba(9,9,121,1) 
100%);
+       background: linear-gradient(75deg, #f9e2a7 0%, #eb5ec3 50%, #6d53e0 100%);
        color: #393484;
 }
+.category-tile.category-play:hover {
+       background: linear-gradient(75deg, shade(#f9e2a7, 1.07) 0%, shade(#eb5ec3, 1.07) 50%, shade(#6d53e0, 
1.07) 100%);
+}
+.category-tile.category-play:active {
+       background: linear-gradient(75deg, shade(#f9e2a7, .97) 0%, shade(#eb5ec3, .95) 50%, shade(#6d53e0, 
1.07) 100%);
+       box-shadow: inset 0 0 0 1px alpha(black, 0.13),
+                   inset 0 4px 2px -2px mix(black, transparent, 0.8);
+}
 
 .category-tile.category-socialize {
-       border-color: #db3371;
        background: linear-gradient(90deg, #ef4e9b 0%, #f77466 100%);
-       color: #572f15;
+       color: alpha(black, 0.7);
+}
+.category-tile.category-socialize:hover {
+       background: linear-gradient(90deg, shade(#ef4e9b, 1.08) 0%, shade(#f77466, 1.08) 100%);
+}
+.category-tile.category-socialize:active {
+       background: linear-gradient(90deg, shade(#ef4e9b, .95) 0%, shade(#f77466, .95) 100%);
+       box-shadow: inset 0 0 0 1px alpha(black, 0.13),
+                   inset 0 4px 2px -2px mix(black, transparent, 0.8);
 }
 
 .category-tile.category-work {
-       border-color: #efd185;
-       background: url("resource:///org/gnome/Software/work-category-background.png");
-       background-repeat: repeat;
+       box-shadow: inset 0 0 0 1px #efd185;
        color: #1c71d8;
+       background-color:#fdf8d7;
+       background-image: linear-gradient(#deddda 1px, transparent 1px),
+                         linear-gradient(90deg, #deddda 1px, transparent 1px);
+       background-size: 10px 10px, 10px 10px;
+       background-position: -1px -4px, center -1px;
+}
+.category-tile.category-work:hover {
+       box-shadow: inset 0 0 0 1px shade(#efd185, 1.08);
+       background-color: shade(#fdf8d7, 1.03);
+       background-image: linear-gradient(shade(#deddda, 1.04) 1px, transparent 1px),
+                         linear-gradient(90deg, shade(#deddda, 1.04) 1px, transparent 1px);
+}
+.category-tile.category-work:active {
+       background-color: shade(#fdf8d7, .93);
+       background-image: linear-gradient(shade(#deddda, .97) 1px, transparent 1px),
+                         linear-gradient(90deg, shade(#deddda, .97) 1px, transparent 1px);
+       box-shadow: inset 0 0 0 1px shade(#efd185, 1.08),
+                   inset 0 4px 2px -2px mix(black, transparent, 0.8);
 }
 
 .app-list {