/* Background login */
/* Use native svg background to make your "filebrowser" load faster */
/* I love this website for generating svg backgrounds https://bgjar.com/ */

/*! FORCE LOAD FIRST */
@import url(""); /* Пустой импорт для смены порядка */

#login {
    /*backgroung-color: #101010 !important;*/
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3E%3Cdefs%3E%3ClinearGradient x1='15.28%25' y1='139.29%25' x2='84.72%25' y2='-39.29%25' id='grad'%3E%3Cstop stop-color='%230e2a47' offset='0'/%3E%3Cstop stop-color='%23590075' offset='1'/%3E%3Cstop stop-color='%2300459e' offset='1'/%3E%3C/linearGradient%3E%3Cstyle%3E%40keyframes float1%7B0%25%7Btransform%3Atranslate(0%2C0)%7D50%25%7Btransform%3Atranslate(-10px%2C0)%7D100%25%7Btransform%3Atranslate(0%2C0)%7D%7D.triangle-float1%7Banimation%3Afloat1 5s infinite%7D%40keyframes float2%7B0%25%7Btransform%3Atranslate(0%2C0)%7D50%25%7Btransform%3Atranslate(-5px%2C-5px)%7D100%25%7Btransform%3Atranslate(0%2C0)%7D%7D.triangle-float2%7Banimation%3Afloat2 4s infinite%7D%3C/style%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23grad)'/%3E%3Cpath d='M157.9 184.6L144.7 268 228.1 281.2 241.3 197.8z' fill='rgba(211%2C43%2C255%2C0.4)' class='triangle-float1'/%3E%3Cpath d='M-17.9 524.8L167 502.3 71.3 370.6z' fill='rgba(211%2C43%2C255%2C0.4)' class='triangle-float1'/%3E%3Cpath d='M73.7 38.8L3.4 21.3 12.2 135.5z' fill='rgba(211%2C43%2C255%2C0.4)' class='triangle-float2'/%3E%3Cpath d='M526.2 610.7L632.8 527.7 524.1 481.5z' fill='rgba(211%2C43%2C255%2C0.4)' class='triangle-float1'/%3E%3Cpath d='M56.8 166.8C99.6 168.4 139.3 142.5 159.3 104.6C178.1 68.9 170.7 26.1 149-7.8C129-39 93.8-53.6 56.8-55.1C16.4-56.8-29-50.9-49.6-16C-70.5 19.2-54.2 62.2-33.6 97.6C-13.1 132.8 16.2 165.4 56.8 166.8' fill='rgba(211%2C43%2C255%2C0.4)' class='triangle-float1'/%3E%3Cpath d='M398.3 390.6L299.1 304.4 312 489.8z' fill='rgba(211%2C43%2C255%2C0.4)' class='triangle-float2'/%3E%3Cpath d='M347.3 327.1L367.8 432.7 473.4 412.2 452.9 306.6z' fill='rgba(211%2C43%2C255%2C0.4)' class='triangle-float1'/%3E%3C/svg%3E") !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-attachment: fixed !important;
}
 
/* 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 */

body {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' width='1440' height='560' preserveAspectRatio='none' viewBox='0 0 1440 560'%3E%3Cdefs%3E%3ClinearGradient x1='15.28%25' y1='139.29%25' x2='84.72%25' y2='-39.29%25' id='grad'%3E%3Cstop stop-color='%230e2a47' offset='0'/%3E%3Cstop stop-color='%23590075' offset='1'/%3E%3Cstop stop-color='%2300459e' offset='1'/%3E%3C/linearGradient%3E%3Cstyle%3E%40keyframes float1%7B0%25%7Btransform%3Atranslate(0%2C0)%7D50%25%7Btransform%3Atranslate(-10px%2C0)%7D100%25%7Btransform%3Atranslate(0%2C0)%7D%7D.triangle-float1%7Banimation%3Afloat1 5s infinite%7D%40keyframes float2%7B0%25%7Btransform%3Atranslate(0%2C0)%7D50%25%7Btransform%3Atranslate(-5px%2C-5px)%7D100%25%7Btransform%3Atranslate(0%2C0)%7D%7D.triangle-float2%7Banimation%3Afloat2 4s infinite%7D%3C/style%3E%3C/defs%3E%3Crect width='100%25' height='100%25' fill='url(%23grad)'/%3E%3Cpath d='M157.9 184.6L144.7 268 228.1 281.2 241.3 197.8z' fill='rgba(211%2C43%2C255%2C0.4)' class='triangle-float1'/%3E%3Cpath d='M-17.9 524.8L167 502.3 71.3 370.6z' fill='rgba(211%2C43%2C255%2C0.4)' class='triangle-float1'/%3E%3Cpath d='M73.7 38.8L3.4 21.3 12.2 135.5z' fill='rgba(211%2C43%2C255%2C0.4)' class='triangle-float2'/%3E%3Cpath d='M526.2 610.7L632.8 527.7 524.1 481.5z' fill='rgba(211%2C43%2C255%2C0.4)' class='triangle-float1'/%3E%3Cpath d='M56.8 166.8C99.6 168.4 139.3 142.5 159.3 104.6C178.1 68.9 170.7 26.1 149-7.8C129-39 93.8-53.6 56.8-55.1C16.4-56.8-29-50.9-49.6-16C-70.5 19.2-54.2 62.2-33.6 97.6C-13.1 132.8 16.2 165.4 56.8 166.8' fill='rgba(211%2C43%2C255%2C0.4)' class='triangle-float1'/%3E%3Cpath d='M398.3 390.6L299.1 304.4 312 489.8z' fill='rgba(211%2C43%2C255%2C0.4)' class='triangle-float2'/%3E%3Cpath d='M347.3 327.1L367.8 432.7 473.4 412.2 452.9 306.6z' fill='rgba(211%2C43%2C255%2C0.4)' class='triangle-float1'/%3E%3C/svg%3E"); /* Ваш SVG в Data URI */
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
}

.view, .card, .dialog {
  background-color: rgba(0, 0, 0, 0.7 !important;
  backdrop-filter: blur(5px); /* Размытие (не поддерживается в Firefox) */
  min-height: 100vh;

}
#listing .breadcrumbs {
    background: transparent !important;
    border-bottom: none !important;
    box-shadow: none !important;
}

/* Делаем текст навигации более контрастным */
#listing .breadcrumbs a, .breadcrumbs span {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8) !important;
}

#listing .item {
    background: rgba(40, 40, 40, 0.85) !important;
    border-radius: 8px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(4px);
    transition: all 0.3s ease;
}

/* Эффект при наведении */
#listing .item:hover {
    background: rgba(60, 60, 60, 0.9) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

/* Иконки файлов */
#listing .item i {
    filter: brightness(1.2);
}

/* Текст в плитках */
#listing .item .name {
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}



:root {
/* The current color palette is Jellyfin's default theme*/ 
    --background: #101010;
    --surfacePrimary: #202020;
    --surfaceSecondary: #292929;
    --blue: #1c4c5c;
    --dark-blue: #007ea8;
    --red: #ca0000;
    --icon: #007ea8;
}
 

/*More properties (Just add it to :root to enable it, and change the color)*/
/*:root { 
    --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;*/