@charset "UTF-8";
/*定义全局的CSS变量*/

/*白天模式*/
[data-theme="light"] {
    --blog-background: url('../image/blog/20241203003832200.png');
    /*通用字体*/
    --font-color: rgb(0, 0, 0);

    /*头部部分*/
    --header-bgcolor: rgba(255, 255, 255, 0.95);
    /*音乐播放器*/
    --musicPlayer-color: #84eadac7;

    /*身体部分*/
    /*身体容器基本颜色*/
    --ContentBoxBackground-color: rgba(249, 249, 249, 0);

    /*左侧部分*/
    --left-bgcolor: rgba(255, 255, 255, 0.95);
    /*左侧导航栏背景色*/
    --leftNavBoxBackground-color: rgba(161, 234, 251, 1);
    /*左侧导航栏文字颜色*/
    --leftNavBox-color: rgba(26, 26, 26, 0.85);

    /*中间部分*/
    --center-bgcolor: rgba(255, 255, 255, 0.9);
    /*新版和旧版文章页面颜色*/
    --page-color: rgba(255, 255, 255, 0.85);
    /*书写评论信息框*/
    --comments-message-input-bgcolor: #ffffff;
    /*文章分页*/
    --pagercurrent-color: rgba(255, 255, 255, 1);
    --pagercurrentbackground-color: rgba(0, 0, 0, 0.85);
    --pager-color: rgba(0, 0, 0, 1);
    --pagerbackground-color: rgba(249, 249, 249, 0.55);

    /*右侧部分*/
    --right-bgcolor: rgba(255, 255, 255, 0.9);
    /*右侧主题盒子*/
    --theme-box-bgcolor: rgba(215, 215, 215, 0.8);

    /*统计*/
    --statisticsInfoShowBox-color: rgba(161, 234, 251, 0.85);
    --statisticsInfoHideBox-color: rgba(161, 234, 251, 0.85);
    /*layui的垃圾*/
    --layui-table-color: rgba(56, 56, 56, 1);
    --layui-table-bgcolor: rgba(249, 249, 249, 0.9);
}

/*黑夜模式*/
[data-theme="dark"] {
    --blog-background: url('../image/blog/幽静的夜.png'); /* 黑夜模式的背景 */
    /*通用字体*/
    --font-color: rgba(238, 238, 238, 1);

    /*头部部分*/
    --header-bgcolor: rgba(26, 26, 26, 0.85);
    /*音乐播放器*/
    --musicPlayer-color: rgba(132, 234, 218, 0);

    /*身体部分*/
    /*身体容器基本颜色*/
    --ContentBoxBackground-color: rgba(249, 249, 249, 0);

    /*左侧部分*/
    --left-bgcolor: rgba(47, 54, 60, 0.85);
    /*左侧导航栏背景色*/
    --leftNavBoxBackground-color: rgba(46, 52, 57, 1);
    /*左侧导航栏文字颜色*/
    --leftNavBox-color: rgba(229, 228, 228, 0.85);

    /*中间部分*/
    --center-bgcolor: rgba(47, 54, 60, 0.85);
    /*新版和旧版文章页面颜色*/
    --page-color: rgba(74, 84, 94, 1);
    /*书写评论信息框*/
    --comments-message-input-bgcolor: #535b61;
    /*文章分页*/
    --pagercurrent-color: rgba(47, 54, 60, 0.85);
    --pagercurrentbackground-color: rgba(255, 255, 255, 1);
    --pager-color: rgba(249, 249, 249, 0.6);
    --pagerbackground-color: rgba(40, 45, 49, 0.85);

    /*右侧部分*/
    --right-bgcolor: rgba(47, 54, 60, 0.85);
    /*右侧主题盒子*/
    --theme-box-bgcolor: rgb(85, 85, 85);

    /*统计*/
    --statisticsInfoShowBox-color: rgba(47, 54, 60, 0.85);
    --statisticsInfoHideBox-color: rgba(47, 54, 60, 0.85);
    /*layui的垃圾*/
    --layui-table-color: rgba(249, 249, 249, 0.9);
    --layui-table-bgcolor: rgba(56, 56, 56, 1);
}

.font-1 {
    font-size: 1px !important;
}

.font-2 {
    font-size: 2px !important;
}

.font-3 {
    font-size: 3px !important;
}

.font-4 {
    font-size: 4px !important;
}

.font-5 {
    font-size: 5px !important;
}

.font-6 {
    font-size: 6px !important;
}

.font-7 {
    font-size: 7px !important;
}

.font-8 {
    font-size: 8px !important;
}

.font-9 {
    font-size: 9px !important;
}

.font-10 {
    font-size: 10px !important;
}

.font-11 {
    font-size: 11px !important;
}

.font-12 {
    font-size: 12px !important;
}

.font-13 {
    font-size: 13px !important;
}

.font-14 {
    font-size: 14px !important;
}

.font-15 {
    font-size: 15px !important;
}

.font-16 {
    font-size: 16px !important;
}

.font-17 {
    font-size: 17px !important;
}

.font-18 {
    font-size: 18px !important;
}

.font-19 {
    font-size: 19px !important;
}

.font-20 {
    font-size: 20px !important;
}

.font-21 {
    font-size: 21px !important;
}

.font-22 {
    font-size: 22px !important;
}

.font-23 {
    font-size: 23px !important;
}

.font-24 {
    font-size: 24px !important;
}

.font-25 {
    font-size: 25px !important;
}

.font-26 {
    font-size: 26px !important;
}

.font-27 {
    font-size: 27px !important;
}

.font-28 {
    font-size: 28px !important;
}

.font-29 {
    font-size: 29px !important;
}

.font-30 {
    font-size: 30px !important;
}

.font-31 {
    font-size: 31px !important;
}

.font-32 {
    font-size: 32px !important;
}

.font-33 {
    font-size: 33px !important;
}

.font-34 {
    font-size: 34px !important;
}

.font-35 {
    font-size: 35px !important;
}

.font-36 {
    font-size: 36px !important;
}

.font-37 {
    font-size: 37px !important;
}

.font-38 {
    font-size: 38px !important;
}

.font-39 {
    font-size: 39px !important;
}

.font-40 {
    font-size: 40px !important;
}


/*一些有意思的颜色*/
.c-gray {
    color: rgba(136, 136, 136, 1);
}

.b-gray {
    background: rgba(136, 136, 136, 0.2);
}

.bc-gray {
    color: rgba(136, 136, 136, 1);
    background: rgba(136, 136, 136, 0.2);
}

.c-white {
    color: rgba(255, 255, 255, 1);
}

.b-white {
    background: rgba(255, 255, 255, 0.2);
}

.bc-white {
    color: rgba(255, 255, 255, 1);
    background: rgba(255, 255, 255, 0.2);
}

.c-red {
    color: rgba(255, 84, 115, 1);
}

.b-red {
    background: rgba(255, 84, 115, 0.2);
}

.bc-red {
    color: rgba(255, 84, 115, 1);
    background: rgba(255, 84, 115, 0.2);
}

.c-red-2 {
    color: rgba(194, 41, 46, 1);
}

.b-red-2 {
    background: rgba(194, 41, 46, 0.2);
}

.bc-red-2 {
    color: rgba(194, 41, 46, 1);
    background: rgba(194, 41, 46, 0.2);
}

.c-yellow {
    color: rgba(255, 111, 6, 1);
}

.b-yellow {
    background: rgba(255, 111, 6, 0.2);
}

.bc-yellow {
    color: rgba(255, 111, 6, 1);
    background: rgba(255, 111, 6, 0.2);
}

.c-yellow-2 {
    color: rgba(179, 103, 8, 1);
}

.b-yellow-2 {
    background: rgba(179, 103, 8, 0.2);
}

.bc-yellow-2 {
    color: rgba(179, 103, 8, 1);
    background: rgba(179, 103, 8, 0.2);
}

.c-blue {
    color: rgba(41, 151, 247, 1);
}

.b-blue {
    background: rgba(41, 151, 247, 0.2);
}

.bc-blue {
    color: rgba(41, 151, 247, 1);
    background: rgba(41, 151, 247, 0.2);
}

.c-blue-2 {
    color: rgba(77, 130, 249, 1);
}

.b-blue-2 {
    background: rgba(77, 130, 249, 0.2);
}

.bc-blue-2 {
    color: rgba(77, 130, 249, 1);
    background: rgba(77, 130, 249, 0.2);
}

.c-cyan {
    color: rgba(8, 196, 193, 1);
}

.b-cyan {
    background: rgba(8, 196, 193, 0.2);
}

.bc-cyan {
    color: rgba(8, 196, 193, 1);
    background: rgba(8, 196, 193, 0.2);
}

.c-green {
    color: rgba(18, 185, 40, 1);
}

.b-green {
    background: rgba(18, 185, 40, 0.2);
}

.bc-green {
    color: rgba(18, 185, 40, 1);
    background: rgba(18, 185, 40, 0.2);
}

.c-green-2 {
    color: rgba(72, 135, 24, 1);
}

.b-green-2 {
    background: rgba(72, 135, 24, 0.2);
}

.bc-green-2 {
    color: rgba(72, 135, 24, 1);
    background: rgba(72, 135, 24, 0.2);
}

.c-purple {
    color: rgba(213, 72, 245, 1);
}

.b-purple {
    background: rgba(213, 72, 245, 0.2);
}

.bc-purple {
    color: rgba(213, 72, 245, 1);
    background: rgba(213, 72, 245, 0.2);
}

/*通用样式类*/
/*一点变形动画使过渡平滑*/
.defaultTransition {
    transition: background-color 1s ease,
    width 0.6s ease, height 0.6s ease,
    left 0.6s ease, right 0.6s ease,
    top 0.6s ease, bottom 0.6s ease,
    border-radius 0.6s ease;
}

/* 目标回复的高亮样式（初始透明） */
.flicker {
    animation: color-change 2s ease; /* 应用动画 */
}

/* 颜色变换动画 */
@keyframes color-change {
    0% {
        background-color: transparent;
    }
    50% {
        background-color: #fff8cc;
    }
    /* 黄色高亮 */
    100% {
        background-color: transparent;
    }
}

/*链接没有下划线*/
a {
    text-decoration: none;
    /*color: inherit;*/
    /*color: var(--font-color);*/
    /*为什么要强制，因为layui定义了一套a标签的*/
    color: var(--font-color) !important;
}

/*无法选中*/
.not-select {
    user-select: none; /* 禁止选中文字 */
    -webkit-user-select: none; /* 兼容WebKit浏览器，如Safari和Chrome */
    -moz-user-select: none; /* 兼容Firefox */
    -ms-user-select: none; /* 兼容Edge */
    -webkit-tap-highlight-color: transparent; /* 禁止点击高亮 */
}

/*使每一块部分分明，颜色将近区分*/
.box-shadow {
    /*这个可以让用百分比的一些元素不再思考边框占用的像素*/
    box-sizing: border-box;
    box-shadow: 0 0 3px rgba(0, 0, 0, .05);
    /*添加1px的边框,所有边款-2px*/
    border: 1px solid rgba(0, 0, 0, .1);
}

.flex {
    display: flex;
}

/*富文本编辑器会设置长宽有可能导致不可预见性的超出文章内容*/
img {
    max-width: 100%;
    height: auto; /* 保持图片高宽比，避免拉伸变形 */
}

/*定义一个关键帧动画供其他调用*/
/*用于鼠标悬停微微翻动放大的样子*/
/*找不到这个动画好像动作也非常不错*/
@keyframes index-link-active {
    0% {
        transform: perspective(2000px) rotateX(0) rotateY(0) translateZ(0);
    }
    16% {
        transform: perspective(2000px) rotateX(10deg) rotateY(5deg) translateZ(32px);
    }
    100% {
        transform: perspective(2000px) rotateX(0) rotateY(0) translateZ(65px);
    }
}

/*全部引用*/
/*定义一个字体名称*/
@font-face {
    font-family: FontStyle;
    src: url("../font/hulirou.woff2") format("woff2");
    font-display: swap;
}

/*所有都是用这个字体*/
* {
    font-family: FontStyle, serif;
    /*color: #777;*/
    /*color: var(--font-color) !important;*/
    color: var(--font-color);
    /*font: 14px;*/
}

html {
    background: #6A6B6F var(--blog-background) center / cover no-repeat fixed;
    font-size: 16px; /* 默认字体大小 */
}

html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 0;
}

/*主框架*/
#alllayout {
    position: relative;
    width: 90vw;
    height: 100vh;
    /*居中*/
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}


#header {
    position: fixed;
    width: 90vw;
    top: 0;
    height: 55px;
    background-color: var(--header-bgcolor);
    z-index: 999;
    color: #343434;
    display: flex;
    /*上下居中，应该也叫水平居中吧*/
    align-items: center;
}


/*头部部件位置*/
/*logo标识*/
#logo {
    margin: 0;
    display: inline-block;
}

#logo > a {
    margin: 0;
    width: 6vh;
    height: 6vh;
    display: inline-block
}

#logo > a > img {
    margin: 0.5vh;
    width: 5vh;
    height: 5vh;
    /*使边框圆润*/
    border-radius: 12%;
    /*因为layui使用了img样式vertical-align造成冲突,所以得使用高级样式覆盖掉*/
    /*vertical-align: initial;*/
}

#logo:hover {
    /*使用2d旋转,绕中心点旋转360度,过度动画为2秒*/
    transform: rotate(360deg);
    transition: transform 1.5s ease;
}

/*音乐播放器*/
#musicPlayer {
    margin-left: calc(90vw * 0.15 - 6vh);
}

/*搜索框*/
.searchBox {
    margin-left: 38vw;
    display: inline-block;
}

.searchBox .search {
    width: 100%;
    position: relative;
    display: flex;
}

.searchBox .searchTerm {
    width: 30px;
    border: 3px solid #00B4CC;
    border-right: none;
    padding: 5px;
    height: 20px;
    border-radius: 5px 0 0 5px;
    outline: none;
    color: #9DBFAF;
    transition: width 0.8s ease;
}

.searchBox .searchTerm:focus {
    color: #00B4CC;
    width: 120px;
}


.searchBox .searchButton {
    width: 40px;
    height: 36px;
    border: 1px solid #00B4CC;
    background: #00B4CC;
    text-align: center;
    color: #fff;
    border-radius: 0 5px 5px 0;
    cursor: pointer;
    font-size: 20px;
}

/*灯开关*/
#lightSwitch {
    position: fixed;
    /*头部条子90vw，减去按比例缩小的0.2为0.8，然后平分，在不要太贴边+20px*/
    right: calc(10vw - 0.4 * 212px + 20px);
}

#content {
    width: 100%;
    /*height: 94%;*/
    display: flex;
    padding: 0;
    position: relative;
    margin-top: 55px;
    /*background-color: var(--center-bgcolor);*/
}

#left {
    position: fixed;
    width: 180px;
    background: var(--left-bgcolor);
    margin: 0;
    padding: 0;
    border: 0;
    display: flex;
    flex-direction: column;
    height: calc(100vh - 55px);
}

#center {
    height: auto;
    min-height: calc(100vh - 55px);
    width: 70%;
    padding: 0;
    background: var(--center-bgcolor);
    margin-left: 180px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}

#right {
    width: 220px;
    /*height: 500px;*/
    margin: 0;
    padding: 0;
    background: var(--right-bgcolor);
    /*position: sticky;*/
    /*top: 55px;*/
    /*bottom: 0;*/
}

#leftFooter {
    width: 100%;
    display: flex;
    justify-content: space-around;
    margin-top: auto;
}

#left img {
    width: 50px;
    height: 50px;
}

/*写评论的盒子*/
#write-comments-box {
    margin: 2% 5%;
}

#write-comments-box > .write-comments-title {
    margin-bottom: 20px;
    font-size: 18px;
    border-bottom: 1px solid #ddd;

}

#write-comments-box > .write-comments-title > span:nth-child(1) {
    border-bottom: 2px solid #4693e9;

}

#write-comments-box > .write-comments-body {
    background-color: var(--center-bgcolor);
    border: 1px solid var(--font-color);
    overflow: hidden;
    box-sizing: border-box;
}


/*评论信息填写框*/
#write-comments-box #comment-writer-info {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
    height: 100px;
    border: 1px #ccced1;;
}


/*评论提交按钮*/
#write-comments-box .comment-submit {
    float: right;
    position: relative;
    right: 5%;
    bottom: 3%;
    height: 30px;
    width: 88px;
    border-radius: 4px;
    background-color: #00a2d4;
}

#write-comments-box input {
    background-color: var(--comments-message-input-bgcolor);
    width: 100%;
}

/*补ckeditor的没有颜色变换的坑，只补上传评论的，后台上传的不补*/
/* 头部的文字颜色 */
#write-comments-box .ck-reset_all :not(.ck-reset_all-excluded *),
#write-comments-box .ck.ck-reset_all {
    color: var(--font-color) !important;
}

/* 编辑器头部和编辑内容的背景色 */
#write-comments-box .ck.ck-toolbar,
#write-comments-box .ck-editor__main > .ck-editor__editable {
    background: var(--center-bgcolor) !important;
}

/* 编辑器的边框颜色改的和大边框的颜色一致,去除左右边框 */
#write-comments-box .ck-editor__main > .ck-editor__editable:not(.ck-focused) {
    border-color: var(--font-color) !important;
    border-left: none !important;
    border-right: none !important;
}


/*文章内容*/
.page2 {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
    margin: 2.5rem 1rem 1rem 1rem;
    /*这个会使下面的悬停动画超出文章盒子*/
    /*overflow: hidden;*/
}

.page2 > a {
    border-style: solid;
    --un-border-opacity: 1;
    border-color: rgb(0 0 0 / var(--un-border-opacity));
    border-width: 2px;
}

.page2 > a:hover {
    opacity: 1;
    z-index: 99;
    /*下面的圆角会使内部图片不跟着变圆，直接使用影藏*/
    overflow: hidden;
    border-radius: 15px;
    transform: translateY(-5px);
    /*阴影就算了好像也不好看*/
    box-shadow: 0 3px 20px rgba(0, 0, 0, .2);
    animation: index-link-active 1s cubic-bezier(0.315, 0.605, 0.375, 0.925) forwards;
}

/*略微旋转加放大*/
/*.page2 > a:hover {*/
/*    transition: All .7s ease;*/
/*    -webkit-transform: scale(1.2) rotate(-6deg);*/
/*    -moz-transform: scale(1.2) rotate(-6deg);*/
/*    -o-transform: scale(1.2) rotate(-6deg);*/
/*    -ms-transform: scale(1.2) rotate(-6deg);*/
/*    transform: scale(1.2) rotate(-6deg);*/
/*}*/

.page2 > a > img {
    object-fit: cover;
    width: 100%;
    height: 9rem;
}


.page2 > a > .textBox {
    background: var(--page-color);
    padding: 1.5rem;
}

.page2 > a > .textBox > .title {
    color: #c1508e;
    font-weight: 700;
    font-size: 1.25rem;
    line-height: 1.75rem;
    margin-bottom: .5rem;
}

.page2 > a > .textBox > .introduction {
    color: var(--font-color);
    font-size: .875rem;
    line-height: 1.25rem;
}

.page2 > a > .textBox > .pageInfo {
    color: var(--font-color);
    font-size: .875rem;
    line-height: 1.25rem;
    text-align: right;
}


/*旧版文章*/
.page1 {
    width: 96%;
    height: 180px;
    margin: 2%;
    background-color: var(--page-color);
    border-radius: 10px;
}

.page1 a {
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
    display: flex
}

.page1 img {
    margin: auto 25px;
    width: 25%;
    height: 120px;
}

.page1 .textBox {
    width: 68%;
    display: inline-block;
    position: relative;
}

.page1 h2 {
    position: relative;
    top: 20px;
}

.page1 .pageInfo {
    font-size: 14px;
    width: 100%;
    position: absolute;
    bottom: 30px;
}


.page1:hover {
    opacity: 1;
    z-index: 99;
    border-radius: 20px;
    transform: translateY(-5px);
    /*阴影就算了好像也不好看*/
    /*box-shadow: 0 3px 20px rgba(0, 0, 0, .25);*/
    animation: index-link-active 1s cubic-bezier(0.315, 0.605, 0.375, 0.925) forwards;
}

/*这是用于请求数据后渲染分页使用。最好不要让这些类干扰到其他正常的样式*/
.pager {
    list-style: none;
    display: flex;
    margin: 1rem auto;
    margin-bottom: 3rem;
    padding: 0 20px;
    justify-content: center;
    max-width: 100%;
    overflow: auto;
    position: relative;
    -webkit-overflow-scrolling: touch;
}

.pager * {
    box-sizing: border-box
}

.pager li a {
    display: flex;
    justify-content: center;
    align-items: center;
    line-height: 1;
    padding: .8rem;
    width: 2.6rem;
    height: 2.6rem;
    transition: .3s cubic-bezier(.25, .46, .45, .94) all;
    color: var(--pager-color) !important;
    background: var(--pagerbackground-color) !important;
}

.pager li.current a {
    color: var(--pagercurrent-color) !important;
    background: var(--pagercurrentbackground-color) !important;
}

.pager li a:hover {
    color: var(--pagercurrent-color) !important;
    background: var(--pagercurrentbackground-color) !important;
}

/*.pager .prev a span:hover .text {*/
/*    color: var(--pager-color);*/
/*    background: var(--pagerbackground-color);*/
/*}*/


/*一个Q弹的按钮*/
.Q-Box {
    /*不主动设大小*/
    /*width: 100px;*/
    /*height: 100px;*/
    border-radius: 0.75rem;
    border-color: #aaaeb4;
    border-width: 2px;
    border-style: solid;
}

.Q-Box .bg-eeeeeee {
    background-color: #eeeeee;
}

.Q-Box:hover {
    border-color: rgb(96 165 250);
}


.Q-Box:active {
    --tw-scale-x: .9;
    --tw-scale-y: .9;
    transform: translate(0, 0) /* 替换 --tw-translate-x 和 --tw-translate-y 的值 */ rotate(0) /* 替换 --tw-rotate 的值 */ skewX(0) /* 替换 --tw-skew-x 的值 */ skewY(0) /* 替换 --tw-skew-y 的值 */ scaleX(0.9) /* 直接设置缩放比例为 0.9 */ scaleY(0.9); /* 直接设置缩放比例为 0.9 */
    transition-duration: 75ms
}


/*跳转页面的标签,本来想做成风铃的,但没找到特效*/
#userDataBox .string {
    position: fixed;
    z-index: 1000;
    top: 0;
    left: 95%;
    transform: translateX(-50%);
    width: 2px;
    height: 100px;
    background-color: #333;

}

#userDataBox .img-card {
    position: fixed;
    z-index: 500;
    top: 100px;
    left: 95%;
    transform: translateX(-50%);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background-color: #ccc;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
}

#userDataBox .userIcon:hover {
    /*使用2d旋转,绕中心点旋转360度,过度动画为2秒*/
    transform: rotate(360deg);
    transition: transform 1.5s ease;
}

#userDataBox .userIcon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
}


/*侧边导航栏*/
.leftNavBox {
    background-color: var(--leftNavBoxBackground-color);
    /*border: #2f363c 1px solid;*/
}


.leftNavBox * {
    font-size: 16px;
    margin: 0;
    padding: 0;
    border: 0;
    width: 100%;
}


.leftNavBox a {
    /*去掉默认链接的样式*/
    color: var(--leftNavBox-color);
    text-decoration: none;
    display: block;
    width: 100%;
    height: 50px;
    line-height: 50px; /* 使文本垂直居中 */
    text-indent: 2em; /* 还是这个合适 */
    position: relative;
    /*这个必须加，找了一整天的js bug*/
    overflow: hidden;
}

.leftNavBox a > .bigiconfont {
    /*上面的那个只能管到a标签，里面的可管不到。做颜色变换的用全局*/
    /*color: #d7d7d7;*/
    line-height: 50px; /* 使文本垂直居中 */
}

.leftNavBox a > .bigiconfont:first-of-type {
    /*强制图标对其文本*/
    position: relative;
    top: 5px;
}

.leftNavBox .foldIcon {
    /*父元素原来指的是最近的使用了position的父级元素，我一直以为是整个html结构中的父级元素*/
    position: absolute; /* 绝对定位 */
    left: 120px; /* 距离右侧10px */
    top: 1px;
    transition: transform 0.5s ease; /* 设置过渡效果 */
    transform-origin: 18% 50%;
    font-size: 10px;
}


/*折叠字内容*/
.leftNavBox .navChild {
    background-color: rgba(0, 0, 0, .3);
    height: 0;
    overflow: hidden;
    transition: height 0.6s ease; /* 设置过渡效果 */
}

.leftNavBox .navChild > dd:hover {
    background-color: rgba(0, 0, 0, .5);
}

/*动态滑块*/
.leftNavBox .navBar {
    background-color: #16baaa;
    z-index: 1000;
    opacity: 0;
    position: absolute;
    top: 55px;
    height: 0px;
    width: 5px;
    margin-top: 3px; /* 上外边距 1px */
    margin-bottom: 3px; /* 下外边距 1px */
    transition: height 0.8s ease, opacity 0.8s ease, top 0.3s ease;; /* 设置高度和透明度的过渡效果 */
}

/*右侧主题栏*/
.theme-box {
    margin: 10px;
    padding: 5px;
    background-color: var(--theme-box-bgcolor);
    border-radius: 5%;
    box-shadow: 0px 0px 20px -5px rgba(158, 158, 158, 0.22);
}

/*热门文章*/
#theme-hot-article {
}

.theme-hot-article-title {
    position: relative;
    font-size: 18px
}

.theme-hot-article-box {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
}

.hot-article-item {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.hot-article-item::after {
    content: "";
    display: block;
    padding-top: 50%;
}

.hot-article-item > a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.hot-article-item > a > img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.hot-article-item > a:nth-of-type(2) > div {
    position: absolute;
    z-index: 1;
    left: 0px;
    right: 0px;
    bottom: 0px;
    padding: 7%;
    background: linear-gradient(rgba(6, 6, 8, 0), rgba(0, 0, 0, 0.7));
}

/*防止颜色看不清加个黑色底纹后使用白色字体*/
.hot-article-item > a > div > .hot-article-title {
    color: rgba(255, 255, 255, 0.85);
}

.hot-article-item > a > div > .hot-article-introduction {
    color: rgba(255, 255, 255, 0.85);
}

/*随机文章*/
#theme-random-article {
}

.theme-random-article-title {
    position: relative;
    font-size: 18px
}

/*原本是个红色的竖线*/
/*.theme-random-article-title:before {*/
/*    position: absolute;*/
/*    content: '';*/
/*    width: 4px;*/
/*    background: #f04494;*/
/*    top: 10%;*/
/*    left: 7px;*/
/*    bottom: 10%;*/
/*    border-radius: 5px;*/
/*    box-shadow: 1px 1px 3px -1px #f04494*/
/*}*/

.random-article-item {
    overflow: hidden;
    display: inline-flex;
    width: 100%
}

.random-article-item > h2 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 14px;
    /*padding: 0 10px 0 10px;*/
}

.random-article-item > h2 > span {
    border-radius: 4px;
    display: inline-block;
    transition: .15s;
    border: 1px solid transparent;
    text-align: center;
    font-weight: 400;
    /*background: var(background);*/
    /*color: var(color);*/
    text-shadow: 0 0 0;
    line-height: 1.44;
    margin-right: 3px;
    font-size: .8em;
    padding: 0 .2em;
    vertical-align: .1em;
    min-width: 1.6em
}

.random-article-item > h2 > a:hover {
    margin-left: 8px;
    color: rgb(84, 181, 219) !important;
    transition: margin-left 0.3s ease, color 0.3s ease;
}

/*标签云*/
#theme-tag-cloud {

}


.theme-tag-cloud-title {
    position: relative;
    font-size: 18px
}


.theme-tag-cloud-box {
    padding-top: 5px;
    padding-bottom: 5px;
    overflow: hidden;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(33px, 1fr));
    width: 100%;
    height: 100%;
}

.theme-tag-cloud-box > h2 {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 16px;
    margin: 2px 0;
}

.theme-tag-cloud-box > h2 > span {
    border-radius: 4px;
    display: inline-block;
    transition: .15s;
    border: 1px solid transparent;
    text-align: center;
    font-weight: 400;
    text-shadow: 0 0 0;
    line-height: 1.44;
    margin-right: 3px;
    font-size: .8em;
    padding: 0 .2em;
    vertical-align: .1em;
    min-width: 1.6em
}

@keyframes shake {
    0% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(5deg);
    }
    50% {
        transform: rotate(0deg);
    }
    75% {
        transform: rotate(-5deg);
    }
    100% {
        transform: rotate(0deg);
    }
}

.theme-tag-cloud-box > h2:hover {
    animation: shake 0.5s ease infinite;
}

.theme-tag-cloud-box > h2 > span > a:hover {
    color: rgb(84, 181, 219) !important;
    transition: margin-left 0.3s ease, color 0.3s ease;
}


/*文章样式*/
/*文章标题*/

#center .article-title-box {

}

#center .article-title-box .article-title {

}

/*文章基础信息*/
#center .article-title-box .article-information {

}

/*作者头像*/
#center .article-title-box .article-information .writer-icon {
    width: 50px;
    height: 50px;
    margin-left: 5px;
    margin-right: 5px;
    display: inline-block;
    border-radius: 15%;
}

/*作者名称*/
#center .article-title-box .article-information .writer-name {
    display: inline-block;
    margin-left: 3px;
    margin-right: 3px;
}

/*文章创建日期*/
#center .article-title-box .article-information .writer-time {
    display: inline-block;
    margin-left: 3px;
    margin-right: 3px;
}

/*文章浏览次数*/
#center .article-title-box .article-information .view-statistics {
    display: inline-block;
    margin-left: 3px;
    margin-right: 3px;
}

/*文章更新提示*/
#center .article-updata-tip {
    background: rgba(255, 208, 118, 0.28);
    border: 1px solid #f60;
    padding: 10px 15px;
    position: relative;
    margin: 0 10px;
    border-radius: 5px;
    text-align: center;
}

/*分割线*/
#center .divider {
    width: 98%;
    border-bottom: 1px solid rgb(156, 156, 156);
    align-self: center;
    margin-top: 10px;
    margin-bottom: 10px;
}

/*文章内容*/
#center .article-content {
    width: 100%;
    margin-bottom: 50px;
}


#center .read-time {
    margin-top: 1rem;
    margin-bottom: 1rem;
    border: 1px dashed #4580ff;
    text-align: center;
    display: block;
    font-size: 1.125rem;
    width: 98%;
    align-self: center; /* 垂直居中 */

}


/*代码块*/
.article-content pre {
    margin-left: 2%;
    margin-right: 2%;
    background: hsla(0, 0%, 78%, .3);
    border: 1px solid #c4c4c4;
    border-radius: 2px;
    color: #353535;
    direction: ltr;
    font-style: normal;
    min-width: 200px;
    padding: 1em;
    tab-size: 4;
    text-align: left;
    white-space: pre-wrap;
}

.article-content pre code {
    background: unset;
    border-radius: 0;
    padding: 0;
}

/*文章评论*/
#comments-box {
    margin: 2% 5%;
}

#comments-box .comment-title {
    margin-bottom: 20px;
    font-size: 18px;
    /*border-bottom: 1px solid #ddd;*/
    border-bottom: 1px solid #8d8d8d;
}

#comments-box .comment-title span:nth-child(1) {
    border-bottom: 2px solid #4693e9;
}

#comments-box .comment-body .comment-item {
    margin-bottom: 20px;
    margin-top: 20px;
    border-bottom: 1px solid #c1bdbd;
    display: flex;
}

#comments-box .comment-body .comment-item > a {
    /*margin-bottom: 20px;*/
    display: inline-block;
}

#comments-box .comment-body .comment-item > a > .userIcon {
    border-radius: 12%;
    min-width: 50px;
    width: 50px;
    height: 50px;
    display: inline-block;
}

#comments-box .comment-body .comment-item > div {
    margin-left: 20px;
    display: block;
    overflow: hidden;
}

/*评论回复子评论*/
#comments-box .comment-body .comment-item-children {
    margin-left: 70px;
}


/*补layui的没有颜色变换的坑*/
.layui-table-box, .layui-form-checked[lay-skin="primary"] > i {
    color: var(--layui-table-color) !important;
}

.layui-table-box th, .layui-table-box td, .layui-table-box .layui-icon-ok, .layui-table-column input, .layui-table-column button, .layui-table-column select {
    background: var(--layui-table-bgcolor) !important;
}


/*一点有意思的动画*/
@media (max-width: 0px) {
    @supports not ((-webkit-backdrop-filter: blur(20px)) or (backdrop-filter:blur(20px))) {
        body {
            --blur-bg: #ffffff
        }

        body.dark-theme {
            --blur-bg: #37383a
        }
    }

    @-webkit-keyframes placeholder {
        0% {
            background-position: 100% 50%
        }

        100% {
            background-position: 0 50%
        }
    }
    @keyframes placeholder {
        0% {
            background-position: 100% 50%
        }

        100% {
            background-position: 0 50%
        }
    }

    @-webkit-keyframes fade {
        0% {
            opacity: 0
        }

        100% {
            opacity: 1
        }
    }

    @keyframes fade {
        0% {
            opacity: 0
        }

        100% {
            opacity: 1
        }
    }

    .ani.shake {
        -webkit-animation: shake .3s ease-in !important;
        animation: shake .3s ease-in !important
    }

    @-webkit-keyframes shake {
        20% {
            transform: translateX(2px)
        }

        40% {
            transform: translateX(-4px)
        }

        60% {
            transform: translateX(5px)
        }

        80% {
            transform: translateX(3px)
        }

        to {
            transform: translateX(0)
        }
    }

    @keyframes shake {
        20% {
            transform: translateX(2px)
        }

        40% {
            transform: translateX(-4px)
        }

        60% {
            transform: translateX(5px)
        }

        80% {
            transform: translateX(3px)
        }

        to {
            transform: translateX(0)
        }
    }


    .lazyloaded {
        transition: .3s;
        --lazy-animation: lazy_blur
    }

    img.lazyloaded:not(.lazyloadafter) {
        -webkit-animation: var(--lazy-animation) .6s;
        animation: var(--lazy-animation) .6s
    }

    @-webkit-keyframes lazy_blur {
        0% {
            -webkit-filter: blur(5px);
            filter: blur(5px)
        }

        100% {
            -webkit-filter: blur(0);
            filter: blur(0)
        }
    }

    @keyframes lazy_blur {
        0% {
            -webkit-filter: blur(5px);
            filter: blur(5px)
        }

        100% {
            -webkit-filter: blur(0);
            filter: blur(0)
        }
    }

    @-webkit-keyframes lazy_fade {
        0% {
            opacity: 0
        }

        100% {
            opacity: 1
        }
    }

    @keyframes lazy_fade {
        0% {
            opacity: 0
        }

        100% {
            opacity: 1
        }
    }

    @-webkit-keyframes lazy_scale {
        0% {
            transform: scale(1.1)
        }

        80% {
            transform: unset
        }
    }

    @keyframes lazy_scale {
        0% {
            transform: scale(1.1)
        }

        80% {
            transform: unset
        }
    }

    @-webkit-keyframes ball-pulse-sync {
        33% {
            transform: translateY(4px)
        }

        66% {
            transform: translateY(-4px)
        }

        to {
            transform: translateY(0)
        }
    }

    @keyframes ball-pulse-sync {
        33% {
            transform: translateY(4px)
        }

        66% {
            transform: translateY(-4px)
        }

        to {
            transform: translateY(0)
        }
    }

    @-webkit-keyframes huan-rotate {
        0% {
            transform: rotate(0)
        }

        to {
            transform: rotate(360deg)
        }
    }

    @keyframes huan-rotate {
        0% {
            transform: rotate(0)
        }

        to {
            transform: rotate(360deg)
        }
    }

    @-webkit-keyframes notyf {
        0% {
            transform: translateX(110%);
            opacity: 0
        }

        100% {
            transform: translateX(1.5em);
            opacity: 1
        }
    }

    @keyframes notyf {
        0% {
            transform: translateX(110%);
            opacity: 0
        }

        100% {
            transform: translateX(1.5em);
            opacity: 1
        }
    }


    .action-comment-like.action-animation .icon, .action-like.action-animation .icon {
        -webkit-animation: lovestar .6s 0s 1 ease normal none;
        animation: lovestar .6s 0s 1 ease normal none
    }

    @-webkit-keyframes lovestar {
        0% {
            transform: translate3d(0, 0, 0)
        }

        35% {
            transform: translate3d(0, 4px, 0) rotate(5deg)
        }

        60% {
            transform: translate3d(-2px, -6px, 0) scale(1.3) rotate(-25deg)
        }

        100% {
            transform: translate3d(0, 0, 0) scale(1) rotate(0)
        }
    }

    @keyframes lovestar {
        0% {
            transform: translate3d(0, 0, 0)
        }

        35% {
            transform: translate3d(0, 4px, 0) rotate(5deg)
        }

        60% {
            transform: translate3d(-2px, -6px, 0) scale(1.3) rotate(-25deg)
        }

        100% {
            transform: translate3d(0, 0, 0) scale(1) rotate(0)
        }
    }

}


@media (max-width: 1099px) {
    #alllayout {
        width: 100vw;
    }

    #header {
        width: 100vw;
    }

    #right {
        display: none;
    }

    #center {
        margin-left: 0;
    }

    #left {
        display: none;
    }

    /*隐藏左侧统计*/
    #statisticsInfo {
        display: none !important;
    }

    #userDataBox {
        display: none;
    }
}

/* 介于 600px 和 1400px 之间 */
@media (min-width: 1100px) and (max-width: 1400px) {
    #center {

    }

    #right {
        display: none;
    }

    #userDataBox {
        display: none;
    }
}

/* 大于 1400px */
@media (min-width: 1401px) {
    /*默认设计大于1400px*/
}