gtk-demo: fancier css demo
Thanks to Lapo Calamandrei.
This commit is contained in:
		| @ -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; | ||||
| } | ||||
|  | ||||
		Reference in New Issue
	
	Block a user
	 Matthias Clasen
					Matthias Clasen