:root {
    --trans-light: rgba(255, 255, 255, 0.95);
    --trans-dark: rgba(25, 25, 25, 0.9);
    --border-style: 1px rgb(169, 169, 169);
    --backdrop-filter: blur(5px) saturate(150%);
  }
  
  /* 首页文章卡片 */
  #recent-posts > .recent-post-item {
    background: var(--trans-light);
    backdrop-filter: var(--backdrop-filter);
    border-radius: 16px;
    border: var(--border-style);
  }
  
  /* 首页侧栏卡片 */
  #aside-content .card-widget {
    background: var(--trans-light);
    backdrop-filter: var(--backdrop-filter);
    border-radius: 8px;
    border: var(--border-style);
  }
  
  /* 文章页、归档页、普通页面 */
  div#post,
  div#page,
  div#archive {
    background: var(--trans-light);
    backdrop-filter: var(--backdrop-filter);
    border: var(--border-style);
    border-radius: 16px;
  }
  
  /* 导航栏 */
  #page-header.nav-fixed #nav {
    background: rgba(255, 255, 255, 0.95); /*rgba(255, 255, 255, 0.75);*/
    backdrop-filter: var(--backdrop-filter);
    border-radius: 4px;
  }
  
  [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"] #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(158, 204, 171, 0.5) !important;
  }
  .read-mode div#post {
    background: rgba(158, 204, 171, 0.5) !important;
  }
  
  /* 夜间模式下的阅读模式 */
  [data-theme="dark"] .read-mode #aside-content .card-widget {
    background: rgba(25, 25, 25, 0.9) !important;
    color: #ffffff;
  }
  [data-theme="dark"] .read-mode div#post {
    background: rgba(25, 25, 25, 0.9) !important;
    color: #ffffff;
  }


/* 一图流 */

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



/* 全局宽度 */
.layout {
    max-width: 1400px;
  }
  
  /* 侧边卡片栏宽度 */
  .aside-content {
    max-width: 308px;
    min-width: 290px;
    font-size: 14px;
  }
  
  /* 平板尺寸自适应(不启用侧边栏宽度限制) */
  @media screen and (max-width: 900px) {
    .aside-content {
      max-width: none !important;
      padding: 0 5px 0 5px;
    }
  }

  /* 除了首页以外其他页面隐藏卡片，并采用宽屏显示 */
/* #archive,
#page,
#category,
#tag {
  width: 100%;
}
.page:not(.page.home) .aside-content {
  display: none;
} */
/* .post .card-recent-post {
    display: none;
} */
.el-button.tk-send {
    background-color: #5654a2 !important;
}

.tk-icon.__comments,
.tk-action-icon,
.tk-action-count {
    color: #5654a2 !important;
}




/* 一级菜单居中 */
#nav .menus_items {
    position: absolute !important;
    width: fit-content !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
  }
  /* 子菜单横向展示 */
  #nav .menus_items .menus_item:hover .menus_item_child {
    display: flex !important;
  }
  /* 这里的2是代表导航栏的第2个元素，即有子菜单的元素，可以按自己需求修改 */
  .menus_items .menus_item:nth-child(2) .menus_item_child {
    left: -80px;
  }
  .menus_items .menus_item:nth-child(3) .menus_item_child {
    left: -80px;
  }

.post-copyright {
    border-radius: 6px;
}

/* 调整布局bug */
.recent-post-item {
    margin-bottom: 20px;
}
#recent-posts > .recent-post-item:not(:first-child) {
    margin-top: 0px !important;
}


/* 评论点击提醒 */
/* 设置文字内容 :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);
}


#article-container img {
  min-width: 60% !important;
  max-width: 80% !important;
  border-radius: 12px;
}


/* 设置toggle */
.toggle {
  border: rgb(86, 84, 162, 0.15) solid 1px;
  border-radius: 6px;
}
.toggle > .toggle-button {
  background: rgb(86, 84, 162, 0.15) !important;
  position: relative;
  /* border-radius: 6px; */
}
.toggle > .toggle-button:hover::after {
  content: "+";
  display: block;
  position: absolute;
  top: 3px;
  right: 6px;
}



[data-theme="dark"] .toggle > .toggle-button {
  color: #f0f0f0 !important;
}

/* 置顶变红 */
.sticky {
  color: rgb(255, 147, 47);
}

#aside-content #card-toc .toc-content .toc-link.active {
  border-radius: 6px;
}

/* 首页图蒙版 */
#page-header:not(.not-top-img):before {
  position: absolute !important;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,.3) !important;
  content: '' !important;
}


/* 修改音频播放器的外观 */
audio {
  width: 60%; /* 设置音频播放器宽度为60% */
  margin: 0 auto; /* 居中对齐 */
  background-color: #f4f4f4; /* 设置背景色 */
  border: none; /* 去除边框 */
  border-radius: 10px; /* 圆角边框 */
  box-shadow: 0 0 10px rgba(0, 196, 182, 0.3); /* 添加阴影效果 */
}

/* 修改播放按钮的颜色和样式 */
audio::-webkit-media-controls-play-button {
  background-color: #00c4b6; /* 修改播放按钮的背景色 */
  color: white; /* 修改播放按钮的文本颜色 */
  border: none; /* 去除按钮边框 */
  border-radius: 50%; /* 将按钮变成圆形 */
  width: 30px; /* 调整按钮宽度 */
  height: 30px; /* 调整按钮高度 */
  font-size: 20px; /* 调整按钮图标大小 */
}

/* 修改进度条的颜色 */
audio::-webkit-media-controls-progress-bar {
  background-color: #00c4b6; /* 修改进度条的背景色为主题色 */
}

/* 修改已播放进度条的颜色 */
audio::-webkit-media-controls-current-time-display {
  color: #00c4b6!important; /* 修改已播放部分的文本颜色为主题色 */
}

/* 修改音量控制条的颜色 */
audio::-webkit-media-controls-volume-slider {
  /* width: 100%; 将音量控制条宽度设置为100% */
  /* background-color: #f4f4f4; 修改音量控制条的背景色 */
  border-radius: 5px; /* 圆角边框 */
}

/* 修改音量控制滑块的颜色 */
audio::-webkit-media-controls-mute-button {
  background-color: #00c4b6; /* 修改静音按钮的背景色为主题色 */
  /* color: white; 修改静音按钮的文本颜色 */
  border-radius: 50%; /* 设置为圆形 */
  width: 30px; /* 调整按钮宽度 */
  height: 30px; /* 调整按钮高度 */
  font-size: 20px; /* 调整按钮图标大小 */
}