[gnome-software/80-support-better-the-dark-themes: 89/89] Support better the dark themes

[Milan Crha <mcrha src gnome org>]

commit 5cc16e00b661d486835b4cde37214924f9b244de
Author: Milan Crha <mcrha redhat com>
Date:   Tue Dec 1 15:49:36 2020 +0100

    Support better the dark themes
    
    Tweak colors and CSS styles to better match the system theme.
    
    Closes https://gitlab.gnome.org/GNOME/gnome-software/-/issues/80
    Closes https://gitlab.gnome.org/GNOME/gnome-software/-/merge_requests/511

 src/gs-details-page.c | 50 +++++++++++++++++++++++++++++------------------
 src/gtk-style.css     | 54 ++++++++++++++++++++++++++++++++++++++++-----------
 2 files changed, 74 insertions(+), 30 deletions(-)
---
diff --git a/src/gs-details-page.c b/src/gs-details-page.c
index 097d7abf..77cec641 100644
--- a/src/gs-details-page.c
+++ b/src/gs-details-page.c
@@ -1728,26 +1728,36 @@ gs_details_page_app_refine_cb (GObject *source,
 static void
 gs_details_page_content_rating_set_css (GsDetailsPage *page, guint age)
 {
-       g_autoptr(GString) css = g_string_new (NULL);
-       const gchar *color_bg = NULL;
-       const gchar *color_fg = "#ffffff";
-       if (age >= 18) {
-               color_bg = "#ee2222";
-       } else if (age >= 15) {
-               color_bg = "#f1c000";
-       } else if (age >= 12) {
-               color_bg = "#2a97c9";
-       } else if (age >= 5) {
-               color_bg = "#3f756c";
-       } else {
-               color_bg = "#009d66";
-       }
-       g_string_append_printf (css, "color: %s;\n", color_fg);
-       g_string_append_printf (css, "background-color: %s;\n", color_bg);
+       GtkStyleContext *style_context;
+       const gchar *classes[] =  {
+               "details-rating-18",
+               "details-rating-15",
+               "details-rating-12",
+               "details-rating-5",
+               "details-rating-0"
+       };
+       guint age_index, ii;
+
+       if (age >= 18)
+               age_index = 0;
+       else if (age >= 15)
+               age_index = 1;
+       else if (age >= 12)
+               age_index = 2;
+       else if (age >= 5)
+               age_index = 3;
+       else
+               age_index = 4;
 
-       gs_utils_widget_set_css (page->button_details_rating_value,
-                                (GtkCssProvider **) &page->button_details_rating_style_provider,
-                                "content-rating-custom", css->str);
+       style_context = gtk_widget_get_style_context (page->button_details_rating_value);
+       for (ii = 0; ii < G_N_ELEMENTS (classes); ii++) {
+               if (ii == age_index) {
+                       if (!gtk_style_context_has_class (style_context, classes[ii]))
+                               gtk_style_context_add_class (style_context, classes[ii]);
+               } else {
+                       gtk_style_context_remove_class (style_context, classes[ii]);
+               }
+       }
 }
 
 static void
@@ -2928,6 +2938,8 @@ gs_details_page_init (GsDetailsPage *self)
        gtk_list_box_set_sort_func (GTK_LIST_BOX (self->list_box_addons),
                                    list_sort_func,
                                    self, NULL);
+
+       gtk_style_context_add_class (gtk_widget_get_style_context (self->button_details_permissions_value), 
"content-rating-permissions");
 }
 
 GsDetailsPage *
diff --git a/src/gtk-style.css b/src/gtk-style.css
index 73132401..6124e02a 100644
--- a/src/gtk-style.css
+++ b/src/gtk-style.css
@@ -98,6 +98,39 @@
        text-shadow: none;
 }
 
+.content-rating-permissions label {
+       color: black;
+}
+
+.details-rating-18 {
+       color: white;
+       background-image: none;
+       background-color: #ee2222;
+}
+
+.details-rating-15 {
+       color: white;
+       background-image: none;
+       background-color: #f1c000;
+}
+
+.details-rating-12 {
+       color: white;
+       background-image: none;
+       background-color: #2a97c9;
+}
+.details-rating-5 {
+       color: white;
+       background-image: none;
+       background-color: #3f756c;
+}
+
+.details-rating-0 {
+       color: white;
+       background-image: none;
+       background-color: #009d66;
+}
+
 .details-license-free {
        background-color: #4e9a06;
        border-color: #3e7905;
@@ -183,16 +216,14 @@
 }
 
 @define-color gs_tile_bg_color mix(@theme_base_color,@theme_bg_color,0.3);
-@define-color gs_tile_borders mix(@gs_tile_bg_color,@theme_fg_color,0.3);
-@define-color gs_tile_borders_alpha alpha(@theme_fg_color,0.3);
 
 .view.tile {
        padding: 1px;
        border: none;
-       box-shadow: inset 0 2px 0 @theme_base_color,
-                   inset 0 -2px 0 mix(@gs_tile_bg_color,@gs_tile_borders,0.5),
-                   inset 0 0 0 1px @gs_tile_borders,
-                   inset 0 -3px 0 -2px shade(@gs_tile_borders,0.75);
+    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;
 }
 
@@ -239,13 +270,14 @@
        border-radius: 5px; /* match button tiles */
        border-width: 1px;
        border-image: none;
+       border-color:@theme_bg_color;
        box-shadow: none;
        /* box-shadow: inset 0 0 0 1px alpha(@theme_fg_color,0.3), 0 0 1px alpha(black,0.4); */
 }
-  .featured-tile:backdrop label {
+.featured-tile:backdrop label {
     color: inherit;
     text-shadow: none;
-  }
+}
 
 .application-details-infobar.info {
        background-color: shade(@theme_bg_color, 0.9);
@@ -328,8 +360,8 @@
 
 .reviewbar {
        background-image: none;
-       background-color: #babdb6;
-       color: #555753;
+       background-color: @unfocused_insensitive_color;
+       color: @insensitive_fg_color;
 }
 
 .error-label {
@@ -402,7 +434,7 @@ flowboxchild {
 }
 .star-disabled,
 .star-disabled:disabled {
-       color: shade(@theme_bg_color, 0.8);
+       color: @unfocused_insensitive_color;
 }
 
 .counter-label {