style: 将工作区操作移入标签页后缀并增强浅色分隔线
This commit is contained in:
+51
-15
@@ -431,11 +431,6 @@ body {
|
||||
.script-section > :first-child {
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.script-section > :first-child .n-tabs {
|
||||
flex: 1;
|
||||
min-width: 220px;
|
||||
width: auto;
|
||||
}
|
||||
.script-section .content-with-history {
|
||||
flex: 1;
|
||||
height: auto;
|
||||
@@ -724,20 +719,61 @@ body {
|
||||
outline: 2px solid var(--app-accent);
|
||||
outline-offset: -2px;
|
||||
}
|
||||
/* Tabs 的默认整行宽度限制在左侧网格内,导出按钮始终处于同一行右端。 */
|
||||
.result-toolbar {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) auto;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
.result-toolbar > .n-tabs {
|
||||
/* 标签与操作由同一 NTabs 导航行管理,suffix 共享底线及垂直中心。 */
|
||||
.tabs-toolbar {
|
||||
container: tabs-toolbar / inline-size;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
.result-toolbar > .n-button {
|
||||
justify-self: end;
|
||||
.workspace-tabs.n-tabs {
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
.workspace-tabs > .n-tabs-nav {
|
||||
align-items: stretch;
|
||||
}
|
||||
.workspace-tabs .n-tabs-tab {
|
||||
min-height: 40px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.workspace-tabs .n-tabs-nav-scroll-wrapper {
|
||||
min-width: 0;
|
||||
}
|
||||
.workspace-tabs .n-tabs-nav__suffix {
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
padding-left: 20px;
|
||||
}
|
||||
.tabs-toolbar-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
flex-wrap: wrap;
|
||||
gap: 4px 14px;
|
||||
min-height: 40px;
|
||||
}
|
||||
.tabs-toolbar-actions .n-button,
|
||||
.tabs-toolbar-actions .text-button {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 32px;
|
||||
white-space: nowrap;
|
||||
}
|
||||
/* 窄内容区允许 suffix 独占一行;Tabs 本身继续使用组件内置横向滚动。 */
|
||||
@container tabs-toolbar (max-width: 600px) {
|
||||
.workspace-tabs > .n-tabs-nav {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.workspace-tabs .n-tabs-nav-scroll-wrapper {
|
||||
flex-basis: 100%;
|
||||
}
|
||||
.workspace-tabs .n-tabs-nav__suffix {
|
||||
width: 100%;
|
||||
justify-content: flex-end;
|
||||
padding-left: 0;
|
||||
}
|
||||
}
|
||||
.result-toolbar .n-tabs-tab__label {
|
||||
display: inline-flex;
|
||||
gap: 6px;
|
||||
|
||||
Reference in New Issue
Block a user