sportsbet-mobile
Version:
Sportsbet mobile
1,348 lines (1,151 loc) • 21.9 kB
text/less
@font-face {
font-family: 'BebasNeue';
src: url('//cdn.coingaming.io/sportsbet/fonts/BebasNeue.eot');
src: url('//cdn.coingaming.io/sportsbet/fonts/BebasNeue.eot') format('embedded-opentype'),
url('//cdn.coingaming.io/sportsbet/fonts/BebasNeue.woff') format('woff'),
url('//cdn.coingaming.io/sportsbet/fonts/BebasNeue.ttf') format('truetype'),
url('//cdn.coingaming.io/sportsbet/fonts/BebasNeue.svg#BebasNeue') format('svg');
}
.landing {
.sidepic {
zoom: 1;
}
.sidepic.man {
right: -195px;
left: auto;
top: 150px;
}
.input-group {
width: 300px;
}
.modal-dialog {
width: 435px;
margin: 30px 0;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
background: #fff;
margin-top: 0%;
float: left;
}
.logo {
text-align: center;
margin-top: 5%;
display: block;
margin-bottom: 30px;
}
.content {
float: left;
width: 820px;
background: #1e1e1e;
-webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
border: 5px solid #1e1e1e;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
margin-right: 10px;
color: #fff;
padding: 26px;
padding-top: 20px;
margin-bottom: 20px;
.yellow-bg {
position: relative;
padding: 10px;
padding-left: 200px;
background: #FEBF00;
height: 120px;
color: #4b3800;
p {
padding: 0px;
width: 300px;
b {
color: #4b3800;
}
}
h2 {
text-align: left;
color: #4b3800;
margin: 0px;
font-weight: 600;
font-size: 35px;
margin-top: 13px;
}
.judge {
position: absolute;
top: -173px;
left: -50px;
}
.arrow {
position: absolute;
top: 0;
right: -40px;
}
}
hr {
margin-top: 30px;
margin-bottom: 30px;
border: 0;
border-top: 1px solid #000000;
background: #353535;
height: 1px;
}
h2 {
display: block;
text-align: center;
}
.icon {
width: 184px;
display: inline-block;
text-align: center;
padding: 0px 40px;
img {
display: block;
margin: 0px auto;
margin-bottom: 10px;
margin-top: 20px;
}
}
}
.footer {
text-align: center;
color: #ffffff;
margin-bottom: 20px;
}
.registered {
.modal-content {
background: url('@{cdnUrl}deleteAfterLive/registered.jpg') no-repeat top center;
}
.modal-footer {
text-align: center;
}
.sidepic.man {
right: -195px;
left: auto;
top: 50px;
}
.text {
text-align: center;
font-size: 16px;
font-style: italic;
b {
text-transform: uppercase;
color: #444444;
}
}
.yellow-bg {
position: relative;
padding: 10px;
padding-left: 145px;
background: #FEBF00;
height: 50px;
color: #4b3800;
margin-top: 20px;
padding-top: 12px;
margin-bottom: 30px;
.whistle {
position: absolute;
top: -10px;
left: 0px;
}
h2 {
display: block;
padding: 0px;
margin: 0px;
}
}
table {
width: 100%;
td {
border: 1px solid #ccc;
padding: 15px 20px;
font-size: 16px;
}
}
}
&.secondLanding {
.container {
width: 1225px;
background: url('@{cdnUrl}deleteAfterLive/lanBg.jpg') no-repeat top center;
padding: 0px;
margin-top: 0;
border: 5px solid rgb(30, 30, 30);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
position: relative;
overflow: hidden;
padding-bottom: 42px;
}
h3 {
text-align: center;
color: #fff;
font-size: 61px;
margin-top: 5%;
margin-bottom: 20px;
text-shadow: 0px 2px 2px #01050E;
span {
color: #FFC000;
}
}
.ribbon {
position: absolute;
top: 0px;
right: -7px;
}
.logo {
text-align: center;
margin-top: 5%;
display: block;
margin-bottom: 17px;
width: 180px;
}
.info {
position: absolute;
width: 233px;
background: #1e1e1e;
border: 5px solid #1e1e1e;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
margin-right: 10px;
color: #fff;
padding: 10px 10px 10px 25px;
padding-top: 20px;
margin-bottom: 20px;
left: -10px;
margin-top: -15px;
font-size: 16px;
}
.tablet-bg {
background: rgba(13, 18, 24, 0.85);
height: 310px;
width: 531px;
left: 341px;
position: absolute;
top: 115px;
border: 5px solid #f7ba00;
-webkit-animation: color_change 1s infinite alternate;
-moz-animation: color_change 1s infinite alternate;
-ms-animation: color_change 1s infinite alternate;
-o-animation: color_change 1s infinite alternate;
animation: color_change 1s infinite alternate;
}
@-webkit-keyframes color_change {
from {
background-color: rgba(13, 18, 24, 0.80);
border: 5px solid #f7ba00;
}
to {
background-color: rgba(13, 18, 24, 0.95);
border: 5px solid #FFD966;
}
}
@-moz-keyframes color_change {
from {
background-color: rgba(13, 18, 24, 0.80);
border: 5px solid #f7ba00;
}
to {
background-color: rgba(13, 18, 24, 0.95);
border: 5px solid #FFD966;
}
}
@-ms-keyframes color_change {
from {
background-color: rgba(13, 18, 24, 0.80);
border: 5px solid #f7ba00;
}
to {
background-color: rgba(13, 18, 24, 0.95);
border: 5px solid #FFD966;
}
}
@-o-keyframes color_change {
from {
background-color: rgba(13, 18, 24, 0.80);
border: 5px solid #f7ba00;
}
to {
background-color: rgba(13, 18, 24, 0.95);
border: 5px solid #FFD966;
}
}
@keyframes color_change {
from {
background-color: rgba(13, 18, 24, 0.80);
border: 5px solid #f7ba00;
}
to {
background-color: rgba(13, 18, 24, 0.95);
border: 5px solid #FFD966;
}
}
.tablet {
background: url('@{cdnUrl}deleteAfterLive/tablet.png') no-repeat top center;
width: 670px;
height: 410px;
margin: 0px auto;
position: relative;
padding-top: 70px;
margin-top: 80px;
h2 {
margin: 0px auto;
color: #FFC000;
text-align: center;
font-size: 38px;
margin-bottom: 20px;
}
.answer {
width: 530px;
margin: 0px auto;
display: none;
&.active {
display: block;
}
}
.item {
width: 168px;
float: left;
text-align: center;
text-transform: uppercase;
color: #fff;
font-size: 30px;
font-family: BebasNeue Regular;
margin: 0px 47px;
a {
color: #fff;
display: inherit;
padding: 10px;
line-height: 32px;
border: 1px solid rgba(181, 181, 181, 0.32);
background: rgba(86, 86, 86, 0.31);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
padding-top: 15px;
}
img {
display: block;
margin: 0px auto;
margin-bottom: 10px;
width: 89px;
}
}
.choose {
position: absolute;
top: 181px;
left: 287px;
&:before {
content: '';
background: url('@{cdnUrl}deleteAfterLive/landArrows.png') no-repeat top center;
height: 90px;
width: 92px;
position: absolute;
opacity: 1;
background-size: 53%;
}
}
.check {
position: absolute;
top: 179px;
left: 287px;
&:before {
content: '';
height: 90px;
width: 92px;
position: absolute;
opacity: 1;
}
}
.wrong {
display: none;
}
a.current {
}
a.current.true {
border: 1px solid rgba(104, 163, 0, 0.32);
background: rgba(104, 163, 0, 0.31);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
.check:before {
background: url('@{cdnUrl}deleteAfterLive/yes.png') no-repeat top center;
opacity: 1;
}
}
a.current.false {
border: 1px solid rgba(217, 0, 0, 0.42);
background: rgba(136, 5, 5, 0.25);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
.check:before {
background: url('@{cdnUrl}deleteAfterLive/no.png') no-repeat top center;
opacity: 1;
}
img, span {
opacity: 0.2;
}
.wrong {
display: block;
position: absolute;
top: 173px;
margin-left: 28px;
color: #FFC000;
}
}
}
.circles {
position: absolute;
margin: 0px auto;
bottom: 83px;
width: 80px;
margin-left: 293px;
.circle {
border: 1px solid #fff;
width: 20px;
height: 20px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
border-radius: 50px;
float: left;
margin: 0px 3px;
&.active {
background: #f7ba00;
border: 1px solid #FFDD76;
}
&.checked {
background: #272D33;
border: 1px solid #4A5F75;
}
}
}
.content {
width: 820px;
background: rgba(30, 30, 30, 0);
-webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0);
border: 5px solid rgba(30, 30, 30, 0);
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
margin-right: 10px;
color: #fff;
padding: 26px;
padding-top: 20px;
margin-bottom: 20px;
float: none;
margin: 0px auto;
position: relative;
z-index: 1;
.whyImg {
position: relative;
display: block;
margin: 0px auto;
margin-top: -69px;
}
}
}
}
.opening {
.container {
margin-top: 50px;
position: relative;
}
.logo {
position: absolute;
width: 250px;
img {
width: 100%;
}
}
h1 {
color: #fed001;
text-align: center;
display: block;
vertical-align: middle;
margin: 0 auto 25px;
}
.login, .login:active {
width: 150px;
top: 15px;
right: 0px;
position: absolute;
opacity: 1;
background: url('@{cdnUrl}deleteAfterLive/login-bg.png') no-repeat center ;
padding: 6px 12px;
}
.login:active {
opacity: 0.7;
}
.timer {
border-top: 1px solid rgba(255, 255, 255, 0.49);
margin-top: 0px;
.count {
width: 585px;
height: 490px;
background: url('@{cdnUrl}deleteAfterLive/opening.png') no-repeat top center ;
position: relative;
margin: 0px auto;
div {
float: left;
width: 45px;
color: #fff;
position: relative;
top: 137px;
font-size: 81px;
text-align: center;
margin-left: 15px;
font-family: BebasNeue Regular;
line-height: 98px;
}
.sep {
width: 15px;
height: 50px;
}
}
.register {
width: 450px;
font-size: 48px;
margin: 0px auto;
padding: 20px;
text-align: center;
clear: both;
position: relative;
top: 180px;
z-index: 9;
border: 3px solid rgba(18, 23, 29, 0.79);
-webkit-box-shadow: 0px 2px 0px 2px rgba(71, 98, 44, 1);
-moz-box-shadow: 0px 2px 0px 2px rgba(71, 98, 44, 1);
box-shadow: 0px 0px 0px 2px rgba(71, 98, 44, 1);
}
.sidepic {
position: absolute;
top: 90px;
}
.woman {
left: 30px;
width: 300px;
}
.man {
right: 30px;
}
.tickets {
margin: -200px auto 0;
padding-left: 75px;
z-index: 0;
display: block;
}
}
.white-bg {
background: url('@{cdnUrl}deleteAfterLive/opening-bg.png') no-repeat top center #f2f2f2 ;
}
.openingPic {
z-index: 0;
position: relative;
top: 60px;
margin-bottom: -65px;
width: 100%;
}
.copyright {
text-align: center;
color: #fff;
margin-top: 30px;
}
.register:hover, .login:hover {
opacity: 0.8;
}
}
.opening-info {
h1, h2, h3, h4 {
font-family: 'BebasNeue';
}
.table-bordered{
td{
padding: 8px;
line-height: 1.42857143;
vertical-align: top;
border: 1px solid #ddd;
}
}
.header {
padding: 30px 0;
width: 100%;
text-align: center;
}
.logo {
display: inline-block;
}
.logo img {
max-width: 100%;
}
.main_container {
padding: 1px;
background: #1e1e1e;
border: 1px solid #010202;
border-radius: 10px;
}
.inner_container {
padding: 15px;
background: #1e1e1e;
border: 1px solid #292929;
border-radius: 10px;
}
.herder_text {
width: 1040px;
height: 120px;
text-align: center;
padding: 15px 0;
margin: auto;
margin-top: 4px;
margin-bottom: 15px;
background: url('@{cdnUrl}deleteAfterLive/register_bg.png') no-repeat;
}
.herder_text h1 {
font-size: 60px;
color: #4b3800;
margin: 0;
}
.herder_text h4 {
font-size: 16px;
color: #4b3800;
margin: 0;
font-family: Arial, sans-serif;
}
.white_container {
padding: 30px;
background: #fff;
border-radius: 10px;
}
.imp_dates {
padding: 12px 0;
text-align: center;
border-radius: 10px;
background: #89c240;
}
.imp_dates h2 {
font-size: 30px;
color: #2f4e07;
margin: 0;
margin-left: 30px;
margin-top: 4px;
position: relative;
display: inline-block;
text-transform: uppercase;
}
.imp_dates h2 img {
position: absolute;
left: -140px;
top: -20px;
}
.content_table {
text-align: center;
margin-top: 30px;
overflow: visible;
}
.table_block {
position: relative;
}
.table_block span {
position: absolute;
width: 10px;
height: 10px;
border-radius: 50%;
top: 0;
left: 50%;
margin-top: -13px;
margin-left: -5px;
background: #89c240;
}
.table_block p {
font-size: 16px;
margin-bottom: 0;
padding-top: 10px;
}
.table_block h4 {
font-size: 16px;
margin-top: 10px;
}
.yello_block {
padding-top: 15px;
padding-bottom: 10px;
text-align: center;
margin-left: -30px;
margin-right: -30px;
background: #ffc000;
position: relative;
}
.yello_block h2 {
font-size: 30px;
color: #4b3800;
margin-top: 0;
}
.que_block,
.lounch_title {
width: 570px;
height: 40px;
margin: auto;
padding-top: 5px;
margin-top: 10px;
text-align: center;
background: url('@{cdnUrl}deleteAfterLive/que_bg.png') no-repeat;
}
.que_block h2,
.lounch_title h2 {
font-size: 30px;
color: #fff;
margin: 0;
}
.form_block {
width: 570px;
height: auto;
margin: auto;
margin-top: 15px;
}
.form_block .row {
margin-left: -5px;
margin-right: -5px;
}
.sml {
width: 80px;
padding-left: 5px;
padding-right: 5px;
float: left;
text-align: center;
}
.big {
padding-left: 5px;
padding-right: 5px;
float: left;
width: 500px;
}
.big select {
width: 100%;
height: 63px;
font-size: 18px;
color: #444444;
border-radius: 8px;
border: none;
padding: 0 10px;
margin-bottom: 10px;
}
.big select:focus {
box-shadow: none;
outline: none;
}
.g_icon {
padding: 10px 0;
border-radius: 8px;
background: #89c331;
}
.form_block input[type="submit"],
.form_block button {
font-size: 30px;
color: #000000;
display: block;
height: 63px;
width: 100%;
line-height: 63px;
border: none;
border-top: 1px solid #fff;
border-radius: 8px;
box-shadow: 0 1px 2px rgba(4, 4, 4, 0.5);
-webkit-transition: 0.3s;
transition: 0.3s;
font-family: 'BebasNeue';
background: #89c331; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(#8ce900, #89c331); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#8ce900, #89c331); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#8ce900, #89c331); /* For Firefox 3.6 to 15 */
background: linear-gradient(#8ce900, #89c331); /* Standard syntax */
}
.form_block input[type="submit"]:hover,
.form_block input[type="submit"]:focus,
.form_block button:hover,
.form_block button:focus {
background: #8ce900; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(#89c331, #8ce900); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#89c331, #8ce900); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#89c331, #8ce900); /* For Firefox 3.6 to 15 */
background: linear-gradient(#89c331, #8ce900); /* Standard syntax */
}
.left_player {
position: absolute;
top: 0;
left: 0;
margin-top: -70px;
margin-left: -185px;
}
.right_player {
position: absolute;
top: 0;
right: 0;
margin-top: -70px;
margin-right: -192px;
}
.text_content {
text-align: center;
margin-left: -30px;
margin-right: -30px;
margin-bottom: 30px;
padding: 30px 30px 0;
border-bottom: 1px solid #ccc;
}
.text_content h2 {
font-size: 30px;
color: #000;
margin-top: 5px;
}
.text_content p {
font-size: 16px;
line-height: 20px;
margin-bottom: 20px;
color: #000;
text-align: left;
padding: 0 50px;
}
.lounching_block {
padding-bottom: 40px;
}
.lounch_title {
margin-bottom: 20px;
background: url('@{cdnUrl}deleteAfterLive/lounch_bg.png');
}
.group_stage {
margin-top: 10px;
text-align: center;
}
.gs_header {
margin-top: 30px;
margin-bottom: 30px;
}
.group_blocks.row {
margin-left: -5px;
margin-right: -5px;
}
.group_blocks.row .col-sm-4,
.group_blocks.row .col-md-2 {
padding-left: 5px;
padding-right: 5px;
}
.group_table td.img_td {
vertical-align: middle;
width: 33px ;
padding: 6px 2px ;
}
.group_block h3 {
font-size: 24px;
color: #fff;
padding: 10px 0;
border-radius: 8px;
background: #015697;
}
.group_table .table_block p {
padding: 0;
margin: 0;
font-size: 15px;
}
.footer {
padding: 40px 0;
text-align: center;
}
.footer p {
font-size: 14px;
color: #fff;
}
#thanks_msg {
padding: 0 100px;
}
#thanks_msg h1 {
font-size: 48px;
color: #4b3800;
margin-top: 0;
text-transform: uppercase;
}
#thanks_msg h4 {
font-size: 16px;
line-height: 20px;
font-weight: 400;
color: #4b3800;
text-transform: uppercase;
font-family: Arial, sans-serif;
}
#thanks_msg p {
font-size: 16px;
line-height: 18px;
color: #4b3800;
margin-bottom: 15px;
}
.dd-container, .dd-select {
width: 100% ;
background: #fff ;
border-radius: 8px ;
border: none ;
}
.dd-selected {
color: #444;
font-size: 18px;
height: 63px;
line-height: 45px;
}
ul.dd-options {
width: 100% ;
}
a.dd-option,
a.dd-selected {
text-align: left;
padding-left: 20px ;
}
a.dd-option label {
line-height: inherit ;
}
.bootstrap-select{
width: 100%;
margin-bottom: 10px;
.dropdown-toggle{
background: white;
padding: 0 20px;
font-size: 20px;
&:hover, &:active, &:focus{
background: white;
outline-style: none ;
}
}
.dropdown-menu{
li{
padding: 0px;
border-bottom: 1px solid lightgray;
a{
padding: 10px 20px;
}
&.selected{
a {
background-color: #468100;
color: white;
text-shadow: 0 1px 0 #003a00;
}
}
}
}
}
}
@media (min-width: 1200px) and (max-width: 1330px) {
.opening{
.container{
width: 1200px;
}
}
}
@media (min-width: 992px) and (max-width: 1199px) {
.opening .sidepic{
&.man{
right: -50px;
}
&.woman{
left: -50px;
}
}
.opening-info {
img {
max-width: 100%;
}
.logo {
width: 200px;
}
.herder_text {
padding: 10px 0 14px;
width: 100%;
height: auto;
-webkit-background-size: contain;
background-size: contain;
}
.group_table .table_block p {
font-size: 11px;
}
}
}
@media (min-width: 768px) and (max-width: 991px) {
.opening-info {
img {
max-width: 100%;
}
.header {
padding: 20px 0;
}
.logo {
width: 180px;
}
.herder_text {
padding: 8px 0 12px;
width: 100%;
height: auto;
-webkit-background-size: contain;
background-size: contain;
}
.herder_text h1 {
font-size: 40px;
}
.herder_text h4 {
font-size: 14px;
}
.left_player, .right_player {
display: none;
}
.text_content p {
padding: 0;
}
.btn_block {
margin-top: 10px;
}
#thanks_msg {
padding: 0 30px;
}
}
}
@media (max-width: 767px) {
.opening {
.sidepic{
display: none;
}
h1 {
margin-top: 100px;
}
}
.opening-info {
img {
max-width: 100%;
}
.header {
padding: 15px 0;
}
.logo {
width: 120px;
}
.herder_text {
width: 100%;
height: auto;
border-radius: 8px;
background: none;
background-color: #ffc619;
}
.herder_text h1 {
font-size: 30px;
margin-bottom: 6px;
}
.herder_text h4 {
font-size: 14px;
}
.white_container {
padding: 20px 0;
}
.top_block {
padding: 0 15px;
}
.imp_dates {
padding: 7px 0 3px;
}
.imp_dates h2 {
font-size: 24px;
margin: 0;
}
.imp_dates h2 img {
display: none;
}
.content_table {
margin-top: 20px;
}
.yello_block {
padding: 15px;
margin-left: 0;
margin-right: 0;
}
.yello_block h2 {
font-size: 20px;
}
.big select {
height: 40px;
font-size: 14px;
text-align: center;
}
.form_block input[type="submit"], .form_block button {
font-size: 18px;
line-height: 44px;
height: 40px;
}
.form_block {
width: 100%;
margin-top: 0;
}
.big {
width: 100%;
}
.sml, .left_player, .right_player {
display: none;
}
.text_content {
padding: 20px 20px 0;
margin-bottom: 15px;
margin-left: 0;
margin-right: 0;
}
.text_content h2 {
font-size: 20px;
}
.text_content p {
font-size: 12px;
line-height: 16px;
padding: 0;
text-align: center;
}
.lounching_block {
padding-bottom: 0;
}
.que_block, .lounch_title {
width: 100%;
background: none;
}
.que_block h2, .lounch_title h2 {
font-size: 22px;
color: #444;
}
.lounch_title {
margin-bottom: 0;
}
.group_stage {
padding: 20px 15px;
}
.gs_header {
margin: 0 auto;
}
.group_block h3 {
font-size: 18px;
padding-bottom: 7px;
}
.group_table .table_block p {
font-size: 12px;
}
.btn_block {
margin-top: 10px;
}
.dd-selected {
font-size: 14px;
height: 40px;
line-height: 20px;
}
a.dd-option,
a.dd-selected {
text-align: center;
padding-left: 10px ;
}
#thanks_msg {
padding: 0;
}
#thanks_msg h1 {
font-size: 24px;
}
#thanks_msg h4, #thanks_msg p {
font-size: 14px;
}
}
}