Pileus Git - ~andy/gtk/blob - demos/gtk-demo/css_shadows.css

   1 /* You can edit the text in this window to change the
   2  * appearance of this Window.
   3  * Be careful, if you screw it up, nothing might be visible
   4  * anymore. :)
   5  */
   6
   7 /* This CSS resets all properties to their defaults values
   8  *    and overrides all user settings and the theme in use */
   9 @import url("resource://css_shadows/reset.css");
  10 @import url("resource://css_shadows/cssview.css");
  11
  12 /* Get a nice background for the window */
  13 .background {
  14   background-color: #4870bc;
  15   background-image: linear-gradient(to left, transparent, rgba(255,255,255,.07) 50%, transparent 50%),
  16                     linear-gradient(to left, transparent, rgba(255,255,255,.13) 50%, transparent 50%),
  17                     linear-gradient(to left, transparent, transparent 50%, rgba(255,255,255,.17) 50%),
  18                     linear-gradient(to left, transparent, transparent 50%, rgba(255,255,255,.19) 50%);
  19   background-size: 29px, 59px, 73px, 109px;
  20 }
  21
  22 .button {
  23   color: black;
  24   padding: 10px;
  25   border-radius: 5px;
  26   transition: all 250ms ease-in;
  27   border: 1px transparent solid;
  28 }
  29
  30 .button:hover {
  31   text-shadow: 3px 3px 5px alpha(black, 0.75);
  32   icon-shadow: 3px 3px 5px alpha(black, 0.75);
  33   box-shadow: 3px 3px 5px alpha(black, 0.5) inset;
  34   border: solid 1px alpha(black, 0.75);
  35 }
  36
  37 .button:active {
  38   padding: 11px 9px 9px 11px;
  39   text-shadow: 1px 1px 2.5px alpha(black, 0.6);
  40   icon-shadow: 1px 1px 2.5px alpha(black, 0.6);
  41 }
  42
  43
  44