XunTheme主题美化

/* 隐藏class为xun-banner-overlay的div，元素彻底消失，不保留占位 */
.xun-banner-overlay {
  display: none !important;
}

.xun-category-desc{display: none !important;}

.xun-featured-cats-header{display: none !important;}

/*美化标题*/
.xun-posts-title,
.xun-posts-title * {
display: none !important;
}

/* 基础样式（所有设备通用） */
/* 强制重置父容器样式，确保布局基础 */
.xun-posts-header {
  display: flex !important;  /* 强制开启弹性布局 */
  justify-content: center !important;  /* 强制水平居中 */
  align-items: center !important;  /* 垂直居中（可选） */
  width: 100% !important;  /* 确保父容器占满整行 */
  padding: 0 !important;   /* 清除内边距干扰 */
  margin: 0 !important;    /* 清除外边距干扰 */
  float: none !important;  /* 清除浮动 */
  position: relative !important;
  box-sizing: border-box !important;
}

/* 彻底隐藏标题，确保不占任何空间 */
.xun-posts-title {
  display: none !important;
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* 强制重置标签容器样式，确保居中 + 增加下方间距 */
.xun-posts-category-tabs.has-more,
.xun-posts-category-tabs { /* 统一设置基础样式，避免重复 */
  display: block !important;  /* 改为块级元素 */
  width: fit-content !important;  /* 宽度自适应内容（关键） */
  max-width: 100% !important; /* 新增：防止内容溢出屏幕 */
  margin: 0 auto !important;  /* 双重保障水平居中 */
  margin-bottom: 20px !important;  /* 下方增加20px间距（核心新增） */
  float: none !important;     /* 强制清除浮动（重点） */
  position: static !important;  /* 重置定位 */
  left: auto !important;
  right: auto !important;
  transform: none !important;  /* 清除位移干扰 */
  padding: 0 !important;
  box-sizing: border-box !important; /* 新增：确保宽高计算正确 */
  text-align: center !important; /* 新增：确保内部子元素也居中 */
}

.xun-posts-category-tabs {
  padding-bottom: 20px !important;  /* 用内边距替代外边距 */
}

/* 响应式适配 - 平板/小屏设备（屏幕宽度≤768px） */
@media (max-width: 768px) {
  .xun-posts-category-tabs.has-more,
  .xun-posts-category-tabs {
    margin-bottom: 15px !important;  /* 减小间距，适配小屏 */
    width: 90% !important;  /* 小屏下宽度占90%，避免内容挤边 */
  }

  .xun-posts-category-tabs {
    padding-bottom: 15px !important;  /* 同步减小内边距 */
  }
}

/* 响应式适配 - 手机设备（屏幕宽度≤480px） */
@media (max-width: 480px) {
  .xun-posts-category-tabs.has-more,
  .xun-posts-category-tabs {
    margin-bottom: 10px !important;  /* 手机端进一步减小间距 */
    width: 95% !important;  /* 更贴合屏幕宽度 */
    /* 新增：强化居中，覆盖任何可能的继承样式 */
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }
  
  .xun-posts-category-tabs {
    padding-bottom: 10px !important;
  }
  
  /* 可选：如果标签是横向滚动/换行，手机端强制换行更友好 */
  .xun-posts-category-tabs .tab-item {
    margin: 0 5px 8px 5px !important;  /* 减小标签间距，增加上下间距 */
    white-space: normal !important;    /* 允许标签文字换行 */
    display: inline-block !important; /* 新增：确保标签是行内块，配合text-align:center居中 */
  }
}

@media (max-width: 767px) {
  .xun-posts-block.xun-posts-code {
    /* 手机端缩小后的上下外边距，数值可按需调整 */
    margin-top: -8px;
    margin-bottom: -8px;
    /* 如果需要调整内边距，取消注释并修改 */
    /* padding-top: 8px;
    padding-bottom: 8px; */
  }
}

/*优化bann卡片样式*/
.xun-quick-link-card {
  background-color: rgba(255, 255, 255, 0.9) 
		
		
}
.xun-quick-link-title{color: #000;}
.xun-quick-link-desc{color: #000;}
.xun-quick-link-card:hover {
  background-color: rgba(255, 255, 255, 1) 
}

/*优化头像样式*/
.xun-user-btn {
  border: 3px solid rgba(0, 0, 0, 0.1) !important;
  box-sizing: border-box !important;
}

/*优化文章页*/
.site-main,
.site-main * {

  box-shadow: none !important;
  text-shadow: none !important;
}

/*移除缩略图简介*/
div.xun-post-excerpt {
  display: none !important;
}

/* 美化相关推荐 */
/* 父级容器：控制整体列表间距 */
.xun-widget-related-posts {
  padding: 10px;
}

/* 文章列表容器：取消默认列表样式 */
.xun-related-posts-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* 单个文章项：卡片样式、间距，关键设置relative和z-index基础值 */
.xun-related-post-item {
  position: relative; /* 为TOP标签绝对定位做基准 */
  z-index: 1; /* 基础层级 */
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 12px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

/* 文章链接：块级显示、高度自适应，设置z-index低于TOP标签 */
.xun-related-post-item a.has-thumb {
  display: block;
  padding: 15px;
  text-decoration: none;
  color: #333;
  position: relative;
  z-index: 2; /* 低于TOP标签的3 */
  transition: background-color 0.2s; /* hover过渡效果 */
}

/* 链接hover效果：背景变色，不影响TOP标签 */
.xun-related-post-item a.has-thumb:hover {
  background-color: #f8f8f8;
}

/* TOP标签：显示数字+最高层级，确保不被遮挡 */
.xun-related-post-item:nth-child(1)::before {
  content: "TOP 1"; /* 显示具体数字 */
  position: absolute;
  top: 0;
  left: 0;
  background: #ff4444; /* TOP1红色 */
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  padding: 3px 8px;
  border-radius: 0 0 4px 0;
  z-index: 3; /* 最高层级，确保hover时也不被遮挡 */
  pointer-events: none; /* 防止标签拦截鼠标事件 */
}

.xun-related-post-item:nth-child(2)::before {
  content: "TOP 2";
  position: absolute;
  top: 0;
  left: 0;
  background: #ffaa44; /* TOP2橙色 */
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  padding: 3px 8px;
  border-radius: 0 0 4px 0;
  z-index: 3;
  pointer-events: none;
}

.xun-related-post-item:nth-child(3)::before {
  content: "TOP 3";
  position: absolute;
  top: 0;
  left: 0;
  background: #4488ff; /* TOP3蓝色 */
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  padding: 3px 8px;
  border-radius: 0 0 4px 0;
  z-index: 3;
  pointer-events: none;
}

.xun-related-post-item:nth-child(4)::before {
  content: "TOP 4";
  position: absolute;
  top: 0;
  left: 0;
  background: #888888; /* TOP4灰色 */
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  padding: 3px 8px;
  border-radius: 0 0 4px 0;
  z-index: 3;
  pointer-events: none;
}

.xun-related-post-item:nth-child(5)::before {
  content: "TOP 5";
  position: absolute;
  top: 0;
  left: 0;
  background: #ff5555; /* TOP5红色 */
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  padding: 3px 8px;
  border-radius: 0 0 4px 0;
  z-index: 3;
  pointer-events: none;
}

.xun-related-post-item:nth-child(6)::before {
  content: "TOP 6";
  position: absolute;
  top: 0;
  left: 0;
  background: #44aaff; /* TOP6浅蓝色 */
  color: #fff;
  font-size: 12px;
  font-weight: bold;
  padding: 3px 8px;
  border-radius: 0 0 4px 0;
  z-index: 3;
  pointer-events: none;
}

/* 文章缩略图样式（如果有） */
.xun-related-post-item .post-thumb {
  float: left;
  width: 80px;
  height: 80px;
  object-fit: cover;
  margin-right: 12px;
  border-radius: 4px;
}

/* 文章内容区域：清除浮动 */
.xun-related-post-item .post-content {
  overflow: hidden;
}

/* 文章标题：字体加粗+溢出省略 */
.xun-related-post-item .post-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 8px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 文章 meta 信息：字体缩小+灰色 */
.xun-related-post-item .post-meta {
  font-size: 12px;
  color: #999;
}