lib/yuilib/3.13.0/cssbutton/cssbutton.css

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