From a50c0449f7031d0e7eec6fb386d2793f58fb18f9 Mon Sep 17 00:00:00 2001 From: Catouse Date: Tue, 17 Sep 2013 17:00:13 +0800 Subject: [PATCH] + add style of buttons. --- www/theme/default/button.css | 219 +++++++++++++++++++++++++++++++++++ 1 file changed, 219 insertions(+) create mode 100644 www/theme/default/button.css diff --git a/www/theme/default/button.css b/www/theme/default/button.css new file mode 100644 index 0000000000..1f84ddb9bf --- /dev/null +++ b/www/theme/default/button.css @@ -0,0 +1,219 @@ +.button ,a.button{ + background-color: transparent; + background-image: linear-gradient(top, whiteSmoke, #f1f1f1); + background-image: -moz-linear-gradient(top, whiteSmoke, #f1f1f1); + background-image: -o-linear-gradient(top, whiteSmoke, #f1f1f1); + background-image: -webkit-gradient(linear, left top, left bottom, from(whiteSmoke), to(#f1f1f1)); + background-image: -webkit-linear-gradient(top, whiteSmoke, #f1f1f1); + background-image: -ms-linear-gradient(top, whiteSmoke, #f1f1f1); + -webkit-transition: border-color .3s; + -moz-transition: border-color .3s; + -o-transition: border-color .3s; + transition: border-color .3s; + -webkit-border-radius: 2px; + -moz-border-radius: 2px; + border-radius: 2px; + border: 1px solid #dcdcdc; + margin: 0 10px 0 0; + padding: 7px 12px; + position: relative; + display: inline-block; + *display: inline; + *zoom: 1; + cursor: pointer; + text-shadow: 0 1px 0 #fff; + text-decoration: none; + line-height: 1.5; + font-size: 12px; + color: #444; + + transition-delay: 0,0; + transition-duration: .5s,.5s; + transition-property: color,background-color,opacity; +} +/*==================================================*/ +/* size */ +/*==================================================*/ +.button.mini { + padding: 7px 12px; + line-height: 1; +} +.button.large { + padding: 7px 20px; + line-height: 2; + font-size: 14px; +} +/*==================================================*/ +/* $Colors */ +/*==================================================*/ +.button.orange { + background-color: #D14836; + background-image: -webkit-linear-gradient(top,#DD4B39,#D14836); + background-image: -moz-linear-gradient(top,#DD4B39,#D14836); + background-image: -ms-linear-gradient(top,#DD4B39,#D14836); + background-image: -o-linear-gradient(top,#DD4B39,#D14836); + background-image: linear-gradient(top,#DD4B39,#D14836); + border-color: transparent; + text-shadow: none; + color: #fff; +} + +.button.yellow { + color:#867343; + background-color:#ffe07b; + border:1px solid #fddb69; + background-image:-webkit-linear-gradient(top,#ffe896,#ffe07b); + background-image:-moz-linear-gradient(top,#ffe896,#ffe07b); + background-image:linear-gradient(top,#ffe896,#ffe07b); + text-shadow: none; +} + +.button.blue { + background-color: #4D90FE; + background-image: -webkit-gradient(linear,left top,left bottom,from(#4D90FE),to(#4787ED)); + background-image: -webkit-linear-gradient(top,#4D90FE,#4787ED); + background-image: -moz-linear-gradient(top,#4D90FE,#4787ED); + background-image: -ms-linear-gradient(top,#4D90FE,#4787ED); + background-image: -o-linear-gradient(top,#4D90FE,#4787ED); + background-image: linear-gradient(top,#4D90FE,#4787ED); + filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#4d90fe',EndColorStr='#4787ed'); + border: 1px solid #3079ED; + text-shadow: none; + color: #fff; +} +/*==================================================*/ +/* $Colors:hover */ +/*==================================================*/ +.button:hover { + border-color: #999; + -webkit-box-shadow: 0 2px 1px rgba(0, 0, 0, 0.05); + -moz-box-shadow: 0 2px 1px rgba(0, 0, 0, 0.05); + box-shadow: 0 2px 1px rgba(0, 0, 0, 0.05); + text-decoration: none; +} +.button.orange:hover { + background-color: #c53727; + background-image: -webkit-linear-gradient(top,#dd4b39,#c53727); + background-image: -moz-linear-gradient(top,#dd4b39,#c53727); + background-image: -ms-linear-gradient(top,#dd4b39,#c53727); + background-image: -o-linear-gradient(top,#dd4b39,#c53727); + background-image: linear-gradient(top,#dd4b39,#c53727); + border-color: #b0281a; +} +.button.yellow:hover { + background-color:#ffda73; + border:1px solid #deb74f; + background-image:-webkit-linear-gradient(top,#ffe485,#ffda73); + background-image:-moz-linear-gradient(top,#ffe485,#ffda73); + background-image:linear-gradient(top,#ffe485,#ffda73); + -webkit-box-shadow:0 1px 2px rgba(0,0,0,0.2); + -moz-box-shadow:0 1px 2px rgba(0,0,0,0.2); + box-shadow:0 1px 2px rgba(0,0,0,0.2); +} + +.button.blue:hover { + background-color: #357ae8; + background-image: -webkit-linear-gradient(top,#4d90fe,#357ae8); + background-image: -moz-linear-gradient(top,#4d90fe,#357ae8); + background-image: -ms-linear-gradient(top,#4d90fe,#357ae8); + background-image: -o-linear-gradient(top,#4d90fe,#357ae8); + background-image: linear-gradient(top,#4d90fe,#357ae8); + border-color: #2f5bb7; +} +/*==================================================*/ +/* $Colors:active */ +/*==================================================*/ +.button:active { + border-color: #4d90fe; + -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1); + -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,0.1); + box-shadow: inset 0 1px 2px rgba(0,0,0,0.1); +} + +.button.orange:active { + box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3); + background-color: #b0281a; + background-image: -webkit-linear-gradient(top,#dd4b39,#b0281a); + background-image: -moz-linear-gradient(top,#dd4b39,#b0281a); + background-image: -ms-linear-gradient(top,#dd4b39,#b0281a); + background-image: -o-linear-gradient(top,#dd4b39,#b0281a); + background-image: linear-gradient(top,#dd4b39,#b0281a); + border: 1px solid #992A1B; +} +.button.yellow:active { + -webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,0.2); + -moz-box-shadow:inset 0 1px 2px rgba(0,0,0,0.2); + box-shadow:inset 0 1px 2px rgba(0,0,0,0.2); +} + +.button.active { + background-color: #e0e0e0; + background-image: -webkit-linear-gradient(top,#eee,#e0e0e0); + background-image: -moz-linear-gradient(top,#eee,#e0e0e0); + background-image: -ms-linear-gradient(top,#eee,#e0e0e0); + background-image: -o-linear-gradient(top,#eee,#e0e0e0); + -webkit-box-shadow: inset 0 1px 2px rgba(0,0,0,.1); + -moz-box-shadow: inset 0 1px 2px rgba(0,0,0,.1); + box-shadow: inset 0 1px 2px rgba(0,0,0,.1); + border-color: #ccc; + color: #333; +} +/*==================================================*/ +/* $Colors:disabled */ +/*==================================================*/ +.button.disabled,.button[disabled=disabled] { + background: #eeeeee; + color: #ccc; + border: 1px solid #dfdfdf; + text-shadow: 0 1px 0 #fff; +} +.button.disabled:hover,.button[disabled=disabled]:hover, +.button.disabled:active,.button[disabled=disabled]:active { + background: #eeeeee; + color: #ccc; + border: 1px solid #dfdfdf; + -webkit-box-shadow:none; + -moz-box-shadow:none; + box-shadow: none; + cursor: text; + transition-delay: 0s, 0s; + transition-duration: 0.7s, 0.7s; + transition-property: color, background-color,box-shadow; +} + +/*==================================================*/ +/* $button Status */ +/*==================================================*/ +.button.status-ok { + color: #468847; + background-color: #DFF0D8; + border-color: #D6E9C6; +} + +/*兼容Font-Awesome*/ +.button[class^="icon-"], +.button[class*=" icon-"] { + font-family: inherit; + padding: 5px 12px 6px 12px; +} +.button[class^="icon-"]:before, +.button[class*=" icon-"]:before { + font-family: FontAwesome; + margin-right: 0.5em; + filter: alpha(opacity=80); + -moz-opacity:0.8; + opacity:0.8; + font-size: 14px; + transition-delay: 0s, 0s; + transition-duration: 0.7s, 0.7s; + transition-property: color, background-color,opacity; +} +.button[class^="icon-"]:hover:before, +.button[class*=" icon-"]:hover:before { + filter: alpha(opacity=100); + -moz-opacity:1; + opacity:1; + transition-delay: 0s, 0s; + transition-duration: 0.7s, 0.7s; + transition-property: color, background-color,opacity; +} \ No newline at end of file