azmat1127/yingqing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化UI

Browse Source
This commit is contained in:
Azmat@qq.com
2026-08-20 12:52:05 +08:00
parent c7520e93b7
commit ba1613f2b5
32 changed files with 336 additions and 139 deletions
Download Patch File Download Diff File Expand all files Collapse all files
core/frontend/src/design-restraint.css
+14 -22
View File
@@ -779,7 +779,8 @@ main { position: relative; background: #fff; min-width: 0; }
.crumbs .sep { color: var(--black-alpha-32); }
.crumbs .here { color: var(--accent-black); font-weight: 500; }
.crumbs a:hover { color: var(--accent-black); }
.topbar .yz-mods {
/* 顶栏工作模式 · 影擎 .mode-tabs / .mode-tab / moveModeIndicator 原样 */
.topbar .mode-tabs {
position: relative;
display: flex;
flex-direction: row;
@@ -789,25 +790,23 @@ main { position: relative; background: #fff; min-width: 0; }
width: max-content;
max-width: none;
gap: 16px;
min-height: 44px;
}
.topbar .yz-mods.no-active .yz-mod-indicator-mask { opacity: 0; }
.yz-mod-clip-defs {
.topbar .mode-tabs.no-active .mode-indicator-mask { opacity: 0; }
.mode-clip-defs {
position: absolute;
width: 0;
height: 0;
overflow: hidden;
max-width: none;
}
.yz-mod-indicator-mask {
.mode-indicator-mask {
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
clip-path: url(#yzModeButtonMask);
-webkit-clip-path: url(#yzModeButtonMask);
transition: opacity 180ms ease;
}
.yz-mod-indicator {
.mode-indicator {
position: absolute;
top: 0;
left: 0;
@@ -817,43 +816,38 @@ main { position: relative; background: #fff; min-width: 0; }
background: #101012;
box-shadow: 0 5px 12px rgba(0, 0, 0, 0.16);
pointer-events: none;
transform: translateX(0px);
transform-origin: left center;
transition: transform 420ms cubic-bezier(0.22, 1, 0.36, 1), width 320ms cubic-bezier(0.22, 1, 0.36, 1);
will-change: transform, width;
}
.topbar .yz-mods .yz-mod {
.topbar .mode-tabs .mode-tab {
position: relative;
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
width: auto;
min-width: 104px;
height: 44px;
padding: 0 22px;
gap: 0;
border: 1px solid #d9dde3;
border-radius: 22px;
color: #2b2e33;
background: rgba(31, 39, 51, 0.025);
font: inherit;
font-size: 14px;
font-weight: 500;
text-align: center;
cursor: pointer;
white-space: nowrap;
flex: 0 0 auto;
transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}
.topbar .yz-mods .yz-mod:hover:not(.active) { background: rgba(31, 39, 51, 0.06); color: #2b2e33; }
.topbar .yz-mods .yz-mod.active {
.topbar .mode-tabs .mode-tab.active {
color: #fff;
background: transparent;
border-color: transparent;
box-shadow: none;
}
.topbar .yz-mods .yz-mod.active:hover { background: transparent; color: #fff; }
@media (max-width: 1500px) {
.topbar .mode-tabs { gap: 9px; }
.topbar .mode-tabs .mode-tab { min-width: 88px; padding: 0 16px; }
}
.top-search {
display: inline-flex;
align-items: center;
@@ -2883,8 +2877,6 @@ table.t tbody tr:hover { background: var(--black-alpha-4); }
.dash-funds-mono:hover { color: var(--heat); }
@media (prefers-reduced-motion: reduce) {
.yz-mod-indicator,
.yz-mod-indicator-mask,
.modal-bg,
.modal,
.drawer,