/* 基本样式 */
body,html {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    color: #333;
    margin: 0;
    padding: 0;
    display: flex;
    height: 100%;
    width: 100%;
}

/* 整个页面容器 */
.container {
    padding-top: 50px;
    margin: 0 auto;
    width: 100%;
    height: 100%;
    padding: 20px;
}

/* 页头 */
header {
    text-align: center;
    margin-bottom: 20px;
}

/* 页脚 */
footer {
    text-align: center;
    margin-top: 20px;
    font-size: 0.9em;
}

/* Markdown 内容区域 */
#content {
    margin-left: 3%;         /* 留出左侧目录空间 */
    padding: 20px;              /* 内容内边距 */
    flex-grow: 1;               /* 在 Flexbox 中扩展以填充剩余空间 */
    max-width: 100%;            /* 最大宽度 100% */
    width: 100%;                /* 容器占满父容器的宽度 */
    max-height: 80vh;           /* 最大高度限制为视口的 80% */
    overflow-y: auto;           /* 当内容超出容器时，显示垂直滚动条 */
    box-sizing: border-box;     /* 包括内边距和边框 */
    background-color: #fff;     /* 背景颜色为白色 */
    border-radius: 8px;         /* 圆角效果 */
    margin-top: 40px;           /* 与工具栏保持 60px 的间距，可以根据需要调整 */
}

#content img {
    max-width: 100%;   /* 图片最大宽度为 100% */
    max-height: 500px; /* 图片最大高度为 500px，可以根据需要调整 */
    display: block;    /* 去除图片下方的空白间隙 */
    margin: 0 auto;    /* 图片居中显示 */
}

/* 调整代码块的字体大小 */
pre code {
    font-size: 1.2em; /* 可以根据需要调整大小 */
    font-weight: 600; /* 设置字体为粗体 */
    line-height: 1.6; /* 行间距*/
}

.content-container {
    display: flex;
    width: 100%;
    height: 100vh; /* 让容器充满屏幕高度 */
}

/* 目录栏样式 */
#navigation {
    width: 10%;
    padding: 10px;
    /*position: fixed;*/
    height: 100%;
    top: 50px;
    left: 0;
    box-shadow: 2px 0px 5px rgba(0, 0, 0, 0.1);
    overflow-y: auto;
    overflow-x: auto;  /* 加上这个，启用横向滚动 */
    white-space: nowrap; /* 防止子元素换行 */
}

/* 目录项的样式 */
.directory-item {
    cursor: pointer;
    font-weight: bold;
    margin: 5px 0;
    color: rgb(112, 112, 112); /* 确保在夜间模式下文字清晰 */
    padding-bottom: 5px;  /* 保留间距，可以调整 */
}

.directory-item:hover {
    color: #007BFF;  /* 鼠标悬停时的目录项颜色 */
}

/* 展开子目录 */
.subdirectory {
    padding-left: 20px;
    list-style-type: none;
    display: none;  /* 默认隐藏子目录 */
}

.subdirectory li {
    margin: 5px 0;
}

/* 文件项样式 */
.file-item {
    padding-left: 0px;  /* 缩进文件项 */
    background-color: #f9f9f9;  /* 可以使用不同的背景色区分文件项 */
    /*border-bottom: 1px solid #ccc; /* 添加文件分割线 */
}

/* 夜间模式样式 */
body.night-mode {
    background-color: rgb(30, 30, 30);  /* 稍微亮一点的深灰色背景 */
    color: rgb(112, 112, 112);  /* 更亮的文字颜色 */
}

body.night-mode .content {
    background-color: rgb(45, 45, 45);  /* 更温和的内容区背景 */
    color: rgb(212, 212, 212);  /* 内容区域文字颜色 */
}

body.night-mode #navigation {
    background-color: rgb(40, 40, 40);  /* 更温和的导航栏背景色 */
    color: rgb(212, 212, 212);  /* 导航栏文字颜色 */
}

body.night-mode button {
    color: rgb(212, 212, 212);  /* 按钮文字颜色 */
    border-radius: 4px;
}


body.night-mode button:hover {
    background-color: rgb(77, 77, 79);  /* 鼠标悬停时的按钮背景色 */
    border-color: rgb(77, 77, 79);  /* 鼠标悬停时的按钮边框颜色 */
}

body.night-mode button:focus {
    outline: none;
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.3);  /* 按钮聚焦时的光晕效果 */
}

body.night-mode a {
    color: rgb(100, 149, 237);  /* 设置链接颜色为亮蓝色 */
    text-decoration: none;  /* 移除下划线 */
}

body.night-mode a:hover {
    color: rgb(70, 130, 180);  /* 鼠标悬停时改变链接颜色 */
    text-decoration: underline;  /* 鼠标悬停时添加下划线 */
}

body.night-mode a:visited {
    color: rgb(138, 138, 255);  /* 设置已访问链接的颜色 */
}

body.night-mode .file-item {
    background-color: rgb(60, 60, 60);  /* 深灰色背景 */
    color: rgb(212, 212, 212);  /* 文字颜色 */
}

body.night-mode .toolbar {
    background-color: rgb(60, 60, 60);  /* 工具栏背景色变暗 */
}

body.night-mode #content {
    background-color: rgb(65, 65, 65);  /* 内容区域背景色变暗 */
    color: rgb(212, 212, 212);  /* 修改文字颜色，确保与背景有对比 */
}

/* 白天模式样式 */
body {
    background-color: rgb(240, 240, 240);  /* 浅灰色背景 */
    color: rgb(30, 30, 30);  /* 深色文字 */
}

body .content {
    background-color: rgb(255, 255, 255);  /* 白色内容区背景 */
    color: rgb(30, 30, 30);  /* 内容区域深色文字 */
}

body #navigation {
    background-color: rgb(245, 245, 245);  /* 浅灰色导航栏背景 */
    color: rgb(30, 30, 30);  /* 导航栏文字颜色 */
}

body button {
    background-color: rgb(58, 61, 65);  /* 按钮背景色 */
    color: rgb(212, 212, 212);  /* 按钮文字颜色 */
    border: 1px solid rgb(58, 61, 65);  /* 按钮边框颜色 */
    padding: 10px 15px;
    border-radius: 4px;
}

body button:hover {
    background-color: rgb(77, 77, 79);  /* 鼠标悬停时的按钮背景色 */
    border-color: rgb(77, 77, 79);  /* 鼠标悬停时的按钮边框颜色 */
}

body button:focus {
    outline: none;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);  /* 按钮聚焦时的光晕效果 */
}

/* 白天模式链接颜色 */
body a {
    color: rgb(0, 123, 255);  /* 设置链接颜色为蓝色 */
    text-decoration: none;  /* 移除下划线 */
}

body a:hover {
    color: rgb(0, 105, 217);  /* 鼠标悬停时改变链接颜色 */
    text-decoration: underline;  /* 鼠标悬停时添加下划线 */
}

body a:visited {
    color: rgb(138, 138, 255);  /* 设置已访问链接的颜色 */
}

/* 工具栏样式 */
.toolbar {
    display: flex;
    justify-content: space-between; /* 左右对齐 */
    align-items: center;           /* 垂直居中对齐 */
    height: 40px;                  /* 工具栏高度 */
    padding: 0 20px;               /* 左右内边距 */
    background-color: #fff;        /* 背景色 */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);  /* 阴影效果 */
    font-size: 1.2em;
    width: 100%;                   /* 工具栏宽度占满整个页面 */
    position: fixed;               /* 固定在页面顶部 */
    top: 0;                        /* 顶部对齐 */
    left: 0;                       /* 左边对齐 */
    z-index: 1000;                 /* 确保工具栏在最前面 */
}

.title {
    font-weight: bold;
}

.theme-toggle {
    font-size: 1.5em;
    padding: 8px 12px;   /* 调整按钮的内边距，确保按钮大小合适 */
    border: none;
    background-color: transparent;
    cursor: pointer;
    display: inline-flex; /* 使按钮内容水平对齐 */
    align-items: center;  /* 垂直居中按钮内容 */
    justify-content: center;
    height: 30px;         /* 按钮高度，使其与工具栏高度一致 */
    margin-right: 20px;
}

/* 拖动条样式 */
.resizer {
    width: 5px;
    background-color: #ccc;
    cursor: col-resize;
    user-select: none;
    transition: background-color 0.2s;
}

.resizer:hover {
    background-color: #666;
}