@import "../mixins/colors";

body#install {
    grid-template-columns: auto;
    justify-content: center;
}

.stage {
    $image-path: '../images/';
    $icon-path: '#{$image-path}icons/';

    background: #fff;
    margin: 0 auto;
    margin-top: 1em;
    padding: 1em;
    width: 800px;

    &.ui-dialog {
        position: relative;
        top: auto;
        left: auto;

        &.ui-widget.ui-widget-content .ui-dialog-titlebar {
            background-image: url('#{$image-path}logos/studip-logo.svg');
            background-position: right 10px top 10px;
            background-repeat: no-repeat;
            background-size: 120px;

            div:first-of-type {
                font-size: 20px;
                font-weight: lighter;
                line-height: 1;
            }
        }

        .ui-dialog-content.ui-widget-content {
            min-height: 15em;
            padding: 0.5em 1em;

            display: flex;
            align-items: start;
            flex-direction: row;
            flex-wrap: wrap;

            > * {
                box-sizing: border-box;
                flex: 0 0 100%;
            }
            > .half-sized {
                flex: 1;
            }
        }
    }

    footer {
        border-top: 1px solid #444;
        text-align: center;

        ul {
            list-style: none;
            margin: 0;
            padding: 0;

            li {
                display: inline-block;

                &:not(:first-child)::before {
                    content: ' | ';
                }
            }
        }
    }

    dl {
        dt {
            box-sizing: border-box;
            clear: left;
            float: left;
            min-width: 200px;
            padding-right: 0.5em;
        }
        dd {
            box-sizing: border-box;
            margin-left: 200px;
            width: calc(100% - 200px);
            word-break: break-all;

            &.failed,
            &.success,
            &.notice {
                &::before {
                    display: inline-block;
                    height: 16px;
                    width: 16px;

                    vertical-align: text-top;
                }
            }

            &.failed {
                &::before {
                    content: url('#{$icon-path}red/decline.svg') ' ';
                }
                color: var(--red);
            }
            &.success {
                &::before {
                    content: url('#{$icon-path}green/accept.svg') ' ';
                }
                color: var(--green);
            }
            &.notice {
                &::before {
                    content: url('#{$icon-path}blue/info-circle.svg') ' ';
                }
                color: var(--black);
            }

            code {
                font-weight: bold;
                white-space: nowrap;
            }
            textarea {
                width: 100%;
                height: 40em;
            }
        }

        &::after {
            clear: both;
            display: block;
            content: '';
            height: 0px;
            visibility: hidden;
        }

        &.requests {
            dt:not(.succeeded):not(.failed):not(.requesting) {
                background: url('#{$icon-path}/black/date.svg') no-repeat right center;
                background-size: 16px;
            }
            dt.requesting {
                background: url('#{$image-path}/loading-indicator.svg') no-repeat top 3px right;
                background-size: 16px;
            }

            dd.success,
            dd.failed,
            progress {
                display: none;
            }

            dt.succeeded + dd.success,
            dt.failed + dd.success + dd.failed {
                display: block;
            }
            dt.event-sourced + dd.success + dd.failed + progress {
                display: inline-block;
            }

            progress {
                -webkit-appearance: none;
                -moz-appearance: none;
                appearance: none;

                border: 1px solid var(--black);
                color: var(--base-color-60);
                margin-left: 1em;
                width: 550px;
                height: 20px;

                &::-moz-progress-bar,
                &::-webkit-progress-bar {
                    background-color: var(--base-color-60);
                }

                + div {
                    position: absolute;
                    width: 550px;
                    height: 22px;

                    &::before {
                        position: absolute;
                        left: 2px;
                        top: 2px;
                        content: attr(data-file);
                    }

                    &::after {
                        position: absolute;
                        right: 2px;
                        top: 2px;
                        content: attr(data-percent) '%';
                    }
                }
            }
        }
    }

    p {
        text-align: justify;
    }

    code {
        background-color: var(--dark-gray-color);
        color: var(--white);
        padding: 2px 4px;
    }

    div.type-text {
        &.required {
            label::after {
                color: var(--red);
                content: '*';
            }
        }
    }
    label {
        &:not(.plain) {
            display: block;
            float: left;
            padding: 2px;
            width: 200px;
        }
        + input {
            display: block;
            margin: 1px;
            margin-left: 100px;
        }

        &.vertical {
            float: none;
            width: auto;

            + input {
                margin-left: 0;
                width: 100%;
            }
        }
    }

    .messagebox {
        margin-bottom: 2em;
    }

    strong.required::after {
        color: var(--red);
        content: '*';
    }

    #progress {
        box-sizing: border-box;

        -webkit-appearance: none;
        -moz-appearance: none;
        appearance: none;

        color: var(--base-color-60);
        margin: 0 1em -4px;
        width: calc(100% - 2em);
        height: 4px;

        &::-moz-progress-bar,
        &::-webkit-progress-bar {
            background-color: var(--base-color-60);
        }
    }
}