sportsbet-mobile
Version:
Sportsbet mobile
848 lines (751 loc) • 19.1 kB
text/less
footer {
.container {
width: 100%;
background: #fff;
}
.betslip {
.title-holder {
display: block;
font-weight: 600;
font-size: 37px;
position: relative;
line-height: 50px;
width: 100%;
margin: 0px auto;
margin-top: 10px;
background: #ffc000;
height: 50px;
border-top: 3px solid #967614;
&:before {
background: url("/images/icons.png") no-repeat #ffc000 -11px -703px;
content: '';
height: 80px;
width: 70px;
position: absolute;
left: 20px;
top: 20px;
background-size: 513px;
zoom: 0.4;
}
}
.title {
margin-left: 42px;
top: 0px;
position: relative;
text-transform: uppercase;
font-size: 18px;
}
.number {
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
background: #ff0042;
width: 30px;
height: 30px;
color: #FFF;
text-align: center;
padding: 0px;
font-size: 18px;
line-height: 30px;
margin: 0px 10px;
top: 11px;
right: 75px;
position: absolute;
}
.show {
display: block;
position: absolute;
right: 10px;
background: #4b3800;
color: #fff;
height: 21px;
line-height: 21px;
font-size: 12px;
padding: 5px 10px;
top: 10px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
cursor: pointer;
text-decoration: none;
.minus {
display: none;
}
.plus {
display: block;
}
}
}
.collapse {
//display: none;
}
.collapse.in {
height: auto;
display: block;
}
.betslip-open {
z-index: 9;
.content {
background: #ffc000;
font-size: 14px;
line-height: 16px;
padding: 1%;
text-transform: none;
width: 98%;
&.disabled {
pointer-events: none;
opacity: 0.5;
}
}
.nav {
margin-bottom: 0px;
margin-left: 0;
list-style: none;
height: 47px;
}
.nav-tabs > li {
float: left;
margin-bottom: -1px;
background: #979795;
background: -moz-linear-gradient(left, #cacaca 0%, #dedede 100%);
background: -webkit-linear-gradient(left, #cacaca 0%, #dedede 100%);
background: linear-gradient(to right, #cacaca 0%, #dedede 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#CACACA', endColorstr='#DEDEDE ', GradientType=1);
color: #555555;
margin-left: 0px;
width: 33.3333333333333%;
font-size: 25px;
text-transform: uppercase;
font-weight: 600;
}
.nav-tabs > li a {
color: #555555;
}
.nav-tabs > li > a {
margin-right: 0px;
line-height: 15px;
border: 1px solid transparent;
border-radius: 0px 0px 0 0;
padding: 0 5px;
font-size: 16px;
line-height: 45px;
text-align: center;
display: block;
}
.nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {
color: #555555;
background-color: #E8E8E8;
border: 1px solid #dddddd;
border-bottom-color: transparent;
cursor: default;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 0px;
}
section {
background: #e1e1df;
background: -moz-linear-gradient(top, #e1e1df 0%, #fffffd 100%);
background: -webkit-linear-gradient(top, #e1e1df 0%, #fffffd 100%);
background: linear-gradient(to bottom, #e1e1df 0%, #fffffd 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e1e1df', endColorstr='#fffffd', GradientType=0);
padding: 10px;
position: relative;
-webkit-box-shadow: 0px 5px 5px 3px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0px 5px 5px 3px rgba(0, 0, 0, 0.15);
box-shadow: 0px 5px 5px 3px rgba(0, 0, 0, 0.15);
//padding-right: 85px;
.right {
display: inline-block;
width: 9%;
img {
width: 27px;
}
}
.left {
display: inline-block;
width: 89%;
}
.close {
width: 60px;
// height: 75%;
right: 10px;
top: 17%;
position: absolute;
display: block;
// background: #d8d8d8;
opacity: 1;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
&.multi {
top: 4%;
}
// &:before {
// content: '';
// background: url('@{cdnUrl}images/closeIcon.png') no-repeat center top;
//// background: url("/images/icons.png") no-repeat 0px -466px;
// top: 27%;
// height: 56px;
// width: 54px;
// position: absolute;
// text-align: center;
// left: 5%;
// }
}
.close:hover {
opacity: 0.7;
}
&.changed .close {
&:before {
top: 30%;
}
}
.title {
margin-left: 0px;
font-family: 'Roboto Condensed', sans-serif;
font-size: 11px;
font-weight: 400;
margin-bottom: 0;
.market-name {
display: inline;
}
.selection-odds {
display: inline;
color: darkgreen;
line-height: 16px;
padding-left: 10px;
}
}
.vs {
color: #444444;
b {
color: #89c331;
}
}
hr {
margin-top: 8px;
margin-bottom: 8px;
border: 0;
border-top: 1px solid #c8c8c8;
height: 1px;
background: #fff;
}
.team {
color: #89c331;
font-size: 14px;
position: relative;
line-height: 22px;
margin-top: -5px;
input {
margin-top: 5px;
width: 26%;
background: #ccc;
background: -moz-linear-gradient(top, #ccc 0%, #eee 98%);
background: -webkit-linear-gradient(top, #ccc 0%, #eee 98%);
background: linear-gradient(to bottom, #ccc 0%, #eee 98%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ccc', endColorstr='#eee', GradientType=0);
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
font-weight: 300;
color: #000;
padding: 5px 4%;
border: 1px solid #fff;
text-align: right;
}
.odds {
position: absolute;
right: 1px;
top: 1px;
background: #89c331;
padding: 10px;
line-height: 2px;
color: #fff;
font-size: 14px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
}
.change {
margin-bottom: 6px;
.team {
color: #B70532;
}
.odds {
background: #BC1640;
}
}
}
.changed, .warning {
background: #ffcf87;
background: -moz-linear-gradient(top, #ffcf87 0%, #fffffd 100%);
background: -webkit-linear-gradient(top, #ffcf87 0%, #fffffd 100%);
background: linear-gradient(to bottom, #ffcf87 0%, #fffffd 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffcf87', endColorstr='#fffffd', GradientType=0);
}
.suspended, .error {
background: #FFAAA3;
background: -moz-linear-gradient(top, #FFAAA3 0%, #fffffd 100%);
background: -webkit-linear-gradient(top, #FFAAA3 0%, #fffffd 100%);
background: linear-gradient(to bottom, #FFAAA3 0%, #fffffd 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFAAA3', endColorstr='#fffffd', GradientType=0);
}
.success {
background: #9ee9af;
background: -moz-linear-gradient(top, #9ee9af 0%, #fffffd 100%);
background: -webkit-linear-gradient(top, #9ee9af 0%, #fffffd 100%);
background: linear-gradient(to bottom, #9ee9af 0%, #fffffd 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FFAAA3', endColorstr='#fffffd', GradientType=0);
}
.processing {
pointer-events: none;
}
.systems {
padding-right: 10px;
padding-bottom: 6px;
.row {
margin: 0px;
padding: 0px;
margin-top: 5px;
}
.block-title {
font-size: 12px;
font-weight: 600;
margin-top: 10px;
text-transform: uppercase;
margin-bottom: 15px;
color: #BC1640;
font-family: 'Roboto Condensed', sans-serif;
}
.info {
background: #FFFFFF;
color: #FF0101;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
width: 23px;
height: 19px;
opacity: 1;
position: absolute;
right: 3%;
font-size: 18px;
top: 10px;
text-align: center;
padding-top: 3px;
vertical-align: middle;
padding-bottom: 0px;
border: 1px solid #FF0101;
}
.title {
font-size: 12px;
width: 75%;
float: left;
margin: 0;
color: #000;
line-height: 20px;
font-family: 'Roboto Condensed', sans-serif;
font-weight: bold;
}
.xnum {
background: #393939;
height: 19px;
float: right;
color: #fff;
padding: 4px 4px 4px 4px;
padding-bottom: 0;
width: 10%;
text-align: center;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
line-height: 14px;
margin-top: -3px;
position: absolute;
right: 20%;
}
input {
height: 21px;
width: 13%;
background: #ccc;
background: -moz-linear-gradient(top, #ccc 0%, #eee 98%);
background: -webkit-linear-gradient(top, #ccc 0%, #eee 98%);
background: linear-gradient(to bottom, #ccc 0%, #eee 98%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ccc', endColorstr='#eee', GradientType=0);
border: none;
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
font-weight: 300;
color: #333;
padding: 1px 1%;
border: 1px solid #fff;
font-style: italic;
float: right;
position: absolute;
right: 3%;
text-align: center;
margin-top: -4px;
}
hr {
margin: 5px 0px;
}
}
.separator {
background: #9fcd59;
background: -moz-linear-gradient(left, #9fcd59 0%, #ffffff 50%, #9fcd59 100%);
background: -webkit-linear-gradient(left, #9fcd59 0%, #ffffff 50%, #9fcd59 100%);
background: linear-gradient(to right, #9fcd59 0%, #ffffff 50%, #9fcd59 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#9fcd59', endColorstr='#9fcd59', GradientType=1);
height: 5px;
margin-right: -10px;
margin-left: -10px;
}
.stake {
padding-right: 10px;
padding-top: 1px;
.title {
margin-left: 0px;
font-weight: 400;
margin-bottom: 5px;
position: relative;
margin-top: 9px;
font-family: 'Roboto Condensed', sans-serif;
color: #000;
span {
font-size: 14px;
font-weight: 600;
}
.odds {
position: absolute;
right: 1px;
top: -6px;
background: #89c331;
padding: 12px 12px 12px 12px;
line-height: 2px;
color: #fff;
font-size: 16px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
.win {
background: #393939;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
padding: 10px 15px;
font-size: 16px;
color: #fff;
position: relative;
b {
text-align: right;
float: right;
top: 0px;
position: relative;
}
}
hr {
margin-top: 10px;
margin-bottom: 6px;
&.first {
margin-bottom: 5px;
}
&.second {
margin: 2px 0;
}
&.third {
margin: 2px 0;
}
}
.bet {
a {
padding: 3% 0;
padding-top: 7px;
background: #b2b2b2;
width: 14.666666666666%;
height: 12px;
margin: 1%;
float: left;
text-align: center;
font-size: 1.7em;
display: block;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
line-height: 16px;
font-size: 14px;
color: #fff;
text-decoration: none;
}
a:hover {
background: #393939;
}
.quickbet {
&.disabled {
opacity: 0.3;
pointer-events: none;
}
}
}
.buttons {
display: block;
margin-top: 2px;
.btn {
width: 47%;
float: left;
margin: 6px 0;
font-size: 17px;
padding: 15px 0px 13px 0px;
display: block;
text-transform: uppercase;
font-size: 14px;
text-align: center;
margin: 0 1%;
}
.disabled {
pointer-events: none;
opacity: 0.5;
}
}
}
}
.nofunds {
border: solid 1px darkred;
padding: 8px;
font-size: 14px;
color: darkred;
font-weight: bold;
border-radius: 3px;
div {
&:first-child {
display: inline-block;
width: 49%;
}
&:last-child {
display: inline-block;
text-align: right;
width: 49%;
input {
background: #ffc61a;
border: solid 1px;
padding: 6px;
border-radius: 3px;
color: #444;
font-weight: bold;
}
}
}
}
.multibet-error {
border: solid 1px darkred;
padding: 13px;
font-size: 14px;
color: darkred;
font-weight: bold;
border-radius: 3px;
margin-bottom: 8px;
}
.success {
border: solid 1px darkgreen;
padding: 13px;
font-size: 14px;
color: darkgreen;
font-weight: bold;
border-radius: 3px;
margin-bottom: 8px;
}
}
.square-holder {
margin-top: 5px;
margin-bottom: 5px;
}
.squaredOne {
display: inline-block;
}
.square-label {
display: inline-block;
label {
font-family: 'Roboto Condensed';
font-size: 15px;
}
}
}
/* --------------------------------------secondary-menu------ */
.footer {
padding-bottom: 60px;
.collapse {
display: none;
}
}
.footer.disabled {
display: none;
}
.footer .container {
position: fixed;
bottom: 1px;
width: 100%;
.title-holder {
margin-top: 0px;
}
}
.footer.active .container {
height: calc(~"100% - 53px");
position: fixed;
width: 100%;
overflow: hidden;
overflow-y: scroll;
bottom: 0px;
.betslip {
height: calc(~"100% - 143px");
overflow: scroll;
&.multi {
height: calc(~"100% - 145px");
}
}
.collapse {
display: block;
}
.show {
.minus {
display: block;
}
.plus {
display: none;
}
}
.title-holder {
margin-top: 0px;
}
.stake {
padding-right: 10px;
padding-top: 1px;
position: fixed;
width: 94%;
bottom: 0;
z-index: 100;
.stake-info {
font-weight: normal;
display: inline-block;
}
.potential-win {
font-weight: normal;
display: inline-block;
float: right;
}
.multibet-stake {
font-size: 14px;
text-align: right;
input {
width: 27%;
background: #ccc;
background: -moz-linear-gradient(top, #ccc 0%, #eee 98%);
background: -webkit-linear-gradient(top, #ccc 0%, #eee 98%);
background: linear-gradient(to bottom, #ccc 0%, #eee 98%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ccc', endColorstr='#eee', GradientType=0);
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
font-weight: 300;
color: #333;
padding: 5px 4%;
border: 1px solid #fff;
text-align: right
}
}
}
.tab-content {
}
.betslip-open .content {
background: #ffc000;
font-size: 14px;
line-height: 16px;
padding: 1%;
text-transform: none;
width: 98%;
height: 100%;
}
.multiBet {
a.disabled {
text-decoration: line-through;
pointer-events: none;
opacity: 0.7;
}
}
.message {
font-family: 'Roboto';
margin-top: 5px;
margin-left: 5px;
font-size: 11px;
font-weight: bold;
text-align: center;
.buttons {
.button {
border-radius: 4px;
padding: 6px;
color: #FFF;
font-size: 12px;
width: 49%;
&.accept-odds {
background: green;
border: solid 1px darkgreen;
}
&.decline-odds {
background: red;
border: solid 1px darkred;
}
}
}
}
.multi-stake {
display: inline-block;
width: 87%;
text-align: right;
position: absolute;
top: -6px;
input {
width: 40%;
background: #ccc;
background: -moz-linear-gradient(top, #ccc 0%, #eee 98%);
background: -webkit-linear-gradient(top, #ccc 0%, #eee 98%);
background: linear-gradient(to bottom, #ccc 0%, #eee 98%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ccc', endColorstr='#eee', GradientType=0);
font-family: Helvetica, Arial, sans-serif;
font-size: 14px;
font-weight: 300;
color: #333;
padding: 5px 4%;
border: 1px solid #fff;
font-style: italic;
text-align: right
}
}
button.inc-stake-10, button.dec-stake-10, button.inc-stake-50, button.dec-stake-50 {
width: 15%;
display: inline;
padding: 5px;
font-family: 'Roboto Condensed';
font-weight: normal;
height: 27px;
font-size: 14px;
margin: 0;
line-height: normal
}
.footer-win {
font-weight: normal;
text-transform: lowercase;
font-size: 11px;
.footer-win-figure {
color: #ffc61a;
font-size: 11px;
small {
display: none;
}
}
}
.footer-stake {
text-transform: lowercase;
font-weight: normal;
font-size: 11px;
small {
display: none;
}
}
}