@charset "UTF-8";

html::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.051);
}
html::-webkit-scrollbar-thumb:hover {
    background-color: rgba(0, 0, 0, 0.249);
}


// 主体
$light-background: #f0f0f0;
$light-color:#262626;

// 头部
$light-header-title:#141414;
$light-header-title-hover:#595959;
$light-header-description:#595959;
$light-header-description-hover:#141414;

// 主体
$light-main-background:#fafafa;
$light-main-box-shadow:#bfbfbf;

// 首页
$light-main-index-h1:#1f1f1f;
$light-main-index-h1-hover:#595959;
$light-main-index-p:#262626;
$light-main-index-info:#8c8c8c;
$light-main-index-info-border:#f3f3f3;

// 归档 分类目录 分类 标签目录 标签 友链
$light-main-pages-title:#1f1f1f;
$light-main-pages-li-title:#262626;
$light-main-pages-li-title-hover:#595959;
$light-main-pages-li-span:#8c8c8c;

// 文章分页
$light-pagenav-a:#262626;
$light-pagenav-a-hover:#595959;

// 文章
$light-main-post-title:#1f1f1f;
$light-main-post-title-info-border:#f5f5f5;
$light-main-post-title-info-span:#8c8c8c;
$light-main-post-title-info-i:#8c8c8c;

// 日志
$light-main-journals-info:#8c8c8c;

// 脚注
$light-footer-copyright:#bfbfbf;
$light-footer-copyright-hover:#262626;

// 评论
$light-comment-background:#fafafa;
$light-comment-background-box-shadow:#bfbfbf;
$light-comment-post-bottom-menu-border:#f5f5f5;
$light-comment-post-bottom-menu-a:#262626;
$light-comment-post-bottom-menu-a-hover:#595959;

// 日间模式

[data-mode="light"] {
    // 滚动条






    // 主体
    body {
        background-color: $light-background;
        color: $light-color;
    }

    // Header 头部
    .header {

        // 站点标题
        >.title {
            >a {
                >span {
                    color: $light-header-title;

                    &:hover {
                        color: $light-header-title-hover;
                    }
                }
            }
        }

        // 二级标题
        >.description {
            color: $light-header-description;

            >.socials {
                >a {
                    color: $light-header-description;

                    &:hover {
                        color: $light-header-description-hover;
                    }
                }
            }
        }

    }

    // main 主体
    main {
        background: $light-main-background;
        box-shadow: 0 0.375rem 1rem -0.5rem $light-main-box-shadow;

        // 首页
        .index {
            >h1 {
                >a {
                    color: $light-main-index-h1;
                    &:hover{
                        color: $light-main-index-h1-hover;
                    }
                }
            }

            >p {
                color: $light-main-index-p;
            }

            >.info {
                border-bottom: 1px solid $light-main-index-info-border;

                .date,
                .tag {
                    span {
                        color: $light-main-index-info;
                    }

                    a {
                        color: $light-main-index-info;
                    }

                    i {
                        color: $light-main-index-info;
                    }

                }
            }
        }

        // 归档 分类目录 分类 标签目录 标签 友链
        .archives,
        .categories,
        .category,
        .tag,
        .tags,
        .links {
            >ul {

                >.year,
                .name,
                .friend {
                    color: $light-main-pages-title;
                }

                >li {
                    >a {
                        color: $light-main-pages-li-title;

                        &:hover {
                            color: $light-main-pages-li-title-hover;
                        }

                        >span {
                            color: $light-main-pages-li-span;
                        }
                    }

                    >span {
                        color: $light-main-pages-li-span;
                    }
                }
            }
        }

        // 文章分页
        .pagenav {
            a {
                color: $light-pagenav-a;

                &:hover {
                    color: $light-pagenav-a-hover;
                }
            }
        }

        // 文章
        .post {
            >.title {
                >h1 {
                    color: $light-main-post-title;

                    >a {
                        color: $light-main-post-title;
                    }
                }

                >.info {
                    border-bottom: 1px solid $light-main-post-title-info-border;

                    >span {
                        color: $light-main-post-title-info-span;

                        i {

                            color: $light-main-post-title-info-i;
                        }
                    }
                }
            }
        }

        // 日志
        .journals {
            >ul {
                >li {
                    >.info {
                        color: $light-main-journals-info;
                    }
                }
            }

        }
    }

    // 脚注
    footer {
        .copyright {
            a {
                color: $light-footer-copyright;

                &:hover {
                    color: $light-footer-copyright-hover;
                }

            }
        }
    }

    .comment {
        background: $light-comment-background;
        box-shadow: 0 0.375rem 1rem -0.5rem $light-comment-background-box-shadow;
    }

    .post-bottom-menu {
        border-top: 1px solid $light-comment-post-bottom-menu-border;

        >a {
            color: $light-comment-post-bottom-menu-a;
            &:hover{
                color: $light-comment-post-bottom-menu-a-hover;
            }
        }
    }
}


//  =======================================================================


// 主体
$dark-background: #383838;
$dark-color:#b6b6b6;

// 主体
$dark-main-background:#292929;
$dark-main-box-shadow:#262626;

// 头部
$dark-header-title:#bfbfbf;
$dark-header-title-hover:#434343;
$dark-header-description:#8c8c8c;
$dark-header-description-hover:#434343;

// 首页
$dark-main-index-h1:#b8b8b8;
$dark-main-index-h1-hover:#434343;
$dark-main-index-p:#b6b6b6;
$dark-main-index-info:#8c8c8c;
$dark-main-index-info-border:#434343;

// 归档 分类目录 分类 标签目录 标签 友链
$dark-main-pages-title:#b8b8b8;
$dark-main-pages-li-title:#b6b6b6;
$dark-main-pages-li-title-hover:#434343;
$dark-main-pages-li-span:#8c8c8c;

// 文章分页
$dark-pagenav-a:#b6b6b6;
$dark-pagenav-a-hover:#434343;

// 文章
$dark-main-post-title:#b8b8b8;
$dark-main-post-title-info-border:#434343;
$dark-main-post-title-info-span:#8c8c8c;
$dark-main-post-title-info-i:#8c8c8c;

// 日志
$dark-main-journals-info:#8c8c8c;

// 脚注
$dark-footer-copyright:#262626;
$dark-footer-copyright-hover:#bfbfbf;

// 评论
$dark-comment-background:#292929;
$dark-comment-background-box-shadow:#262626;
$dark-comment-post-bottom-menu-border:#434343;
$dark-comment-post-bottom-menu-a:#b6b6b6;
$dark-comment-post-bottom-menu-a-hover:#434343;

// 日间模式
[data-mode="dark"] {

    // 主体
    body {
        background-color: $dark-background;
        color: $dark-color;
    }

    // Header 头部
    .header {

        // 站点标题
        >.title {
            >a {
                >span {
                    color: $dark-header-title;

                    &:hover {
                        color: $dark-header-title-hover;
                    }
                }
            }
        }

        // 二级标题
        >.description {
            color: $dark-header-description;

            >.socials {
                >a {
                    color: $dark-header-description;

                    &:hover {
                        color: $dark-header-description-hover;
                    }
                }
            }
        }

    }

    // main 主体
    main {
        background: $dark-main-background;
        box-shadow: 0 0.375rem 1rem -0.5rem $dark-main-box-shadow;

        // 首页
        .index {
            >h1 {
                >a {
                    color: $dark-main-index-h1;
                    &:hover{
                        color: $dark-main-index-h1-hover;
                    }
                }
            }

            >p {
                color: $dark-main-index-p;
            }

            >.info {
                border-bottom: 1px solid $dark-main-index-info-border;

                .date,
                .tag {
                    span {
                        color: $dark-main-index-info;
                    }

                    a {
                        color: $dark-main-index-info;
                    }

                    i {
                        color: $dark-main-index-info;
                    }

                }
            }
        }

        // 归档 分类目录 分类 标签目录 标签 友链
        .archives,
        .categories,
        .category,
        .tag,
        .tags,
        .links {
            >ul {

                >.year,
                .name,
                .friend {
                    color: $dark-main-pages-title;
                }

                >li {
                    >a {
                        color: $dark-main-pages-li-title;

                        &:hover {
                            color: $dark-main-pages-li-title-hover;
                        }

                        >span {
                            color: $dark-main-pages-li-span;
                        }
                    }

                    >span {
                        color: $dark-main-pages-li-span;
                    }
                }
            }
        }

        // 文章分页
        .pagenav {
            a {
                color: $dark-pagenav-a;

                &:hover {
                    color: $dark-pagenav-a-hover;
                }
            }
        }

        // 文章
        .post {
            >.title {
                >h1 {
                    color: $dark-main-post-title;

                    >a {
                        color: $dark-main-post-title;
                    }
                }

                >.info {
                    border-bottom: 1px solid $dark-main-post-title-info-border;

                    >span {
                        color: $dark-main-post-title-info-span;

                        i {

                            color: $dark-main-post-title-info-i;
                        }
                    }
                }
            }
        }

        // 日志
        .journals {
            >ul {
                >li {
                    >.info {
                        color: $dark-main-journals-info;
                    }
                }
            }

        }
    }

    // 脚注
    footer {
        .copyright {
            a {
                color: $dark-footer-copyright;

                &:hover {
                    color: $dark-footer-copyright-hover;
                }

            }
        }
    }

    .comment {
        background: $dark-comment-background;
        box-shadow: 0 0.375rem 1rem -0.5rem $dark-comment-background-box-shadow;
    }

    .post-bottom-menu {
        border-top: 1px solid $dark-comment-post-bottom-menu-border;

        >a {
            color: $dark-comment-post-bottom-menu-a;
            &:hover{
                color: $dark-comment-post-bottom-menu-a-hover;
            }
        }
    }
}