/*
This file contains the style that belongs to base.html.
*/

@import url('style.css');

.bar {
    list-style: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
}

.bar li a {
    display: block;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

.logo {
    background-color: var(--header-bg);
}

.logo i {
    display: none;
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    background-color: transparent;
    background-origin: content-box;
    padding: 8px;
    height: 100%;
}

.logo-large {
    width: 230px;
}

.logo-small {
    width: 76px;
}

[data-theme="light"][data-sidenav-size="default"] #logo_light_large,
[data-theme="light"][data-sidenav-size="on-hover"] #logo_light_large,
[data-theme="dark"][data-sidenav-size="default"] #logo_dark_large,
[data-theme="dark"][data-sidenav-size="on-hover"] #logo_dark_large,
[data-theme="light"][data-sidenav-size="condensed"] #logo_light_small,
[data-theme="light"][data-sidenav-size="compact"] #logo_light_small,
[data-theme="dark"][data-sidenav-size="condensed"] #logo_dark_small,
[data-theme="dark"][data-sidenav-size="compact"] #logo_dark_small {
    display: block;
}

header {

    a {
        text-decoration: none;
        height: 42px;
        line-height: 42px;
        border-radius: 5px;
    }

    button {
        background: none;
    }

    img {
        height: 24px;
        padding: 13px;
        box-sizing: unset;
    }

    i {
        font-size: 20px;
    }

    .clickable-menu {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 50px;
        height: 60px;
        border-radius: 8px;
        transition: 0.2s;
        text-decoration: none;
        border: none;
        background: transparent;
        color: inherit;
    }

    .clickable-menu button {
        width: 100%;
        height: 100%;
        border: none;
        background: transparent;
    }
}


[data-theme="light"] .topnav .up-right img { filter: invert(0); }
[data-theme="dark"] .topnav .up-right img { filter: invert(1); }

/* Loader animation */
#loader-box {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: rgb(from var(--background) r g b / var(--alpha));
}

#loader {
    position: absolute;
    left: calc(50% - 40px);
    top: calc(50% - 40px);
    width: 80px;
    height: 80px;
}

/* Navigation */
.nav-tabs .nav-link{border-bottom-left-radius:0;border-bottom-right-radius:0;margin-left:0;}

#logo_light,#logo_dark{background:url(/static/logo/Enos_Logo_couleur.png) center no-repeat content-box;background-size: contain;max-width: 230px;width: 230px;height: 100%;padding: 8px;}
/* ATTENTION! Pour les modifications à logo_light/logo_dark, aussi modifier la variable background dans sumpro_theme_css() de utils.py */