app/static/css/base.css

/* app/static/css/base.css - 基础布局和通用样式 */

body {
    font-family: 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.6;
    margin: 0;
    background-color: var(--background-light); /* 浅背景色 */
    color: var(--text-dark);
    display: flex; /* 启用 Flexbox */
    flex-direction: column; /* 子元素垂直排列 */
    min-height: 100vh; /* 确保 body 至少占据整个视口高度 */
    overflow-y: auto; /* 如果内容超出视口，允许滚动 */
    padding: 20px; /* 增加一些整体内边距 */
    box-sizing: border-box; /* 确保 padding 不增加总宽度 */
}

.main-wrapper {
    max-width: 1200px; /* 增加最大宽度以适应更多内容 */
    width: 100%; /* 确保在小屏幕上自适应 */
    padding: 30px; /* 增加内边距 */
    background-color: var(--card-bg); /* 白色背景 */
    border-radius: 12px; /* 更大的圆角 */
    box-shadow: 0 6px 20px var(--shadow-medium); /* 更明显的阴影 */
    box-sizing: border-box;
    margin: auto; /* 水平居中，并占据剩余垂直空间 */
    flex-grow: 1; /* 允许 main-wrapper 占据所有可用空间 */
}

.main-header {
    text-align: center; /* 标题居中 */
    margin-bottom: 40px; /* 增加底部外边距 */
    padding-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
}

/* 针对登录页面的标题，确保其居中 */
body .main-wrapper h2.main-header { /* 明确指定 h2 标签，确保优先级 */
    text-align: center;
    display: block; /* 确保不是 flex 容器 */
    width: 100%; /* 确保占据完整宽度 */
}

/* 恢复主页面 header 的 flex 布局 */
body .main-wrapper header.main-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.main-header h1 {
    color: var(--primary-dark); /* 深蓝色标题 */
    font-size: 2.5rem; /* 增大标题字体 */
    margin: 0; /* 移除默认 margin */
    flex-grow: 1; /* 让 h1 占据可用空间 */
    text-align: center; /* 文本居中 */
}

#logout-button {
    background-color: var(--secondary-color); /* 灰色按钮 */
    color: var(--text-light);
    padding: 8px 18px; /* 调整内边距 */
    border: none;
    border-radius: 6px; /* 调整圆角 */
    cursor: pointer;
    font-size: 0.95rem;
    transition: background-color 0.3s ease, transform 0.2s ease; /* 添加 transform 过渡 */
}

#logout-button:hover {
    background-color: #5a6268; /* 鼠标悬停时的深灰色 */
    transform: translateY(-2px); /* 悬停时轻微上浮 */
}

.content-wrapper {
    display: flex; /* 改为 Flexbox 布局 */
    flex-direction: column; /* 子元素垂直排列 */
    gap: 20px; /* 减小元素间距 */
}

/* 确保 pre 标签在内容溢出时显示滚动条 */
pre {
    white-space: pre-wrap; /* 保留空白符，但允许自动换行 */
    word-wrap: break-word; /* 强制在长单词内换行 */
    overflow-x: auto; /* 内容溢出时显示水平滚动条 */
}

h1, h2, h3 {
    color: var(--primary-color); /* 蓝色标题 */
    margin-top: 0;
    margin-bottom: 20px;
}

.card {
    background-color: var(--card-bg); /* 卡片背景色 */
    padding: 20px; /* 减小内边距 */
    margin-bottom: 25px; /* 保持底部外边距 */
    border-radius: 12px; /* 更大的圆角 */
    box-shadow: 0 4px 15px var(--shadow-light); /* 柔和阴影 */
    border: 1px solid var(--border-color); /* 添加细边框 */
    width: 100%; /* 确保卡片占据全部宽度 */
    box-sizing: border-box; /* 包含 padding 和 border 在宽度内 */
    position: relative; /* 为内部的绝对定位元素提供定位上下文 */
}

/* 确保 pre 标签内容自动换行 */
pre {
    white-space: pre-wrap; /* 保留空白符，但允许自动换行 */
    word-wrap: break-word; /* 强制在长单词内换行 */
}

.form-group {
    margin-bottom: 20px; /* 增加间距 */
}

label {
    display: block;
    margin-bottom: 8px; /* 增加间距 */
    font-weight: 600; /* 更粗的字体 */
    color: var(--text-dark);
}

input[type="text"],
input[type="password"],
textarea {
    width: 100%;
    padding: 12px; /* 增加内边距 */
    border: 1px solid var(--border-color);
    border-radius: 8px; /* 更大的圆角 */
    box-sizing: border-box;
    font-size: 1rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

input[type="text"]:focus,
input[type="password"]:focus,
textarea:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(0, 123, 255, 0.25); /* 聚焦时的蓝色阴影 */
    outline: none; /* 移除默认轮廓 */
}

textarea {
    min-height: 120px; /* 增加最小高度 */
    resize: vertical;
}

button {
    background-color: var(--primary-color); /* 蓝色按钮 */
    color: var(--text-light);
    padding: 12px 25px; /* 增加内边距 */
    border: none;
    border-radius: 8px; /* 更大的圆角 */
    cursor: pointer;
    font-size: 1.05rem; /* 略微增大字体 */
    font-weight: 600;
    transition: background-color 0.3s ease, transform 0.2s ease;
    display: inline-block; /* 保持为行内块，方便与其他元素对齐 */
    text-align: center; /* 确保文本居中 */
}

button:hover {
    background-color: var(--primary-dark); /* 鼠标悬停时的深蓝色 */
    transform: translateY(-2px); /* 悬停时轻微上浮 */
}

.error {
    color: var(--danger-color); /* 红色错误信息 */
    margin-top: 15px;
    font-weight: 500;
}