完成视频复刻和优化
This commit is contained in:
Azmat@qq.com
@@ -51,6 +51,10 @@
|
||||
:root {
|
||||
/* 比影擎 164px 略宽:我们子项带数量徽章,164 会挤 */
|
||||
--sidebar-width: 192px;
|
||||
--topbar-height: 116px;
|
||||
/* 壳层:顶栏/侧栏收窄键 < 页面浮层。浮层必须盖住搜索/余额/铃铛 */
|
||||
--z-topbar: 50;
|
||||
--z-overlay: 200;
|
||||
|
||||
/* ===== Backgrounds (冷灰 · YZ 影擎) ===== */
|
||||
--background-base: #f7f8fa;
|
||||
@@ -223,6 +227,7 @@ img, svg, video { display: block; max-width: 100%; }
|
||||
.app {
|
||||
display: grid;
|
||||
grid-template-columns: var(--sidebar-width) minmax(0, 1fr);
|
||||
grid-template-rows: var(--topbar-height) minmax(0, 1fr);
|
||||
min-height: 100vh;
|
||||
transition: grid-template-columns var(--t-base);
|
||||
}
|
||||
@@ -232,6 +237,7 @@ body.sidebar-collapsed .app { grid-template-columns: 96px minmax(0, 1fr); }
|
||||
aside.sidebar {
|
||||
--klein: #002fa7;
|
||||
--st-black: #101012;
|
||||
grid-row: 1 / -1;
|
||||
padding: 0;
|
||||
border-right: 1px solid rgba(27, 32, 40, 0.08);
|
||||
background: rgba(28, 34, 43, 0.035);
|
||||
@@ -252,8 +258,8 @@ aside.sidebar {
|
||||
justify-content: center;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 116px;
|
||||
min-height: 116px;
|
||||
height: var(--topbar-height);
|
||||
min-height: var(--topbar-height);
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
@@ -357,7 +363,7 @@ aside.sidebar {
|
||||
font-weight: 500;
|
||||
/* 中文标签用 sans 字体,不用 mono + uppercase */
|
||||
}
|
||||
nav { display: flex; flex-direction: column; gap: 2px; }
|
||||
aside.sidebar nav { display: flex; flex-direction: column; gap: 2px; }
|
||||
nav a {
|
||||
display: flex; align-items: center; gap: 11px;
|
||||
padding: 9px 12px;
|
||||
@@ -414,7 +420,7 @@ nav a.disabled:hover { background: transparent; color: var(--black-alpha-32); }
|
||||
}
|
||||
aside.sidebar .nav-panel {
|
||||
position: relative;
|
||||
height: calc(100vh - 116px);
|
||||
height: calc(100vh - var(--topbar-height));
|
||||
min-height: 0;
|
||||
padding-top: 14px;
|
||||
padding-bottom: 82px;
|
||||
@@ -710,7 +716,7 @@ aside.sidebar .nav-panel > nav {
|
||||
}
|
||||
|
||||
body.sidebar-collapsed aside.sidebar { padding: 0; }
|
||||
body.sidebar-collapsed .sidebar-head { gap: 6px; margin: 0; padding: 0; height: 116px; min-height: 116px; }
|
||||
body.sidebar-collapsed .sidebar-head { gap: 6px; margin: 0; padding: 0; height: var(--topbar-height); min-height: var(--topbar-height); }
|
||||
body.sidebar-collapsed .brand-clip {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
@@ -760,13 +766,22 @@ body.sidebar-collapsed .user .em,
|
||||
body.sidebar-collapsed .user::after { display: none; }
|
||||
|
||||
/* ─── Main + grid background ─── */
|
||||
main { position: relative; background: #fff; min-width: 0; overflow-x: hidden; }
|
||||
.app > main {
|
||||
grid-column: 2;
|
||||
grid-row: 2;
|
||||
position: relative;
|
||||
background: #fff;
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
overflow-x: clip;
|
||||
overflow-y: visible;
|
||||
}
|
||||
.app:has(.pipeline-page) {
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
}
|
||||
main:has(.pipeline-page) {
|
||||
height: 100vh;
|
||||
.app > main:has(.pipeline-page) {
|
||||
min-height: 0;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
@@ -774,6 +789,7 @@ main:has(.pipeline-page) {
|
||||
.grid-bg {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
z-index: 0;
|
||||
pointer-events: none;
|
||||
background-image:
|
||||
linear-gradient(rgba(0, 47, 167, 0.16) 1px, transparent 1px),
|
||||
@@ -828,13 +844,17 @@ main:has(.pipeline-page) {
|
||||
|
||||
/* ─── Topbar ─── */
|
||||
.topbar {
|
||||
grid-column: 2;
|
||||
grid-row: 1;
|
||||
display: flex; align-items: center; gap: 16px;
|
||||
padding: 0 clamp(36px, 3.2vw, 68px);
|
||||
border-bottom: 1px solid rgba(27, 32, 40, 0.08);
|
||||
background: #fff;
|
||||
position: sticky; top: 0; z-index: 50;
|
||||
height: 116px;
|
||||
min-height: 116px;
|
||||
box-shadow: 0 4px 16px rgba(20, 27, 38, 0.035);
|
||||
position: sticky; top: 0; z-index: var(--z-topbar);
|
||||
align-self: start;
|
||||
height: var(--topbar-height);
|
||||
min-height: var(--topbar-height);
|
||||
min-width: 0;
|
||||
box-sizing: border-box;
|
||||
flex-wrap: nowrap;
|
||||
@@ -1013,11 +1033,13 @@ main:has(.pipeline-page) {
|
||||
|
||||
/* ─── Content ─── */
|
||||
.content {
|
||||
/* 对齐 HTML 设计稿 #page-content(24px 28px 60px):原 48px 顶距使全站标题整体偏低 24px */
|
||||
/* 对齐 HTML 设计稿 #page-content(24px 28px 60px):原 48px 顶距使全站标题整体偏低 24px
|
||||
禁止设 z-index:会形成层叠上下文,页面里的 fixed 抽屉/弹窗再高也盖不住顶栏。
|
||||
网格底 .grid-bg 在前、本节点 position:relative,DOM 顺序即可压住网格。 */
|
||||
padding: 24px 28px 60px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
min-height: calc(100vh - 116px);
|
||||
z-index: auto;
|
||||
min-height: calc(100vh - var(--topbar-height));
|
||||
animation: yz-page-enter 280ms cubic-bezier(0.22, 1, 0.36, 1);
|
||||
}
|
||||
.content:has(.pipeline-page) {
|
||||
@@ -1029,8 +1051,8 @@ main:has(.pipeline-page) {
|
||||
animation: none;
|
||||
}
|
||||
@keyframes yz-page-enter {
|
||||
from { opacity: 0; transform: translateY(8px); }
|
||||
to { opacity: 1; transform: translateY(0); }
|
||||
from { opacity: 0; }
|
||||
to { opacity: 1; }
|
||||
}
|
||||
|
||||
.content > .corner-mark { display: none; }
|
||||
@@ -2637,7 +2659,7 @@ table.t tbody tr:hover { background: var(--black-alpha-4); }
|
||||
position: fixed; inset: 0;
|
||||
background: rgba(21, 20, 15, .32);
|
||||
display: block;
|
||||
z-index: 90;
|
||||
z-index: var(--z-overlay);
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
pointer-events: none;
|
||||
@@ -2649,7 +2671,7 @@ table.t tbody tr:hover { background: var(--black-alpha-4); }
|
||||
width: 540px; max-width: 100vw;
|
||||
background: var(--surface);
|
||||
border-left: 1px solid var(--border-faint);
|
||||
z-index: 95;
|
||||
z-index: calc(var(--z-overlay) + 5);
|
||||
transform: translateX(100%);
|
||||
transition: transform .25s cubic-bezier(.32, .72, 0, 1);
|
||||
display: flex; flex-direction: column;
|
||||
|
||||
Reference in New Issue
Block a user