/* 设置文字内容 :nth-child(1)的作用是选择第几个 */
.el-input.el-input--small.el-input-group.el-input-group--prepend:nth-child(1):before {
    content: '输入QQ号会自动补填邮箱、昵称以及头像🐧';
}
.el-input.el-input--small.el-input-group.el-input-group--prepend:nth-child(2):before {
    content: '如有回复会收到邮件通知，请确保邮箱的真实性📧';
}
.el-input.el-input--small.el-input-group.el-input-group--prepend:nth-child(3):before {
    content: '可以通过昵称访问您的网站🔗';
}
/* 当用户点击输入框时显示 */
.el-input.el-input--small.el-input-group.el-input-group--prepend:focus-within::before,
.el-input.el-input--small.el-input-group.el-input-group--prepend:focus-within::after {
    display: block;
}
/* 主内容区 */
.el-input.el-input--small.el-input-group.el-input-group--prepend::before {
    /* 先隐藏起来 */
    display: none;
    /* 绝对定位 */
    position: absolute;
    /* 向上移动60像素 */
    top: -60px;
    /* 文字强制不换行，防止left:50%导致的文字换行 */
    white-space: nowrap;
    /* 圆角 */
    border-radius: 10px;
    /* 距离左边50% */
    left: 50%;
    /* 然后再向左边挪动自身的一半，即可实现居中 */
    transform: translate(-50%);
    /* 填充 */
    padding: 14px 18px;
    background: #444;
    color: #fff;
}

/* 小角标 */
.el-input.el-input--small.el-input-group.el-input-group--prepend::after {
    display: none;
    content: '';
    position: absolute;
    /* 内容大小（宽高）为0且边框大小不为0的情况下，每一条边（4个边）都是一个三角形，组成一个正方形。
    我们先将所有边框透明，再给其中的一条边添加颜色就可以实现小三角图标 */
    border: 12px solid transparent;
    border-top-color: #444;
    left: 50%;
    transform: translate(-50%, -48px);
}

/***********导航栏居中***********/
#nav .menus_items {
    position: absolute;
    width: fit-content;
    left: 50%;
    transform: translateX(-50%);
}

/***********子菜单横向居中***********/
.menus_item_child li:not(#sidebar-menus li){
    float: left;
    border-radius: 6px!important;
    -webkit-border-radius: 6px!important;
    -moz-border-radius: 6px!important;
    -ms-border-radius: 6px!important;
    -o-border-radius: 6px!important;
}

.menus_item_child:not(#sidebar-menus ul){
  /*
    left:calc(-150%)!important;这是估算值，为了保持元素居中的，如果不合适可以自己调
  改为：*/
  left:50%;
  translate:-50%;
}

/***********鼠标样式***********/
body {
    cursor: url(https://registry.npmmirror.com/nanshen/0.1.11/files/other/mouse/default.cur), default
}
#nav .site-page:hover {
    cursor:url(https://registry.npmmirror.com/nanshen/0.1.11/files/other/mouse/pointer.cur), auto
}
div#bbTimeList {
    cursor:url(https://registry.npmmirror.com/nanshen/0.1.11/files/other/mouse/pointer.cur), auto
}
a, img {
    cursor: url(https://registry.npmmirror.com/nanshen/0.1.11/files/other/mouse/pointer.cur), pointer
}
a:hover {
    cursor:url(https://registry.npmmirror.com/nanshen/0.1.11/files/other/mouse/pointer.cur), auto
}
i:hover {
    cursor:url(https://registry.npmmirror.com/nanshen/0.1.11/files/other/mouse/pointer.cur), auto
}

/***********页脚部分***********/
#footer {
    background: rgba(255, 255, 255, .15);
    color: #000;
    border-top-right-radius: 20px;
    border-top-left-radius: 20px;
    backdrop-filter: saturate(100%) blur(5px)
}

/*#footer::before {
    background: rgba(255, 255, 255, .15)
}*/

#footer #footer-wrap {
    color: var(--font-color)
}

#footer #footer-wrap a {
    color: var(--font-color)
}

/***********全局透明渐变***********/
/*#recent-posts > .recent-post-item, .layout_page > div:first-child:not(.recent-posts), .layout_post > #page, .layout_post > #post, .read-mode .layout_post > #post {
    background: var(--light_bg_color)
}

#aside-content .card-widget {
    background: var(--light_bg_color)
}
*/
#web_bg {
    background: linear-gradient(90deg, rgba(247, 149, 51, .1), rgba(243, 112, 85, .1) 15%, rgba(239, 78, 123, .1) 30%, rgba(161, 102, 171, .1) 44%, rgba(80, 115, 184, .1) 58%, rgba(16, 152, 173, .1) 72%, rgba(7, 179, 155, .1) 86%, rgba(109, 186, 130, .1))
}

/***********字体***********/
@font-face {
    font-family: MyFont;
    src: url(https://registry.npmmirror.com/nanshen/0.1.11/files/other/font/JetBrainsMono-Medium.woff2);
    font-display: swap
}

/* markdown `` 语法字体 */
#article-container code {
    font-family: MyFont !important
}

/***********留言板黑暗模式适配***********/
[data-theme='dark'].formmain {
    background: #323232
}

[data-theme='dark'].comments {
    background: rgba(90, 90, 90, 0.8)
}

/**********span 小标签***********/
span.inline-tag {
    display: inline;
    padding: .2em .6em .3em;
    font-size: 90%;
    font-weight: 400;
    line-height: 1;
    color: #fff;
    text-align: center;
    white-space: nowrap;
    vertical-align: baseline;
    border-radius: .1rem;
    border-radius: 6px;
    background-color: var(--Color)
}

p.red, span.red {
    --Color: rgb(233, 30, 100);
    --ColorA: rgba(233, 30, 100, 0.2);
}

p.green, span.green {
    --Color: rgb(139, 195, 74);
    --ColorA: rgba(139, 195, 74, 0.2);
}

p.blue, span.blue {
    --Color: rgb(3, 169, 244);
    --ColorA: rgba(3, 169, 244, 0.2);
}

p.yellow, span.yellow {
    --Color: rgb(255, 193, 7);
    --ColorA: rgba(255, 193, 7, 0.2);
}

p.grey, span.grey {
    --Color: rgb(76, 76, 76);
    --ColorA: rgba(76, 76, 76, 0.2);
}

p.div-border {
    padding: 10px;
    border: 1px solid var(--Color, #333);
    border-radius: 0.4rem;
    background-color: var(--ColorA, transparent);
}

p.left {
    border-left-width: 5px;
    border-left-color: var(--Color);
}

p.bottom {
    border-bottom-width: 5px;
    border-bottom-color: var(--Color);
}

p.right {
    border-right-width: 5px;
    border-right-color: var(--Color);
}

p.top {
    border-top-width: 5px;
    border-top-color: var(--Color);
}

/* 未配置 top_img，使标题居中 */
#page h1.page-title, #post>#post-info {
    text-align: center;
}

/* Font Awesome 社交图标颜色 */
.fa-rss {
    color:#d68650;
}

/*右侧按钮圆角*/
#rightside>div>a, #rightside>div>button {
    border-radius: 15px;
}

/****************Twikoo美化*****************/
/* twikoo 高度配置 */
.twikoo .tk-submit .el-textarea__inner {
    min-height: 220px !important;
    transition: all .3 linear;
    -webkit-transition: all .3 linear;
    -moz-transition: all .3 linear;
    -ms-transition: all .3 linear;
    -o-transition: all .3 linear;
}

/* 声名部分变量 */
:root {
  --cxl2020mc-radius: 7px;
  --cxl2020mc-card-border-width: 1px;
}

/* 浅色模式颜色 */
[data-theme=light] {
  --cxl2020mc-border-color: #e3e8f7;
  --cxl2020mc-card-bg: #fff;
  --cxl2020mc-card-border: #e3e8f7;
  --style-border-always: 1px solid var(--cxl2020mc-card-border);
  --cxl2020mc-blue: #425AEF;
}

/* 深色模式颜色 */
[data-theme=dark] {
  --cxl2020mc-border-color: #42444a;
  --cxl2020mc-card-bg: #1d1b26;
  --cxl2020mc-card-border: #42444a;
  --style-border-always: 1px solid var(--cxl2020mc-card-border);
  --cxl2020mc-blue: #0084FF;
}

/* 评论区评论大框 */
.twikoo .tk-comments-container>.tk-comment {
  /* 内边距 */
  padding: 1rem;
  /* 圆角 */
  border-radius: var(--cxl2020mc-radius);
  /* 背景颜色 */
  background: var(--cxl2020mc-card-bg);
  /* 变动动画时长 */
  transition: .3s;
}

/* 浅色模式评论区评论大框 */
[data-theme=light] .twikoo .tk-comments-container>.tk-comment {
  /* 阴影 */
  box-shadow: var(--card-box-shadow);
}

/* 浅色模式评论区评论大框阴影悬浮加深 */
[data-theme=light] .twikoo .tk-comments-container>.tk-comment:hover {
  /* 阴影（浅色模式突出层次感） */
  box-shadow: var(--card-hover-box-shadow);
}

/* 黑暗模式评论区评论大框 */
[data-theme=dark] .twikoo .tk-comments-container>.tk-comment {
  /* 边框样式 */
  border-style: solid;
  /* 边框宽度 */
  border-width: var(--cxl2020mc-card-border-width);
  /* 边框颜色 */
  border-color: var(--cxl2020mc-card-border);
}

/* 设备信息 */
.twikoo .tk-extra {
  /* 圆角 */
  border-radius: var(--cxl2020mc-radius);
  /* 背景颜色 */
  background: var(--cxl2020mc-card-bg);
  /* 内边距 */
  padding: 0.4rem;
  /* 底边距 */
  margin-bottom: 1rem;
  /* 变动动画时长 */
  transition: .3s;
}

/* 浅色模式设备信息 */
[data-theme=light] .twikoo .tk-extra {
  /* 阴影 */
  box-shadow: var(--card-box-shadow);
}

/* 浅色模式设备信息阴影悬浮加深 */
[data-theme=light] .twikoo .tk-extra:hover {
  /* 阴影 */
  box-shadow: var(--card-hover-box-shadow);
}

/* 黑暗模式设备信息 */
[data-theme=dark] .twikoo .tk-extra {
  /* 边框样式 */
  border-style: solid;
  /* 边框宽度 */
  border-width: var(--cxl2020mc-card-border-width);
  /* 边框颜色 */
  border-color: var(--cxl2020mc-card-border);
}

/* 加载更多按钮 */
.twikoo .tk-expand {
  /* 圆角 */
  border-radius: var(--cxl2020mc-radius);
}

/* 浅色模式加载更多按钮 */
[data-theme=light] .twikoo .tk-expand {
  /* 阴影 */
  box-shadow: var(--card-box-shadow);
}

/* 浅色模式加载更多按钮（鼠标悬浮时） */
[data-theme=light] .twikoo .tk-expand:hover {
  /* 阴影 */
  box-shadow: var(--card-hover-box-shadow);
  /* 背景颜色 */
  background-color: var(--btn-bg);
}
/* 黑暗模式加载更多按钮（鼠标悬浮时） */
[data-theme=dark] .twikoo .tk-expand:hover {
  /* 背景颜色 */
  background-color: var(--cxl2020mc-blue);
}
/* 黑暗模式加载更多按钮 */
[data-theme=dark] .twikoo .tk-expand {
  /* 边框样式 */
  border-style: solid;
  /* 边框宽度 */
  border-width: var(--cxl2020mc-card-border-width);
  /* 边框颜色 */
  border-color: var(--cxl2020mc-card-border);
}