@import "../styles/furo.css";

/*背景图像定制*/
/*为了同时兼容4k屏幕和最小化资产，使用宽度为2880的图像，保存为webp*/
.page {
    background: url("/_static/image/bg/evening-glow.webp") no-repeat center center local;
    -webkit-background-size: cover;
    background-size: cover;
}

body[data-theme="dark"] {
    div .main {
        background: color-mix(in srgb, var(--color-background-primary), transparent 25%);
    }

    /*!*修复右侧目录栏*/
    /*这个82em在源码里不是硬编码的，但是这是css，那个是sass，没办法的事情*/
    @media (min-width: 82em){
        div .content {
            background: #0000;
        }
        div .toc-drawer {
            background: #0000;
        }
    }

    div .sidebar-drawer {
        background: color-mix(in srgb, var(--color-background-primary), transparent 10%);
    }
}

/*自动模式下，白天模式和直接指定白天模式差不多，晚上的也还是*/
body[data-theme="auto"] {
    div .main {
        background: color-mix(in srgb, var(--color-background-primary), transparent 50%);
    }

    /*/*修复右侧目录栏*/
    /*这个82em在源码里不是硬编码的，但是这是css，那个是sass，没办法的事情*/
     @media (min-width: 82em) {
         div .content {
             background: #fff0;
         }

         div .toc-drawer {
             background: #fff2;
         }
     }

    div .sidebar-drawer {
        background: color-mix(in srgb, var(--color-background-primary), transparent 25%);
    }

    @media (prefers-color-scheme: dark){
        div .main {
            background: color-mix(in srgb, var(--color-background-primary), transparent 25%);
        }

        /*/*修复右侧目录栏*/
        /*这个82em在源码里不是硬编码的，但是这是css，那个是sass，没办法的事情*/
        @media (min-width: 82em){
            div .content {
                background: #0000;
            }
            div .toc-drawer {
                background: #0000;
            }
        }

        div .sidebar-drawer {
            background: color-mix(in srgb, var(--color-background-primary), transparent 10%);
        }
    }
}

body[data-theme="light"]{
    div .main {
        background: color-mix(in srgb, var(--color-background-primary), transparent 50%);
    }

    /*/*修复右侧目录栏*/
    /*这个82em在源码里不是硬编码的，但是这是css，那个是sass，没办法的事情*/
     @media (min-width: 82em) {
         div .content {
             background: #fff0;
         }

         div .toc-drawer {
             background: #fff2;
         }
     }

    div .sidebar-drawer {
        background: color-mix(in srgb, var(--color-background-primary), transparent 25%);
    }
}



/*左侧导航栏标题定制*/
.sidebar-brand-text{
    font-size: 1.5em;
    text-align: right;
    margin-top: 0;
    margin-bottom: 0.125em;
}

.sidebar-brand{
    margin-top: 1em;
    margin-bottom: 1em;
}

.sidebar-tree .current > .reference {
    border-top-left-radius: 0.2em;
    border-bottom-left-radius: 0.2em;
    background: color-mix(in srgb, var(--color-link), transparent 95%);
}

/*段落显示的优化*/
h1+p,h2+p,h3+p,h4+p,h5+p,h6+p{
    margin-top:0
}

p{
    margin-bottom: 0.5rem;
    margin-top: 0;
    font-size: var(--font-size--normal);
}
section>p{text-indent: 2em;}
div>p{text-indent: 2em;}

div .no-indent p{
    text-indent: 0;
}
.no-indent{
    text-indent: 0;
}


/*针对标签显示*/

div .tags {
    margin-top: -0.5em;
    margin-bottom: 1em;
    p{
        text-indent: 0;
        color: var(--color-foreground-secondary);
        margin: 0;
        font-size: var(--font-size--small);
    }
    a{
        color: #7D8DCEFF;
    }
}

/*代码高亮框架优化*/

div .code{
    background: var(--color-background-secondary);
    border-radius: 0.2em;
    p{
        text-indent: 1em;
        margin: 0;
    }
}

div[class*=" highlight-"],
div[class^="highlight-"]{
    margin: 0;
}

.custom-tip {
    border-bottom: 1px dotted var(--color-foreground-secondary); /* 悬停元素上显示点线 */

    >strong {
        visibility: hidden;

        font-size: var(--font-size--small--3);
        font-style: normal;
        /*width: 12em;*/
        color: var(--color-foreground-primary);
        background-color: var(--color-background-secondary);
        border: var(--color-foreground-border);
        border-width: 1px;
        border-style: solid;
        border-radius: 0.2em;

        margin-bottom: 0;
        padding: 0.5em;

        /* 定位 */
        position: absolute;
        z-index: 1;
    }
}

@media (any-hover: hover) {
    .custom-tip:hover strong {
        visibility: visible;
    }
}
@media (any-hover: none){
    .custom-tip:active strong {
        visibility: visible;
    }
}


/*手机界面优化*/
/*修复左右两侧按钮*/
.mobile-header .header-left, .mobile-header .header-right {
    padding: 0 1em;
}
/*修复左侧导航栏*/
@media (max-width: 82em){
    .sidebar-sticky {
        background-color: var(--color-background-primary);
    }
}