大量修改UI
This commit is contained in:
Azmat@qq.com
@@ -217,7 +217,7 @@ img, svg, video { display: block; max-width: 100%; }
|
||||
/* ─── App shell ─── */
|
||||
.app {
|
||||
display: grid;
|
||||
grid-template-columns: 248px 1fr;
|
||||
grid-template-columns: 164px 1fr;
|
||||
min-height: 100vh;
|
||||
transition: grid-template-columns var(--t-base);
|
||||
}
|
||||
@@ -225,9 +225,9 @@ body.sidebar-collapsed .app { grid-template-columns: 96px 1fr; }
|
||||
|
||||
/* ─── Sidebar ─── */
|
||||
aside.sidebar {
|
||||
padding: 22px 16px;
|
||||
padding: 0 16px 22px;
|
||||
border-right: 1px solid var(--border-faint);
|
||||
background: var(--background-base);
|
||||
background: #f5f6f8;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
height: 100vh;
|
||||
@@ -239,24 +239,40 @@ aside.sidebar {
|
||||
.sidebar-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 2px 8px 16px;
|
||||
min-height: 44px;
|
||||
justify-content: center;
|
||||
margin: 0 -16px;
|
||||
padding: 0;
|
||||
height: 116px;
|
||||
min-height: 116px;
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid rgba(27, 32, 40, 0.07);
|
||||
}
|
||||
.brand { display: flex; align-items: center; min-width: 0; color: var(--accent-black); }
|
||||
.brand { display: flex; align-items: center; justify-content: center; min-width: 0; color: var(--accent-black); }
|
||||
.brand-clip {
|
||||
display: block;
|
||||
width: 142px;
|
||||
width: 132px;
|
||||
height: 40px;
|
||||
overflow: hidden;
|
||||
transition: width var(--t-base);
|
||||
transition: width var(--t-base), height var(--t-base);
|
||||
}
|
||||
.brand-logo {
|
||||
display: block;
|
||||
width: 132px;
|
||||
height: 40px;
|
||||
max-width: none;
|
||||
margin: 0;
|
||||
object-fit: contain;
|
||||
object-position: left center;
|
||||
}
|
||||
.brand-logo { display: block; width: 142px; max-width: none; height: auto; margin: -8px 0 -6px -8px; object-fit: contain; }
|
||||
.brand-mark, .flame { width: 22px; height: 22px; color: var(--accent-black); }
|
||||
.brand-mark svg, .flame svg { width: 100%; height: 100%; }
|
||||
.brand .name { font-weight: 600; font-size: 18px; letter-spacing: -.012em; color: var(--accent-black); }
|
||||
.sidebar-toggle {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 220px;
|
||||
left: 136px;
|
||||
z-index: 70;
|
||||
width: 28px;
|
||||
height: 100vh;
|
||||
@@ -392,25 +408,29 @@ nav a.disabled:hover { background: transparent; color: var(--black-alpha-32); }
|
||||
margin-top: 6px;
|
||||
}
|
||||
.yz-resource-head {
|
||||
height: 54px;
|
||||
height: 48px;
|
||||
margin-left: -16px;
|
||||
margin-right: 22px;
|
||||
margin-right: 10px;
|
||||
border: 0;
|
||||
border-radius: 0 28px 28px 0;
|
||||
border-radius: 0 24px 24px 0;
|
||||
background: transparent;
|
||||
color: #2d3442;
|
||||
color: #17191d;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 0 16px 0 18px;
|
||||
gap: 6px;
|
||||
padding: 0 10px 0 14px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
font-family: inherit;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
.yz-resource-head > span { white-space: nowrap; flex: 0 0 auto; }
|
||||
.yz-resource-head.active {
|
||||
background: var(--nav-active);
|
||||
color: var(--accent-white);
|
||||
box-shadow: 0 6px 18px rgba(17, 19, 24, .14);
|
||||
}
|
||||
.yz-resource-head .major-dot,
|
||||
.yz-side-link .major-dot {
|
||||
@@ -424,14 +444,16 @@ nav a.disabled:hover { background: transparent; color: var(--black-alpha-32); }
|
||||
.yz-resource-head .major-dot { display: none; }
|
||||
.yz-side-link .major-dot { display: none; }
|
||||
.yz-resource-head > svg {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
color: #2d3442;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
flex-shrink: 0;
|
||||
color: #17191d;
|
||||
}
|
||||
.yz-resource-head.active > svg { color: rgba(255, 255, 255, .95); }
|
||||
.yz-resource-head .chev {
|
||||
margin-left: auto;
|
||||
display: inline-flex;
|
||||
flex-shrink: 0;
|
||||
opacity: .72;
|
||||
}
|
||||
.yz-resource-head.active .chev { opacity: .82; }
|
||||
@@ -467,15 +489,16 @@ nav a.disabled:hover { background: transparent; color: var(--black-alpha-32); }
|
||||
background: #d7dbe3;
|
||||
}
|
||||
.yz-resource-sub a {
|
||||
min-height: 38px;
|
||||
min-height: 34px;
|
||||
border-radius: 11px;
|
||||
padding: 0 12px;
|
||||
color: #7f838b;
|
||||
padding: 0 8px 0 10px;
|
||||
color: #888888;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 9px;
|
||||
font-size: 15px;
|
||||
gap: 8px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
white-space: nowrap;
|
||||
transition: background .15s, color .15s;
|
||||
}
|
||||
.yz-resource-sub a .dot {
|
||||
@@ -485,7 +508,7 @@ nav a.disabled:hover { background: transparent; color: var(--black-alpha-32); }
|
||||
background: #c8c8c8;
|
||||
}
|
||||
.yz-resource-sub a:hover {
|
||||
background: #f1f3f8;
|
||||
background: #eceef2;
|
||||
color: #5e6571;
|
||||
}
|
||||
.yz-resource-sub a.active {
|
||||
@@ -516,23 +539,26 @@ nav a.disabled:hover { background: transparent; color: var(--black-alpha-32); }
|
||||
pointer-events: none;
|
||||
}
|
||||
.yz-side-link {
|
||||
min-height: 54px;
|
||||
min-height: 48px;
|
||||
margin-left: -16px;
|
||||
margin-right: 22px;
|
||||
border-radius: 0 28px 28px 0;
|
||||
margin-right: 10px;
|
||||
border-radius: 0 24px 24px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 0 16px 0 18px;
|
||||
color: #2d3442;
|
||||
font-size: 15px;
|
||||
gap: 8px;
|
||||
padding: 0 10px 0 14px;
|
||||
color: #17191d;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
transition: background .22s ease, color .22s ease, box-shadow .22s ease;
|
||||
}
|
||||
.yz-side-link:hover { background: #f2f4f8; }
|
||||
.yz-side-link:hover { background: #eceef2; }
|
||||
.yz-side-link > svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
flex-shrink: 0;
|
||||
color: #4f5562;
|
||||
transition: color .22s ease;
|
||||
}
|
||||
@@ -576,13 +602,19 @@ nav a.disabled:hover { background: transparent; color: var(--black-alpha-32); }
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
body.sidebar-collapsed aside.sidebar { padding: 22px 12px; }
|
||||
body.sidebar-collapsed .sidebar-head { gap: 6px; padding: 2px 0 16px; }
|
||||
body.sidebar-collapsed aside.sidebar { padding: 0 12px 22px; }
|
||||
body.sidebar-collapsed .sidebar-head { gap: 6px; margin: 0 -12px; padding: 0 12px; height: 116px; min-height: 116px; }
|
||||
body.sidebar-collapsed .brand-clip {
|
||||
width: 34px;
|
||||
height: 34px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
body.sidebar-collapsed .brand-logo {
|
||||
width: auto;
|
||||
height: 34px;
|
||||
max-width: none;
|
||||
}
|
||||
body.sidebar-collapsed .sidebar-toggle { left: 68px; }
|
||||
body.sidebar-collapsed .sidebar-toggle-icon--collapse { display: none; }
|
||||
@@ -649,11 +681,14 @@ main { position: relative; background: var(--background-base); min-width: 0; }
|
||||
/* ─── Topbar ─── */
|
||||
.topbar {
|
||||
display: flex; align-items: center; gap: 16px;
|
||||
padding: 16px 28px;
|
||||
border-bottom: 1px solid var(--border-faint);
|
||||
background: var(--surface);
|
||||
padding: 0 24px;
|
||||
border-bottom: 1px solid rgba(27, 32, 40, 0.08);
|
||||
background: #fff;
|
||||
position: sticky; top: 0; z-index: 50;
|
||||
min-height: 72px;
|
||||
height: 116px;
|
||||
min-height: 116px;
|
||||
box-sizing: border-box;
|
||||
flex-wrap: nowrap;
|
||||
}
|
||||
.crumbs { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--black-alpha-48); }
|
||||
.crumbs .sep { color: var(--black-alpha-32); }
|
||||
@@ -668,25 +703,27 @@ main { position: relative; background: var(--background-base); min-width: 0; }
|
||||
min-height: 44px;
|
||||
}
|
||||
.yz-mod {
|
||||
height: 40px;
|
||||
padding: 0 20px;
|
||||
border: 0;
|
||||
border-radius: var(--r-pill);
|
||||
background: var(--black-alpha-4);
|
||||
color: var(--black-alpha-56);
|
||||
height: 44px;
|
||||
min-width: 104px;
|
||||
padding: 0 22px;
|
||||
border: 1px solid #d9dde3;
|
||||
border-radius: 22px;
|
||||
background: rgba(31, 39, 51, 0.025);
|
||||
color: #2b2e33;
|
||||
font: inherit;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
white-space: nowrap;
|
||||
flex-shrink: 0;
|
||||
transition: background var(--t-base), color var(--t-base);
|
||||
transition: background var(--t-base), color var(--t-base), border-color var(--t-base);
|
||||
}
|
||||
.yz-mod:hover { background: var(--black-alpha-8); color: var(--accent-black); }
|
||||
.yz-mod:hover { background: rgba(31, 39, 51, 0.06); color: #2b2e33; }
|
||||
.yz-mod.active {
|
||||
background: var(--nav-active);
|
||||
color: var(--accent-white);
|
||||
font-weight: 600;
|
||||
background: #101012;
|
||||
color: #fff;
|
||||
font-weight: 500;
|
||||
border-color: transparent;
|
||||
}
|
||||
.top-search {
|
||||
display: inline-flex;
|
||||
@@ -695,16 +732,16 @@ main { position: relative; background: var(--background-base); min-width: 0; }
|
||||
height: 40px;
|
||||
min-width: 196px;
|
||||
padding: 0 12px;
|
||||
border: 1px solid var(--border-faint);
|
||||
border: 1px solid #eeeeee;
|
||||
border-radius: var(--r-pill);
|
||||
background: var(--background-lighter);
|
||||
background: #f5f5f5;
|
||||
color: var(--black-alpha-48);
|
||||
font: inherit;
|
||||
font-size: 13px;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
transition: border-color var(--t-base), background var(--t-base);
|
||||
}
|
||||
.top-search:hover { border-color: var(--black-alpha-24); background: var(--surface); }
|
||||
.top-search:hover { border-color: #e0e0e0; background: #f0f0f0; }
|
||||
.top-search svg { width: var(--icon-m); height: var(--icon-m); flex-shrink: 0; }
|
||||
.top-search span:not(.kbd) { flex: 1; text-align: left; }
|
||||
.top-search .kbd {
|
||||
@@ -815,7 +852,7 @@ main { position: relative; background: var(--background-base); min-width: 0; }
|
||||
padding: 24px 28px 60px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
min-height: calc(100vh - 64px);
|
||||
min-height: calc(100vh - 116px);
|
||||
}
|
||||
|
||||
.content > .corner-mark { display: none; }
|
||||
@@ -2455,14 +2492,14 @@ table.t tbody tr:hover { background: var(--black-alpha-4); }
|
||||
aside.sidebar {
|
||||
display: block;
|
||||
position: fixed; top: 0; left: 0; bottom: 0;
|
||||
width: 248px;
|
||||
width: 164px;
|
||||
z-index: 1200;
|
||||
transform: translateX(-100%);
|
||||
transition: transform .28s cubic-bezier(.32, .72, 0, 1);
|
||||
box-shadow: 0 0 40px rgba(0, 0, 0, .18);
|
||||
}
|
||||
/* 抽屉里收窄态不适用,强制展开宽度,避免 body.sidebar-collapsed 把抽屉压成 96px */
|
||||
body.sidebar-collapsed aside.sidebar { width: 248px; }
|
||||
body.sidebar-collapsed aside.sidebar { width: 164px; }
|
||||
aside.sidebar.mobile-open { transform: translateX(0); }
|
||||
.sidebar-toggle { display: none; }
|
||||
/* 抽屉内汉堡键无意义,藏掉,留出顶部空间给页面自己的汉堡 */
|
||||
|
||||
Reference in New Issue
Block a user