1/*! 2 * jQuery UI Button 1.11.2-alpha 3 * http://jqueryui.com 4 * 5 * Copyright 2012 jQuery Foundation and other contributors 6 * Released under the MIT license. 7 * http://jquery.org/license 8 * 9 * http://api.jqueryui.com/button/#theming 10 */ 11.ui-button { 12 display: inline-block; 13 position: relative; 14 padding: 0; 15 line-height: normal; 16 margin-right: .1em; 17 cursor: pointer; 18 vertical-align: middle; 19 text-align: center; 20 overflow: visible; /* removes extra width in IE */ 21} 22.ui-button, 23.ui-button:link, 24.ui-button:visited, 25.ui-button:hover, 26.ui-button:active { 27 text-decoration: none; 28} 29/* to make room for the icon, a width needs to be set here */ 30.ui-button-icon-only { 31 width: 2.2em; 32} 33/* button elements seem to need a little more width */ 34button.ui-button-icon-only { 35 width: 2.4em; 36} 37.ui-button-icons-only { 38 width: 3.4em; 39} 40button.ui-button-icons-only { 41 width: 3.7em; 42} 43 44/* button text element */ 45.ui-button .ui-button-text { 46 display: block; 47 line-height: normal; 48} 49.ui-button-text-only .ui-button-text { 50 padding: .4em 1em; 51} 52.ui-button-icon-only .ui-button-text, 53.ui-button-icons-only .ui-button-text { 54 padding: .4em; 55 text-indent: -9999999px; 56} 57.ui-button-text-icon-primary .ui-button-text, 58.ui-button-text-icons .ui-button-text { 59 padding: .4em 1em .4em 2.1em; 60} 61.ui-button-text-icon-secondary .ui-button-text, 62.ui-button-text-icons .ui-button-text { 63 padding: .4em 2.1em .4em 1em; 64} 65.ui-button-text-icons .ui-button-text { 66 padding-left: 2.1em; 67 padding-right: 2.1em; 68} 69/* no icon support for input elements, provide padding by default */ 70input.ui-button { 71 padding: .4em 1em; 72} 73 74/* button icon element(s) */ 75.ui-button-icon-only .ui-icon, 76.ui-button-text-icon-primary .ui-icon, 77.ui-button-text-icon-secondary .ui-icon, 78.ui-button-text-icons .ui-icon, 79.ui-button-icons-only .ui-icon { 80 position: absolute; 81 top: 50%; 82 margin-top: -8px; 83} 84.ui-button-icon-only .ui-icon { 85 left: 50%; 86 margin-left: -8px; 87} 88.ui-button-text-icon-primary .ui-button-icon-primary, 89.ui-button-text-icons .ui-button-icon-primary, 90.ui-button-icons-only .ui-button-icon-primary { 91 left: .5em; 92} 93.ui-button-text-icon-secondary .ui-button-icon-secondary, 94.ui-button-text-icons .ui-button-icon-secondary, 95.ui-button-icons-only .ui-button-icon-secondary { 96 right: .5em; 97} 98 99/* button sets */ 100.ui-buttonset { 101 margin-right: 7px; 102} 103.ui-buttonset .ui-button { 104 margin-left: 0; 105 margin-right: -.3em; 106} 107 108/* workarounds */ 109/* reset extra padding in Firefox, see h5bp.com/l */ 110input.ui-button::-moz-focus-inner, 111button.ui-button::-moz-focus-inner { 112 border: 0; 113 padding: 0; 114} 115 116/* Disables the annoying dashed border Firefox puts on active buttons */ 117body button.ui-button::-moz-focus-inner { 118 border: 0; 119} 120/* Give large buttons some extra padding */ 121body .ui-button-large { 122 padding: 5px; 123} 124/* Use white icons for colored buttons */ 125.ui-button-green .ui-icon, 126.ui-button-blue .ui-icon, 127.ui-button-red .ui-icon, 128.ui-button-orange .ui-icon { 129 /* @embed */ 130 background-image: url(images/ui-icons_ffffff_256x240.png) !important; 131} 132 133/* Corner radius */ 134/* This is normally handled in jquery.ui.theme.css, but in our case, the corner 135 styling of our buttons doesn't match our default widget corner styling */ 136.ui-button.ui-corner-all, 137.ui-button.ui-corner-top, 138.ui-button.ui-corner-left, 139.ui-button.ui-corner-tl { 140 border-top-left-radius: 4px; 141} 142.ui-button.ui-corner-all, 143.ui-button.ui-corner-top, 144 145.ui-button.ui-corner-right, 146.ui-button.ui-corner-tr { 147 border-top-right-radius: 4px; 148} 149.ui-button.ui-corner-all, 150.ui-button.ui-corner-bottom, 151.ui-button.ui-corner-left, 152.ui-button.ui-corner-bl { 153 border-bottom-left-radius: 4px; 154} 155.ui-button.ui-corner-all, 156.ui-button.ui-corner-bottom, 157.ui-button.ui-corner-right, 158.ui-button.ui-corner-br { 159 border-bottom-right-radius: 4px; 160} 161 162body .ui-button { 163 color: #2779aa; 164 margin: 0.5em 0 0.5em 0.4em; 165 border: 1px solid #aaa !important; 166 background: #f0f0f0 !important; 167 background: linear-gradient(to bottom, #fff 0%, #ddd 90%) !important; 168 cursor: pointer; 169 font-size: 1em; 170 line-height: 1.4em; 171 width: auto; 172 overflow: visible; 173 box-shadow: 0 1px 3px rgba(0,0,0,.2); 174} 175 176body .ui-button-icon-only { 177 width: 2.2em; 178} 179 180body .ui-button-icons-only { 181 width: 3.4em; 182} 183 184body .ui-button:hover { 185 color: #2779aa; 186 border-color: #bbb !important; 187 background: #fff !important; 188 background: linear-gradient(to bottom, #fff 0%, #eee 90%) !important; 189 box-shadow: 0 1px 3px rgba(0,0,0,.1); 190} 191body .ui-button:active, 192body .ui-button:focus { 193 border-color: #8ad !important; 194 box-shadow: 0 0 1px 1px rgba(167,215,249,.5); 195} 196body .ui-button:active { 197 background: #e0e0e0 !important; 198 background: linear-gradient(to bottom, #f0f0f0 0%, #d0d0d0 90%) !important; 199} 200 201/* Customizations for MediaWiki Vector */ 202 203/* Green buttons */ 204body .ui-button-green, 205body .ui-button-green .ui-button-text { 206 color: white; 207 text-shadow: 0 -1px 1px #072; 208} 209body .ui-button.ui-button-green { 210 border-color: #294 !important; 211 background: #295 !important; 212 background: linear-gradient(to bottom, #3c8 0%, #295 90%) !important; 213 box-shadow: 0 1px 3px rgba(0,0,0,.3); 214} 215body .ui-button.ui-button-green:hover { 216 background: #33a055 !important; 217 background: linear-gradient(to bottom, #44d388 0%, #33a055 90%) !important; 218 box-shadow: 0 1px 3px rgba(0,0,0,.25); 219} 220body .ui-button.ui-button-green:active, 221body .ui-button.ui-button-green:focus { 222 border-color: #172 !important; 223 box-shadow: 0 0 2px 2px rgba(167,215,249,.75); 224} 225body .ui-button.ui-button-green:active { 226 background: #338855 !important; 227 background: linear-gradient(to bottom, #30c080 0%, #338855 90%) !important; 228} 229 230/* Blue buttons */ 231body .ui-button-blue, 232body .ui-button-blue .ui-button-text { 233 color: white; 234 text-shadow: 0 -1px 1px #037; 235} 236body .ui-button.ui-button-blue { 237 border-color: #468 !important; 238 background: #36b !important; 239 background: linear-gradient(to bottom, #48e 0%, #36b 90%) !important; 240 box-shadow: 0 1px 3px rgba(0,0,0,.35); 241} 242body .ui-button.ui-button-blue:hover { 243 background: #36c !important; 244 background: linear-gradient(to bottom, #59e 0%, #36c 90%) !important; 245} 246body .ui-button.ui-button-blue:active, 247body .ui-button.ui-button-blue:focus { 248 border-color: #357 !important; 249 box-shadow: 0 0 2px 2px rgba(167,215,249,.75); 250} 251body .ui-button.ui-button-blue:active { 252 background: #3060a0 !important; 253 background: linear-gradient(to bottom, #4080e0 0%, #3060a0 90%) !important; 254} 255 256/* Red buttons */ 257body .ui-button-red, 258body .ui-button-red .ui-button-text { 259 color: white; 260 text-shadow: 0 -1px 1px #700; 261} 262body .ui-button.ui-button-red { 263 border-color: #944 !important; 264 background: #a22 !important; 265 background: linear-gradient(to bottom, #d44 0%, #a22 90%) !important; 266 box-shadow: 0 1px 3px rgba(0,0,0,.35); 267} 268body .ui-button.ui-button-red:hover { 269 border-color: #a44 !important; 270 background: #b03333 !important; 271 background: linear-gradient(to bottom, #ee4646 0%, #b03333 90%) !important; 272 box-shadow: 0 1px 3px rgba(0,0,0,.3); 273} 274body .ui-button.ui-button-red:active, 275body .ui-button.ui-button-red:focus { 276 border-color: #747 !important; 277 box-shadow: 0 0 2px 2px rgba(167,215,249,.7); 278} 279body .ui-button.ui-button-red:active { 280 background: #952020 !important; 281 background: linear-gradient(to bottom, #d04545 0%, #952020 90%) !important; 282} 283 284/* Disabled buttons */ 285body .ui-button-green.disabled, 286body .ui-button-green.disabled:hover, 287body .ui-button-green.disabled:active, 288body .ui-button-green.disabled:focus, 289body .ui-button-blue.disabled, 290body .ui-button-blue.disabled:hover, 291body .ui-button-blue.disabled:active, 292body .ui-button-blue.disabled:focus, 293body .ui-button-red.disabled, 294body .ui-button-red.disabled:hover, 295body .ui-button-red.disabled:active, 296body .ui-button-red.disabled:focus, 297body .ui-button.disabled, 298body .ui-button.disabled:hover { 299 color: #aaa; 300 border-color: #ccc !important; 301 background: #eee !important; 302 background: linear-gradient(to bottom, #f6f6f6 0%, #eee 90%) !important; 303 box-shadow: 0 1px 3px rgba(0,0,0,0); 304} 305body .ui-button-green.disabled .ui-button-text, 306body .ui-button-blue.disabled .ui-button-text, 307body .ui-button-red.disabled .ui-button-text { 308 color: #aaa; 309 text-shadow: 0 1px 1px #fff; 310} 311