/*
--------------------------------------
一图流
--------------------------------------
*/

/* 页脚只保留半透遮罩 */
#footer {
  background: rgba(224, 224, 224, 0.4);
}
/* 夜间模式页脚半透遮罩 */
[data-theme="dark"] #footer {
  background: rgba(31, 31, 31, 0.5)
}
/* 首页头图透明 */
#page-header.full_page {
  background: transparent !important;
} 
/* 首页头图遮罩透明 */
#page-header.full_page::before {
  background: transparent !important;
}
/* 夜间模式-文章页头图-黑色半透明遮罩 */
/* [data-theme="dark"] #page-header.post-bg::before{
  background: rgba(0, 0, 0, .6) !important;
} */
/* 自定义页面顶图透明 */
.not-home-page {
  background: transparent !important;
}

/*
--------------------------------------
顶部导航栏
--------------------------------------
*/

/* 一级菜单居中 */
#nav .menus_items {
  position: absolute !important;
  width: fit-content !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

/*
--------------------------------------
页脚
--------------------------------------
*/

/* 版权标位置移至底部 */
.copyright{
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translate(-50%, -50%);
}

/*
--------------------------------------
页面样式
--------------------------------------
*/

:root {
  --trans-light: rgba(255, 255, 255, 0.9);
  --trans-dark: rgba(31, 31, 31, 0.9);
  /* --border-style: 1px solid rgb(169, 169, 169); */
  --border-style: none;
  /* --backdrop-filter: blur(5px) saturate(150%); */
  --backdrop-filter: none;
}

/* 首页文章卡片 */
#recent-posts > .recent-post-item {
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: var(--backdrop-filter);
}

#recent-posts > .recent-post-items > .recent-post-item {
  background: var(--trans-light);
  backdrop-filter: var(--backdrop-filter);
}

/* 首页侧栏卡片 */
#aside-content .card-widget {
  background: var(--trans-light);
  backdrop-filter: var(--backdrop-filter);
}

/* 文章页、归档页、普通页面 */
/* div#post {
  background: rgba(255, 255, 255, 0.94) !important;
}
[data-theme="dark"] div#post {
  background: rgba(31, 31, 31, 0.94) !important;
} */

/* div#post, */
div#page,
div#archive {
  background: var(--trans-light);
  backdrop-filter: var(--backdrop-filter);
  border: var(--border-style);
  /* border-radius: 20px; */
}

/* 导航栏 */
#page-header.nav-fixed #nav {
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: var(--backdrop-filter);
}

[data-theme="dark"] #page-header.nav-fixed #nav {
  background: rgba(0, 0, 0, 0.7) !important;
}

/* 夜间模式遮罩 */
[data-theme="dark"] #recent-posts > .recent-post-item,
[data-theme="dark"] #recent-posts > .recent-post-items > .recent-post-item,
[data-theme="dark"] #aside-content .card-widget,
[data-theme="dark"] div#post,
[data-theme="dark"] div#archive,
[data-theme="dark"] div#page {
  background: var(--trans-dark);
}

/* 夜间模式页脚页头遮罩透明 */
/* [data-theme="dark"] #footer::before {
  background: transparent !important;
}
[data-theme="dark"] #page-header::before {
  background: transparent !important;
} */

/* 浅色模式下的阅读模式 */
.read-mode #aside-content .card-widget {
  background: rgba(242, 232, 238, 1) !important;
}
.read-mode div#post {
  background: rgba(242 ,242, 238, 1) !important;
}

/* 深色模式下的阅读模式 */
[data-theme="dark"] .read-mode #aside-content .card-widget {
  background: rgba(34, 34, 32, 0.9) !important;
  color: #b8bfc6;
}
[data-theme="dark"] .read-mode div#post {
  background: rgba(34, 34, 32, 0.9) !important;
  color: #b8bfc6;
}

/*
--------------------------------------
黑夜模式霓虹灯
--------------------------------------
*/

/* 日间模式不生效 */
[data-theme="light"] .site-name,
[data-theme="light"] #site-title,
[data-theme="light"] #site-subtitle,
[data-theme="light"] #post-info {
  animation: none;
}
/* 夜间模式生效 */
[data-theme="dark"] .nav-site-title .site-name,
[data-theme="dark"] #site-title {
  animation: light_15px 10s linear infinite;
}
[data-theme="dark"] #site-subtitle {
  animation: light_10px 10s linear infinite;
}
[data-theme="dark"] #post-info {
  animation: light_5px 10s linear infinite;
}
/* 关键帧描述 */
@keyframes light_15px {
  0% {
    text-shadow: #5636ed 0 0 15px;
  }
  12.5% {
    text-shadow: #11ee5e 0 0 15px;
  }
  25% {
    text-shadow: #f14747 0 0 15px;
  }
  37.5% {
    text-shadow: #f1a247 0 0 15px;
  }
  50% {
    text-shadow: #f1ee47 0 0 15px;
  }
  50% {
    text-shadow: #b347f1 0 0 15px;
  }
  62.5% {
    text-shadow: #002afa 0 0 15px;
  }
  75% {
    text-shadow: #ed709b 0 0 15px;
  }
  87.5% {
    text-shadow: #39c5bb 0 0 15px;
  }
  100% {
    text-shadow: #5636ed 0 0 15px;
  }
}

@keyframes light_10px {
  0% {
    text-shadow: #5636ed 0 0 10px;
  }
  12.5% {
    text-shadow: #11ee5e 0 0 10px;
  }
  25% {
    text-shadow: #f14747 0 0 10px;
  }
  37.5% {
    text-shadow: #f1a247 0 0 10px;
  }
  50% {
    text-shadow: #f1ee47 0 0 10px;
  }
  50% {
    text-shadow: #b347f1 0 0 10px;
  }
  62.5% {
    text-shadow: #002afa 0 0 10px;
  }
  75% {
    text-shadow: #ed709b 0 0 10px;
  }
  87.5% {
    text-shadow: #39c5bb 0 0 10px;
  }
  100% {
    text-shadow: #5636ed 0 0 10px;
  }
}

@keyframes light_5px {
  0% {
    text-shadow: #5636ed 0 0 5px;
  }
  12.5% {
    text-shadow: #11ee5e 0 0 5px;
  }
  25% {
    text-shadow: #f14747 0 0 5px;
  }
  37.5% {
    text-shadow: #f1a247 0 0 15px;
  }
  50% {
    text-shadow: #f1ee47 0 0 5px;
  }
  50% {
    text-shadow: #b347f1 0 0 5px;
  }
  62.5% {
    text-shadow: #002afa 0 0 5px;
  }
  75% {
    text-shadow: #ed709b 0 0 5px;
  }
  87.5% {
    text-shadow: #39c5bb 0 0 5px;
  }
  100% {
    text-shadow: #5636ed 0 0 5px;
  }
}

/*
--------------------------------------
黑夜模式颜色适配
--------------------------------------
*/

/* butterfly-theme卡片背景色调整 */
/* [data-theme='dark'] {
  --card-bg: #1e1e20 !important;
} */

/* 部分图标颜色适配 */
[data-theme='dark'] {
  /* X图标颜色适配 */
  .fa-brands.fa-x-twitter {
  color: #fff !important;  
  }
  /* Github图标颜色适配 */
  .fab.fa-github {
  color: #bcbcbc !important;  
  }
}

/* tag-plugin外挂标签颜色适配 */
[data-theme="dark"]{
  /* 下划线 */
  u {
  color: gray;
  text-decoration: none;
  border-bottom: 1px solid darkviolet;
  }
  /* 着重号 */
  emp {
  color: gray;
  border-bottom: 4px dotted darkviolet;
  }
  /* 波浪线 */
  wavy {
  color: gray;
  text-decoration-style: wavy;
  text-decoration-line: underline;
  text-decoration-color: darkviolet;
  }
  /* 密码样式底部文字 */
  psw:hover {
  color: gray;
  background: none;
  }

  /* 诗歌作者名字 */
  .poem-author {
  color: gray ;
  }
}

/* magnet分类磁贴浅色模式适配 */
/* 浅色模式一般状态 */
.magnet_link_context {
  background: #ededed;
  border-radius: 7px;
}
/* 浅色模式鼠标悬浮状态 */
.magnet_link_context:hover {
  background: #ff7242;
  border-radius: 7px;
}

/* magnet分类磁贴黑夜模式适配 */
/* 黑夜模式一般状态 */
[data-theme="dark"] .magnet_link_context {
  background: #282828;
  color: antiquewhite;
  border-radius: 7px;
}
/* 黑夜模式鼠标悬浮状态 */
[data-theme="dark"] .magnet_link_context:hover {
  /* background: #3ecdf1; */
  background: darkviolet;
  color: #f2f2f2;
  border-radius: 7px;
}

/*
--------------------------------------
信息卡片头像状态
--------------------------------------
*/

.card-info-avatar .author-status-box {
  position: absolute;
  bottom: 0;
  left: calc(100% - 28px);
  width: 28px;
  height: 28px;
  border: 1px solid #d0d7de;
  border-radius: 2em;
  background-color: #f8f8f8bb;
  transition: 0.4s;
  overflow: hidden;
}

[data-theme="dark"] .card-info-avatar .author-status-box {
  background-color: #222222f2;
  border: 1px solid #5c6060;
}

.card-info-avatar .author-status-box .author-status {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 28px;
  padding: 0 5px;
}

.card-info-avatar .author-status-box:hover {
  width: 105px;
}

.card-info-avatar .author-status-box:hover .author-status span {
  width: 105px;
  margin-left: 4px;
}

.card-info-avatar .author-status-box .author-status span {
  width: 0;
  font-size: 12px;
  height: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: 0.4s;
}

.card-widget .card-info-avatar {
  display: inline-block;
  position: relative;
}

/*
--------------------------------------
杂项
-------------------------------------- 
*/

/* 底部版权背景色 */
.post-copyright {
  /* background: linear-gradient(45deg, #f6d8f5, #c2f1f0, #f0debf); */
  background: #f3f4f4;
}
[data-theme="dark"] .post-copyright {
  background: #2c2c2c;
  border: 1px solid dimgray !important;
}

/* pagination中间省略号 */
.space{
  color: #99a9bf
}

/*哔哩哔哩视频适配*/
.aspect-ratio {
  position: relative;
  width: 90%;
  height: auto;
  padding-bottom: 75%;
  margin: 3% auto;
  text-align: center;
}
.aspect-ratio iframe {
  position: absolute;
  width: 100%;
  height: 86%;
  left: 0;
  top: 0;
}

/* 夜间模式更换背景 */
[data-theme="dark"] #web_bg{
  background: url(/asset/img/rsmmo-hk9ro.avif) !important;
  /*重新定义background会导致原有定位属性失效，所以也需要再声明一次加权定位属性*/
  background-position: center !important;
  background-size: cover !important;
  background-repeat: no-repeat !important;
}

/* 信息卡片头像呼吸灯 */
[data-theme="light"] .avatar-img {
  animation: avatar_breathing_light 4s ease-in-out infinite;
}
[data-theme="dark"] .avatar-img {
  animation: avatar_breathing_dark 4s ease-in-out infinite;
}
@keyframes avatar_breathing_light {
  0% {
    box-shadow: 0px 0px 1px 1px #ffdddd;
  }
  50% {
    box-shadow: 0px 0px 5px 5px #ffdddd;
  }
  100% {
    box-shadow: 0px 0px 1px 1px #ffdddd;
  }
}
@keyframes avatar_breathing_dark {
  0% {
    box-shadow: 0px 0px 1px 1px #006e6e;
  }
  50% {
    box-shadow: 0px 0px 5px 5px #006e6e;
  }
  100% {
    box-shadow: 0px 0px 1px 1px #006e6e;
  }
}

/* .fa-heartbeat {
  animation:
    heartbeat 1.5s infinite;
}

@keyframes heartbeat {
  from {
    transform: scale(1);
  }

  14% {
    transform: scale(1.3);
  }

  28% {
    transform: scale(1);
  }

  42% {
    transform: scale(1.3);
  }

  70% {
    transform: scale(1);
  }
} */

/* 公告卡片图标 */
.fas.fa-paperclip {
  color: #ff7242 !important;
}
[data-theme="dark"] .fas.fa-paperclip {
  color: darkviolet !important;
}

/* 导航栏标题增强 */
.nav-site-title .site-name::before {
  opacity: 0;
  background-color: #49b1f5 !important;
  border-radius: 8px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  -ms-border-radius: 8px;
  -o-border-radius: 8px;
  transition: 0.3s;
  -webkit-transition: 0.3s;
  -moz-transition: 0.3s;
  -ms-transition: 0.3s;
  -o-transition: 0.3s;
  position: absolute;
  top: 0 !important;
  right: 0 !important;
  width: 100%;
  height: 100%;
  content: "\f015";
  box-shadow: 0 0 5px var(--theme-color);
  font-family: "Font Awesome 6 Free";
  text-align: center;
  color: white;
  line-height: 34px; /*如果有溢出或者垂直不居中的现象微调一下这个参数*/
  font-size: 18px; /*根据个人喜好*/
}
.nav-site-title .site-name:hover::before {
  opacity: 1;
  scale: 1.03;
}
.nav-site-title .site-name {
  position: relative;
  font-size: 24px;
}