diff --git a/assets/css/style.css b/assets/css/style.css index ae478d3..cb203ed 100644 --- a/assets/css/style.css +++ b/assets/css/style.css @@ -271,7 +271,133 @@ li { margin-left: 20px;} #footer .left { float: left;} #footer .right { float: right;} - - - - +/* Buttons */ +.buttons { + float: left; + padding-bottom: 20px; + clear: both; +} +a.button { + color: #6e6e6e; + font: bold 12px Helvetica, Arial, sans-serif; + text-decoration: none; + padding: 7px 12px; + position: relative; + display: inline-block; + text-shadow: 0 1px 0 #fff; + -webkit-transition: border-color .218s; + -moz-transition: border .218s; + -o-transition: border-color .218s; + transition: border-color .218s; + background: #f3f3f3; + background: -webkit-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1)); + background: -moz-linear-gradient(linear,0% 40%,0% 70%,from(#F5F5F5),to(#F1F1F1)); + border: solid 1px #dcdcdc; + border-radius: 2px; + -webkit-border-radius: 2px; + -moz-border-radius: 2px; + margin-right: 10px; +} +a.button:hover { + color: #333; + border-color: #999; + -moz-box-shadow: 0 2px 0 rgba(0, 0, 0, 0.2) -webkit-box-shadow:0 2px 5px rgba(0, 0, 0, 0.2); + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.15); +} +a.button:active { + color: #000; + border-color: #444; +} +a.left { + -webkit-border-top-right-radius: 0; + -moz-border-radius-topright: 0; + border-top-right-radius: 0; + -webkit-border-bottom-right-radius: 0; + -moz-border-radius-bottomright: 0; + border-bottom-right-radius: 0; + margin: 0; +} +a.middle { + border-radius: 0; + -webkit-border-radius: 0; + -moz-border-radius: 0; + border-left: solid 1px #f3f3f3; + margin: 0; + border-left: solid 1px rgba(255, 255, 255, 0); +} +a.middle:hover, +a.right:hover { border-left: solid 1px #999 } +a.right { + -webkit-border-top-left-radius: 0; + -moz-border-radius-topleft: 0; + border-top-left-radius: 0; + -webkit-border-bottom-left-radius: 0; + -moz-border-radius-bottomleft: 0; + border-bottom-left-radius: 0; + border-left: solid 1px #f3f3f3; + border-left: solid 1px rgba(255, 255, 255, 0); +} +a.big { + font-size: 16px; + padding: 10px 15px; +} +a.supersize { + font-size: 20px; + padding: 15px 20px; +} +a.save { + background: url(../images/button-sprite.png) 10px 9px no-repeat #f3f3f3; + padding-left: 30px; +} +a.add { + background: url(../images/button-sprite.png) 10px -25px no-repeat #f3f3f3; + padding-left: 30px; +} +a.delete { + background: url(../images/button-sprite.png) 10px -59px no-repeat #f3f3f3; + padding-left: 30px; +} +a.flag { + background: url(../images/button-sprite.png) 10px -94px no-repeat #f3f3f3; + padding-left: 30px; +} +a.up { + background: url(../images/button-sprite.png) 13px -131px no-repeat #f3f3f3; + width: 18px; +} +a.down { + background: url(../images/button-sprite.png) 13px -166px no-repeat #f3f3f3; + width: 18px; +} +a.save-big { + background: url(../images/button-sprite.png) 15px 13px no-repeat #f3f3f3; + font-size: 16px; + padding: 10px 15px 10px 35px; +} +a.add-big { + background: url(../images/button-sprite.png) 15px -21px no-repeat #f3f3f3; + font-size: 16px; + padding: 10px 15px 10px 35px; +} +a.delete-big { + background: url(../images/button-sprite.png) 15px -55px no-repeat #f3f3f3; + font-size: 16px; + padding: 10px 15px 10px 35px; +} +a.flag-big { + background: url(../images/button-sprite.png) 15px -90px no-repeat #f3f3f3; + font-size: 16px; + padding: 10px 15px 10px 35px; +} +a.up-big { + background: url(../images/button-sprite.png) 15px -126px no-repeat #f3f3f3; + width: 18px; + font-size: 16px; + padding: 10px 15px; +} +a.down-big { + background: url(../images/button-sprite.png) 15px -161px no-repeat #f3f3f3; + width: 18px; + font-size: 16px; + padding: 10px 15px; +} diff --git a/assets/images/button-sprite.png b/assets/images/button-sprite.png new file mode 100644 index 0000000..08f9769 Binary files /dev/null and b/assets/images/button-sprite.png differ