/*
* 全局样式和重置
*/
html {
font-size: 14px; /* 保留你原始的 html 字体大小设置 */
/* position: relative; */ /* 在我的 flexbox sticky footer 中通常不需要此属性，除非有特殊定位需求 */
/* min-height: 100%; */ /* 在我的 flexbox sticky footer 中，html 和 body 会通过 min-vh-100 和 flexbox 协同工作 */
}
@media (min-width: 768px) {
html {
font-size: 16px; /* 保留你原始的响应式字体大小设置 */
}
}
/* 字体选择 */
/* Google Fonts 示例，你可以选择自己喜欢的字体 */
/* 如果要使用，请在 _Layout.cshtml 中添加：
Playfair Display 用于标题，Roboto 用于正文
*/
body {
background-color: #1a1a1a; /* 深黑背景 */
color: #e0e0e0; /* 浅灰白色文字 */
font-family: 'Roboto', sans-serif; /* 优雅的无衬线字体 */
/* 替换你原始的 margin-bottom: 60px; */
/* 采用 Flexbox Sticky Footer 方案 */
min-height: 100vh; /* 确保 body 占据视口高度 */
display: flex;
flex-direction: column;
}
/* ------------------------------------------- */
/* 焦点轮廓样式 (替换你的原始设置) */
/* ------------------------------------------- */
/* 统一使用我的金色主题焦点轮廓 */
.btn:focus,
.btn:active:focus,
.btn-link.nav-link:focus, /* 确保导航栏链接按钮的焦点样式 */
.form-control:focus,
.form-check-input:focus {
outline: none; /* 移除浏览器默认的焦点轮廓 */
box-shadow: 0 0 0 0.1rem rgba(255, 255, 255, 0.2), /* 稍微亮一点的内圈 */
0 0 0 0.25rem rgba(230, 177, 62, 0.4); /* 外圈使用你的强调金色，带透明度 */
}
/* ------------------------------------------- */
/* 我之前提供的其他高大上样式 */
/* ------------------------------------------- */
/* 链接样式 */
a {
color: #e6b13e; /* 金色链接 */
text-decoration: none; /* 默认无下划线 */
transition: color 0.3s ease-in-out; /* 平滑过渡 */
}
a:hover {
color: #f0c367; /* 鼠标悬停时亮金色 */
text-decoration: underline; /* 悬停时显示下划线 */
}
/* 主要内容区域容器 */
.container {
flex-grow: 1; /* 确保内容区域占据所有可用空间 */
max-width: 1200px; /* 限制最大宽度，增加内容阅读舒适度 */
padding: 2rem 1rem;
}
/*
* Header - 导航栏
*/
header {
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4); /* 深色阴影，增加层次感 */
background-color: #2c2c2c; /* 导航栏背景 */
border-bottom: none !important;
}
.navbar {
background-color: transparent !important; /* 使 navbar 背景透明，由 header 决定 */
padding: 0;
border-bottom: none !important;
}
.navbar.navbar-expand-sm.mb-3 {
margin-bottom: 0px !important;
}
.navbar-brand {
font-family: 'Playfair Display', serif; /* 标题字体 */
font-size: 1.8rem;
font-weight: 700;
color: #e6b13e !important; /* 金色品牌名称 */
letter-spacing: 1px; /* 字母间距 */
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.6); /* 轻微文字阴影 */
}
.navbar-toggler {
border-color: rgba(230, 177, 62, 0.5); /* 菜单按钮边框 */
}
.navbar-toggler-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28230, 177, 62, 0.7%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") !important; /* 菜单按钮图标颜色 */
}
.navbar-nav .nav-link {
color: #c0c0c0 !important; /* 导航链接颜色 */
font-weight: 300;
padding: 0.5rem 1rem;
transition: all 0.3s ease-in-out;
border-radius: 4px;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link.active {
color: #e6b13e !important; /* 悬停和激活时金色 */
background-color: rgba(230, 177, 62, 0.1); /* 淡淡的背景高亮 */
}
/* 下拉菜单 */
.dropdown-menu {
background-color: #2c2c2c; /* 下拉菜单背景 */
border: 1px solid #4a4a4a;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5);
}
.dropdown-item,
.dropdown-item .btn-link {
color: #e0e0e0 !important; /* 文字颜色改为浅灰白色，确保可见 */
background-color: transparent !important; /* 确保背景是透明的 */
transition: all 0.2s ease-in-out;
}
.dropdown-item:hover,
.dropdown-item:focus,
.dropdown-item .btn-link:hover,
.dropdown-item .btn-link:focus {
background-color: rgba(230, 177, 62, 0.15) !important; /* 悬停时淡淡的金色背景 */
color: #e6b13e !important; /* 悬停时文字颜色变为金色 */
}
/*
* Main Content - 主要内容
*/
h1, h2, h3, h4, h5, h6 {
font-family: 'Playfair Display', serif; /* 标题字体 */
color: #e6b13e; /* 金色标题 */
margin-top: 2rem;
margin-bottom: 1rem;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}
h1 {
font-size: 2.5rem;
}
h2 {
font-size: 2rem;
}
/* 段落 */
p {
line-height: 1.8;
margin-bottom: 1rem;
}
/* 表格 */
.table {
color: #e0e0e0; /* 表格文字颜色 */
border: 1px solid #4a4a4a; /* 表格边框 */
background-color: #2c2c2c; /* 表格背景 */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.table thead th {
background-color: #3a3a3a; /* 表头背景 */
color: #e6b13e; /* 表头文字颜色 */
border-bottom: 2px solid #e6b13e; /* 表头底部金色边框 */
font-weight: 700;
}
.table tbody tr {
transition: background-color 0.3s ease-in-out;
}
.table tbody tr:hover {
background-color: #3e3e3e; /* 悬停时背景变亮 */
}
.table-striped tbody tr:nth-of-type(odd) {
background-color: #242424; /* 条纹表格的奇数行 */
}
.table-striped tbody tr:nth-of-type(odd):hover {
background-color: #3e3e3e; /* 条纹表格奇数行悬停 */
}
/* 修正表格内部链接的颜色，使其在深色背景下可见 */
.table a {
color: #f0f0f0; /* 表格内部链接的默认颜色改为浅色，与文字主体保持一致 */
text-decoration: none; /* 默认无下划线 */
}
.table a:hover {
color: #e6b13e; /* 悬停时改为你的强调金色 */
text-decoration: underline; /* 悬停时显示下划线 */
}
.table td {
color: #e0e0e0; /* 确保表格数据单元格的文字颜色是浅灰色，与 body 文本颜色保持一致 */
}
/* 按钮 */
.btn {
padding: 0.5rem 1.2rem;
border-radius: 4px;
font-weight: 400;
transition: all 0.3s ease-in-out;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}
.btn-primary, .btn-info { /* 主要按钮和信息按钮 */
background-color: #e6b13e; /* 金色背景 */
border-color: #e6b13e;
color: #1a1a1a; /* 深色文字 */
}
.btn-primary:hover, .btn-info:hover {
background-color: #f0c367; /* 悬停时亮金色 */
border-color: #f0c367;
color: #1a1a1a;
transform: translateY(-1px); /* 轻微上浮效果 */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
}
.btn-outline-secondary { /* 搜索按钮 */
color: #e6b13e;
white-space: nowrap;
border-color: #e6b13e;
background-color: transparent;
padding-left: 1rem; /* 稍微增加左右内边距 */
padding-right: 1rem; /* 稍微增加左右内边距 */
}
.btn-outline-secondary:hover {
background-color: #e6b13e;
color: #1a1a1a!important;
border-color: #e6b13e;
transform: translateY(-1px);
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.4);
}
/* 表单输入 */
.form-control {
background-color: #242424; /* 输入框背景 */
border: 1px solid #4a4a4a;
color: #e0e0e0; /* 输入文字颜色 */
padding: 0.6rem 1rem;
transition: all 0.3s ease-in-out;
}
.form-control::placeholder {
color: #888; /* 占位符颜色 */
}
/* Input Group */
.input-group-append .btn {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
}
.input-group {
align-items: center; /* 确保 input-group 内部元素垂直居中对齐 */
}
/* 确保搜索按钮的边框和背景与输入框对齐 */
.input-group-append .btn-outline-secondary {
height: 100%; /* 确保按钮高度与输入框匹配 */
display: flex; /* 使用 flexbox 确保按钮内容（如文本）垂直居中 */
align-items: center; /* 垂直居中文本 */
justify-content: center; /* 水平居中文本 */
}
/* 针对 input-group 内部的 input 元素，确保其高度正确 */
.input-group .form-control {
height: auto; /* 让其高度根据内容调整，通常配合 padding 确保一致 */
}
/* 微调搜索按钮的圆角，使其与输入框衔接更自然 */
.input-group-append .btn-outline-secondary {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
/* 确保右侧圆角存在 */
border-top-right-radius: 0.25rem; /* Bootstrap 默认圆角 */
border-bottom-right-radius: 0.25rem; /* Bootstrap 默认圆角 */
}
/* 分页控件 */
.pagination {
margin-top: 2rem;
margin-bottom: 2rem;
}
.page-item .page-link {
background-color: #2c2c2c; /* 页码背景 */
border: 1px solid #4a4a4a;
color: #e6b13e; /* 页码文字颜色 */
transition: all 0.3s ease-in-out;
}
.page-item .page-link:hover {
background-color: #e6b13e; /* 悬停时金色背景 */
border-color: #e6b13e;
color: #1a1a1a; /* 悬停时深色文字 */
}
.page-item.active .page-link {
background-color: #e6b13e; /* 激活页码金色背景 */
border-color: #e6b13e;
color: #1a1a1a; /* 激活页码深色文字 */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}
.page-item.disabled .page-link {
background-color: #3a3a3a; /* 禁用页码背景 */
border-color: #4a4a4a;
color: #888; /* 禁用页码文字颜色 */
pointer-events: none; /* 禁用点击 */
}
/*
* Footer - 页脚
*/
.footer {
background-color: #2c2c2c; /* 页脚背景 */
color: #888; /* 页脚文字颜色 */
padding: 1rem 0;
text-align: center;
box-shadow: 0 -4px 8px rgba(0, 0, 0, 0.4); /* 向上阴影 */
border-top: none !important;
}
.footer a {
color: #b0b0b0; /* 页脚链接颜色 */
}
.footer a:hover {
color: #e6b13e; /* 页脚链接悬停颜色 */
}
.card {
background-color: #2c2c2c; /* 卡片背景改为深灰色，与导航栏和表格背景一致 */
border: 1px solid #4a4a4a; /* 卡片边框改为深色边框 */
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.6); /* 更深的阴影，增加尊贵感 */
border-radius: 8px; /* 稍微圆润的边角 */
overflow: hidden; /* 确保内容不会溢出圆角 */
}
.card-header {
background-color: #3a3a3a; /* 卡片头部背景 */
color: #e6b13e; /* 头部标题文字颜色为金色 */
border-bottom: 1px solid #4a4a4a; /* 底部细线 */
padding: 1.5rem; /* 增加内边距 */
font-family: 'Playfair Display', serif; /* 标题字体 */
font-weight: 700;
font-size: 1.8rem; /* 调整标题大小 */
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* 轻微文字阴影 */
}
.card-body {
background-color: #242424; /* 卡片主体背景改为更深的灰色 */
padding: 2.5rem; /* 增加内边距，提供更多留白 */
color: #e0e0e0; /* 确保主体文字颜色可见 */
}
/* 修正卡片内部的表单标签 (label) 颜色 */
.card-body .form-group label {
color: #c0c0c0; /* 设置为浅灰色，确保可见 */
font-weight: 300;
margin-bottom: 0.5rem; /* 增加标签与输入框的间距 */
display: block; /* 确保标签独占一行 */
}
/* 修正卡片内部的输入框样式 */
.card-body .form-control {
background-color: #333; /* 输入框背景改为中等灰色，不再是纯黑 */
border: 1px solid #555; /* 边框颜色调整 */
color: #f0f0f0; /* 输入文字颜色改为浅色 */
padding: 0.75rem 1rem; /* 增加内边距 */
margin-bottom: 1.5rem; /* 增加输入框之间的间距 */
border-radius: 6px; /* 稍微圆润的边角 */
}
.card-body .form-control::placeholder {
color: #999; /* 占位符颜色 */
}
.card-body .form-control:focus {
border-color: #e6b13e; /* 聚焦时金色边框 */
box-shadow: 0 0 0 0.2rem rgba(230, 177, 62, 0.25); /* 聚焦时金色发光 */
background-color: #444; /* 聚焦时背景稍亮 */
}
/* 修正验证消息的颜色 (如果需要) */
.card-body .text-danger {
color: #ff6b6b !important; /* 警告或错误信息用柔和的红色 */
font-size: 0.9em;
margin-top: -1rem; /* 微调位置，避免与下一个元素重叠 */
margin-bottom: 1rem;
}
/* 修正登录按钮的样式 */
.card-body .btn-primary { /* 确保登录按钮是金色主题 */
background-color: #e6b13e;
border-color: #e6b13e;
color: #1a1a1a;
font-weight: 500; /* 加粗 */
padding: 0.75rem 1.5rem; /* 增加按钮大小 */
font-size: 1.1rem; /* 增大字体 */
border-radius: 6px;
width: 100%; /* 按钮宽度100% */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4);
}
.card-body .btn-primary:hover {
background-color: #f0c367;
border-color: #f0c367;
color: #1a1a1a;
transform: translateY(-2px); /* 悬停时稍微上浮 */
box-shadow: 0 6px 12px rgba(0, 0, 0, 0.5);
}
/* 修正 form-group 间距 */
.form-group + .form-group {
margin-top: 1rem; /* 增加相邻 form-group 之间的间距 */
}
/* ------------------------------------------- */
/* Chess Rating Calculator - 图片匹配样式 */
/* ------------------------------------------- */
/* 全局背景色和文本颜色 */
body {
background-color: #1e1e1e !important; /* 更深的背景色 */
color: #f0f0f0; /* 全局默认文本颜色 */
}
/* 页面主标题 */
.container h1 {
color: #e6b13e; /* 金色 */
font-family: 'Playfair Display', serif;
font-weight: 700;
text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
margin-bottom: 2.5rem !important; /* 增加标题下边距 */
font-size: 2.2rem; /* 调整标题大小 */
}
/* 卡片通用样式 */
.card {
background-color: #2e2e2e; /* 卡片背景色 */
border: 1px solid #4a4a4a; /* 卡片边框 */
border-radius: 8px; /* 稍微大一点的圆角 */
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3); /* 稍微明显的阴影 */
overflow: hidden; /* 防止内容溢出圆角 */
}
.card-header {
background-color: #3a3a3a; /* 卡片头部背景色 */
border-bottom: 1px solid #4a4a4a; /* 头部底部边框 */
padding: 0.8rem 1.25rem; /* 统一上下边距 */
}
.card-header h3 {
color: #e6b13e; /* 标题文字颜色 */
font-size: 1.35rem; /* 标题字号 */
margin-bottom: 0;
font-weight: 600;
font-family: 'Playfair Display', serif;
margin-top:0px!important;
}
.card-body {
padding: 1.25rem; /* 统一卡片主体内边距 */
color: #e0e0e0; /* 卡片主体文本颜色 */
}
/* 表单组和元素紧凑化 */
.form-group.mb-3 {
margin-bottom: 0.8rem !important; /* 减小每个表单组之间的底部外边距 */
}
.form-group.mb-4 { /* 最后一个表单组 */
margin-bottom: 1.2rem !important;
}
/* 表单标签颜色和对齐 */
.col-form-label {
color: #f0f0f0; /* 标签文字颜色 */
padding-top: calc(0.375rem + 1px);
padding-bottom: calc(0.375rem + 1px);
line-height: 1.5; /* 恢复默认 line-height，让文字清晰 */
font-weight: 400; /* 标签不加粗 */
font-size: 0.95rem; /* 标签字体大小 */
}
/* 统一所有 form-control 和 form-select 的高度、边框和背景 */
.form-control,
.form-select {
height: calc(1.5em + 0.75rem + 2px); /* 标准 Bootstrap 高度 */
padding: 0.375rem 0.75rem; /* 标准 Bootstrap padding */
font-size: 1rem; /* 统一字体大小 */
font-weight: 400; /* 统一字体粗细 */
line-height: 1.5; /* 统一行高 */
color: #e6e6e6; /* 统一文本颜色 */
background-color: #3e3e3e; /* 统一背景颜色 */
background-clip: padding-box;
border: 1px solid #5a5a5a; /* 统一边框颜色 */
appearance: none; /* 移除某些浏览器对 select 的默认样式 */
border-radius: 0.25rem; /* 统一圆角 */
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
/* 统一 placeholder 颜色 */
.form-control::placeholder {
color: #999; /* 稍微亮一点的灰色 */
opacity: 1;
}
/* 针对 form-select 的选中项样式 */
.form-select option {
background-color: #3e3e3e;
color: #e6e6e6;
}
/* 调整 select 箭头颜色，使其与主题匹配 */
.form-select {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23e6e6e6' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
background-position: right 0.75rem center;
background-size: 16px 12px;
}
/* 当输入框/下拉框聚焦时，提供统一的样式 */
.form-control:focus,
.form-select:focus {
color: #e6e6e6;
background-color: #3e3e3e;
border-color: #e6b13e; /* 聚焦时使用主题色边框 */
outline: 0;
box-shadow: 0 0 0 0.25rem rgba(230, 177, 62, 0.25); /* 聚焦时使用主题色阴影 */
}
/* 主要按钮样式 (Add Game) - 金色背景 */
.btn-primary {
background-color: #e6b13e; /* 金色背景 */
border-color: #e6b13e; /* 金色边框 */
color: #1e1e1e; /* 按钮文字颜色 */
font-weight: 600;
padding: 0.75rem 1.25rem; /* 适当内边距 */
border-radius: 5px;
font-size: 1rem;
transition: all 0.2s ease-in-out;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); /* 按钮阴影 */
}
.btn-primary:hover {
background-color: #d8a637; /* 悬停时稍微深一点的金色 */
border-color: #d8a637;
color: #1e1e1e;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
}
.btn-primary:active, .btn-primary:focus {
background-color: #c99a30 !important;
border-color: #c99a30 !important;
box-shadow: 0 0 0 0.2rem rgba(230, 177, 62, 0.5) !important;
}
/* 次要按钮样式 (Reset All) - 描边金色 */
.btn-outline-info { /* 沿用之前的 btn-outline-info，但颜色调整 */
color: #e6b13e; /* 描边按钮文字颜色 */
border-color: #e6b13e; /* 描边颜色 */
background-color: transparent;
font-weight: 600;
padding: 0.75rem 1.25rem; /* 适当内边距 */
border-radius: 5px;
font-size: 1rem;
white-space: nowrap; /* 确保不换行 */
transition: all 0.2s ease-in-out;
}
.btn-outline-info:hover {
background-color: #e6b13e; /* 悬停时填充金色 */
color: #1e1e1e; /* 悬停时文字变为深色 */
border-color: #e6b13e;
}
.btn-outline-info:active, .btn-outline-info:focus {
background-color: #c99a30 !important;
color: #1e1e1e !important;
border-color: #c99a30 !important;
box-shadow: 0 0 0 0.2rem rgba(230, 177, 62, 0.5) !important;
}
/* 游戏列表样式 */
.list-group-flush {
border-top: none; /* 移除顶部边框 */
border-bottom: none; /* 移除底部边框 */
}
.list-group-item {
background-color: transparent; /* 列表项背景透明 */
border-color: #4a4a4a; /* 列表项边框颜色 */
color: #f0f0f0; /* 列表项默认文字颜色 */
padding: 0.8rem 0; /* 减小列表项的上下内边距，左右由父容器控制 */
font-size: 0.9rem; /* 列表项字体大小 */
align-items: center;
}
/* 确保文本信息部分也没有额外的垂直间距导致整体不对齐 */
.list-group-item > div:first-child {
/* 这个 div 包含“You: ... Vs Opponent: ...”和“(K=40, Win (1))” */
align-items: center !important; /* 确保这个文本信息区域内部的子元素也垂直居中 */
}
/* 确保内部的 span, small 元素没有过大的 margin/padding */
.list-group-item span.text-white-50 {
margin: 0 !important;
padding: 0 !important;
line-height: 1.5; /* 保持一致的行高 */
}
.list-group-item small.text-secondary {
margin: 0 !important;
padding: 0 !important;
line-height: 1.5; /* 保持一致的行高 */
}
.list-group-item:first-child {
border-top: none; /* 确保第一个没有顶部边框 */
}
.list-group-item:last-child {
border-bottom: none; /* 确保最后一个没有底部边框 */
}
/* “暂无对局”消息 */
#noGamesMessage {
color: #b0b0b0; /* 灰色提示文字 */
font-style: italic;
padding: 0.8rem 0;
}
/* 列表项内容布局 */
.list-group-item .d-flex.flex-column.flex-md-row {
margin-bottom: 0 !important; /* 移除可能的额外垂直间距 */
}
.list-group-item span.text-white-50 {
color: #e0e0e0 !important; /* 等级分信息文字颜色 */
white-space: nowrap; /* 确保不换行 */
overflow: hidden;
text-overflow: ellipsis; /* 如果过长显示省略号 */
max-width: 80%; /* 限制宽度 */
}
.list-group-item small.text-secondary {
color: #b0b0b0 !important; /* 括号内信息颜色 */
font-size: 0.8rem; /* 调整字体大小 */
white-space: nowrap; /* 确保不换行 */
}
/* 等级分变化值和删除按钮 */
.list-group-item .d-flex.align-items-center span.me-2 {
font-size: 1.0rem; /* 确保字体大小统一，这样就不会导致高度不一致 */
line-height: 1.5; /* 明确设置行高，使其与父容器的行高或 Flex item 的基线对齐 */
font-weight: 600;
white-space: nowrap;
/* 确保没有额外的 margin 或 padding 影响垂直对齐 */
margin-top: 0 !important;
margin-bottom: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.list-group-item span.me-2 {
font-weight: 600;
white-space: nowrap;
}
.list-group-item .remove-game-btn {
color: #e6b13e !important;
font-size: 1.3rem;
line-height: 1; /* 关键：确保按钮的行高是 1，这样它不会额外撑开空间 */
/* 调整 padding 和 margin，使其与分数文本垂直对齐 */
padding: 0 0.3rem !important; /* 减小或调整 padding */
margin-left: 0.5rem !important; /* 与等级分变化值保持距离 */
margin-top: 0 !important; /* 确保没有顶部外边距 */
margin-bottom: 0 !important; /* 确保没有底部外边距 */
/* 确保按钮在 Flex item 中也能很好地垂直居中 */
display: flex; /* 让按钮自身成为一个 flex 容器，可以更好的控制内部 X 的对齐 */
align-items: center; /* 垂直居中 X */
justify-content: center; /* 水平居中 X */
height: 1.5em; /* 给按钮一个明确的高度，与行高保持一致 */
}
.list-group-item .remove-game-btn:hover {
color: #ff6b6b !important; /* 悬停时变为红色 */
opacity: 1;
}
/* 总等级分变化卡片 */
.card-body p {
color: #f0f0f0; /* 确保文字颜色可见 */
margin-bottom: 1rem !important; /* 调整文本和按钮之间间距 */
font-size: 1rem;
}
.card-body .col-sm-7{
height:35px!important;
}
/* 确保颜色正确 */
.text-success {
color: #6edc6e !important; /* 绿色 */
}
.text-danger {
color: #ff6b6b !important; /* 红色 */
}
/* Layout 调整 */
/* 确保页脚在底部 */
.min-vh-100 {
min-height: 100vh;
}
.flex-grow-1 {
flex-grow: 1;
}
/* 导航栏背景和链接颜色 */
.navbar.bg-white {
background-color: #242424 !important; /* 导航栏背景色 */
}
.navbar-brand {
color: #e6b13e !important; /* 品牌文字颜色 */
font-weight: 700;
}
.nav-link.text-dark {
color: #e0e0e0 !important; /* 导航链接颜色 */
}
.nav-link.text-dark:hover,
.nav-link.text-dark:focus {
color: #e6b13e !important; /* 悬停/聚焦时金色 */
}
.navbar-toggler-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='%23e6b13e' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"); /* 汉堡菜单图标改为金色 */
}
/* 语言选择下拉菜单 */
.dropdown-menu {
background-color: #3a3a3a;
border-color: #4a4a4a;
}
.dropdown-item {
color: #e0e0e0;
}
.dropdown-item .btn-link {
color: #e0e0e0 !important;
}
.dropdown-item .btn-link:hover {
background-color: #4a4a4a;
color: #e6b13e !important;
}
/* 1. 调整 Total Rating Change 卡片主体内边距 */
/* 这个选择器针对的是右下角的“Total Rating Change”卡片 */
.col-md-6 > .card:last-child > .card-body {
padding-top: 0.8rem; /* 适当减小顶部内边距 */
padding-bottom: 0.8rem; /* 适当减小底部内边距 */
padding-left: 1.25rem; /* 左右保持，或根据需要微调 */
padding-right: 1.25rem; /* 左右保持，或根据需要微调 */
/* 已经通过 HTML 移除了 justify-content-between */
/* 确保 card-body 是 flex 容器，内容垂直堆叠 */
display: flex;
flex-direction: column;
/* 不再使用 justify-content-between，让子元素通过 margin 控制间距 */
/* justify-content: flex-start; /* 默认就是flex-start，可以不显式写 */
}
/* 2. 调整 Total Rating Change 文本的间距 */
/* 这个选择器针对的是卡片主体内的 标签 */
.col-md-6 > .card:last-child > .card-body p {
margin: 0 !important; /* 彻底移除所有默认的 margin */
padding: 0 !important; /* 确保没有额外 padding */
line-height: 1.2; /* 确保行高紧凑 */
font-size: 0.95rem; /* 字体大小 */
color: #f0f0f0; /* 文本颜色 */
/* 为这个
标签底部设置明确的间距，达到约 20px 的效果 */
margin-bottom: 1.25rem !important; /* 1.25rem 接近 20px */
/* 使用 flexbox 确保文字和数值紧凑对齐 */
display: flex;
align-items: center; /* 垂直居中对齐 */
justify-content: space-between; /* 文字和数值推开 */
}
/* 3. 调整 Total Rating Change 数值显示 */
#totalRatingChangeValue {
font-size: 1.15rem; /* 字体大小 */
font-weight: 700;
white-space: nowrap; /* 防止数值换行 */
margin: 0 !important;
padding: 0 !important;
}
/* 4. 调整 Reset All 按钮的样式 */
/* 这个选择器针对的是“Reset All”按钮 */
.col-md-6 > .card:last-child > .card-body .btn {
/* 移除所有默认的 margin-top 和 mt-auto，因为我们已经在
标签上设置了 margin-bottom */
margin-top: 0 !important;
padding: 0.6rem 1.25rem; /* 稍微减小按钮的内边距，使其更薄 */
font-size: 0.95rem; /* 稍微减小按钮字体大小 */
width: 100%;
}
container.flex-grow-1 {
padding-top: 0px !important;
margin-top: 0px !important;
}
.container.py-5 {
padding-top: 0px !important;
}
h1.text-center.mb-5 {
padding-top: 0px !important;
padding-bottom: 0px !important;
margin-top:0px !important;
}
/* 关键：禁用后保持原样 + 只显示一个箭头 */
#gameType:disabled {
background-color: #343a40 !important; /* 保持深灰底 */
color: #ffffff !important; /* 保持白字 */
border: 1px solid #495057 !important;
opacity: 0.8; /* 轻微暗化表示禁用 */
cursor: not-allowed;
pointer-events: none; /* 彻底禁止交互（比 disabled 更彻底） */
}
/* 确保箭头不被浏览器重绘（最重要！） */
#gameType:disabled::after {
opacity: 0.6; /* 原有 Bootstrap 箭头稍微淡一点 */
}
.locked-select-visual {
opacity: 0.6; /* 降低透明度 */
/* background-color: #495057; /* 可以添加一个稍微不同的背景色，与你主题匹配 */
cursor: not-allowed; /* 更改鼠标光标 */
}
#noGamesMessage {
list-style-type: none;
}
/* --- 标题字体大小调整 --- */
.custom-card-title {
font-size: 1.8rem; /* 增大标题字体大小 */
font-weight: 700; /* 加粗标题 */
color: #e6b13e; /* 示例：金色文字，可以根据你的主题调整 */
margin-bottom: 1rem; /* 标题与描述之间的间距 */
}
/* --- 描述文字调整 --- */
.custom-card-text {
font-size: 1.1rem; /* 调整描述文字大小 */
line-height: 1.6; /* 增加行高，提升可读性 */
color: #bbb; /* 比默认 text-muted 亮一些，在深色背景下更清晰 */
}
.rating-input-row{
margin-bottom: 0.5rem!important;
}
.truncate-text {
max-width: 150px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: inline-block;
}