trezor-wallet/src/styles/modal.less

.modal-container {
    position: fixed;
    z-index: 10000;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background: rgba(0, 0, 0, 0.35);
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: auto;
    padding: 20px; 

    .modal-window {
        margin: auto;
        // padding: 24px 48px;
        position: relative;
        border-radius: 4px;
        background-color: @color_white;
        text-align: center;
        // overflow: hidden;
    }

    h3 {
        color: @color_text_primary;
        font-size: 16px;
        font-weight: 500;
        margin-top: 14px;
    }
    p {
        margin: 5px 0px;
        font-weight: normal;
        color: @color_text_secondary;
        font-size: 12px;
    }

    .confirm-tx {
        width: 390px; // address overflow

        .header {
            padding: 24px 48px;
            &:before {
                .icomoon-T1;
                font-size: 52px;
                color: @color_text_secondary;
            }
            h3 {
                margin: 0;
            }
        }
        .content {
            border-top: 1px solid @color_divider;
            background: @color_main;
            padding: 24px 48px;

            label {
                font-size: 10px;
                color: @color_text_secondary;
            }

            p {
                font-size: 12px;
                font-weight: 400;
                color: @color_text_primary;
            }
        }
    }

    .confirm-address {
        width: 390px; // address overflow
        
        .header {
            padding: 24px 48px;
            &:before {
                .icomoon-T1;
                font-size: 52px;
                color: @color_text_secondary;
            }
            h3 {
                margin: 0;
            }
        }
        .content {
            border-top: 1px solid @color_divider;
            background: @color_main;
            padding: 24px 48px;

            label {
                font-size: 12px;
                color: @color_text_secondary;
            }

            p {
                font-size: 12px;
                font-weight: 400;
                color: @color_text_primary;
            }
        }
    }

    .confirm-address-unverified {
        width: 370px;
        padding: 24px 48px;

        h3 {
            word-break: break-all;
        }

        button:not(.close-modal) {
            width: 100%;
            margin-top: 12px;
        }
    }

    .duplicate,
    .remember {
        width: 360px;
        padding: 24px 48px;

        h3 {
            word-break: break-all;
        }

        p {
            padding: 14px 0px;
        }

        .row {
            position: relative;
            text-align: left;
            padding-bottom: 20px;

            label {
                display: block;
                padding-bottom: 6px;
                text-align: left;
                color: @color_text_secondary;
            }

            .error {
                position: absolute;
                left: 0px;
                bottom: 0px;
                font-size: 12px;
                color: @color_error_primary;
            }
        }

        button:not(.close-modal) {
            width: 100%;
            margin-top: 12px;
            span {
                position: relative;
            }
        }

        .loader-circle {
            position: absolute;
            top: 0;
            bottom: 0;
            left: -36px;
            margin: auto;
            p {
                margin: 0;
                padding: 0;
                color: @color_white;
            }
        }
    }

    .close-modal {
        position: absolute;
        top: 0;
        right: 0;
        padding: 12px;

        &:after {
            .icomoon-close;
        }
    }

    .pin {
        padding: 24px 48px;
        .pin-row {
            button {
                width: 80px;
                height: 80px;
                margin-top: 15px;
                margin-left: 10px;
                font-size: 22px;
                font-weight: 600;
                color: @color_text_primary;
                border: 1px solid @color_divider;
                background: @color_white;
                transition: all 0.3s;
                &:first-child {
                    margin-left: 0px;
                }
                &:hover {
                    color: @color_text_primary;
                    border-color: @color_text_secondary;
                }
                &:active {
                    color: @color_text_primary;
                    background: @color_divider;
                    border-color: @color_divider;
                }

            }
        }
    
        .pin-input-row {
            margin-top: 24px;
            display: inline-block;
            position: relative;
        }
    
        input {
            letter-spacing: 6px;
            line-height: 48px;
            font-weight: 600;
            font-size: 32px;
            height: auto;
            padding: 0px 31px;
            color: @color_text_primary;
            background: transparent;
        }
    
        .pin-backspace {
            position: absolute;
            right: 14px;
            top: 0;
            bottom: 0;
            margin: auto 0;
            padding: 0;
            &:after {
                .icomoon-back;
            }
        }
    
        a {
            color: @color_green_primary;
        }
    }

    .passphrase {
        padding: 24px 48px;

        h3 {
            max-width: 260px;
            word-break: break-all;
        }

        .row {
            position: relative;
            text-align: left;
            padding-top: 24px;
            label:not(.custom-checkbox) {
                display: block;
                padding-bottom: 6px;
                color: @color_text_secondary;
            }

            .error {
                position: absolute;
                left: 0px;
                bottom: -19px;
                font-size: 12px;
                color: @color_error_primary;
            }
        } 
    }
    
    input[type="text"],
    input[type="password"] {
        width: 260px;
        // box-shadow: none;
        // border-radius: 0px;
        // border: 1px solid @color_divider;
        height: auto;

        .placeholder({
            color: @color_divider;
        });
    }

    .submit {
        width: 100%;
        margin-top: 24px;
        margin-bottom: 14px;
    }
}

.fade-enter {
    opacity: 0.01;
}

.fade-enter.fade-enter-active {
    opacity: 1;
    transition: opacity 1000ms ease-in;
}

.fade-exit {
    opacity: 1;
}

.fade-exit.fade-exit-active {
    opacity: 0.01;
    transition: opacity 800ms ease-in;
}