UNPKG

sportsbet-mobile

Version:
1,348 lines (1,151 loc) 21.9 kB
@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 !important; 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 !important; 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 !important; } .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 !important; padding: 6px 2px !important; } .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% !important; background: #fff !important; border-radius: 8px !important; border: none !important; } .dd-selected { color: #444; font-size: 18px; height: 63px; line-height: 45px; } ul.dd-options { width: 100% !important; } a.dd-option, a.dd-selected { text-align: left; padding-left: 20px !important; } a.dd-option label { line-height: inherit !important; } .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 !important; } } .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 !important; } #thanks_msg { padding: 0; } #thanks_msg h1 { font-size: 24px; } #thanks_msg h4, #thanks_msg p { font-size: 14px; } } }