[gnome-software] Use CSS for tile styling
- From: Kalev Lember <klember src gnome org>
- To: commits-list gnome org
- Cc:
- Subject: [gnome-software] Use CSS for tile styling
- Date: Sun, 3 Aug 2014 12:41:48 +0000 (UTC)
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]