extension/ui/apps/account/App.scss

@import "../../styles/global";
@import "../../styles/artwork";
@import "../../styles/mixins";
@import "../../styles/vars";

main {
    position: relative;
    transition: opacity 1000ms;

    &.fade-out {
        opacity: 0;
        pointer-events: none;
    }
}

.art,
.content {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 50%;
}

.art {
    left: 0;
    background-image: $lume-base64; // embedded base64 instead of remote image to circumvent loading delay, subject to optimization (bg color)
    background-size: cover;
    background-position: 50%;
    border-right: 1px solid #363636;

    > div {
        position: absolute;
        inset: 0;
        transition: opacity 500ms;
    }

    .gradient-1 {
        background: linear-gradient(
                272.67deg,
                #1fc3f7 -27.49%,
                #33a653 49.4%,
                #62c554 87.63%
        );
        z-index: -1;
    }

    .gradient-2 {
        background: conic-gradient(
                from 180deg at 50% 50%,
                #33a653 -15.8deg,
                #080808 222.32deg,
                #33a653 344.2deg,
                #080808 582.32deg
        );
        opacity: 0;
        z-index: -2;
    }

    .gradient-3 {
        background: linear-gradient(
                272.67deg,
                #ed6a5e -27.49%,
                #0c0c0d 26.91%,
                #33a653 49.4%,
                #ed6a5e 99.62%
        );
        opacity: 0;
        z-index: -3;
    }
}

main.sign-in,
main.create-account {
    .art {
        .gradient-1 {
            opacity: 0;
        }

        .gradient-2 {
            opacity: 1;
        }
    }
}

main.create-account-step-4 {
    .art {
        .gradient-2 {
            opacity: 0;
            transition-delay: 4500ms;
        }

        .gradient-3 {
            opacity: 1;
            transition-delay: 4500ms;
        }
    }
}

.content {
    left: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 5.5em 3.75%;
    color: #fff;
    background: #080808;
    overflow: auto;

    > div:first-child {
        flex-grow: 1;
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        max-width: 45.8em;

        > div {
            flex-grow: 1;
        }
    }

    > div.grant-info {
        @include fluid-font-size(1rem);
        margin-top: 5em;
        max-width: 28.625em;
        line-height: 125%;
        color: #808080;
        transition: opacity 500ms;

        a {
            color: #fff;
        }
    }
}

h1 {
    @include fluid-font-size(3.125rem);
    font-family: $font-family-jetbrains-mono;
    line-height: 110%;
    text-shadow: 0.017em 0.017em 0.034em #000;
}

p {
    @include fluid-font-size(1.25rem);
    margin-top: 1.4em;
    line-height: 122%;
    color: #808080;
}

#content-text-wrapper {
    position: relative;
    margin-bottom: 6em;
    transition: height 500ms, opacity 500ms;

    > div {
        top: 0;
        left: 0;
        right: 0;
        transition: opacity 500ms;
    }
}

#content-text-default {
    z-index: 2;
}

#content-text-create-account,
#content-text-show-key {
    position: absolute;
    opacity: 0;
    z-index: 1;
}

#switch {
    position: relative;
    transition: height 500ms;

    > div {
        top: 0;
        left: 0;
        right: 0;
        transition: opacity 500ms;
    }
}

#switch-show-key {
    position: absolute;
    opacity: 0;
    z-index: -1;
}

.warning {
    display: flex;
    align-items: center;
    gap: 2em;
    color: #e15858;

    svg {
        flex-shrink: 0;
        @include fluid-width-height(3.5rem, 3.5rem);
        margin-bottom: -0.5em;
    }

    div {
        @include fluid-font-size(1.25rem);
        line-height: 122%;
    }
}

.content-action-wrapper {
    position: relative;
    height: 6.2em;
    transition: height 500ms, margin-bottom 500ms;
    transition-timing-function: cubic-bezier(0.68, -0.6, 0.32, 1.6);
}

.content-action-sign-in {
    position: absolute;
    inset: 0;
    transition: opacity 500ms;

    .content-action-inner {
        position: relative;

        .sign-in-btn {
            transition: opacity 250ms;
        }

        .sign-in-form {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            opacity: 0;
            transition: opacity 250ms 250ms;
            z-index: -1;

            .input-wrapper {
                display: flex;
                height: 6.2em;

                input {
                    box-sizing: content-box;
                    flex: 1;
                    display: inline-block;
                    @include fluid-font-size(1.25rem);
                    height: 1em;
                    padding: 1em;
                    background: #080808;
                    border: 0.05em solid #777;
                    border-radius: 0.25em;
                    text-align: center;
                    transition: border-color 250ms;

                    &::placeholder {
                        color: #808080;
                    }

                    &:hover {
                        border-color: #a1a1a1;
                    }

                    &:focus {
                        outline: none;
                        border-color: #fff;
                    }
                }
            }

            .btn-wrapper {
                margin-top: 3em;
            }
        }
    }
}

.content-action-create-account {
    position: absolute;
    inset: 0;
    transition: opacity 500ms;
    opacity: 0;
    z-index: -1;

    .content-action-inner {
        position: relative;

        .create-account-ready-btn {
            transition: opacity 250ms;
        }

        .create-account-ready {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            opacity: 0;
            transition: opacity 250ms;
            z-index: -1;
        }

        .warning {
            height: 5.6em;
            margin-top: 2em;
        }

        .create-account-show-key-btn {
            margin-top: 4em;

            button {
                position: relative;
                padding-right: 4.1em;
                overflow: hidden;

                &::after {
                    content: "";
                    position: absolute;
                    top: 0;
                    right: 0;
                    bottom: 0;
                    width: 3.1em;
                    color: #fff;
                    background-color: #62c554;
                    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"><path stroke-linecap="round" stroke-linejoin="round" d="M8.25 4.5l7.5 7.5-7.5 7.5" /></svg>');
                    background-size: 1.125em 1.125em;
                    background-repeat: no-repeat;
                    background-position: 50%;
                    transition: background-color 500ms;
                }

                &:hover::after {
                    background-color: #6ee65d;
                }
            }
        }

        .create-account-back-btn {
            margin-top: 2em;

            button {
                @include fluid-font-size(1.125rem);
                line-height: 1;
                color: #fff;
                padding: 1.25em;

                span {
                    background: #080808;
                    padding: 0 0.75em;
                }
            }
        }
    }
}

.separator {
    position: relative;
    height: 1px;
    background: #62c554;
    margin: 4.5em 0;
    transition: background 500ms, opacity 500ms;

    span {
        @include fluid-font-size(1.25rem);
        display: inline-block;
        position: absolute;
        left: 50%;
        top: 50%;
        padding: 0 0.75em;
        color: #62c554;
        background: #080808;
        transform: translate(-50%, -50%);
        transition: color 500ms;
    }
}

.btn-stack {
    display: grid;
    transition: opacity 500ms;

    > div {
        grid-column-start: 1;
        grid-row-start: 1;
        transition: opacity 500ms;
    }
}

.create-account-btn {
    opacity: 1;
    z-index: 2;
}

.create-account-gray-btn,
.create-account-cancel-btn {
    opacity: 0;
    z-index: 1;
}

.show-key-wrapper {
    .warning {
        height: 0;
        margin: 1.6em 0;
        opacity: 0;
        transition: height 500ms, margin 500ms, opacity 500ms;
    }

    .show-key-copy-btn button {
        display: flex;
        align-items: center;
        justify-content: center;

        svg {
            @include fluid-width-height(1.75rem, 1.75rem);
            margin: -50% 0.625em -50% 0;
            color: #d9d9d9;
            transition: color $transition-duration;
        }

        &:hover {
            svg {
                color: inherit;
            }
        }

        &.success {
            color: #62c554;
            border-color: #62c554;

            svg {
                color: #62c554;
            }
        }

        &.error {
            color: #f66060;
            border-color: #f66060;

            svg {
                color: #f66060;
            }
        }
    }

    .btn-stack {
        margin-top: 1.8em;
    }
}

.show-key-continue-btn {
    z-index: 2;
}

.show-key-login-btn {
    z-index: 1;
    opacity: 0;
}

.show-key-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.6em;

    > div {
        position: relative;
        @include fluid-font-size(1.25rem);
        line-height: 1;
        padding: 0.8em 0.8em 0.8em 1.6em;
        border: 0.05em solid #444;
        border-radius: 0.25em;

        span {
            position: absolute;
            @include fluid-font-size(1rem);
            top: 0.5em;
            left: 0.5em;
            color: #969696;
        }
    }
}

main.sign-in {
    .content-action-wrapper {
        height: 15.4em;
    }

    .content-action-sign-in {
        .sign-in-btn {
            opacity: 0;
        }

        .sign-in-form {
            z-index: 1;
            opacity: 1;
        }
    }

    .separator {
        background: #777;

        span {
            color: #777;
        }
    }

    .create-account-btn {
        opacity: 0;
        z-index: 1;
    }

    .create-account-gray-btn {
        opacity: 1;
        z-index: 2;
    }
}

main.create-account {
    #content-text-default {
        opacity: 0;
        z-index: 1;
    }

    #content-text-create-account {
        opacity: 1;
        z-index: 2;
    }

    .content-action-sign-in {
        opacity: 0;
        z-index: 1;
    }

    .content-action-create-account {
        opacity: 1;
        z-index: 2;
    }

    .separator {
        background: #777;

        span {
            color: #777;
        }
    }

    .create-account-btn {
        opacity: 0;
        z-index: 1;
    }

    .create-account-cancel-btn {
        opacity: 1;
        z-index: 2;
    }

    &.create-account-step-2,
    &.create-account-step-3 {
        #content-text-wrapper,
        .separator,
        #switch-default .btn-stack,
        .grant-info {
            transition-delay: 2s;
            opacity: 0.15;
            pointer-events: none;
        }

        .content-action-wrapper {
            animation: 2500ms create-account-warning;
            height: 25.8em;
            margin-bottom: -7.6em;
        }

        .content-action-create-account {
            overflow: hidden;
        }

        .create-account-ready-btn {
            opacity: 0;
            z-index: 1;
        }

        .create-account-ready {
            opacity: 1;
            z-index: 2;
        }
    }

    &.create-account-step-3,
    &.create-account-step-4 {
        #content-text-wrapper,
        .separator,
        #switch-default .btn-stack,
        .grant-info {
            transition-delay: 0s;
            opacity: 1;
        }

        .grant-info {
            pointer-events: auto;
        }

        #content-text-default {
            opacity: 0;
            z-index: 1;
        }

        #content-text-create-account {
            opacity: 0;
            z-index: 1;
        }

        #content-text-show-key {
            opacity: 1;
            z-index: 2;
        }

        #switch-default {
            opacity: 0;
            z-index: 1;
            pointer-events: none;
        }

        #switch-show-key {
            opacity: 1;
            z-index: 2;
        }
    }

    &.create-account-step-4 {
        #content-text-wrapper,
        .show-key-copy-btn,
        #switch-show-key .btn-stack,
        .grant-info {
            animation: 5000ms save-key-warning;
        }

        .show-key-wrapper .warning {
            height: 5.6em;
            margin: 3.2em 0;
            opacity: 1;
        }

        .show-key-continue-btn {
            z-index: 1;
            opacity: 0;
            transition-delay: 4500ms;
        }

        .show-key-login-btn {
            z-index: 2;
            opacity: 1;
            transition-delay: 4500ms;
        }
    }
}

@media screen and (max-width: 48rem) {
    .art {
        display: none;
    }

    .content {
        left: 0;
        width: 100%;
    }
}

@keyframes create-account-warning {
    0% {
        height: 6.2em;
        margin-bottom: 0;
    }

    20% {
        height: 9.6em;
    }

    80% {
        height: 9.6em;
        margin-bottom: 0;
    }

    100% {
        height: 25.8em;
        margin-bottom: -7.6em;
    }
}

@keyframes save-key-warning {
    0% {
        opacity: 1;
    }

    10% {
        opacity: 0.15;
    }

    90% {
        opacity: 0.15;
    }

    100% {
        opacity: 1;
    }
}