gtk-demo: fancier css demo

Thanks to Lapo Calamandrei.

1 files changed, 55 insertions, 14 deletions

diff --git a/demos/gtk-demo/fancy.css b/demos/gtk-demo/fancy.css
index a3d2ac3cb6..97bd5dc162 100644
--- a/demos/gtk-demo/fancy.css
+++ b/demos/gtk-demo/fancy.css
@@ -1,24 +1,65 @@
 GtkButton#fancy {
-  font-weight: bold;
-  background-image: linear-gradient(135deg, yellow, blue);
-  border-radius: 20px;
-  color: white;
+    transition: none;
+    background-image: linear-gradient(to bottom,
+                                      alpha(white, 0.7),
+                                      alpha(white, 0) 30%),
+                      linear-gradient(to top,
+                                      alpha(#babdb6, 0.4),
+                                      alpha(#babdb6, 0) 50%),
+                      linear-gradient(135deg,
+                                      #eeeeec,
+                                      white 20%,
+                                      #d3d7cf,
+                                      white 80%,
+                                      #babdb6);
+    color: #3465a4;
+    font-weight: bold;
+    text-shadow: 0 1px white;
 }
 
 GtkButton#fancy:hover {
-  font-weight: bold;
-  background-image: linear-gradient(135deg, blue, yellow);
-  border-radius: 20px;
-  color: white;
+    transition: all 250ms linear;
+    background-image: linear-gradient(to bottom,
+                                      alpha(white, 1),
+                                      alpha(white, 0)),
+                      linear-gradient(135deg,
+                                      #eeeeec 10%,
+                                      white 40%,
+                                      #d3d7cf,
+                                      white 70%,
+                                      #babdb6);
+    color: #204a87;
 }
 
-GtkButton#fancy:active {
-  font-weight: bold;
-  background-image: linear-gradient(yellow, yellow);
-  border-radius: 20px;
-  color: black;
+GtkButton#fancy:active,
+GtkButton#fancy:active:hover {
+    transition: none;
+    background-image: linear-gradient(to bottom,
+                                      alpha(#555753, 0.5),
+                                      alpha(#babdb6, 0.3)),
+                      linear-gradient(135deg,
+                                      #eeeeec,
+                                      white 20%,
+                                      #d3d7cf,
+                                      white 80%,
+                                      #babdb6);
+    color: white;
+    text-shadow: 0 1px black;
+}
+
+GtkButton#fancy:backdrop,
+GtkButton#fancy:backdrop:hover {
+    transition: none;
+    background-image: linear-gradient(135deg,
+                                      alpha(#eeeeec, 0.5) 10%,
+                                      alpha(white, 0.5) 40%,
+                                      alpha(#d3d7cf, 0.5),
+                                      alpha(white, 0.5) 70%,
+                                      alpha(#babdb6, 0.5));
+    color: #babdb6;
 }
 
 GtkButton#fancy * {
-  color: inherit;
+    /* Yeah this should be inherited by default */
+    color: inherit;
 }