style(history-detail): 居中标题与标签栏样式

This commit is contained in:
肖应宇 2026-04-13 17:56:07 +08:00
parent 6a25d6aa3c
commit 8d5af9799c
3 changed files with 24 additions and 20 deletions

View File

@ -98,16 +98,16 @@
}
/* 标题和 meta 信息合并到一行 */
#immersive-main-content-area .container > h2 {
display: flex;
align-items: center;
justify-content: space-between;
#immersive-main-content-area .container #fileName {
color: var(--333333, #333);
font-family: "Microsoft YaHei";
font-size: 14px;
font-style: normal;
font-weight: 700;
line-height: normal;
margin: 0;
padding: 0;
gap: var(--spacing-md);
font-size: 0.7em;
font-weight: var(--font-weight-normal);
color: var(--color-text-muted);
flex-shrink: 0; /* 防止被压缩 */
min-height: 20px; /* 确保最小高度 */
}
@ -138,7 +138,7 @@
display: flex;
gap: 2px;
height: 32px;
justify-content: flex-start;
justify-content: center;
align-items: center;
background: transparent;
border-bottom: 1px solid var(--color-border-light);
@ -153,7 +153,7 @@
background-color: transparent;
border: none;
border-bottom: 2px solid transparent;
color: var(--color-text-muted);
color: #999;
cursor: pointer;
transition: all var(--transition-fast);
margin: 0;
@ -170,9 +170,9 @@
#immersive-main-content-area .tabs-container .tab-btn.active {
background-color: transparent;
color: var(--color-primary);
border-bottom-color: var(--color-primary);
font-weight: var(--font-weight-semibold);
color: #000F33;
border-bottom-color: #000F33;
/* font-weight: var(--font-weight-semibold); */
}
/* ==================== 4. 滚动容器管理(核心重构)==================== */
@ -399,7 +399,7 @@ body.immersive-active #immersive-main-content-area .container .tab-content {
overflow: hidden !important;
display: flex;
flex-direction: column;
background: var(--color-bg-secondary) !important;
/* background: var(--color-bg-secondary) !important; */
border: none !important;
transition: all var(--transition-base) ease !important;
}

View File

@ -61,10 +61,7 @@
}
/* 将标题和 meta 信息合并到一行 */
#immersive-main-content-area .container > h2 {
display: flex;
align-items: center;
justify-content: space-between;
#immersive-main-content-area .container #fileName {
margin: 0;
padding: 0;
gap: 12px;
@ -289,7 +286,7 @@
overflow: hidden !important;
display: flex;
flex-direction: column;
background: var(--immersive-surface-bg) !important;
/* background: var(--immersive-surface-bg) !important; */
border: none !important;
transition: all var(--immersive-transition-duration) ease !important;
}
@ -631,7 +628,7 @@ body.toc-dock-resizing #toc-vs-dock-resize-handle::before {
}
/* 第一行h2 和 meta 在同一行 - 极简设计 */
#immersive-main-content-area .container > h2 {
#immersive-main-content-area .container h2 {
grid-row: 1;
grid-column: 1;
height: 24px;

View File

@ -128,6 +128,10 @@
display: flex !important;
}
}
.title-container{
display: flex;
justify-content: center;
}
</style>
<script>
// 在 DOM 解析前就添加类,避免闪烁
@ -433,7 +437,9 @@
<!-- 主内容容器 -->
<!-- ===================== -->
<div class="container">
<h2 id="fileName">历史详情</h2>
<div class="title-container">
<span id="fileName" style="display:block !important;">历史详情</span>
</div>
<div class="meta" id="fileMeta">
<div class="meta-info">
<!-- <span id="fileMetaTime"></span>
@ -451,6 +457,7 @@
<span>导出</span>
</button>
</div>
<hr style="margin: 0; height: 1px;" />
<!-- 标签页导航 -->
<div class="tabs-container">