@charset "UTF-8";

/* ----

# Fantasy Theme
# By: Dreamer-Paul
# Last Update: 2024.10.2

一个优美梦幻的动漫风 Typecho 博客主题。

本代码为奇趣保罗原创，并遵守 MIT 开源协议。欢迎访问我的博客：https://paugram.com

---- */

/* 0 - 全局
-------------------------------- */
:root{
    --blue: #b1c6ff;
    --gray: #777790;
    --pink: #ffa9be;

    --gray-bg: #fafafa;
    --grayer-bg: #f5f5f5;
    --light-bg: #fff;
    --light-font: #777790;
    --light-border: #ddd;
    --thin-shadow: 0 0 10px rgba(119, 119, 144, .2);
    --thick-shadow: 0 0 20px rgba(119, 119, 144, .4);
}

body{
    color: #777790;
    color: var(--light-font);
    background: #f7f7f7;
}
body::before{
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    content: "";
    display: block;
    position: fixed;
    background: url("img/pattern-1.png") top center;
}

a, a:hover{
    color: #ffa9be;
    color: var(--pink);
}

em{
    background: #ffa9be;
    background: var(--pink);
}

h1, h2, h3{ font-weight: normal }

hr{ border-top: 2px #ccc dashed }

blockquote{
    padding: 1em;
    position: relative;
    border-left: none;
    border-radius: 1em;
    background-color: #fafafa;
    background-color: var(--grayer-bg);
}

blockquote::after{
    content: "”";
    top: 0;
    right: 0;
    position: absolute;
    line-height: 1;
    font-size: 4em;
    font-family: Georgia;
    pointer-events: none;
}

@media screen and (prefers-color-scheme: dark){
    :root{
        --pink: #d38d9f;
        --gray-bg: rgba(255, 255, 255, .1);
        --grayer-bg: rgba(255, 255, 255, .2);
        --light-bg: #222;
        --light-font: #b0b0bf;
        --light-border: #555;

        --thin-shadow: 0 0 10px rgba(255, 255, 255, .5);
        --thick-shadow: 0 0 20px rgba(255, 255, 255, .8);
    }

    body{ background: #000 }
    body::before{ opacity: .3 }

    img{ filter: brightness(.6) }

    :not(pre) > code{
        color: #ff9faa;
        background-color: var(--gray-bg);
    }
}

/* 1 - 页眉
-------------------------------- */
header .toggle{
    top: 1rem;
    right: 1rem;
    z-index: 2;
    width: 3em;
    height: 3em;
    display: none;
    cursor: pointer;
    position: fixed;
    background: #fff;
    background: var(--light-bg);
    border-radius: 66%;
    box-shadow: 0 0 20px rgba(0, 0, 0, .4);
    box-shadow: var(--thick-shadow);
}
header .toggle::before{
    display: block;
    content: "\f0c9";
    text-align: center;
    font: 1em/3em "FontAwesome";
}

/* 2 - 侧边栏
-------------------------------- */
aside{
    left: 0;
    top: 8em;
    z-index: 2;
    position: fixed;
    user-select: none;
}
aside::-webkit-scrollbar{ width: 0 }

/* - 侧边导航 */
.side-nav{
    background: #fff;
    background: var(--light-bg);
    border-radius: 0 1em 1em 0;
    box-shadow: 0 0 10px rgba(0, 0, 0, .2);
    box-shadow: var(--thin-shadow);
}

.nav-item a{
    color: inherit;
    display: block;
}

.nav-item > a{
    z-index: 0;
    cursor: pointer;
    padding: 1em 2em;
    position: relative;
}
.nav-item > a::before{
    top: 0;
    left: 0;
    bottom: 0;
    width: .5em;
    content: '';
    z-index: -1;
    position: absolute;
    transition: width .3s;
}
.nav-item > a:hover{ color: #fff }
.nav-item > a:hover::before{ width: 100% }

.nav-item:nth-child(1) > a::before{ background: #ff8b46 }
.nav-item:nth-child(2) > a::before{ background: #ffc71d }
.nav-item:nth-child(3) > a::before{ background: #d4f00f }
.nav-item:nth-child(4) > a::before{ background: #b1c6ff }
.nav-item:nth-child(5) > a::before{ background: #dcb5ff }
.nav-item:nth-child(6) > a::before{ background: #ff9fab }
.nav-item:nth-child(7) > a::before{ background: #eae489 }
.nav-item:nth-child(8) > a::before{ background: #acf0dc }
.nav-item:nth-child(9) > a::before{ background: #f9dba7 }
.nav-item:nth-child(10) > a::before{ background: #a9d6f6 }
.nav-item:nth-child(11) > a::before{ background: #b5e8a4 }
.nav-item:nth-child(12) > a::before{ background: #ffb7a5 }

.nav-item:first-child, .nav-item:last-child{ overflow: hidden }

.nav-item:first-child{ border-top-right-radius: 1em }
.nav-item:last-child{ border-bottom-right-radius: 1em }

.nav-item.has-child{ position: relative }

.nav-item.has-child > a::after{
    right: .75em;
    opacity: .5;
    content: "\f105";
    position: absolute;
    font-family: "FontAwesome";
}

/* -- 二级菜单 */
@media screen and (min-width: 601px){
    .sub-menu{
        top: 0;
        right: 0;
        opacity: 0;
        z-index: -1;
        visibility: hidden;
        position: absolute;
        transition: opacity .15s, visibility .15s;
    }

    .sub-menu .wrapper{
        position: absolute;
        white-space: nowrap;
        border-radius: 0 1em 1em 0;
        background: var(--light-bg);
        box-shadow: 0 0 10px rgba(0, 0, 0, .2);
        box-shadow: var(--thin-shadow);
    }

    .sub-menu a{
        padding: .75em 1.5em;
    }
    .sub-menu a:hover{
        color: var(--pink);
    }

    .nav-item.has-child:hover .sub-menu, .nav-item.has-child:focus-within .sub-menu{
        opacity: 1;
        visibility: visible;
    }
}

@media screen and (max-width: 600px){
    .sub-menu{
        display: none;
        text-align: center;
    }

    .sub-menu a{
        width: 50%;
        flex: 0 0 50%;
        padding: 1em 1.5em;
    }

    .sub-menu .wrapper{
        display: flex;
        flex-wrap: wrap;
    }

    .nav-item.has-child.active .sub-menu{ display: block }
}

/* - 侧边功能 */
.side-action{
    margin: 1em;
    text-align: center;
}
.side-action .search-btn{ cursor: pointer }
.side-action .search-btn::before{
    content: "\f002";
    font: 1em/2em "FontAwesome";
}

/* - 功能窗 */
.side-window{
    top: 0;
    left: 0;
    opacity: 0;
    z-index: -2;
    width: 100%;
    height: 100%;
    padding: 0 1em;
    display: table;
    position: fixed;
    visibility: hidden;
    background: rgba(255, 255, 255, .9);
    background: var(--light-bg);
    transition: opacity .3s, visibility .3s;
}
.side-window.active{
    opacity: 1;
    visibility: visible;
}
.side-wrap{
    display: table-cell;
    vertical-align: middle;
}

/* -- 搜索框和分类 */
.search-form, .side-category{
    width: 90%;
    margin: 0 auto;
    max-width: 600px;
}
.side-window.active .search-form, .side-window.active .side-category{
    animation: fade-in-bottom .5s; -webkit-animation: fade-in-bottom .5s;
}

.search-form input{
    padding: 0;
    width: 100%;
    border: none;
    display: block;
    font-size: 1.5em;
    border-radius: 0;
    max-width: 600px;
    line-height: 1.5em;
    border-bottom: 2px solid #777790;
}

.side-category{
    text-align: center;
    margin: 2em auto 0 auto;
}

.color-bar{
    gap: .5em;
    display: flex;
    flex-wrap: wrap;
}

.color-bar a{
    color: #fff;
    font-size: .85em;
    border-radius: 3em;
    padding: .5em .75em;
    background: #777790;
    display: inline-block;
}

.color-bar a:nth-child(1){ background: #ff8b46 }
.color-bar a:nth-child(2){ background: #ffc71d }
.color-bar a:nth-child(3){ background: #d4f00f }
.color-bar a:nth-child(4){ background: #b1c6ff }
.color-bar a:nth-child(5){ background: #dcb5ff }
.color-bar a:nth-child(6){ background: #ff9fab }
.color-bar a:nth-child(7){ background: #eae489 }
.color-bar a:nth-child(8){ background: #acf0dc }
.color-bar a:nth-child(9){ background: #f9dba7 }
.color-bar a:nth-child(10){ background: #a9d6f6 }
.color-bar a:nth-child(11){ background: #b5e8a4 }
.color-bar a:nth-child(12){ background: #ffb7a5 }

@media screen and (max-width: 600px){
    header .toggle, .side-wrap{ display: block }

    aside{
        top: 0;
        left: 0;
        right: 0;
        padding: 2em 0;
        overflow: auto;
        border-radius: 0;
        max-height: 100%;
        transition: transform .3s;
        transform: translateY(-110%);
        background: var(--light-bg);
        box-shadow: var(--thin-shadow);
    }
    aside.active{ transform: translateY(0) }

    .side-nav{
        background: none;
        box-shadow: none;
        border-radius: 0;
    }

    .nav-item > a:hover{ color: inherit }
    .nav-item > a:hover::before{ width: 1em }

    .side-action{ display: none }

    .side-window{
        opacity: 1;
        height: auto;
        display: block;
        margin-top: 2em;
        position: static;
        background: none;
        visibility: visible;
    }

    .search-form{ width: 100% }
    .search-form input{
        font-size: 1em;
        border-radius: 2em;
        padding: .5em .75em;
        border: 1px solid var(--light-border);
    }
}

/* 3 - 正文
-------------------------------- */
.wrap{ max-width: 55em }

header, main{ margin: 3em 0 3em 8em }

@media screen and (max-width: 600px){
    header, main{ margin-left: 0 }

    main .wrap{ padding: 0 }
}

.headline{
    position: relative;
    padding-bottom: .5em;
    display: inline-block;
}

.headline a{
    color: inherit;
}

.headline::after{
    content: '';
    height: 7px;
    width: 100%;
    left: 0;
    bottom: 0;
    position: absolute;
    transition: background-position-x .3s;
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4NCjxzdmcgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iMCAwIDMxIDciPg0KPHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjNzU3NThEIiBzdHJva2Utd2lkdGg9IjMiIHN0cm9rZS1taXRlcmxpbWl0PSIxMCIgZD0iTTAsMS41YzcsMCw3LjksNCwxNS41LDRjNy40LDAsOC41LTQsMTUuNS00Ii8+DQo8L3N2Zz4NCg==) repeat-x left center;
}

.headline:hover::after{
    background-position-x: 1em;
}

main{ transition: opacity .3s }

.head-social{
    float: right;
    display: flex;
    margin: 1.25em 0;
    user-select: none;
    justify-content: center;
}
.head-social a{
    color: inherit;
    margin: 0 .5em;
    display: inline-block;
    transition: transform .3s;
}
.head-social a:hover{ transform: scale(1.2) }
.head-social i{ font-size: 1.2em }

@media screen and (max-width: 600px){
    header{ text-align: center }

    .head-social{
        float: none;
        margin-top: 2em;
    }
}


.board{
    padding: 1.5em;
    background: #fff;
    background: var(--light-bg);
    border-radius: 1.5em;
    margin-bottom: 2em;
}
.board:last-child{ margin-bottom: 0 }

@media screen and (max-width: 600px){
    .board{
        border-radius: 0;
    }
}

.board.head{
    display: inline-block;
}
.board.head .fa{ margin-right: .75em }

.post-item, .post-title{
    margin-bottom: 1.5em;
    padding-bottom: 1.5em;
    word-break: break-word;
    border-bottom: 2px dotted #777790;
}
.post-item:last-child{
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}
.post-item .item-date, .post-card .item-date{
    display: block;
    color: #ffa9be;
    color: var(--pink);
    font-size: .85em;
    margin-bottom: .5em;
}
.item-title a, .card-title a{ color: inherit }

.post-item h2, .card-info h2{ font-size: 1.17em }

.post-item h2{
    padding-left: 1em;
    position: relative;
    transition: opacity .3s;
}
.post-item h2::before{
    content: '';
    position: absolute;
    left: 0;
    top: .3em;
    border: .4em solid transparent;
    border-left-color: #ffa9be;
}
.post-item h2:hover{ opacity: .6 }

.post-meta{
    display: table;
    font-size: .85em;
}

.post-meta .category::before, .post-meta .comments::before, .post-meta .tags::before, .post-meta .user::before,
.post-meta .viewed::before, .post-meta .edit::before{
    content: '·';
    margin: 0 .5em;
}

.post-content img{ border-radius: 1em }

.post-content > h1, .post-content > h2, .post-content > h3,
.post-special > h1, .post-special > h2, .post-special > h3{
    margin-top: 3em;
    position: relative;
    scroll-margin-top: 2em;
}

.post-content > h1::before, .post-content > h2::before, .post-content > h3::before,
.post-special > h1::before, .post-special > h2::before, .post-special > h3::before{
    left: -1.5rem;
    top: 0;
    bottom: 0;
    width: .5em;
    content: '';
    display: block;
    position: absolute;
    background-color: #ffa9be;
    background-color: var(--pink);
    border-radius: 0 .5em .5em 0;
}

/* -- 密码保护 */
.post-content .protected .submit{
    color: #fff;
    padding: .5em 1em;
    border-radius: 4px;
    background-color: #ffa9be;
    background-color: var(--pink);
    border: 1px solid #ffa9be;
    border-color: var(--pink);
}

/* -- 标签 */
.post-tags{
    row-gap: .5em;
    display: flex;
    flex-wrap: wrap;
    font-size: .875em;
    margin-top: 3rem;
}
.post-tags a{
    color: #fff;
    margin-left: 1em;
    margin-right: .5em;
    position: relative;
    padding: .25em .5em;
    padding-left: .25em;
    background: var(--blue);
    display: inline-block;
    border-top-right-radius: .5em;
    border-bottom-right-radius: .5em;
}
.post-tags a::before{
    top: 0;
    left: -2em;
    content: "";
    display: block;
    position: absolute;
    border: 1em transparent solid;
    border-right-color: var(--blue);
}

/* - 分页 */
.page-navigator{
    margin: 2em 0;
    display: flex;
    row-gap: .5em;
    flex-wrap: wrap;
    user-select: none;
    text-align: center;
    justify-content: center;
}
.page-navigator span{
    margin-right: .5em;
    display: inline-block;
}
.page-navigator span:last-child{ margin-right: 0 }

.page-navigator a{
    height: 2em;
    min-width: 2em;
    color: inherit;
    padding: 0 .25em;
    line-height: 1.75;
    border-radius: 2em;
    display: inline-block;
    vertical-align: middle;
    border: #777790 2px solid;
    background: no-repeat center center;
    transition: color .3s, background .3s;
}
.page-navigator a:hover, .page-navigator .current a{
    color: #fff;
    background-color: #777790;
}

.board .page-navigator{
    margin: 2em auto 0 auto;
}

.page-navigator .category{
    width: auto;
    height: auto;
    padding: .75em 1em;
}

.page-navigator .prev a{
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCAzMiAzMiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMzIgMzI7IiB4bWw6c3BhY2U9InByZXNlcnZlIj48ZyBmaWxsPSIjNzU3NThEIj48cGF0aCBkPSJNMTIsMTQuNWMtMS40LDAuOC0xLjQsMi4yLDAsM2w2LDMuNWMxLjQsMC44LDIuNiwwLjIsMi42LTEuNXYtN2MwLTEuNi0xLjItMi4zLTIuNi0xLjVMMTIsMTQuNXoiLz48L2c+PC9zdmc+Cg==);
}
.page-navigator .prev a:hover{
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCAzMiAzMiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMzIgMzI7IiB4bWw6c3BhY2U9InByZXNlcnZlIj48ZyBmaWxsPSIjZmZmIj48cGF0aCBkPSJNMTIsMTQuNWMtMS40LDAuOC0xLjQsMi4yLDAsM2w2LDMuNWMxLjQsMC44LDIuNiwwLjIsMi42LTEuNXYtN2MwLTEuNi0xLjItMi4zLTIuNi0xLjVMMTIsMTQuNXoiLz48L2c+PC9zdmc+Cg==);
}

.page-navigator .next a{
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCAzMiAzMiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMzIgMzI7IiB4bWw6c3BhY2U9InByZXNlcnZlIj48ZyBmaWxsPSIjNzU3NThEIj48cGF0aCBjbGFzcz0ic3QwIiBkPSJNMjAsMTcuNWMxLjQtMC44LDEuNC0yLjIsMC0zTDE0LDExYy0xLjQtMC44LTIuNi0wLjEtMi42LDEuNXY3YzAsMS43LDEuMiwyLjMsMi42LDEuNUwyMCwxNy41eiIvPjwvZz48L3N2Zz4K);
}
.page-navigator .next a:hover{
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCAzMiAzMiIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMzIgMzI7IiB4bWw6c3BhY2U9InByZXNlcnZlIj48ZyBmaWxsPSIjZmZmIj48cGF0aCBjbGFzcz0ic3QwIiBkPSJNMjAsMTcuNWMxLjQtMC44LDEuNC0yLjIsMC0zTDE0LDExYy0xLjQtMC44LTIuNi0wLjEtMi42LDEuNXY3YzAsMS43LDEuMiwyLjMsMi42LDEuNUwyMCwxNy41eiIvPjwvZz48L3N2Zz4K);
}

/* - 互动区 */
.post-actions{
    display: flex;
    user-select: none;
    text-align: center;
}
.post-actions .post-action{
    border: none;
    flex: 1 1 30%;
    color: inherit;
    display: block;
    cursor: pointer;
    background: inherit;
}
.post-actions .post-action::before{
    margin-right: .5em;
    font-family: "FontAwesome";
}
.post-actions .likes::before{ content: "\f164" }
.post-actions .share::before{ content: "\f1e0" }
.post-actions .donate::before{ content: "\f283" }

.post-actions .likes-num{
    color: #fff;
    margin-left: .5em;
    border-radius: 1em;
    padding: .25em .5em;
    background-color: #ffa9be;
    background-color: var(--pink);
}

.post-window{
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    padding: 1.5em 1em;
    position: fixed;
    text-align: center;
    visibility: hidden;
    transform: translateY(100%);
    background: #fff;
    background: var(--light-bg);
    box-shadow: 0 0 10px rgba(0, 0, 0, .2);
    box-shadow: var(--thin-shadow);
    transition: transform .3s, visibility .3s;
}
.post-window.active{
    visibility: visible;
    transform: translateY(0);
}

.post-window .wrap{
    max-width: 30em;
}

.post-window.window-share img{
    width: 7em;
    height: 7em;
}

.post-window.window-share i{
    width: 2em;
    color: #fff;
    padding: .5em;
    font-size: 1.5em;
    border-radius: 5em;
}


/* - 评论区 */
.comment-form{
    position: relative;
    margin-bottom: 2em;
}

.comment-form .input-text-group{
    gap: 1em;
    display: flex;
    flex-wrap: wrap;
}

.comment-form .author-text{
    position: relative;
    padding-right: 4em;
}
.comment-form .author-text .btn{
    top: 0;
    right: 0;
    position: absolute;
}

.comment-form input{
    flex: 1;
}

.comment-form input, .comment-form textarea{
    padding: .75em;
    border-radius: 1em;
    border-color: #ddd;
    border-color: var(--light-border);
}

@media screen and (max-width: 600px){
    .comment-form input{ flex: 0 100% }
}

.comment-form .submit{
    padding: 0;
    width: 3em;
    height: 3em;
    color: #fff;
    margin-left: auto;
    border-radius: 66%;
    background-color: #ffa9be;
    background-color: var(--pink);
}
.comment-form .submit::before{
    content: "\f1d8";
    font-family: "FontAwesome";
}

.comment-form .cancel-reply{
    text-align: right;
    margin-bottom: .5em;
}

.comment-avatar{
    width: 3em;
    float: left;
    margin-right: 1em;
}
.comment-avatar img{
    height: auto;
    border-radius: 66%;
}

.comment-list .avatar{
    width: 3em;
    height: 3em;
    float: left;
    display: block;
    border-radius: 66%;
    transition: box-shadow .3s;
    box-shadow: 0 .25em .5em rgba(0, 0, 0, .2);
}
.comment-list div:hover .avatar{
    box-shadow: 0 .3em .6em rgba(0, 0, 0, .3);
}

.comment-list .comment-item{ margin-bottom: 1em }
.comment-list .comment-item:last-child{ margin-bottom: 0 }

.comment-list .comment-meta{ margin-bottom: .5em }

.comment-meta .comment-time{
    color: #aaa;
    font-size: .75em;
    margin-left: .5em;
}
.comment-list .comment-author, .comment-list a{ font-weight: 300 }

.comment-list .content{
    background: rgba(255, 169, 190, .1);
    border-radius: .5em;
    margin: 0 0 1em 1.5em;
    word-break: break-word;
    padding: .75em .75em .75em 2.5em;
    transition: background-color .3s;
}

.comment-list .content.active{ background-color: rgba(213, 240, 14, .2) }

/* - 作者的评论 */
.comment-item.by-author > .content{ background: rgba(85, 185, 255, .1) }
.comment-item.by-author > .content a{ color: cornflowerblue }

/* - 子评论 */
.comment-list .comment-children{ margin-left: 1em }

/* - 回复评论 */
.comment-list .comment-reply{
    opacity: 0;
    float: right;
    transition: opacity .3s;
}
.comment-list .content:hover .comment-reply{ opacity: 1 }

.no-comment{
    padding: 1em;
    text-align: center;
    border-radius: 1em;
    background-color: #fafafa;
    background-color: var(--gray-bg);
}

/* - 目录树 */
.article-list{
    position: relative;
    transition: transform .3s;
}

.article-list .container{
    flex: 0;
    right: 0;
    overflow: auto;
    position: absolute;
}
.article-list .contents{
    top: 13rem;
    overflow: auto;
    position: fixed;
    max-height: 60vh;
    max-height: calc(100vh - 26rem);
    font-size: .875em;
    margin-left: 1.5em;
    padding-right: .5em;
}

.article-list a{
    opacity: .6;
    color: inherit;
    display: block;
    margin-bottom: .75em;
    transition: opacity .3s;
}
.article-list a:hover{
    opacity: 1;
}

.article-list .item-2{
    margin-left: .5em;
}

.article-list .item-3{
    margin-left: 1em;
}

.article-list .item-4{
    margin-left: 1.5em;
}

.article-list .item-5{
    margin-left: 2em;
}

.article-list .item-6{
    margin-left: 2.5em;
}

@media screen and (max-width: 799px){
    .article-list{
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 2;
        position: fixed;

        min-height: 40%;
        max-height: 80%;

        display: flex;
        flex-direction: column;

        padding: 1.5em 1em;
        box-shadow: 0 0 10px rgba(0, 0, 0, .2);
        box-shadow: var(--thin-shadow);
        transform: translateY(110%);
        border-color: var(--border);
        background-color: #fff;
        background-color: var(--light-bg);
    }

    .article-list.active{
        opacity: 1;
        transform: translateY(0%);
    }

    .article-list::before{
        flex: 0;
        display: block;
        content: "文章目录";
        font-size: 1.17em;
        text-align: center;
        margin-bottom: 1rem;
    }

    .article-list .container, .article-list .contents{
        position: static;
    }

    .article-list .contents{
        overflow: auto;
        margin-left: 0;
        font-size: inherit;
    }
}

/* - 归档 */
.archives-list a{ color: inherit }

.archives-list li{
    margin-bottom: .5em;
    list-style-type: circle;
}

.archives-list .date{
    float: right;
    opacity: .6;
}

/* - 追番 */
.bangumi-item{
    color: inherit;
    text-align: center;
}
.bangumi-img{
    overflow: hidden;
    position: relative;
    border-radius: 1em;
    padding-bottom: 140%;
    background: center/cover;
}
.bangumi-item h3{ margin: 1em 0 }

.bangumi-status{
    left: 0;
    right: 0;
    bottom: 0;
    color: #fff;
    position: absolute;
    transition: transform .3s;
    transform: translateY(100%);
    background: rgba(0, 0, 0, .5);
}
.bangumi-img:hover .bangumi-status{ transform: translateY(0) }

.bangumi-status-bar{
    top: 0;
    bottom: 0;
    max-width: 100%;
    position: absolute;
    background-color: #ffa9be;
    background-color: var(--pink);
}
.bangumi-status p{
    padding: .5em;
    position: relative;
}

/* 4 - 页尾
-------------------------------- */
footer{
    padding: 2em 0;
    position: relative; /* PC 目录树要被它挡住 */
    background: #fff;
    background: var(--light-bg);
    box-shadow: 0 0 8px rgba(0, 0, 0, .1);
}
footer h3{ color: #666 }

.foot-action{
    z-index: 3;
    right: 1rem;
    bottom: 1rem;
    position: fixed;
    line-height: 2.5em;
    text-align: center;
}

.foot-action .to-top, .foot-action .toggle-list{
    width: 2.5em;
    height: 2.5em;
    cursor: pointer;
    background: #fff;
    background: var(--light-bg);
    border-radius: 66%;
    box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
    box-shadow: var(--thin-shadow);
}

.foot-action .to-top::before, .foot-action .toggle-list::before{
    font-family: "FontAwesome";
}

.foot-action .to-top{
    transform: scale(0);
    transition: transform .3s;
}

.foot-action .to-top.active{ transform: scale(1) }

.foot-action .to-top::before{
    content: "\f062";
}

.foot-action .toggle-list{
    display: none;
    margin-top: .75em;
}

.foot-action .toggle-list::before{
    content: "\f00b";
}

@media screen and (max-width: 800px){
    .foot-action .toggle-list{
        display: block;
    }
}

.foot-widget{ margin-bottom: 3em }

.foot-widget li{
    overflow: hidden;
    white-space: nowrap;
    margin-bottom: .5em;
    text-overflow: ellipsis;
}
.foot-widget li::before{
    content: "\f105";
    margin-right: .75em;
    font-family: "FontAwesome";
}

.foot-widget .foot-comments a{
    color: inherit;
    display: block;
    overflow: hidden;
    white-space: nowrap;
    margin-bottom: .5em;
    text-overflow: ellipsis;
}
.foot-widget .foot-comments img{
    margin-right: .5em;
    border-radius: 66%;
}

.foot-date span{ color: var(--pink) }

.foot-copyright{
    color: #999;
    font-size: .875em;
}
.foot-copyright p{ margin: .25em 0 }

.foot-social a{
    color: #777790;
    margin-right: .75em;
}
.foot-social a:last-child{ margin: 0 }

/* 5 - 附加
-------------------------------- */
.token.comment, .token.block-comment, .token.prolog, .token.doctype, .token.cdata{ color: slategray }
.token.punctuation{ color: #f8f8f2 }
.token.namespace { opacity: .7 }
.token.property, .token.tag, .token.function-name, .token.constant, .token.symbol, .token.deleted{ color: #f92672 }
.token.boolean, .token.number { color: #ae81ff }
.token.selector, .token.attr-name, .token.string, .token.char, .token.function, .token.builtin, .token.inserted{ color: #d4f00e }

.token.operator, .token.entity, .token.url, .token.variable{ color: #f8f8f2 }
.token.atrule, .token.attr-value, .token.class-name{ color: #e6db74 }
.token.keyword { color: #acf0dc }
.token.regex, .token.important{ color: #fd971f }

.language-css .token.string, .style .token.string {
    color: #a67f59;
    background: rgba(255, 255, 255, 0.5);
}

.token.important, .token.bold { font-weight: bold }
.token.italic { font-style: italic }
.token.entity { cursor: help }
.token.important { font-weight: normal }