[gnome-software] Use CSS for tile styling



commit 5090e74beffefcdfd2a6356d274b9d671ca7c4ae
Author: Kalev Lember <kalevlember gmail com>
Date:   Sun Aug 3 13:24:54 2014 +0200

    Use CSS for tile styling
    
    ... and drop the shadow image files. Credits for the CSS work go to
    Lapo Calamandrei <calamandrei gmail com>.
    
    Besides giving designers more freedom to experiment with shadows, this
    change also makes gnome-software appear much nicer in the dark theme.

 src/Makefile.am                  |    2 -
 src/gnome-software.gresource.xml |    2 -
 src/gtk-style.css                |   22 +++-
 src/shadow-active.png            |  Bin 334 -> 0 bytes
 src/shadow.png                   |  Bin 303 -> 0 bytes
 src/shadow.svg                   |  250 --------------------------------------
 6 files changed, 16 insertions(+), 260 deletions(-)
---
diff --git a/src/Makefile.am b/src/Makefile.am
index e152af2..708ade1 100644
--- a/src/Makefile.am
+++ b/src/Makefile.am
@@ -236,8 +236,6 @@ EXTRA_DIST =                                                \
        gnome-software.xml                              \
        gtk-style.css                                   \
        gtk-style-hc.css                                \
-       shadow.png                                      \
-       shadow-active.png                               \
        $(desktop_in_files)                             \
        org.gnome.Software.service.in                   \
        gnome-software-service.desktop.in               \
diff --git a/src/gnome-software.gresource.xml b/src/gnome-software.gresource.xml
index 80b1e73..faf6d36 100644
--- a/src/gnome-software.gresource.xml
+++ b/src/gnome-software.gresource.xml
@@ -25,7 +25,5 @@
   <file preprocess="xml-stripblanks">org.freedesktop.PackageKit.xml</file>
   <file>gtk-style.css</file>
   <file>gtk-style-hc.css</file>
-  <file preprocess="to-pixdata">shadow.png</file>
-  <file preprocess="to-pixdata">shadow-active.png</file>
  </gresource>
 </gresources>
diff --git a/src/gtk-style.css b/src/gtk-style.css
index f435e92..c79cb48 100644
--- a/src/gtk-style.css
+++ b/src/gtk-style.css
@@ -34,15 +34,25 @@ GsAppTile .tile {
 }
 
 .view.tile {
-        border-radius: 0;
-        border-width: 3px;
-        border-image: url("shadow.png") 3 3 3 3 stretch;
-        background-image: none;
-        background-color: #fafafa;
+       box-shadow: inset 0 1px @theme_base_color, 0 1px 1px alpha(black,0.4);
+       border: 1px solid mix(@theme_base_color,@theme_fg_color,0.3);
+       background-image: none;
+       background-color: mix(@theme_base_color,@theme_bg_color,0.3);
 }
 
 .view.tile:hover {
-        background-color: @content_view_bg;
+       background-color: @theme_base_color;
+}
+
+.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 {


[Date Prev][Date Next]   [Thread Prev][Thread Next]   [Thread Index] [Date Index] [Author Index]