sportsbet-mobile
Version:
Sportsbet mobile
259 lines (212 loc) • 7.78 kB
text/less
.lottery {
background: #FFF;
min-height: calc(~"100vh - 92px");
.submenu {
padding: 5px 0;
li {
width: 32vw;
}
}
.container.inner-page{
ul,li {list-style:none;}
.picHolder {
color: #fff;
background: url('@{cdnUrl}images/lottery/lotteryBg.jpg') top center;
background-size: 130%;
padding: 5%;
h1 {color:#fff;}
p {
padding: 0px;
margin: 0px;
font-size: 14px;
line-height: 19px;
}
}
h1 {
color: #444444;
position: relative;
margin:0px;
margin-bottom:10px;
}
.lotteries{
.item {
display: -webkit-box;
padding: 10px 0;
background: #f3f3f3;
background: -moz-linear-gradient(top, #f3f3f3 0%, #c3c3c3 100%);
background: -webkit-linear-gradient(top, #f3f3f3 0%, #c3c3c3 100%);
background: linear-gradient(to bottom, #f3f3f3 0%, #c3c3c3 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f3f3f3', endColorstr='#c3c3c3', GradientType=0);
margin-bottom: 1px;
position: relative;
text-align: center;
font-size: 13px;
font-weight: 600;
height: 29px;
font-family:'Roboto Condensed', sans-serif;
h2 {
line-height: 27px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.arrow {
background: #FFC000;
height: 49px;
display: block;
position: absolute;
right: 0px;
width: 100%;
top: -10px;
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#febe00+0,e68000+100 */
background: rgb(254,190,0); /* Old browsers */
background: -moz-linear-gradient(top, rgba(254,190,0,1) 0%, rgba(230,128,0,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, rgba(254,190,0,1) 0%,rgba(230,128,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, rgba(254,190,0,1) 0%,rgba(230,128,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#febe00', endColorstr='#e68000',GradientType=0 ); /* IE6-9 */
&:before {
content: '';
background: url('@{cdnUrl}images/icons.png') -3px -333px #ffffff;
height: 40px;
width: 40px;
position: absolute;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
top: 28px;
right: 10%;
border: 1px solid #ccc;
zoom: 0.5;
}
}
b{color:#444444;}
span {
display: block;
color: #777777;
font-weight: 100;
font-size: 11px;
text-transform: uppercase;
margin-bottom: 2px;
}
.col-sm-1.ball:before {
background: url('@{cdnUrl}images/lottery/lotteryBall.png') no-repeat top center;
content: '';
position: absolute;
width: 50px;
height: 30px;
top: 4px;
left: -4px;
zoom: 0.8;
}
}
}
.leaderboard {
background: #ffffff;
background: -moz-linear-gradient(left, #ffffff 0%, #eeeeee 100%);
background: -webkit-linear-gradient(left, #ffffff 0%, #eeeeee 100%);
background: linear-gradient(to right, #ffffff 0%, #eeeeee 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#eeeeee', GradientType=1);
-webkit-box-shadow: 2px 16px 25px -7px rgba(189,189,189,1);
-moz-box-shadow: 2px 16px 25px -7px rgba(189,189,189,1);
box-shadow: 2px 16px 25px -7px rgba(189,189,189,1);
.picHolder {background: url('@{cdnUrl}images/lottery/leaderBg.jpg') top center; color:#000;}
p a {
display: block;
color: #ff0042;
font-size: 12px;
margin-top: 7px;
}
.list {
li {
margin-bottom: 1px;
padding: 15px;
font-size: 18px;
position:relative;
padding-left:50px;
div {font-family:'Roboto Condensed', sans-serif;}
}
.name {
width: 46%;
margin-left: 0px;
font-weight: 400;
text-shadow: 0px 1px 0px #000000;
font-size: 16px;
color:#fff;
}
li.blue {
background: #00193e;
background: -moz-linear-gradient(left, #00193e 0%, #116aa8 51%, #00193e 100%);
background: -webkit-linear-gradient(left, #00193e 0%, #116aa8 51%, #00193e 100%);
background: linear-gradient(to right, #00193e 0%, #116aa8 51%, #00193e 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00193e', endColorstr='#00193e', GradientType=1);
color:#fff;
.pic {
position: absolute;
top:4px;
right: 0;
}
}
li.grey{
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#000000+0,b7b7b7+47,939393+98 */
background: rgb(0,0,0); /* Old browsers */
background: -moz-linear-gradient(left, rgba(0,0,0,1) 0%, rgba(183,183,183,1) 47%, rgba(147,147,147,1) 98%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(0,0,0,1) 0%,rgba(183,183,183,1) 47%,rgba(147,147,147,1) 98%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(0,0,0,1) 0%,rgba(183,183,183,1) 47%,rgba(147,147,147,1) 98%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#939393',GradientType=1 ); /* IE6-9 */
}
li.grey.first{margin-top:10px;}
li.gold {
/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#e67e00+0,ffc000+47,945700+100 */
background: rgb(230,126,0); /* Old browsers */
background: -moz-linear-gradient(left, rgba(230,126,0,1) 0%, rgba(255,192,0,1) 47%, rgba(148,87,0,1) 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(left, rgba(230,126,0,1) 0%,rgba(255,192,0,1) 47%,rgba(148,87,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to right, rgba(230,126,0,1) 0%,rgba(255,192,0,1) 47%,rgba(148,87,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e67e00', endColorstr='#945700',GradientType=1 ); /* IE6-9 */
.name {
text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.76);
font-weight: 600;
color:#000;
}
.pic {
position: absolute;
top: 8px;
right: 0;
zoom: 0.8;
}
}
div {display: inline-block; font-family: BebasNeue Regular;}
.number {
background: #ccc;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
padding: 10px;
height: 10px;
width: 10px;
text-align: center;
font-size: 20px;
line-height: 12px;
background: #f3f3f3;
background: -moz-linear-gradient(top, #f3f3f3 0%, #c3c3c3 100%);
background: -webkit-linear-gradient(top, #f3f3f3 0%, #c3c3c3 100%);
background: linear-gradient(to bottom, #f3f3f3 0%, #c3c3c3 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f3f3f3', endColorstr='#c3c3c3', GradientType=0);
border: 1px solid #ccc;
color: #000;
position: absolute;
top: 9px;
left: 6px;
}
.points {
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
background: #000000;
padding: 0px 10px 0px 10px;
color: #fff;
font-size: 14px;
}
}
}
}
}