[gnome-software/wip/exalm/style-cleanups: 27/29] app-context-bar: Use standard styles

[Alexander Mikhaylenko <alexm src gnome org>]

commit b608f1c3cc5fa03eb5309c2b16716f28bf0f9c21
Author: Alexander Mikhaylenko <alexm gnome org>
Date:   Tue Nov 9 23:19:56 2021 +0500

    app-context-bar: Use standard styles
    
    .card for the whole thing, .heading and .caption for text.
    
    Unfortunately, this particular case is not really supported, so we'll have
    to copy some styles...

 src/gs-app-context-bar.ui | 18 +++++++++---------
 src/style-hc.css          |  4 ----
 src/style.css             | 44 +++++++++++++++++++++++++++++---------------
 3 files changed, 38 insertions(+), 28 deletions(-)
---
diff --git a/src/gs-app-context-bar.ui b/src/gs-app-context-bar.ui
index dd0d23f86..5ed72413e 100644
--- a/src/gs-app-context-bar.ui
+++ b/src/gs-app-context-bar.ui
@@ -5,7 +5,7 @@
     <property name="homogeneous">True</property>
     <property name="spacing">0</property>
     <style>
-      <class name="linked"/>
+      <class name="card"/>
     </style>
 
     <child>
@@ -51,7 +51,7 @@
                     <property name="label">Download Size</property>
                     <property name="xalign">0.5</property>
                     <style>
-                      <class name="context-tile-title"/>
+                      <class name="heading"/>
                     </style>
                   </object>
                 </child>
@@ -63,7 +63,7 @@
                     <property name="wrap">True</property>
                     <property name="xalign">0.5</property>
                     <style>
-                      <class name="context-tile-description"/>
+                      <class name="caption"/>
                     </style>
                   </object>
                 </child>
@@ -110,7 +110,7 @@
                     <property name="label">Safe</property>
                     <property name="xalign">0.5</property>
                     <style>
-                      <class name="context-tile-title"/>
+                      <class name="heading"/>
                     </style>
                   </object>
                 </child>
@@ -122,7 +122,7 @@
                     <property name="wrap">True</property>
                     <property name="xalign">0.5</property>
                     <style>
-                      <class name="context-tile-description"/>
+                      <class name="caption"/>
                     </style>
                   </object>
                 </child>
@@ -178,7 +178,7 @@
                     <property name="label">Adaptive</property>
                     <property name="xalign">0.5</property>
                     <style>
-                      <class name="context-tile-title"/>
+                      <class name="heading"/>
                     </style>
                   </object>
                 </child>
@@ -190,7 +190,7 @@
                     <property name="wrap">True</property>
                     <property name="xalign">0.5</property>
                     <style>
-                      <class name="context-tile-description"/>
+                      <class name="caption"/>
                     </style>
                   </object>
                 </child>
@@ -238,7 +238,7 @@
                     <property name="label" translatable="yes">Age Rating</property>
                     <property name="xalign">0.5</property>
                     <style>
-                      <class name="context-tile-title"/>
+                      <class name="heading"/>
                     </style>
                   </object>
                 </child>
@@ -250,7 +250,7 @@
                     <property name="wrap">True</property>
                     <property name="xalign">0.5</property>
                     <style>
-                      <class name="context-tile-description"/>
+                      <class name="caption"/>
                     </style>
                   </object>
                 </child>
diff --git a/src/style-hc.css b/src/style-hc.css
index 73e440348..5240a206e 100644
--- a/src/style-hc.css
+++ b/src/style-hc.css
@@ -24,10 +24,6 @@ star-image {
        color: #000000;
 }
 
-app-context-bar .context-tile {
-       border-color: alpha(@borders, 0.7);
-}
-
 .context-tile-lozenge.grey { background-color: #deddda; color: @theme_fg_color; }
 .context-tile-lozenge.green, .context-tile-lozenge.details-rating-0 { background-color: #b6f2c4; color: 
@theme_fg_color; }
 .context-tile-lozenge.red, .context-tile-lozenge.details-rating-18 { background-color: #fbd3cf; color: 
@theme_fg_color; }
diff --git a/src/style.css b/src/style.css
index 0014c5d63..f70ff915f 100644
--- a/src/style.css
+++ b/src/style.css
@@ -360,39 +360,55 @@ clamp.status-page .title:not(:last-child) {
 }
 
 app-context-bar .context-tile {
-       border: 1px solid shade(@theme_bg_color, 0.9);
-       background-color: @theme_base_color;
+       border: 1px solid @borders;
+       background-color: transparent;
        border-radius: 0;
        padding: 24px 12px 21px 12px;
-       border-right: 1px solid shade(@theme_bg_color, 0.9);
+       outline-offset: 5px;
+       transition-property: outline, outline-offset, background-image;
+       border-bottom: none;
+       border-right: none;
+}
+
+app-context-bar .context-tile:hover {
+       background-image: image(alpha(currentColor, .03));
+}
+
+app-context-bar .context-tile.keyboard-activating,
+app-context-bar .context-tile:active {
+       background-image: image(alpha(currentColor, .08));
+}
+
+app-context-bar .context-tile:focus:focus-visible {
+       outline-offset: -1px;
 }
 
 app-context-bar box:first-child .context-tile:first-child {
-       border-top-left-radius: 8px;
+       border-top-left-radius: 12px;
 }
 
 app-context-bar.horizontal box:last-child .context-tile:last-child,
 app-context-bar.vertical box:first-child .context-tile:last-child {
-       border-top-right-radius: 8px;
+       border-top-right-radius: 12px;
 }
 
 app-context-bar.horizontal box:first-child .context-tile:first-child,
 app-context-bar.vertical box:last-child .context-tile:first-child {
-       border-bottom-left-radius: 8px;
+       border-bottom-left-radius: 12px;
 }
 
 app-context-bar box:last-child .context-tile:last-child {
-       border-bottom-right-radius: 8px;
+       border-bottom-right-radius: 12px;
 }
 
-app-context-bar.horizontal box:not(:last-child) .context-tile,
-app-context-bar.horizontal box:last-child .context-tile:not(:last-child),
-app-context-bar.vertical .context-tile:not(:last-child) {
-       border-right: none;
+app-context-bar.horizontal box:first-child .context-tile:first-child,
+app-context-bar.vertical .context-tile:first-child {
+       border-left: none;
 }
 
-app-context-bar.vertical box:not(:last-child) .context-tile {
-       border-bottom: none;
+app-context-bar.horizontal .context-tile,
+app-context-bar.vertical box:first-child .context-tile {
+       border-top: none;
 }
 
 .context-tile-lozenge {
@@ -421,9 +437,7 @@ app-context-bar.vertical box:not(:last-child) .context-tile {
        margin-bottom: -28px;
 }
 
-.context-tile-title { font-weight: bold; }
 .context-tile-lozenge image { -gtk-icon-style: symbolic; }
-app-context-bar .context-tile-description { font-size: smaller; font-weight: normal; }
 
 .context-tile-lozenge.grey { background-color: #deddda; color: #5e5c64; }
 .context-tile-lozenge.green, .context-tile-lozenge.details-rating-0 { background-color: #b6f2c4; color: 
#208255; }