140 lines
3.0 KiB
CSS
140 lines
3.0 KiB
CSS
/* Large buttons */
|
|
.button-large{
|
|
display: inline-block;
|
|
background: none;
|
|
border: 1px solid transparent;
|
|
height: 30px;
|
|
line-height: 30px;
|
|
color: #fff;
|
|
font-size: 15px;
|
|
padding: 2px 40px;
|
|
-webkit-border-radius: 3px;
|
|
border-radius: 3px;
|
|
text-shadow: 1px 1px 2px rgba(0,0,0, .7);
|
|
box-sizing: content-box;
|
|
}
|
|
.button-large:hover{
|
|
cursor: pointer;
|
|
}
|
|
/* Green */
|
|
.button-large.green{
|
|
color: #fff;
|
|
border: 1px solid #75a023;
|
|
background: url(../img/buttons/buttons.png) repeat-x;
|
|
background-position: 0 -124px;
|
|
}
|
|
/* Red */
|
|
.button-large.red{
|
|
color: #fff;
|
|
border: 1px solid #b00000;
|
|
background: url(../img/buttons/buttons.png) repeat-x;
|
|
background-position: 0 -158px;
|
|
}
|
|
/* Black */
|
|
.button-large.black{
|
|
color: #fff;
|
|
border: 1px solid #1e1e1e;
|
|
background: url(../img/buttons/buttons.png) repeat-x;
|
|
background-position: 0 -192px;
|
|
}
|
|
/* Grey */
|
|
.button-large.grey{
|
|
color: #fff;
|
|
border: 1px solid #919392;
|
|
background: url(../img/buttons/buttons.png) repeat-x;
|
|
background-position: 0 -226px;
|
|
}
|
|
/* Light Grey */
|
|
.button-large.lgrey{
|
|
color: #fff;
|
|
border: 1px solid #889591;
|
|
background: url(../img/buttons/buttons.png) repeat-x;
|
|
background-position: 0 -260px;
|
|
}
|
|
/* Small Buttons */
|
|
.button-small{
|
|
display: inline-block;
|
|
height: 23px;
|
|
padding: 0 14px;
|
|
-webkit-border-radius: 3px;
|
|
border-radius: 3px;
|
|
line-height: 23px;
|
|
color: #fff;
|
|
/*font-weight: bold;*/
|
|
text-align: center;
|
|
text-shadow: 1px 1px 2px rgba(0,0,0, .7);
|
|
}
|
|
/* Green */
|
|
.button-small.green{
|
|
color: #fff;
|
|
border: 1px solid #75a023;
|
|
background: url(../img/buttons/buttons.png) repeat-x;
|
|
background-position: 0 0;
|
|
}
|
|
/* Red */
|
|
.button-small.red{
|
|
color: #fff;
|
|
border: 1px solid #b00000;
|
|
background: url(../img/buttons/buttons.png) repeat-x;
|
|
background-position: 0 -25px;
|
|
}
|
|
/* Black */
|
|
.button-small.black{
|
|
color: #fff;
|
|
border: 1px solid #1e1e1e;
|
|
background: url(../img/buttons/buttons.png) repeat-x;
|
|
background-position: 0 -50px;
|
|
}
|
|
/* Grey */
|
|
.button-small.grey{
|
|
color: #fff;
|
|
border: 1px solid #919392;
|
|
background: url(../img/buttons/buttons.png) repeat-x;
|
|
background-position: 0 -75px;
|
|
}
|
|
/* Light Grey */
|
|
.button-small.lgrey{
|
|
color: #fff;
|
|
border: 1px solid #889591;
|
|
background: url(../img/buttons/buttons.png) repeat-x;
|
|
background-position: 0 -100px;
|
|
}
|
|
/* ON/OFF switch */
|
|
.switch{
|
|
-webkit-transition: all 0.4s ease-in-out;
|
|
-moz-transition: all 0.4s ease-in-out;
|
|
-o-transition: all 0.4s ease-in-out;
|
|
transition: all 0.4s ease-in-out;
|
|
|
|
-webkit-border-radius: 4px;
|
|
border-radius: 4px;
|
|
}
|
|
.switch input{
|
|
position: absolute;
|
|
left: -99999px;
|
|
}
|
|
/* Large switch */
|
|
.switch.large{
|
|
width: 67px;
|
|
height: 40px;
|
|
background: url(../img/buttons/switch-large.png) no-repeat;
|
|
}
|
|
/* Small switch */
|
|
.switch.small{
|
|
float: left;
|
|
width: 67px;
|
|
height: 26px;
|
|
background: url(../img/buttons/switch-small.png) no-repeat;
|
|
}
|
|
/* Hover */
|
|
.switch:hover{
|
|
cursor: pointer;
|
|
}
|
|
/* Active */
|
|
.switch.active{
|
|
background-position: 0 0;
|
|
}
|
|
/* Inactive */
|
|
.switch.inactive{
|
|
background-position: 100% 0;
|
|
} |