cms_thermo_active/Step/wwwroot/assets/styles/base/modals.less

//  main: ../style.less
@import "grid-system.less";
@import "colors.less";
@import "fonts.less";
@modal: modal;
@login: login;
@loader: loader;
@backdrop: backdrop;
@font-family: 'Work Sans',
sans-serif;
@modal-min-width: 500px;
@modal-min-height: 400px;
@modal-header-height: 64px;
@modal-login-height: 560px;
@modal-login-width: 600px;
@modal-login-top: @modal-login-height /2;
@modal-login-left: @modal-login-width /2;
@modal-machine-height: 700px;
@modal-machine-width: 600px;
@modal-machine-top: @modal-machine-height /2;
@modal-machine-left: @modal-machine-width /2;
@modal-loader-height: 392px;
@modal-loader-width: 896px;
@modal-loader-top: @modal-loader-height /2;
@modal-loader-left: @modal-loader-width /2;
@progress-back-color: #1791ff;
@progress-white-color: #fff;
.@{modal} {
    min-width: @modal-min-width;
    height: @modal-min-height;
    box-shadow: @shadows;
    z-index: 1000;
    background-color: @color-background-white;
    position: absolute;
    header {
        border-bottom: 2px solid @color-silver;
        height: @modal-header-height;
        line-height: @modal-header-height;
        position: relative;
        box-sizing: content-box;
        button.close {
            position: absolute;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            border: none;
            background-color: #fff;
            color: @color-darkish-blue;
            top: calc(50% - 20px);
            right: 14px;
            font-size: 16px;
            cursor: pointer;
        }
    }
    footer {
        align-self: flex-end;
        height: @modal-header-height;
        line-height: @modal-header-height;
        border-top: 2px solid @color-silver;
    }
}

.@{modal}.@{login},
.@{modal}.user-info {
    width: @modal-login-width;
    height: @modal-login-height;
    top: calc(~'50%' - @modal-login-height /2);
    left: calc(~'50%' - @modal-login-width /2);
    header {
        background-color: @color-darkish-blue;
        color: @color-white;
        font-family: @font-family;
        font-weight: 600;
        font-size: 24px;
        text-align: left;
        padding: 0px 23px;
    }
}

.@{modal}.machine-info {
    width: @modal-machine-width;
    height: @modal-machine-height;
    top: calc(~'50%' - @modal-machine-height /2);
    left: calc(~'50%' - @modal-machine-width /2);
    header {
        background-color: @color-darkish-blue;
        color: @color-white;
        font-family: @font-family;
        font-weight: 600;
        font-size: 24px;
        text-align: left;
        padding: 0px 23px;
    }
    img {
        display: block;
        width: 88px;
        height: 88px;
        margin: auto;
        margin-top: 48px;
        margin-bottom: 40px;
    }
}

.@{modal}.@{loader} {
    width: @modal-loader-width;
    height: @modal-loader-height;
    top: calc(~'50%' - @modal-loader-height /2);
    left: calc(~'50%' - @modal-loader-width /2);
    header {
        background-color: @color-darkish-blue;
        color: @color-white;
        font-family: @font-family;
        font-weight: 600;
        font-size: 24px;
        text-align: left;
        padding: 0px 23px;
    }
    h2 {
        font-size: 18px;
        text-align: left;
        color: @color-input-light;
        width: 592px;
        margin: auto;
        margin-top: 76px;
        margin-bottom: 76px;
    }
    .progress-line {
        height: 30px;
        width: 592px;
        margin: auto;
        i {
            // width: 25px;
            // height: 25px;
            font-size: 25px;
            margin-right: 15px;
            display: block;
            float: left;
            color: @progress-back-color;
        }
        progress {
            width: 552px;
            height: 24px;
            font-size: 14px;
            float: left;
            background-color: white; // color: @progress-white-color;
            position: relative;
        }
        progress:after {
            display: block;
            content: attr(value) + " %";
            position: absolute;
            height: 24px;
            top: 0;
            left: 10px;
            line-height: 24px;
            color: #fff;
            font-weight: bold;
        }
        progress[value]::-webkit-progress-value {
            color: @progress-white-color;
            background-color: @progress-back-color;
            border-radius: 12px;
        }
        progress[value]::-webkit-progress-bar {
            background-color: #fff;
            border-radius: 12px;
            box-shadow: inset 0 1px 3px 0 rgba(0, 0, 0, 0.5);
        }
    }
}

.@{backdrop} {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    -webkit-backdrop-filter: blur(10px);
    background-color: @color-backdrop;
    z-index: 900;
}