sportsbet-mobile/client/style/style.less

Sportsbet mobile

@cdnUrl: '//cdn.coingaming.io/sportsbet-mobile/';

@import "vendor-prefixes.import.less";
@import "variables.import.less";
@import "functions.import.less";
@import "grid.import.less";
@import "navbar.import.less";
@import "menus.import.less";
@import "sports.import.less";
@import "live.import.less";
@import "event.import.less";
@import "casino.import.less";
@import "deposit.import.less";
@import "bets.import.less";
@import "security.import.less";
@import "login.import.less";
@import "result.import.less";
@import "footer.import.less";
@import "transformation.import.less";
@import "tooltip.import.less";
@import "landing.import.less";
@import "chat.import.less";
@import "content.import.less";
@import "icons.import.less";
@import "lottery.import.less";
@import "lotteryItem.import.less";
@import "loading.import.less";
@import "leaderboard.import.less";
@import "modals.import.less";

@import url(https://fonts.googleapis.com/css?family=Roboto:400,500,300,700,400italic,500italic,300italic);

@import url(https://fonts.googleapis.com/css?family=Roboto+Condensed:700,500,400,400italic,300italic,300);


@font-face {
    font-family: Oswald-Regular;
    src: url('//cdn.coingaming.io/sportsbet/fonts/Oswald-Regular.ttf');
}

html{ font-size:12px; height:100%;}
body {
    height:100%;
    background:#282c38;
    font-family: 'Roboto', sans-serif;
    font-size:10px;
    line-height: 12px;
    -webkit-text-size-adjust: 100%;
    padding:0px;
    margin:0px;

    .leaderboard-page {
        font-family: Oswald-Regular;
    }

}

.truncate {
  width: 75%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.truncate-special-bet {
    width: 60%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.hidden { display:none;}
.container {width:100%;}
:focus, :hover, :active {
    outline: -webkit-focus-ring-color auto 0px;
}

a, a:hover, a:focus, a:active {text-decoration:none;}

h1, h2, h3, h4, h5, h6, .vs, .team {
    font-family: 'Roboto Condensed', sans-serif;
    font-weight: 700;

    b{color:#89C331;}

    a, a:hover, a:focus, a:active {color:#000; text-decoration:none;}

}
h1, h2, h3 {
    line-height: 17px;
}

h1 {
    font-size:16px;
}

h2 {
    font-size: 16px;
    margin:2px 0;
}

h3, .vs {
    font-size: 14px;
    line-height: 16px;
    font-weight: bold;
    position: relative;
    text-transform: uppercase;
    color: #000;
    text-decoration: none;
    margin:0px;
}

ul, ol, li {
    padding: 0;
    margin: 0;
}

section{margin-bottom:-1px;}

.btn:focus, .btn:active:focus, .btn.active:focus, .btn.focus, .btn:active.focus, .btn.active.focus {
    outline: thin dotted;
    outline: 0px auto -webkit-focus-ring-color;
    outline-offset: 0px;
}

.round3px {
	-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}

.table {
    width: 100%;
    margin-bottom: 0;
}

::-webkit-input-placeholder {color:#444444;}
::-moz-placeholder          {color:#444444;}/* Firefox 19+ */
:-moz-placeholder           {color:#444444;}/* Firefox 18- */
:-ms-input-placeholder      {color:#444444;}

.clearfix { clear:both; display:block !important;}

.btn {
    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);
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    border-radius: 3px;
    color: #272b37;
    text-shadow: 0px 1px 0px rgba(255, 255, 255, 0.67);
    font-size: 16px;
    line-height: 12px;
    padding: 15px 5%;
    display: block;
    width: 90%;
    text-align: center;
    margin: 0px auto;
    -webkit-box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.27);
    -moz-box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.27);
    box-shadow: 0px 1px 0px 0px rgba(0, 0, 0, 0.27);
    font-weight: 500;
    border: 1px solid #cccccc;
    text-transform: uppercase;
    font-family: 'Roboto', sans-serif;
    font-weight: bold;

    span {font-weight:100;}
}

.btn:active {
    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);
    opacity:0.7;
    }

.btn.green {
    background: #8ce901;
    background: -moz-linear-gradient(top, #8ce901 0%, #89c430 100%);
    background: -webkit-linear-gradient(top, #8ce901 0%, #89c430 100%);
    background: linear-gradient(top, #8ce901 0%, #89c430 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8ce901', endColorstr='#89c430', GradientType=1);
    border:1px solid #8ce307;
    color: #000;
 }

.btn:hover, .btn:focus {
    color: #333333;
    text-decoration: none;
    background-position: 0 0px;
 }

.row {
    margin-left: 0px;
    margin-right:0px;
}

.container-fluid {
    padding-right: 0px;
    padding-left: 0px;
}

.header {
    text-align: center;
    font-style: italic;
    font-weight: 100;
    display: block;
    margin: 0px;
    background: #000000;
    background: -moz-linear-gradient(left, #000000 0%, #262626 50%, #000000 100%);
    background: -webkit-linear-gradient(left, #000000 0%, #262626 50%, #000000 100%);
    background: linear-gradient(to right, #000000 0%, #262626 50%, #000000 100%);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#000000', endColorstr='#000000', GradientType=1);
    color: #fff;
    padding: 10px 0px;
}

.green {
    color: #89C331;
}

.no-results-container {
    background: #FFF;
    .no-results {
        font-weight: bold;
        text-align: center;
        font-size: 16px;
        padding: 8px;
        background: url('@{cdnUrl}images/genericMob.jpg') no-repeat top center;
        width: 96vw;
        height: 79vw;
        background-size: 100%;

        .content-holder {
            //position: absolute;
            left: 46vw;
            top: 74vw;
            text-align: left;
            height: 25%;
        }

        .title {
            color: #FFF;
            font-size: 18px;
            font-weight: 700;
        }

        .body {
            color: #FFF;
            font-size: 16px;
            font-weight: normal;
            line-height: 20px;
            width: 36vw;
            height: 87%;
            display: flex;
            align-items: center;
        }
    }
}
.no-results {
    font-weight: bold;
    text-align: center;
    font-size: 16px;
    padding: 8px;
    background: url('@{cdnUrl}images/genericMob.jpg') no-repeat top center;
    width: 90vw;
    height: 76vw;
    background-size: 100%;

    &.loading {
        background: none;
    }

    &.soccer {
        background: url('@{cdnUrl}images/soccerMob.jpg') no-repeat top center;
        background-size: 100%;
    }

    &.esport-counter-strike {
        background: url('@{cdnUrl}images/esportsMob.jpg') no-repeat top center;
        background-size: 100%;
    }

    .content-holder {
        //position: absolute;
        left: 46vw;
        top: 83vw;
        //text-align: left;
        height: 25%;
        text-align: center;
        margin-top: 33vw;
    }

    .title {
        color: #FFF;
        font-size: 18px;
        font-weight: 700;
        //margin-top: 31vw;
        margin-left: 85px;
    }

    .body {
        color: #FFF;
        font-size: 16px;
        font-weight: normal;
        line-height: 20px;
        width: 36vw;
        //height: 75%;
        //display: flex;
        display: block;
        align-items: center;
        margin-left: 39vw;
        margin-top: 20px;
    }

}

.effect-moveleft {
    overflow-y: scroll;
    overflow-scrolling: touch;
    -webkit-overflow-scrolling: touch;
    height: 100%;
    //background: #282c38;
    //background: #FFF;
}

.effect-moveleft.betslip-open{
    position: fixed;
    width: 100%;
}

#livechat-compact-container {
    display: none !important;
}

.more-badge {
    font-weight: bold !important;
    background: #b0b0b0;
    color: #FFF;
    text-shadow: none;
    font-size: 12px;
    padding: 7px 14px;
    border-radius: 3px;
    margin-left: 4px;
    border: solid 1px #aaa;
}

.live {
    color: red;
    font-style: italic;
    font-weight: 500;
}

.event-started {
    color: green;
    font-weight: 700;
}

.margin-right-5 {
    margin-right: 5px;
}

.starts-in {
    margin-top: 2px;
    font-weight: 500;
    span {
        color: green;
    }
}

.notification{
    position:fixed;
    width:370px;
    bottom:20px;

    .item {
        -webkit-border-radius: 5px;
        -moz-border-radius: 5px;
        border-radius: 5px;
        padding: 10px;
        margin: 10px;
        background: rgba(137, 195, 49, 0.95);
        border: 1px solid #89C331;
        color:#fff;
        padding-left: 85px;
        padding-right: 35px;
        position:relative;
        overflow: hidden;

        span { display:block; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25);}
        b{ color: rgba(0, 0, 0, 0.6);}

        &:before {
            content: '';
            background: url("@{cdnUrl}icons.png") 0px -1100px no-repeat;
            height: 100px;
            width: 100px;
            position: absolute;
            top: 3px;
            left: 3px;
            z-index:2;
        }

        &:after {
            content: '';
            background: rgba(0, 0, 0, 0.35);
            height: 180px;
            width: 105px;
            position: absolute;
            top: -30px;
            left: -49px;
            z-index: 1;
            -moz-transform: rotate(15deg);
            -ms-transform: rotate(15deg);
            -webkit-transform: rotate(15deg);
            -o-transform: rotate(15deg);
            transform: rotate(15deg);
        }

        .close {
            top: 3px;
            right: 7px;
            position: absolute;
            font-weight: 100;
            opacity: 0.7;
            font-weight:600;
        }

        &.yellow {
            background: rgba(230, 166, 22, 0.95);
            border: 1px solid #F9C03F;
            color: #fff;
        }

        &.red {
            background: #830000;
            border: 1px solid #b92525;
            color: #fff;

            .close {color:#fff;opacity: 0.95;    text-shadow: none;}

            b {color:#FF9F9F;}

            &:before {
                content: '';
                background: url("@{cdnUrl}icons.png") 0px -1158px no-repeat;
            }
        }

    }
}

.leaderboard{
    background: #FFF;
    padding: 10px 15px 15px;
    h1,h2{
        margin-top: 0;
    }

    ul{
        padding: 0;
        li{
            border-radius: 3px;
            margin-bottom: 2px;
            padding: 10px 10px 10px 50px;
            position: relative;
            background: rgba(0, 0, 0, 0) linear-gradient(to right, #000000 0%, #b7b7b7 47%, #939393 98%) repeat scroll 0 0;
            color: #fff;
            font-size: 16px;
            list-style: none;
            display: flex;
            align-items: center;
            &.blue {
                background: rgba(0, 0, 0, 0) linear-gradient(to right, #00193e 0%, #116aa8 51%, #00193e 100%) repeat scroll 0 0;
                .place {
                    top: 12px;
                }
            }
            &.gold {
                background: rgba(0, 0, 0, 0) linear-gradient(to right, #e67e00 0%, #ffc000 47%, #945700 100%) repeat scroll 0 0;
                color: #444;

                .user {
                    font-weight: 600;
                    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.76);
                }
                .prize {
                    position: absolute;
                    top: -20px;
                }
            }

            div{
                display: inline-block;
            }
            .place{
                background: rgba(0, 0, 0, 0) linear-gradient(to bottom, #f3f3f3 0%, #c3c3c3 100%) repeat scroll 0 0;
                border: 1px solid #ccc;
                border-radius: 28px;
                color: #000;
                left: 7px;
                line-height: 7px;
                padding: 9px 0;
                position: absolute;
                text-align: center;
                top: 4px;
                width: 25px;
            }
            .user{
                font-weight: 400;
                text-shadow: 0 1px 0 #000000;
                width: 31vw;
                font-size: 14px;
                text-overflow: ellipsis;
                overflow: hidden;
            }
            .points{
                background: #000000 none repeat scroll 0 0;
                border-radius: 5px;
                color: #fff;
                padding: 3px 10px 0;
                font-size: 13px;
            }
            .prize{

            }
        }
    }
}

/* SQUARED ONE */

.squaredOne {
    width: 28px;
    height: 28px;
    background: #fcfff4;
    display: inline-block;

    background: -webkit-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    background: -moz-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    background: -o-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    background: -ms-linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0 );
    margin: 0 16px;
    -webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
    -moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
    box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
    position: relative;

    &.error {
        background: -webkit-linear-gradient(top, #ffcfcf 0%, red 40%, #ffcfcf 100%);
        background: -moz-linear-gradient(top, #ffcfcf 0%, red 40%, #ffcfcf 100%);
        background: -o-linear-gradient(top, #ffcfcf 0%, red 40%, #ffcfcf 100%);
        background: -ms-linear-gradient(top, #ffcfcf 0%, red 40%, #ffcfcf 100%);
        background: linear-gradient(top, #ffcfcf 0%, red 40%, #ffcfcf 100%);
    }

    input[type="checkbox"] {
        margin: 5px 5px 0;
    }
}

.squaredOne label {
    cursor: pointer;
    position: absolute;
    width: 20px;
    height: 20px;
    left: 4px;
    top: 4px;

    -webkit-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
    -moz-box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);
    box-shadow: inset 0px 1px 1px rgba(0,0,0,0.5), 0px 1px 0px rgba(255,255,255,1);

    background: -webkit-linear-gradient(top, #222 0%, #45484d 100%);
    background: -moz-linear-gradient(top, #222 0%, #45484d 100%);
    background: -o-linear-gradient(top, #222 0%, #45484d 100%);
    background: -ms-linear-gradient(top, #222 0%, #45484d 100%);
    background: linear-gradient(top, #222 0%, #45484d 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222', endColorstr='#45484d',GradientType=0 );
}

.squaredOne label:after {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    background: #00bf00;

    background: -webkit-linear-gradient(top, #00bf00 0%, #009400 100%);
    background: -moz-linear-gradient(top, #00bf00 0%, #009400 100%);
    background: -o-linear-gradient(top, #00bf00 0%, #009400 100%);
    background: -ms-linear-gradient(top, #00bf00 0%, #009400 100%);
    background: linear-gradient(top, #00bf00 0%, #009400 100%);

    top: 2px;
    left: 2px;

    -webkit-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
    -moz-box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
    box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0,0,0,0.5);
}

.squaredOne label:hover::after {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
    filter: alpha(opacity=30);
    opacity: 0.3;
}

.squaredOne input[type=checkbox]:checked + label:after {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
}

.square-label {
    display: inline-block;
    font-family: 'Roboto Condensed';
    font-size: 15px;
}

.square-holder {
    display: flex;
    align-items: center;
}

section.leaderboard {

    h2 {
        color: #333;
    }

    div {
        color: #666;
        font-family: "Roboto","Helvetica Neue",Helvetica,Arial,sans-serif;
        font-size: 13px;
        line-height: 24px;
        letter-spaceing: 0.1px;
        -webkit-font-smoothing: antialiased;
    }
    .margin-top-20 {
        margin-top: 20px;
    }

    a {
        color: #2196f3;
    }

    .lb-table-position {
        width: 10%;
    }


}

.site-loading {
    background: rgba(0, 0, 0, 0.4);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    display: none;
    &.active {
        display: block;
    }
}

.react-cntdwn-timer {
    display: inline;
}

.bet-done {
    height: 70px;
    border: solid 4px #0ef500;
    position: fixed;
    bottom: 0;
    width: 93.5vw;
    background: green;
    display: none;
    color: #FFF;
    padding: 8px;
    font-size: 14px;
    font-family: Roboto;
    line-height: 18px;
    .title {
        font-weight: bold;
    }
    .content {
        margin-top: 5px;
    }
}

.player-props {
    width: 100%;
    border: 0;
    height: calc(~"100vh - 92px");
    background: #FFF;
}

.sr-no-data {
    display: none !important;
}

.restricted-region {

    .modal-dialog {
        width: 95%;
        margin: 30px auto;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        background: #fff;
        margin-top: 10%;
        font-size: 16px;
        -webkit-font-smoothing: antialiased;

        h1 {
            font-family: Oswald;
            color: #444;
            font-size: 18px;
            text-align: center;
            margin: 25px 0 30px 0;
            line-height: 25px;
        }

        .modal-content {
            height: 100%;
        }

        .modal-body {
            display: inline-block;
            width: 92%;
            text-align: center;

            .info-container {

                .green-title {
                    font-size: 18px;
                    color: #89C340;
                    font-family: Oswald;
                    margin-bottom: 5px;
                    line-height: 22px;
                }

                .info {
                    font-family: Arial;
                    color: #444;
                    font-size: 16px;
                    margin-bottom: 30px;

                    a {
                        color: #4990E2;
                    }
                }
            }
            hr {
                border: 0;
                border-top: 1px solid #d6d6d6;
                margin: 0 15px 14px 15px;
            }
        }

        .icon {
            margin-bottom: 20px;
            text-align: center;
        }

        .options {
            text-align: center;
            margin-top: 20px;
            margin-left: 64px;
            div {
                text-align: left;
                height: 110px;
                width: 45%;
                display: inline-block;
                vertical-align: top;
                &:first-child {
                    margin-right: 20px;
                }
                &:nth-child(3) {
                    margin-right: 20px;
                }
            }
        }

        .outgoing-button {
            width: 201px !important;
            height: 45px !important;
            background: #89C340;
            color: #FFF;
            font-size: 16px;
            font-family: Arial;
            border-radius: 5px;
            cursor: pointer;
            font-weight: normal;
            -webkit-font-smoothing: antialiased;
            border: solid 1px #979797;
            margin-top: 15px;
        }
    }

}

.stream-area {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
    text-align: center;
    font-size: 12px;
    background: #212935;
    color: #FFF;
    padding: 8px;

    &.video {
        display: block;
        justify-content: inherit;
        padding: 0;
        text-align: left;
    }

    .login-now {
        font-weight: bold;
        color: #79c42c;
        cursor: pointer;
    }

}

#wofCanvas {
	background: #111;
}

#wheel {
	width: 100%;
}