stremio-web/src/routes/Intro/styles.less

.intro-container {
    --form-width: 270px;
    --spacing: 16px;
    font-size: 14px;
}

.intro-container {
    position: relative;
    z-index: 0;
    width: 100%;
    height: 100%;
    background-image: url('/images/intro_background.jpg');
    background-size: cover;
    background-attachment: fixed;

    .overlay {
        position: absolute;
        z-index: 0;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: var(--color-backgrounddark80);
    }

    .scroll-content {
        position: absolute;
        z-index: 1;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        display: flex;
        flex-direction: row;
        overflow-y: auto;
        overflow-x: hidden;

        .form-container {
            width: var(--form-width);
            margin: auto;
            padding: 5% 0;

            .facebook-button, .submit-button, .switch-form-button, .guest-login-button {
                display: flex;
                flex-direction: row;
                align-items: center;
                justify-content: center;
                border: var(--focusable-border-size) solid transparent;
                cursor: pointer;

                .icon {
                    height: 1.7em;
                    margin-right: 1em;
                    fill: var(--color-surfacelighter);
                }

                .label {
                    font-size: 1em;
                    font-weight: 600;
                    color: var(--color-surfacelighter);
                }

                &:before {
                    content: "";
                    display: block;
                }

                &:focus, &:hover {
                    filter: brightness(1.2);
                }

                &:focus {
                    border-color: var(--color-surfacelighter);
                }

                &:hover {
                    border-color: transparent;
                }
            }

            .facebook-button {
                background: var(--color-secondarydark);

                .label {
                    font-size: 1.2em;
                }

                &:before {
                    padding-top: 25%;
                }
            }

            .facebook-statement {
                display: block;
                margin-top: 0.5em;
                margin-bottom: calc(var(--spacing) * 4);
                text-align: center;
                color: var(--color-surface);
            }

            .text-input {
                display: block;
                width: 100%;
                margin: var(--spacing) 0;
                padding: 0.5em 0.2em;
                font-size: 1em;
                line-height: 1em;
                border-bottom: 1px solid var(--color-surface);
                color: var(--color-surfacelighter);

                &::placeholder {
                    color: var(--color-surfacelight);
                }

                &:hover, &:focus {
                    border-bottom-color: var(--color-surfacelighter);

                    &::placeholder {
                        color: var(--color-surfacelighter);
                    }
                }
            }

            .forgot-password-link {
                display: block;
                margin: var(--spacing) 0;
                padding: 0.5em;
                border: var(--focusable-border-size) solid transparent;
                color: var(--color-surfacelight);
                text-align: right;
                cursor: pointer;

                &:hover, &:focus {
                    color: var(--color-surfacelighter);
                }

                &:focus {
                    border-color: var(--color-surfacelighter);
                }

                &:hover {
                    border-color: transparent;
                }
            }

            .consent-checkbox {
                margin: var(--spacing) 0;
                padding: 0.5em 0.2em;
                border: var(--focusable-border-size) solid transparent;

                &:focus-within {
                    border-color: var(--color-surfacelighter);
                }

                &:hover {
                    border-color: transparent;
                }
            }

            .error {
                margin: var(--spacing) 0;
                padding: 0.5em 0.2em;
                text-align: center;
                color: var(--color-signal1);
            }

            .submit-button {
                background-color: var(--color-primarydark);

                .label {
                    font-size: 1.2em;
                    font-weight: 600;
                }

                &:before {
                    padding-top: 20%;
                }
            }

            .switch-form-button, .guest-login-button {
                margin: var(--spacing) 0;
                padding: 0.8em 0.2em;

                .label {
                    font-size: 1.1em;
                }
            }
        }
    }
}