修改部份ui
This commit is contained in:
Azmat@qq.com
@@ -49,25 +49,26 @@
|
||||
* { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
|
||||
:root {
|
||||
/* ===== Backgrounds (冷灰) ===== */
|
||||
--background-base: #f9f9f9;
|
||||
--background-lighter: #fbfbfb;
|
||||
/* ===== Backgrounds (冷灰 · YZ 影擎) ===== */
|
||||
--background-base: #f7f8fa;
|
||||
--background-lighter: #fbfbfc;
|
||||
--surface: #ffffff;
|
||||
--surface-raised: #ffffff;
|
||||
|
||||
/* ===== Borders (冷灰 3 档,语义优先) ===== */
|
||||
--border-faint: #ededed;
|
||||
--border-muted: #e8e8e8;
|
||||
--border-loud: #e6e6e6;
|
||||
--border-faint: #eceef2;
|
||||
--border-muted: #e6e8ee;
|
||||
--border-loud: #e2e5eb;
|
||||
|
||||
/* ===== Accent multi-color (5 色信号) ===== */
|
||||
--accent-black: #262626;
|
||||
--accent-black: #17191d;
|
||||
--accent-white: #ffffff;
|
||||
--accent-amethyst: #9061ff;
|
||||
--accent-bluetron: #2a6dfb;
|
||||
--accent-crimson: #eb3424;
|
||||
--accent-forest: #42c366;
|
||||
--accent-honey: #ecb730;
|
||||
--nav-active: #111318;
|
||||
|
||||
/* status 配套底/边 */
|
||||
--forest-bg: rgba(66, 195, 102, .08);
|
||||
@@ -77,15 +78,16 @@
|
||||
--honey-bg: rgba(236, 183, 48, .08);
|
||||
--honey-bd: rgba(236, 183, 48, .20);
|
||||
|
||||
/* ===== Heat · 单 hue + 8 档 alpha ===== */
|
||||
--heat: #fa5d19;
|
||||
--heat-90: rgba(250, 93, 25, .90);
|
||||
--heat-40: rgba(250, 93, 25, .40);
|
||||
--heat-20: rgba(250, 93, 25, .20);
|
||||
--heat-16: rgba(250, 93, 25, .16);
|
||||
--heat-12: rgba(250, 93, 25, .12);
|
||||
--heat-8: rgba(250, 93, 25, .08);
|
||||
--heat-4: rgba(250, 93, 25, .04);
|
||||
/* ===== Heat · 单 hue + 8 档 alpha · 丁香蓝(对齐 YZ 主 CTA) ===== */
|
||||
--heat: #A5B4FC;
|
||||
--heat-hover: #8ea0f8;
|
||||
--heat-90: rgba(165, 180, 252, .90);
|
||||
--heat-40: rgba(165, 180, 252, .40);
|
||||
--heat-20: rgba(165, 180, 252, .20);
|
||||
--heat-16: rgba(165, 180, 252, .16);
|
||||
--heat-12: rgba(165, 180, 252, .12);
|
||||
--heat-8: rgba(165, 180, 252, .08);
|
||||
--heat-4: rgba(165, 180, 252, .04);
|
||||
|
||||
/* ===== Black-alpha 阶梯 (20 档) ===== */
|
||||
--black-alpha-1: rgba(0, 0, 0, .01);
|
||||
@@ -128,19 +130,14 @@
|
||||
|
||||
/* ===== Shadows ===== */
|
||||
--shadow-cta:
|
||||
inset 0 -4px 8px rgba(250, 93, 25, .20),
|
||||
0 1px 1px rgba(250, 93, 25, .12),
|
||||
0 2px 4px rgba(250, 93, 25, .10),
|
||||
0 .5px .5px rgba(250, 93, 25, .16);
|
||||
0 1px 2px rgba(129, 140, 248, .16),
|
||||
0 6px 16px rgba(165, 180, 252, .28);
|
||||
--shadow-cta-hover:
|
||||
inset 0 -4px 8px rgba(250, 93, 25, .20),
|
||||
0 1px 1px rgba(250, 93, 25, .16),
|
||||
0 4px 8px rgba(250, 93, 25, .20),
|
||||
0 .5px .5px rgba(250, 93, 25, .16);
|
||||
0 2px 4px rgba(129, 140, 248, .20),
|
||||
0 10px 22px rgba(165, 180, 252, .34);
|
||||
--shadow-cta-active:
|
||||
inset 0 -4px 8px rgba(250, 93, 25, .28),
|
||||
0 1px 2px rgba(250, 93, 25, .16);
|
||||
--shadow-floating: 0 4px 20px rgba(21, 20, 15, .06);
|
||||
0 1px 2px rgba(129, 140, 248, .18);
|
||||
--shadow-floating: 0 8px 28px rgba(17, 19, 24, .06);
|
||||
}
|
||||
|
||||
::selection { background: var(--heat-20); color: var(--heat); }
|
||||
@@ -235,6 +232,8 @@ aside.sidebar {
|
||||
top: 0;
|
||||
height: 100vh;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
transition: padding var(--t-base);
|
||||
}
|
||||
.sidebar-head {
|
||||
@@ -251,7 +250,7 @@ aside.sidebar {
|
||||
transition: width var(--t-base);
|
||||
}
|
||||
.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(--heat); }
|
||||
.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 {
|
||||
@@ -380,6 +379,203 @@ nav a.disabled:hover { background: transparent; color: var(--black-alpha-32); }
|
||||
.user .av img { width: 100%; height: 100%; object-fit: cover; display: block; }
|
||||
.user .em { font-size: 13px; color: var(--accent-black); }
|
||||
|
||||
/* ─── YZ 左侧导航预览(资源中心胶囊 + 子库) ─── */
|
||||
.sidebar-toggle,
|
||||
.sidebar .search-box,
|
||||
.nav-section {
|
||||
display: none;
|
||||
}
|
||||
.yz-side-main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
margin-top: 6px;
|
||||
}
|
||||
.yz-resource-head {
|
||||
height: 54px;
|
||||
margin-left: -16px;
|
||||
margin-right: 22px;
|
||||
border: 0;
|
||||
border-radius: 0 28px 28px 0;
|
||||
background: transparent;
|
||||
color: #2d3442;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 0 16px 0 18px;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
font-family: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
.yz-resource-head.active {
|
||||
background: var(--nav-active);
|
||||
color: var(--accent-white);
|
||||
}
|
||||
.yz-resource-head .major-dot,
|
||||
.yz-side-link .major-dot {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
border-radius: 50%;
|
||||
background: transparent;
|
||||
flex-shrink: 0;
|
||||
margin-right: 1px;
|
||||
}
|
||||
.yz-resource-head .major-dot { display: none; }
|
||||
.yz-side-link .major-dot { display: none; }
|
||||
.yz-resource-head > svg {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
color: #2d3442;
|
||||
}
|
||||
.yz-resource-head.active > svg { color: rgba(255, 255, 255, .95); }
|
||||
.yz-resource-head .chev {
|
||||
margin-left: auto;
|
||||
display: inline-flex;
|
||||
opacity: .72;
|
||||
}
|
||||
.yz-resource-head.active .chev { opacity: .82; }
|
||||
.yz-resource-head .chev svg {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
transform: rotate(90deg);
|
||||
transition: transform .18s ease;
|
||||
}
|
||||
.yz-resource-head[aria-expanded="false"] .chev svg {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
.yz-resource-sub {
|
||||
position: relative;
|
||||
margin-left: 8px;
|
||||
padding-left: 18px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
/* 条目变多后不能再卡死 320px,否则「消费/垃圾桶」会被裁掉只剩一截字 */
|
||||
overflow: visible;
|
||||
max-height: none;
|
||||
opacity: 1;
|
||||
margin-top: 2px;
|
||||
}
|
||||
.yz-resource-sub::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 4px;
|
||||
bottom: 6px;
|
||||
width: 1px;
|
||||
background: #d7dbe3;
|
||||
}
|
||||
.yz-resource-sub a {
|
||||
min-height: 38px;
|
||||
border-radius: 11px;
|
||||
padding: 0 12px;
|
||||
color: #7f838b;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 9px;
|
||||
font-size: 15px;
|
||||
font-weight: 500;
|
||||
transition: background .15s, color .15s;
|
||||
}
|
||||
.yz-resource-sub a .dot {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 50%;
|
||||
background: #c8c8c8;
|
||||
}
|
||||
.yz-resource-sub a:hover {
|
||||
background: #f1f3f8;
|
||||
color: #5e6571;
|
||||
}
|
||||
.yz-resource-sub a.active {
|
||||
background: #e9eefb;
|
||||
color: #2148bf;
|
||||
font-weight: 600;
|
||||
}
|
||||
.yz-resource-sub a.active .dot {
|
||||
width: 7px;
|
||||
height: 7px;
|
||||
background: #3158d4;
|
||||
}
|
||||
.yz-resource-sub a .pill-mini {
|
||||
margin-left: auto;
|
||||
border-radius: 999px;
|
||||
border: 1px solid #d4dcf4;
|
||||
padding: 0 7px;
|
||||
line-height: 18px;
|
||||
font-size: 11px;
|
||||
color: #4a5ca0;
|
||||
background: #f4f7ff;
|
||||
}
|
||||
.yz-resource-sub.collapsed {
|
||||
display: none;
|
||||
max-height: 0;
|
||||
opacity: 0;
|
||||
margin-top: 0;
|
||||
pointer-events: none;
|
||||
}
|
||||
.yz-side-link {
|
||||
min-height: 54px;
|
||||
margin-left: -16px;
|
||||
margin-right: 22px;
|
||||
border-radius: 0 28px 28px 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
padding: 0 16px 0 18px;
|
||||
color: #2d3442;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
transition: background .22s ease, color .22s ease, box-shadow .22s ease;
|
||||
}
|
||||
.yz-side-link:hover { background: #f2f4f8; }
|
||||
.yz-side-link > svg {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
color: #4f5562;
|
||||
transition: color .22s ease;
|
||||
}
|
||||
.yz-side-link.active {
|
||||
color: #ffffff;
|
||||
background: var(--nav-active);
|
||||
box-shadow: 0 6px 18px rgba(17, 19, 24, .14);
|
||||
}
|
||||
.yz-side-link.active > svg {
|
||||
color: rgba(255, 255, 255, .96);
|
||||
}
|
||||
.aside-foot {
|
||||
margin-top: auto;
|
||||
padding-top: 14px;
|
||||
border-top: 0;
|
||||
}
|
||||
.user {
|
||||
border-radius: 999px;
|
||||
background: #f3f4f7;
|
||||
justify-content: space-between;
|
||||
padding: 8px 14px 8px 8px;
|
||||
}
|
||||
.user .av {
|
||||
width: 36px;
|
||||
height: 36px;
|
||||
border-radius: 50%;
|
||||
background: #17191d;
|
||||
font-size: 14px;
|
||||
}
|
||||
.user .em {
|
||||
flex: 1;
|
||||
margin-left: 8px;
|
||||
font-size: 14px;
|
||||
color: #2f3340;
|
||||
line-height: 1.2;
|
||||
}
|
||||
.user::after {
|
||||
content: "›";
|
||||
color: #575f6f;
|
||||
font-size: 20px;
|
||||
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 .brand-clip {
|
||||
@@ -420,16 +616,18 @@ body.sidebar-collapsed .user {
|
||||
justify-content: center;
|
||||
padding: 8px 0;
|
||||
}
|
||||
body.sidebar-collapsed .yz-side-main,
|
||||
body.sidebar-collapsed .user .em,
|
||||
body.sidebar-collapsed .user::after { display: none; }
|
||||
|
||||
/* ─── Main + grid background ─── */
|
||||
main { position: relative; background: var(--background-base); min-width: 0; }
|
||||
.grid-bg {
|
||||
position: absolute; inset: 0; pointer-events: none;
|
||||
background-image:
|
||||
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><g stroke='%23c8c8c8' stroke-width='1' fill='none'><path d='M-5 0 L5 0 M0 -5 L0 5'/><path d='M235 0 L245 0 M240 -5 L240 5'/><path d='M-5 240 L5 240 M0 235 L0 245'/><path d='M235 240 L245 240 M240 235 L240 245'/></g></svg>"),
|
||||
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60'><circle cx='60' cy='60' r='0.9' fill='%23d8d8d8'/></svg>"),
|
||||
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='240'><g stroke='%23ebebeb' stroke-width='1' fill='none' stroke-dasharray='1.5 4'><path d='M240 0 L240 240'/><path d='M0 240 L240 240'/></g></svg>");
|
||||
background-size: 240px 240px, 60px 60px, 240px 240px;
|
||||
background-size: 60px 60px, 240px 240px;
|
||||
mask-image: radial-gradient(ellipse 95% 80% at 50% 35%, #000 25%, transparent 95%);
|
||||
-webkit-mask-image: radial-gradient(ellipse 95% 80% at 50% 35%, #000 25%, transparent 95%);
|
||||
}
|
||||
@@ -450,20 +648,77 @@ main { position: relative; background: var(--background-base); min-width: 0; }
|
||||
|
||||
/* ─── Topbar ─── */
|
||||
.topbar {
|
||||
display: flex; align-items: center; gap: 12px;
|
||||
padding: 14px 28px;
|
||||
display: flex; align-items: center; gap: 16px;
|
||||
padding: 16px 28px;
|
||||
border-bottom: 1px solid var(--border-faint);
|
||||
background: var(--background-base);
|
||||
background: var(--surface);
|
||||
position: sticky; top: 0; z-index: 50;
|
||||
min-height: 72px;
|
||||
}
|
||||
.crumbs { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--black-alpha-48); }
|
||||
.crumbs .sep { color: var(--black-alpha-32); }
|
||||
.crumbs .here { color: var(--accent-black); font-weight: 500; }
|
||||
.crumbs a:hover { color: var(--accent-black); }
|
||||
.yz-mods {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
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);
|
||||
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);
|
||||
}
|
||||
.yz-mod:hover { background: var(--black-alpha-8); color: var(--accent-black); }
|
||||
.yz-mod.active {
|
||||
background: var(--nav-active);
|
||||
color: var(--accent-white);
|
||||
font-weight: 600;
|
||||
}
|
||||
.top-search {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
height: 40px;
|
||||
min-width: 196px;
|
||||
padding: 0 12px;
|
||||
border: 1px solid var(--border-faint);
|
||||
border-radius: var(--r-pill);
|
||||
background: var(--background-lighter);
|
||||
color: var(--black-alpha-48);
|
||||
font: inherit;
|
||||
font-size: 13px;
|
||||
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 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 {
|
||||
margin-left: auto;
|
||||
font-family: var(--font-inter);
|
||||
font-weight: 700;
|
||||
font-size: 12px;
|
||||
color: var(--black-alpha-40);
|
||||
letter-spacing: .02em;
|
||||
}
|
||||
.topbar .right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
|
||||
.balance-chip {
|
||||
display: inline-flex; align-items: center; gap: 7px;
|
||||
height: 36px;
|
||||
height: 40px;
|
||||
padding: 0 14px 0 12px;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border-faint);
|
||||
@@ -475,9 +730,9 @@ main { position: relative; background: var(--background-base); min-width: 0; }
|
||||
}
|
||||
.balance-chip:hover { background: var(--black-alpha-4); border-color: var(--black-alpha-24); }
|
||||
.balance-chip strong { color: var(--accent-black); font-weight: 600; font-variant-numeric: tabular-nums; }
|
||||
.balance-chip svg { width: var(--icon-m); height: var(--icon-m); color: var(--heat); }
|
||||
.balance-chip svg { width: var(--icon-m); height: var(--icon-m); color: var(--black-alpha-48); }
|
||||
.icon-btn {
|
||||
width: 36px; height: 36px;
|
||||
width: 40px; height: 40px;
|
||||
display: flex; align-items: center; justify-content: center;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border-faint);
|
||||
@@ -492,7 +747,7 @@ main { position: relative; background: var(--background-base); min-width: 0; }
|
||||
.icon-btn .dot-noti {
|
||||
position: absolute; top: 8px; right: 9px;
|
||||
width: 7px; height: 7px; border-radius: 50%;
|
||||
background: var(--heat); border: 1.5px solid var(--surface);
|
||||
background: var(--accent-crimson); border: 1.5px solid var(--surface);
|
||||
}
|
||||
.icon-btn .count-noti {
|
||||
position: absolute; top: -4px; right: -4px;
|
||||
@@ -534,7 +789,7 @@ main { position: relative; background: var(--background-base); min-width: 0; }
|
||||
|
||||
/* ─── Topbar · 头像 ─── */
|
||||
.topbar-avatar {
|
||||
width: 36px; height: 36px;
|
||||
width: 40px; height: 40px;
|
||||
border-radius: var(--r-pill);
|
||||
background: var(--accent-black);
|
||||
color: var(--accent-white);
|
||||
@@ -641,8 +896,8 @@ main { position: relative; background: var(--background-base); min-width: 0; }
|
||||
box-shadow: var(--shadow-cta);
|
||||
}
|
||||
.btn-primary:hover {
|
||||
background: var(--heat);
|
||||
border-color: var(--heat);
|
||||
background: var(--heat-hover);
|
||||
border-color: var(--heat-hover);
|
||||
box-shadow: var(--shadow-cta-hover);
|
||||
}
|
||||
.btn-primary:active {
|
||||
|
||||
Reference in New Issue
Block a user