mirrors.css

* {
    padding: 0;
    margin: 0;
}
:root{
    --Side-Menu-BgColor: #3b4147;
    --Side-Menu-BgHoverColor: #abafb3;
    --Side-Menu-FontColor: #f0f0f0;
    --Side-Menu-HoverColor: #ffffff;
    --border-radius: 3px;
    --Side-Menu-TransitionTime: 0.2s;
    --Side-Menu-LineColor: #d19a66;
}
.content {
    background-color: #fefefe;
}
@font-face {
    font-family: SpaceClaim;
    src: url("SpaceClaim.ttf") format("truetype");
}
@font-face {
    font-family: Segoe;
    src: url("Segoe.ttf") format("truetype");
}
@font-face {
    font-family: SegoeB;
    font-weight: bold;
    src: url("SegoeB.ttf") format("truetype");
}

/* -------------------------- 开场动画关键帧（核心新增）-------------------------- */
/* 淡入动画：用于开场语、菜单项、主内容 */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
/* 淡入上移动画：用于标题（更有层次感） */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px); /* 初始位置向下偏移 30px */
    }
    to {
        opacity: 1;
        transform: translateY(0); /* 回归正常位置 */
    }
}
/* 左滑淡入动画：用于侧边栏（从屏幕外滑入） */
@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-100%); /* 初始位置在屏幕左侧外 */
    }
    to {
        opacity: 1;
        transform: translateX(0); /* 滑到正常位置 */
    }
}

/* -------------------------- 侧边栏样式（添加动画）-------------------------- */
.Side-Menu-Box{
    position: fixed; /* 改为固定定位，避免滑入时影响布局 */
    top: 0;
    left: 0;
    z-index: 999; /* 确保侧边栏在最上层 */
    box-shadow: 2px 0px 8px 5px #cdd2d7;
    font-family: SpaceClaim;
    letter-spacing: 0.5px;
    font-weight: 400;
    min-height: 100vh;
    box-sizing: border-box;
    background-color: var(--Side-Menu-BgColor);
    /* 侧边栏开场动画：0.8秒滑入，结尾平滑 */
    animation: slideInLeft 0.8s ease-out forwards;
    opacity: 0; /* 初始透明，动画结束后显示 */
}
.Side-Menu-Box input[type='checkbox']{
    display: none;
}
/* 侧边栏菜单项：依次淡入（每个延迟 0.1 秒，更有节奏感） */
.Side-Menu{
    padding: 4px 12px;
    font-size: 20px;
    width: 200px;
    min-height: 100%;
    cursor: pointer;
    overflow: hidden;
    transition: width var(--Side-Menu-TransitionTime), background-color 0.2s;
    color: var(--Side-Menu-FontColor);
    animation: fadeIn 0.5s ease-out forwards;
    opacity: 0;
}
/* 为每个菜单项设置不同延迟，依次出现 */
.Side-Menu:nth-child(1) { animation-delay: 0.6s; } /* 首页 */
.Side-Menu:nth-child(2) { animation-delay: 0.7s; } /* 镜像源 */
.Side-Menu:nth-child(3) { animation-delay: 0.8s; } /* 教程 */
.Side-Menu:nth-child(4) { animation-delay: 0.9s; } /* 开发日志 */

.Side-Menu:hover{
    background-color: var(--Side-Menu-BgHoverColor);
    color: var(--Side-Menu-HoverColor); /*  hover 时字体变白，增强交互 */
}

/* -------------------------- 标题样式（添加动画）-------------------------- */
.BigTitle {
    display: inline-block;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 40px;
    font-weight: 999;
    color: #5da0b7;
    text-transform: uppercase;
    /* 标题动画：0.8秒淡入上移，延迟 0.3 秒（等侧边栏开始滑入后再动） */
    animation: fadeInUp 0.8s ease-out 0.3s forwards;
    opacity: 0; /* 初始透明 */
}

/* -------------------------- 开场语样式（新增）-------------------------- */
.opening-text {
    font-family: SegoeB;
    font-size: 24px;
    color: #3b4147;
    margin: 20px 0;
    padding-left: 2px;
    /* 开场语动画：1秒淡入，延迟 0.1 秒 */
    animation: fadeIn 1s ease-out 0.1s forwards;
    opacity: 0;
}

/* -------------------------- 主内容区域（调整布局+动画）-------------------------- */
.Content-Page{
    padding-top: 10px;
    padding-left: 20px;
    margin-left: 220px; /* 给侧边栏留空间，避免重叠 */
    overflow: hidden;
    /* 主内容淡入动画，延迟 0.5 秒（最后显示，避免混乱） */
    animation: fadeIn 1s ease-out 0.5s forwards;
    opacity: 0;
}
.Menu{
    text-decoration: none;
    color: var(--Side-Menu-FontColor);
}
.paragraph{
    padding: 10px 0 10px 0;
    line-height: 1.6; /* 优化文字行高，提升可读性 */
}

/* ------------------------------------- MIRRORS STYLE ------------------------------------- */
/* 镜像源表格样式：统一对齐+圆角美化（核心修改圆角相关） */
.resource-table {
  width: 100%;
  max-width: 800px; /* 限制表格宽度，避免太宽 */
  /* 关键修改1：取消边框合并，解决圆角不生效问题 */
  border-collapse: separate;
  border-spacing: 0; /* 消除单元格之间的间距，保持整齐 */
  margin: 10px 0;
  font-size: 18px; /* 统一字体大小 */
  /* 关键修改2：设置表格整体圆角，overflow:hidden 隐藏内部超出圆角的边框 */
  border-radius: 7px; /* 圆角半径，可调整为 10px、12px 等，数值越大圆角越明显 */
  overflow: hidden;
}

/* 表头样式 */
.resource-table th {
  background-color: #f0f8ff; /* 浅蓝色背景区分表头 */
  padding: 10px 15px;
  border: 1px solid #ddd;
  border-bottom: 2px solid #d0e8ff; /* 表头底部边框加粗，更醒目 */
  text-align: left;
  color: #333;
  /* 取消表头单独圆角，依靠表格整体 overflow:hidden 实现 */
}

/* 表格单元格样式 */
.resource-table td {
  padding: 10px 15px;
  border: 1px solid #ddd;
  /* 关键修改3：消除单元格多余边框，避免圆角处边框重叠杂乱 */
  border-top: none; /* 取消顶部边框，仅保留左右和底部 */
}

/* 修复表格第一行单元格的顶部边框（与表头衔接） */
.resource-table tbody tr:first-child td {
  border-top: 1px solid #ddd;
}

/* 软件链接样式（统一颜色+ hover效果，保留原有风格） */
.resource-link {
  color: rgb(0, 200, 0); /* 保留原来的绿色 */
  text-decoration: none;
  font-weight: bold;
}
.resource-link:hover {
  text-decoration: underline; /*  hover时加下划线，提示可点击 */
}