gtk-demo: fancier css demo

Thanks to Lapo Calamandrei.
This commit is contained in:
Matthias Clasen 2012-09-17 17:37:03 -04:00
parent e56f73c32b
commit fc1169279e

View File

@ -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;
}