/* Background login */
/* Use native svg background to make your "filebrowser" load faster */
/* I love this website for generating svg backgrounds https://bgjar.com/ */
#login {
    background-image: url(/static/img/bg.svg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}

/* Custom logo properties */
/* My logo size is 163×34 pixels, I just convert png logo to svg with inkscape. */
#login img {
    width: 20em;
    height: 6em;
    margin: 0 auto;
    display: block;
    user-select: none;
    /* Pointer block to logo */
    pointer-events: none;
}

header img {
    height: 2.5em;
    user-select: none;
    /* Pointer block to logo (At header)*/
    pointer-events: none;
}

/* Hide brand title on login page (Optional) */
#login h1 {
    display: none;
}

/* Fixed login form box */
#login form {
    position: fixed;
    top: 50%;
    left: 50%;
    padding-bottom: 1.5em;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    max-width: 27em;
    max-height: 20em;
    width: 90%;
    height: 90%;
    /* Fix with Flex */
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    /* From https://css.glass */
    background: rgba(0, 0, 0, 0.19);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
}

/* Fixed login error warning on login page */
#login .wrong {
    background: var(--red);
    color: #fff;
    padding: .5em;
    width: 19.9em;
    text-align: center;
    -webkit-animation: opac .2s forwards;
    animation: opac .2s forwards;
}

/* Fixed user input box (Username & Password) */
.input--block {
    margin-bottom: .5em;
    display: block;
    max-width: 20em;
}

/* Fixed login button */
.button--block {
    margin: 0 0 .5em;
    display: block;
    max-width: 20em;
    width: 100%;
}

/* Fixed view for Samsung Galaxy Fold */
@media screen and (max-width: 280px) {
    #login form {
        height: 40%;
    }

    #login .wrong {
        width: 15.6em;
        font-size: 0.8em;
    }

    #login img {
        width: 13em;
    }

    .input--block {
        width: 80%;
        font-size: 0.9em;
    }

    .button--block {
        width: 80%;
        font-size: 0.9em;
    }
}

/* Theming */
/* changing the root color is my version of the easiest theme. how about you? lol */
:root {
/* The current color palette is Jellyfin's default theme */
    --background: #101010 !important;
    --surfacePrimary: #202020 !important;
    --surfaceSecondary: #292929 !important;
    --blue: #1c4c5c !important;
    --dark-blue: #007ea8 !important;
    --red: #ca0000 !important;
    --icon: #007ea8 !important;
}

/*
More properties (Just add it to :root to enable it, and change the color)

    --background: #141D24;
    --surfacePrimary: #20292F;
    --surfaceSecondary: #3A4147;
    --divider: rgba(255, 255, 255, 0.12);
    --icon: #ffffff;
    --textPrimary: rgba(255, 255, 255, 0.87);
    --textSecondary: rgba(255, 255, 255, 0.6);

    --blue: #2196f3;
    --dark-blue: #1e88e5;
    --red: #f44336;
    --dark-red: #d32f2f;
    --moon-grey: #f2f2f2;
    --icon-red: #da4453;
    --icon-orange: #f47750;
    --icon-yellow: #fdbc4b;
    --icon-green: #2ecc71;
    --icon-blue: #1d99f3;
    --icon-violet: #9b59b6;
*/