/*  
 * Copyright (c) 2024 YiDing, all rights reserved. 
 *  
 * This is an example file of the site. You can freely copy,
 * fork, clone and download the file to your local machine.
 * But attention to replace it by your own file before you
 * deploying the site.
 */

/* 此文件需在vue.css和docsify-toc.css之后引入 */

/* 
屏幕宽度分级: 
TOC: [0,768], [769,infty]
Font: [0,400], [401,600], [600,1200], [1200,infty]
*/

:root {
    --fontsize-main: 0.95rem; /* -0.05rem */
    --fontsize-h1: 1.6rem; /* -0.15rem */
    --fontsize-h2: 1.4rem; /* -0.1rem */
    --fontsize-h3: 1.1rem; /* -0.05rem */

    --fontsize-h4: 1rem; /* -0.05rem */
    --fontsize-h5: 1rem; /* -0.05rem */
    --fontsize-h6: 1rem; /* -0.05rem */

    --mobile-width: 768px;

    --themecolor: #474f13;
    --color-h1: rgba(0, 0, 0, 0.9);
    --color-h2: rgb(110, 0, 200);
    --color-h3: rgba(110, 0, 200, 0.8);
    --color-h4: rgba(110, 0, 200, 0.6);
    --color-h5: rgba(110, 0, 200, 0.4);
}

/* ------------- 全局基本配置 ---------------- */
/*                                             */
body {
    /* body类 */
    height: 100%;
    background-color: #fff;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    color: var(--main-color);
    font-family: "Segoe UI", "Times New Roman", "Verdana";
    font-size: 0.8rem;
    letter-spacing: 0;
    margin: 0;
    overflow-x: hidden;
}
/* h1,h2,h3标题样式 */
h1 {
    text-align: center;
}
h1 .anchor span {
    color: var(--color-h1);
}
h2 .anchor span {
    color: rgb(245, 230, 255);
    background-color: rgb(110, 0, 200);
    padding: 0.1rem 0.4rem;
}
/* h2::before {
    content: "& ";
    color: var(--color-h2);
} */
h3 .anchor span {
    color: var(--color-h3);
}
h4 .anchor span {
    color: var(--color-h4);
}
.markdown-section a {
    /* a: anchor */
    color: var(--theme-color, #42b983);
    font-weight: 550;
}
.markdown-section p {
    /* p: paragraph */
    margin: 0.9rem 0;
    line-height: 1.15rem;
    word-spacing: 0.05rem;
}
.markdown-section em {
    /* em: italic font*/
    color: #7f8c8d;
}
.markdown-section img {
    /* em: italic font*/
    max-height: 600px;
}
/*                                             */
/* ------------- 全局基本配置 ---------------- */

/* ------------- 自定义details ---------------- */
/*                                             */
@font-face {
    font-family: "Montserrat";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url(https://fonts.gstatic.com/s/montserrat/v26/JTUHjIg1_i6t8kCHKm4532VJOt5-QNFgpCtr6Hw5aXo.woff2)
        format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
        U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122,
        U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
details {
    background-color: rgba(255, 235, 235, 0.55);
    /*   border: rgba(0, 0, 0, 0) solid 1px; */
    font-family: "Montserrat";
    margin: auto;
    margin-top: 5px;
    margin-bottom: 5px;
    padding: 5px;
    border-radius: 5px;
    width: 80%;
    max-width: 700px;
}
/* details:hover {
    background-color: rgb(255, 245, 245);
    border: rgba(133, 133, 133, 0) solid 1px;
} */
details summary {
    cursor: pointer;
    color: rgb(0, 0, 0);
    font-weight: 500;
}
details img {
    width: 97%;
}
/*                                             */
/* ------------- 自定义details ---------------- */

/* --------------- 杂七杂八 ------------------ */
/*                                             */
.markdown-section blockquote p {
    /* `>` 引用块 */
    margin-left: 0;
    padding: 0 1px; /* 防止行内代码出格 */
}
.markdown-section blockquote {
    border-left: 3px solid var(--theme-color, #42b983);
    color: #7b7b7b;
    margin: 1.5rem 0;
    padding-left: 1rem;
    background-color: rgb(250, 250, 250);
}
.markdown-section p.tip {
    /* Tips样式修改 */
    padding: 6px 24px 6px 26px;
    margin: 12px;
    margin-left: 6px;
}
footer {
    /* copyright */
    padding-bottom: 25px;
}
.chat-panel .main-area .chat-message .avatar img {
    /* 解决docsify-chat插件与img设置冲突 */
    max-width: 100%;
}
.markdown-section td {
    /* 设置表格最小单元格样式 */
    /* 覆盖vue.css原有样式 */
    border: 1px solid #acacac;
    padding: 6px 3px; /* 第一个是上下，第二个是左右 */
}
/*                                             */
/* --------------- 杂七杂八 ------------------ */

/* ------- 自定义img,video,audio标签 ---------- */
/*                                             */
.markdown-section td video,
.markdown-section td img {
    /* 控制表格中的img,video */
    min-width: 90%;
    max-width: 98%;
    display: table; /* table样式显示 */
    margin: 0 auto; /* 使图片居中 */
    /* margin: 0 auto; 无效*/
    /* text-align: center; 无效*/
}
/* 不同屏幕全局video,img,object适配 */
@media screen and (max-width: 500px) {
    article img,
    article video,
    article object {
        max-width: 90%;
    }
}
@media screen and (min-width: 501px) and (max-width: 1000px) {
    article img,
    article video,
    article object {
        max-width: 85%;
    }
}
@media screen and (min-width: 1000px) {
    article img,
    article video,
    article object {
        /* max-width: 750px;  */ /* 850可能会超出中间区域 */
        max-width: 80%;
    }
}
/*                                             */
/* ------- 自定义img,video,audio标签 ---------- */

/* --- 自定义script,center,center-screen ------ */
/*                                             */
span.script {
    font-size: calc(var(--fontsize-main) * 0.5);
    color: rgb(195, 195, 195);
}
span.script * {
    font-size: calc(var(--fontsize-main) * 0.5);
    color: rgb(195, 195, 195);
}
.center {
    /* 普通居中 */
    /* width: auto; */
    /* max-width: 100%; */
    display: table;
    margin: 0 auto;
    text-align: center;
}
.center-screen {
    /* 全屏居中 */
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
/*                                             */
/* --- 自定义script,center,center-screen ------ */

/* ------------- 自定义script ---------------- */
/*                                             */

/*                                             */
/* ------------- 自定义script ---------------- */

/* ------------- 自定义code风格 --------------- */
/*                                             */
.markdown-section code,
.markdown-section pre,
.markdown-section output::after {
    font-family: "Roboto Mono", "Consolas", "Monaco", monospace;
}

.markdown-section code {
    background-color: #f8f8f8;
}
.markdown-section pre,
.markdown-section output {
    margin: 1.2em 0;
    position: relative;
}
.markdown-section pre > code,
.markdown-section output {
    border-radius: 2px;
    display: block;
}
.markdown-section pre > code,
.markdown-section output::after {
    -moz-osx-font-smoothing: initial;
    -webkit-font-smoothing: initial;
}
.markdown-section code {
    border-radius: 2px;
    color: rgba(225, 30, 101, 0.834);
    background-color: rgb(244, 244, 244);
    border: rgb(210, 210, 210) solid 1px;
    margin: 0 2px;
    padding: 0px 3px;
    white-space: pre-wrap;
}
.markdown-section > :not(h1):not(h2):not(h3):not(h4):not(h5):not(h6) code {
    font-size: 0.8rem;
}
.markdown-section pre {
    padding: 0 1.4rem;
    line-height: 1.5rem;
    overflow: auto;
    word-wrap: normal;
}
.markdown-section pre > code {
    color: #525252;
    font-size: 0.8rem;
    padding: 2.2em 5px;
    line-height: inherit;
    margin: 0 2px;
    max-width: inherit;
    overflow: inherit;
    white-space: inherit;
}
.markdown-section output {
    padding: 1.7rem 1.4rem;
    border: 1px dotted #ccc;
}
.markdown-section output > :first-child {
    margin-top: 0;
}
.markdown-section output > :last-child {
    margin-bottom: 0;
}
.markdown-section code::after,
.markdown-section code::before,
.markdown-section output::after,
.markdown-section output::before {
    letter-spacing: 0.05rem;
}
.markdown-section pre::after,
.markdown-section output::after {
    color: #ccc;
    font-size: 0.6rem;
    font-weight: 600;
    height: 15px;
    line-height: 15px;
    padding: 5px 10px 0;
    position: absolute;
    right: 0;
    text-align: right;
    top: 0;
}
.markdown-section pre::after,
.markdown-section output::after {
    content: attr(data-lang);
}

/* code highlight */
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
    color: #8e908c;
}
.token.namespace {
    opacity: 0.7;
}
.token.boolean,
.token.number {
    color: #c76b29;
}
.token.punctuation {
    color: #525252;
}
.token.property {
    color: #c08b30;
}
.token.tag {
    color: #2973b7;
}
.token.string {
    color: #42b983;
    color: var(--theme-color, #42b983);
}
.token.selector {
    color: #6679cc;
}
.token.attr-name {
    color: #2973b7;
}
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
    color: #22a2c9;
}
.token.attr-value,
.token.control,
.token.directive,
.token.unit {
    color: #42b983;
    color: var(--theme-color, #42b983);
}
.token.keyword,
.token.function {
    color: #e96900;
}
.token.statement,
.token.regex,
.token.atrule {
    color: #22a2c9;
}
.token.placeholder,
.token.variable {
    color: #3d8fd1;
}
.token.deleted {
    text-decoration: line-through;
}
.token.inserted {
    border-bottom: 1px dotted #202746;
    text-decoration: none;
}
.token.italic {
    font-style: italic;
}
.token.important,
.token.bold {
    font-weight: bold;
}
.token.important {
    color: #c94922;
}
.token.entity {
    cursor: help;
}
code .token {
    -moz-osx-font-smoothing: initial;
    -webkit-font-smoothing: initial;
    min-height: 1.5rem;
    position: relative;
    left: auto;
}
/*                                             */
/* ------------- 自定义code风格 --------------- */

/* ----------- 自定义Mac风代码块 -------------- */
/*                                             */
:root {
    --color-codeblock: #f9f9f9;
}
.markdown-section pre {
    /* 代码块样式 */
    line-height: 1.1rem;
    background-color: var(--color-codeblock);
    border-radius: 5px;
    box-shadow: 0 5px 6px 0px rgb(0 0 0 / 40%);
    padding-top: 30px;
    padding-bottom: 7px;
    font-family: monospace, "PingFang SC", "Microsoft YaHei";
}
.markdown-section pre code {
    /* 防止与inline code样式冲突 */
    padding: 0;
    border: none;
    background-color: var(--color-codeblock);
}
.markdown-section pre::before {
    /* 设置三个圈圈 */
    background: #fc625d;
    border-radius: 50%;
    box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
    content: " ";
    height: 10px;
    left: 10px;
    margin-top: -20px;
    position: absolute;
    width: 10px;
}
/* 滑动条样式修改 */
/* pre为纵向滑动条 */
.markdown-section pre::-webkit-scrollbar {
    width: 7px;
    /*     margin-top: 20px; */
    /* Width of the scrollbar */
}
.markdown-section pre::-webkit-scrollbar-track {
    background: #dedede;
    /* Color of the track */
}
.markdown-section pre::-webkit-scrollbar-thumb {
    background: #8a8a8a;
    /* Color of the scrollbar thumb */
    border-radius: 5px;
    /* Rounded corners for the thumb */
}
.markdown-section pre::-webkit-scrollbar-thumb:hover {
    background: #4c4c4c;
    /* Color of the scrollbar thumb on hover */
}
/* code为横向滑动条 */
.markdown-section pre > code::-webkit-scrollbar {
    height: 4px;
    /*     margin-top: 20px; */
    /* Width of the scrollbar */
}
.markdown-section pre > code::-webkit-scrollbar-track {
    background: #dedede;
    /* Color of the track */
}
.markdown-section pre > code::-webkit-scrollbar-thumb {
    background: #8a8a8a;
    /* Color of the scrollbar thumb */
    border-radius: 5px;
    /* Rounded corners for the thumb */
}
.markdown-section pre > code::-webkit-scrollbar-thumb:hover {
    background: #4c4c4c;
    /* Color of the scrollbar thumb on hover */
}
/*                                             */
/* ------------------------------------------- */

/* ---------------------------------------- */
/* ---------------------------------------- */
/* ---------------------------------------- */
/* ---------------------------------------- */
/* -------下面是需要进行屏幕适配的参数------- */
/* ---------------------------------------- */
/* ---------------------------------------- */
/* ---------------------------------------- */

/* ---- 先设置总体，再对不同屏幕fontsize适配 ---- */
/*                                             */
.markdown-section {
    max-width: 95%;
    border-left: rgb(230, 230, 230) solid 1px;
    border-right: rgb(230, 230, 230) solid 1px;
}
.markdown-section h1 {
    margin: 0 0 1rem 0;
}
.markdown-section h2 {
    margin: 1.5rem 0 0.8rem 0;
    padding-top: 0.45rem;
    border-top: rgba(128, 128, 128, 0.15) solid 1px;
}
.markdown-section h3 {
    margin: 1.3rem 0 0.4rem 0;
}
.markdown-section h4 {
    margin: 0.7rem 0 0.2rem 0;
}
.markdown-section h5 {
    margin: 0;
}
.markdown-section h6 {
    margin: 0;
}
/*                                             */
/* ---- 先设置总体，再对不同屏幕fontsize适配 ---- */

/* --------------- 不同屏幕适配 --------------- */
/*                                             */
/* 适配fontsize，右侧navbar，表格最小单元格样式 */
@media screen and (max-width: 400px) {
    .nav {
        width: 100%;
    }
    .markdown-section {
        font-size: calc(var(--fontsize-main) - 0.15rem);
        max-width: 95%;
    }
    .markdown-section h1 {
        font-size: calc(var(--fontsize-h1) - 0.45rem);
    }
    .markdown-section h2 {
        font-size: calc(var(--fontsize-h2) - 0.3rem);
    }
    .markdown-section h3 {
        font-size: calc(var(--fontsize-h3) - 0.15rem);
    }
    .markdown-section h4 {
        font-size: calc(var(--fontsize-h4) - 0.15rem);
    }
    .markdown-section h5 {
        font-size: calc(var(--fontsize-h5) - 0.15rem);
    }
    .markdown-section h6 {
        font-size: calc(var(--fontsize-h6) - 0.15rem);
    }
}

@media screen and (min-width: 401px) and (max-width: 900px) {
    /* 这是VC中侧边栏宽度所在区间 */
    .nav {
        width: 220px;
    }
    .markdown-section {
        font-size: calc(var(--fontsize-main) - 0.1rem);
        max-width: 90%;
    }
    .markdown-section h1 {
        font-size: calc(var(--fontsize-h1) - 0.3rem);
    }
    .markdown-section h2 {
        font-size: calc(var(--fontsize-h2) - 0.2rem);
    }
    .markdown-section h3 {
        font-size: calc(var(--fontsize-h3) - 0.1rem);
    }
    .markdown-section h4 {
        font-size: calc(var(--fontsize-h4) - 0.1rem);
    }

    .markdown-section h5 {
        font-size: calc(var(--fontsize-h5) - 0.1rem);
    }
    .markdown-section h6 {
        font-size: calc(var(--fontsize-h6) - 0.1rem);
    }
}

@media screen and (min-width: 901px) and (max-width: 1200px) {
    .nav {
        width: 250px;
    }
    .markdown-section {
        font-size: calc(var(--fontsize-main) - 0.05rem);
        width: 80%;
    }
    .markdown-section h1 {
        font-size: calc(var(--fontsize-h1) - 0.15rem);
    }
    .markdown-section h2 {
        font-size: calc(var(--fontsize-h2) - 0.1rem);
    }
    .markdown-section h3 {
        font-size: calc(var(--fontsize-h3) - 0.05rem);
    }
    .markdown-section h4 {
        font-size: calc(var(--fontsize-h4) - 0.05rem);
    }
    .markdown-section h5 {
        font-size: calc(var(--fontsize-h5) - 0.05rem);
    }
    .markdown-section h6 {
        font-size: calc(var(--fontsize-h6) - 0.05rem);
    }
}

@media screen and (min-width: 1201px) {
    .nav {
        width: 300px;
    }
    .markdown-section {
        font-size: calc(var(--fontsize-main) - 0.05rem);
        width: 50%;
        max-width: 800px;
        margin: auto;
    }
    .markdown-section h1 {
        font-size: var(--fontsize-h1);
    }
    .markdown-section h2 {
        font-size: var(--fontsize-h2);
    }
    .markdown-section h3 {
        font-size: var(--fontsize-h3);
    }
    .markdown-section h4 {
        font-size: var(--fontsize-h4);
    }
    .markdown-section h5 {
        font-size: var(--fontsize-h5);
    }
    .markdown-section h6 {
        font-size: var(--fontsize-h6);
    }
}
/*                                             */
/* --------------- 不同屏幕适配 --------------- */