<commit_before>@import '../../../theme/colors.css';

.login {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-self: center;
    justify-content: center;
    background: var(--login-background-color);
    width: 100%;
}

.login__menu {
    display: flex;
    flex-direction: column;
    align-self: center;
    justify-content: center;

    & .login__logo {
        position: absolute;
        margin-top: -100px;
    }

    & .login__logo__main {
        position: relative;
    }

    & .login__logo__before {
        position: absolute;
        top: 0;
        left: 2px;
        text-shadow: -2px 0 red;
        width: 100%;
        height: 100%;
        background: #333;
        clip: rect(44px, 300px, 56px, 0); /* A box from (0, 44) to (300, 56) => top, right, bottom, left */
        animation: glitch-anim-1 1s infinite linear alternate-reverse;
    }

    & .login__logo__after {
        position: absolute;
        top: 0;
        left: -2px;
        text-shadow: -2px 0 blue;
        width: 100%;
        height: 100%;
        background: #333;
        clip: rect(44px, 300px, 56px, 0); /* A box from (0, 44) to (300, 56) => top, right, bottom, left */
        animation: glitch-anim-2 1s infinite linear alternate-reverse;
    }

    & .login__input {
        text-align: center;
        width: 300px;
        height: 400px;
        padding-top: 360px;        

        & .login__input__field input {
            border: 1px solid var(--login-border-color);
            padding: 0.5em;
            font-size: 15px;
            line-height: 1.2em;
            width: 80%;
            background: #444;
            color: var(--login-text-color);
            font-family: helvetica, sans-serif;
            background: linear-gradient(to bottom, #222, #444);
        }

        &:hover {

        }
    }
}

.signup {
    display: flex;
    flex-direction: column;
    align-self: center;
    justify-content: center;
}

.signup__logo {
    position: absolute;
    top: 20px;
}

.signup__logo__main {
    position: relative;
}

.signup__logo__before {
    position: absolute;
    top: 0;
    left: 2px;
    text-shadow: -2px 0 red;
    width: 100%;
    height: 100%;
    background: #333;
    clip: rect(44px, 300px, 56px, 0); /* A box from (0, 44) to (300, 56) => top, right, bottom, left */
    animation: glitch-anim-1 1s infinite linear alternate-reverse;
}

.signup__logo__after {
    position: absolute;
    top: 0;
    left: -2px;
    text-shadow: -2px 0 blue;
    width: 100%;
    height: 100%;
    background: #333;
    clip: rect(44px, 300px, 56px, 0); /* A box from (0, 44) to (300, 56) => top, right, bottom, left */
    animation: glitch-anim-2 1s infinite linear alternate-reverse;
}

.signup__body {
    text-align: center;
    width: 600px;
    height: 500px;
    padding-top: 200px;
}

@keyframes glitch-anim-1 {
    @for $i from 0 to 100 by 10 {
        $(i)% { clip: rect(random(0,300,{round: true})px, 300px, random(0,300,{round: true})px, 0); }
    }
}

@keyframes glitch-anim-2 {
    @for $i from 0 to 100 by 10 {
        $(i)% { clip: rect(random(0,300,{round: true})px, 300px, random(0,300,{round: true})px, 0); }
    }
}<commit_msg>feat: first definition of the create character screen<commit_after>@import '../../../theme/colors.css';

.login {
    flex: 1;
    display: flex;
    flex-direction: row;
    align-self: center;
    justify-content: center;
    background: var(--login-background-color);
    width: 100%;
}

.login__menu {
    display: flex;
    flex-direction: column;
    align-self: center;
    justify-content: center;

    & .login__logo {
        position: absolute;
        margin-top: -100px;
    }

    & .login__logo__main {
        position: relative;
    }

    & .login__logo__before {
        position: absolute;
        top: 0;
        left: 2px;
        text-shadow: -2px 0 red;
        width: 100%;
        height: 100%;
        background: #333;
        clip: rect(44px, 300px, 56px, 0); /* A box from (0, 44) to (300, 56) => top, right, bottom, left */
        animation: glitch-anim-1 1s infinite linear alternate-reverse;
    }

    & .login__logo__after {
        position: absolute;
        top: 0;
        left: -2px;
        text-shadow: -2px 0 blue;
        width: 100%;
        height: 100%;
        background: #333;
        clip: rect(44px, 300px, 56px, 0); /* A box from (0, 44) to (300, 56) => top, right, bottom, left */
        animation: glitch-anim-2 1s infinite linear alternate-reverse;
    }

    & .login__input {
        text-align: center;
        width: 300px;
        height: 400px;
        padding-top: 360px;        

        & .login__input__field input {
            border: 1px solid var(--login-border-color);
            padding: 0.5em;
            font-size: 15px;
            line-height: 1.2em;
            width: 80%;
            background: #444;
            color: var(--login-text-color);
            font-family: helvetica, sans-serif;
            background: linear-gradient(to bottom, #222, #444);
        }

        &:hover {

        }
    }
}

.signup {
    display: flex;
    flex-direction: column;
    align-self: flex-start;
    align-content: center;
}

.signup__logo {
    display: flex;
    align-self: center;
    position: absolute;
    top: 20px;
}

.signup__logo__main {
    position: relative;
}

.signup__logo__before {
    position: absolute !important; /* Overwriting Semantic UI */
    top: 0;
    left: 1px;
    text-shadow: -1px 0 red;
    width: 100% !important; /* Overwriting Semantic UI */
    height: 100% !important; /* Overwriting Semantic UI */
    background: #333;
    clip: rect(22px, 150px, 28px, 0); /* A box from (0, 22) to (150, 28) => top, right, bottom, left */
    animation: glitch-anim-1-small 1.5s infinite linear alternate-reverse;
}

.signup__logo__after {
    position: absolute !important; /* Overwriting Semantic UI */
    top: 0;
    left: -1px;
    text-shadow: -1px 0 blue;
    width: 100% !important; /* Overwriting Semantic UI */
    height: 100% !important; /* Overwriting Semantic UI */
    background: #333;
    clip: rect(22px, 150px, 28px, 0); /* A box from (0, 22) to (150, 28) => top, right, bottom, left */
    animation: glitch-anim-2-small 1.5s infinite linear alternate-reverse;
}

.signup__body {
    text-align: center;
    display: flex;
    padding-top: 200px;
}

@keyframes glitch-anim-1 {
    @for $i from 0 to 100 by 10 {
        $(i)% { clip: rect(random(0,300,{round: true})px, 300px, random(0,300,{round: true})px, 0); }
    }
}

@keyframes glitch-anim-2 {
    @for $i from 0 to 100 by 10 {
        $(i)% { clip: rect(random(0,300,{round: true})px, 300px, random(0,300,{round: true})px, 0); }
    }
}

@keyframes glitch-anim-1-small {
    @for $i from 0 to 100 by 10 {
        $(i)% { clip: rect(random(0,150,{round: true})px, 150px, random(0,150,{round: true})px, 0); }
    }
}

@keyframes glitch-anim-2-small {
    @for $i from 0 to 100 by 10 {
        $(i)% { clip: rect(random(0,150,{round: true})px, 150px, random(0,150,{round: true})px, 0); }
    }
}
{'fraction_non_alphanumeric': 0.14463805071539879, 'fraction_numerical': 0.06346508003966568, 'mean_word_length': 2.1517857142857144, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 11, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '5213391', 'n_tokens_mistral': 2777, 'n_tokens_neox': 2400, 'n_words': 653}