lib/yuilib/3.7.2/build/cssbutton/cssbutton.css

   1 /*
   2 YUI 3.7.2 (build 5639)
   3 Copyright 2012 Yahoo! Inc. All rights reserved.
   4 Licensed under the BSD License.
   5 http://yuilibrary.com/license/
   6 */
   7 .yui3-button {
   8     /* Structure */
   9     display: inline-block;
  10     *display: inline; /*IE 6/7*/
  11     zoom: 1;
  12     font-size: 100%;
  13     *font-size: 90%; /*IE 6/7 - To reduce IE's oversized button text*/
  14     *overflow: visible; /*IE 6/7 - Because of IE's overly large left/right padding on buttons */
  15     padding: 0.4em 1em 0.45em;
  16     line-height: normal;
  17     white-space: nowrap;
  18     vertical-align: baseline;
  19     text-align: center;
  20     cursor: pointer;
  21     -webkit-user-drag: none;
  22     -webkit-user-select: none;
  23     -moz-user-select: none;
  24     user-select: none;
  25
  26     /* Presentation */
  27     color: #444; /* rgba not supported (IE 8) */
  28     color: rgba(0, 0, 0, 0.80); /* rgba supported */
  29     *color: #444; /* IE 6 & 7 */
  30     border: 1px solid #999;  /*IE 6/7/8*/
  31     border: none rgba(0, 0, 0, 0);  /*IE9 + everything else*/
  32     background-color: #E6E6E6;
  33     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#80ffffff', endColorstr='#00ffffff', GradientType=0);
  34     background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(255,255,255, 0.30)), color-stop(40%, rgba(255,255,255, 0.15)), to(transparent));
  35     background-image: -webkit-linear-gradient(rgba(255,255,255, 0.30), rgba(255,255,255, 0.15) 40%, transparent);
  36     background-image: -moz-linear-gradient(top, rgba(255,255,255, 0.30), rgba(255,255,255, 0.15) 40%, transparent);
  37     background-image: -ms-linear-gradient(rgba(255,255,255, 0.30), rgba(255,255,255, 0.15) 40%, transparent);
  38     background-image: -o-linear-gradient(rgba(255,255,255, 0.30), rgba(255,255,255, 0.15) 40%, transparent);
  39     background-image: linear-gradient(rgba(255,255,255, 0.30), rgba(255,255,255, 0.15) 40%, transparent);
  40     text-decoration: none;
  41     -webkit-border-radius: 4px;
  42     -moz-border-radius: 4px;
  43     border-radius: 4px;
  44     -webkit-box-shadow: 0 0 0 1px rgba(0,0,0, 0.25) inset, 0 2px 0 rgba(255,255,255, 0.30) inset, 0 1px 2px rgba(0,0,0, 0.15);
  45     -moz-box-shadow: 0 0 0 1px rgba(0,0,0, 0.25) inset, 0 2px 0 rgba(255,255,255, 0.30) inset, 0 1px 2px rgba(0,0,0, 0.15);
  46     box-shadow: 0 0 0 1px rgba(0,0,0, 0.25) inset, 0 2px 0 rgba(255,255,255, 0.30) inset, 0 1px 2px rgba(0,0,0, 0.15);
  47
  48     /* Transitions */
  49     -webkit-transition: 0.1s linear -webkit-box-shadow;
  50     -moz-transition: 0.1s linear -moz-box-shadow;
  51     -ms-transition: 0.1s linear box-shadow;
  52     -o-transition: 0.1s linear box-shadow;
  53     transition: 0.1s linear box-shadow;
  54 }
  55
  56 a.yui3-button {
  57     color: rgba(0,0,0, 0.80);
  58     color: #444;
  59     text-decoration:none;
  60 }
  61
  62 .yui3-button-hover,
  63 .yui3-button:hover {
  64     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#26000000', GradientType=0);
  65     background-image: -webkit-gradient(linear, 0 0, 0 100%, from(transparent), color-stop(40%, rgba(0,0,0, 0.05)), to(rgba(0,0,0, 0.15)));
  66     background-image: -webkit-linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.15));
  67     background-image: -moz-linear-gradient(top, transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.15));
  68     background-image: -ms-linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.15));
  69     background-image: -o-linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.15));
  70     background-image: linear-gradient(transparent, rgba(0,0,0, 0.05) 40%, rgba(0,0,0, 0.15));
  71 }
  72
  73 .yui3-button-active,
  74 .yui3-button:active {
  75     border: inset 1px solid #999;  /*IE 6/7/8*/
  76     border: none rgba(0, 0, 0, 0);  /*IE9 + everything else*/
  77     filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#1A000000', endColorstr='#26000000', GradientType=0);
  78     background-image: -webkit-gradient(linear, 0 0, 0 100%, from(rgba(0,0,0, 0.10)), to(rgba(0,0,0, 0.15)));
  79     background-image: -webkit-linear-gradient(rgba(0,0,0, 0.10), rgba(0,0,0, 0.15));
  80     background-image: -moz-linear-gradient(top, rgba(0,0,0, 0.10), rgba(0,0,0, 0.15));
  81     background-image: -ms-linear-gradient(rgba(0,0,0, 0.10), rgba(0,0,0, 0.15));
  82     background-image: -o-linear-gradient(rgba(0,0,0, 0.10), rgba(0,0,0, 0.15));
  83     background-image: linear-gradient(rgba(0,0,0, 0.10), rgba(0,0,0, 0.15));
  84     -webkit-box-shadow: 0 0 0 1px rgba(0,0,0, 0.25) inset, 0 2px 4px rgba(0,0,0, 0.30) inset;
  85     -moz-box-shadow: 0 0 0 1px rgba(0,0,0, 0.25) inset, 0 2px 4px rgba(0,0,0, 0.30) inset;
  86     box-shadow: 0 0 0 1px rgba(0,0,0, 0.25) inset, 0 2px 4px rgba(0,0,0, 0.30) inset;
  87 }
  88
  89 .yui3-button[disabled],
  90 .yui3-button-disabled,
  91 .yui3-button-disabled:hover,
  92 .yui3-button-disabled:active {
  93     cursor: default;
  94     background-image: none;
  95     filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
  96     filter: alpha(opacity=55);
  97     -khtml-opacity: 0.55;
  98     -moz-opacity: 0.55;
  99     opacity: 0.55;
 100     -webkit-box-shadow: 0 0 0 1px rgba(0,0,0, 0.25) inset;
 101     -moz-box-shadow: 0 0 0 1px rgba(0,0,0, 0.25) inset;
 102     box-shadow: 0 0 0 1px rgba(0,0,0, 0.25) inset;
 103 }
 104
 105 /* Firefox: Get rid of the inner focus border */
 106 .yui3-button::-moz-focus-inner{
 107     padding: 0;
 108     border: 0;
 109 }
 110
 111 /* Firefox: Add a border around a focused button */
 112 .yui3-button:-moz-focusring {
 113     outline: thin dotted;
 114 }
 115
 116 /* Sam */
 117 .yui3-skin-sam .yui3-button-primary,
 118 .yui3-skin-sam .yui3-button-selected {
 119     background-color: #345FCB;
 120     color: #fff;
 121     -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25) inset, 0 2px 0 rgba(255, 255, 255, 0.17) inset, 0 1px 2px rgba(0, 0, 0, 0.15);
 122     -moz-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25) inset, 0 2px 0 rgba(255, 255, 255, 0.17) inset, 0 1px 2px rgba(0, 0, 0, 0.15);
 123     box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25) inset, 0 2px 0 rgba(255, 255, 255, 0.17) inset, 0 1px 2px rgba(0, 0, 0, 0.15);
 124 }
 125 .yui3-skin-sam .yui3-button:-moz-focusring {
 126     outline-color: rgba(0, 0, 0, 0.85);
 127 }
 128
 129 /* Night */
 130 .yui3-skin-night .yui3-button {
 131     border: 0px;
 132     background-color: #343536;
 133     color: #DCDCDC;
 134     -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25) inset, 0 2px 0 rgba(255, 255, 255, 0.15) inset, 0 1px 2px rgba(0, 0, 0, 0.15);
 135     -moz-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25) inset, 0 2px 0 rgba(255, 255, 255, 0.15) inset, 0 1px 2px rgba(0, 0, 0, 0.15);
 136     box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25) inset, 0 2px 0 rgba(255, 255, 255, 0.15) inset, 0 1px 2px rgba(0, 0, 0, 0.15);
 137 }
 138 .yui3-skin-night .yui3-button-primary,
 139 .yui3-skin-night .yui3-button-selected {
 140     background-color: #747576;
 141     text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
 142 }
 143
 144 .yui3-skin-night .yui3-button:-moz-focusring {
 145     outline-color: rgba(255, 255, 255, 0.85);
 146 }
 147
 148 /* YUI CSS Detection Stamp */
 149 #yui3-css-stamp.cssbutton { display: none; }