@mono:'consola', 'Courier New', Courier, monospace;

#main-container {
    min-height: 100vh;
}

header {
    background-color: #164fa5;
    color: white;
    padding: 3rem 4rem;
    padding-bottom: 7rem;
    position: relative;
    .code {
        margin-top: 1rem;
        font-size: 1.1rem;
        font-weight: normal;
        font-family: @mono;
    }
    .lang {
        position: absolute;
        right: 2rem;
        top:1.2rem;
        span {
            &:hover{
                cursor: pointer;
                color: #ddd;
            }
        }
    }
}

#app {
    width: 70%;
    min-width: 1140px;
    min-height: 20rem;

    margin-left: auto;
    margin-right: auto;
    padding: 1.4rem 1.8rem;
    box-shadow: 0 0 1rem rgba(0, 0, 0, 0.3);
    border-radius: 1rem;
    margin-top: -5rem;
    background-color: white;
    position: relative;
    
    .thread-block{
        height: 1.2rem;
        width: 1.2rem;
        background-color: #0066ff;
        display: inline-block;
        vertical-align: middle;
    }

    #task-count-group, #traffic-count-group{
        .btn {
            min-width: 3rem;
            &:focus{
                box-shadow: none;
            }
            &:active{
                background-color: #292d30;
            }
        }
    }
    .btn {
        &:focus{
            box-shadow: none;
        }
        &.btn-primary:active{
            background-color:#0a254d;
        }
        &.btn-danger:active{
            background-color:#5e0f17;
        }
    }
    .status{
        margin:0.5rem 0;
        .value {
            margin-right: 2rem;
            color: #757b80;
            font-family: @mono;
        }
    }


    .hidden {
        pointer-events: none;
        position: fixed;
        width: 0;
        height: 0;
        overflow: hidden;
        left: -150vw;
        top: -150vh;
    }
    .waterfall-wrapper {
        position: relative;
        width: 85%;
        margin: 1rem auto;
        box-shadow: 0 0 4px rgba(0, 0, 0, 0.1);
        padding: 1rem;
        margin-top: 2rem;
        .grid {
            position: absolute;
            width: 100%;
            height: 100%;
            top:0;
            left: 0;
            display: flex;
            pointer-events: none;
            .grid-line {
                height: 100%;
                flex: 1;
                &:nth-last-child(n+2){
                    border-right: 1px dashed rgba(94, 94, 94, 0.1);
                }
            }
        }
    }
    .pbar {
        height: 10px;
        background-color: gray;
        box-sizing: borderbox;
        border: 1px solid #333;
        &:hover{
            // background-color: rgb(11, 109, 189);
            filter: brightness(70%);
        }
    }
    .ruler {
        display: flex;
        justify-content: space-between;
        align-items: center;
        .time {
            font-family: @mono;
        }
    }

    .sources{
        cursor:default;
        max-height: 15rem;
        overflow-y: scroll;
        li {
            border-bottom: 1px solid #eee;
        }
    }
}


.github-fork-ribbon:before { background-color: #090; }

#about {
    padding: 2rem 15%;
    background-color: #0066ff;
    color: white;
    font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji";
    p {
        line-height: 1.5;
        font-size: 1.1rem;
    }
    h2 {
        font-size: 1.5rem;
    }
    h3 {
        font-size: 1.3rem;
    }
}

[data-lang="cn"] #en-about {
    display: none;
}

[data-lang="en"] #cn-about {
    display: none;
}