kexueadmin
/
paper-burner
4
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
css/history_detail/02-layout/immersive.css
View File

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

9
css/history_detail/_deprecated/immersive_layout.css
View File

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

9
views/history/history_detail.html
View File

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