HEL-351: 修复夜间下拉/日期弹层、一次性初始密码领取与缩放滚动条
夜间控件改走现有 token 与 color-scheme，日期弹层锚定触发器并可翻转； 创建公司账号改为一次性可复制口令窗口，列表与后续接口不再回明文。 Co-authored-by: Cursor <cursoragent@cursor.com> Co-authored-by: multica-agent <github@multica.ai>
This commit is contained in:
总工
co-authored by
Cursor
multica-agent
Cursor
multica-agent
parent
9d06445d81
commit
acc3c29c49
+246
-9
@@ -61,6 +61,7 @@
|
||||
--lp-brand: linear-gradient(158deg, #c13423, #a02415 52%, #7e170b);
|
||||
--lp-brand-glow: radial-gradient(120% 80% at 18% 12%, rgba(255, 255, 255, 0.22), transparent 58%);
|
||||
--lp-tick: var(--gold-bright);
|
||||
color-scheme: light;
|
||||
|
||||
--fg: var(--text);
|
||||
--muted: var(--text-2);
|
||||
@@ -134,6 +135,9 @@ html[data-theme="night"],
|
||||
--lp-brand: linear-gradient(158deg, #201b14, #161310 52%, #0f0d0a);
|
||||
--lp-brand-glow: radial-gradient(120% 80% at 18% 12%, rgba(217, 180, 92, 0.18), transparent 58%);
|
||||
--lp-tick: var(--gold);
|
||||
color-scheme: dark;
|
||||
scrollbar-color: var(--gold) var(--surface-2);
|
||||
scrollbar-width: thin;
|
||||
}
|
||||
|
||||
/* ─── reset ─────────────────────────────────────────────────────── */
|
||||
@@ -225,7 +229,7 @@ html[data-theme="night"] .brand-logo-night { display: block; }
|
||||
}
|
||||
.side-role.company { background: var(--info-soft); color: var(--info); }
|
||||
|
||||
.side-nav { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 12px 10px; }
|
||||
.side-nav { flex: 1; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; padding: 12px 10px; }
|
||||
.side-nav .nav-group { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; color: var(--muted); padding: 14px 10px 6px; }
|
||||
.side-nav a {
|
||||
display: flex; align-items: center; gap: 10px;
|
||||
@@ -316,6 +320,7 @@ html[data-theme="night"] .brand-logo-night { display: block; }
|
||||
min-width: 0;
|
||||
min-height: 0;
|
||||
height: 100vh;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
overscroll-behavior: contain;
|
||||
display: flex;
|
||||
@@ -478,7 +483,8 @@ html[data-theme="night"] .brand-logo-night { display: block; }
|
||||
.dash-company-list {
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow: auto;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.dash-company-loading,
|
||||
.dash-company-empty {
|
||||
@@ -606,7 +612,8 @@ html[data-theme="night"] .brand-logo-night { display: block; }
|
||||
border-radius: 0;
|
||||
flex: 1;
|
||||
min-height: 0;
|
||||
overflow: auto;
|
||||
overflow-x: auto;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.dash-detail-empty {
|
||||
flex: 1;
|
||||
@@ -713,7 +720,16 @@ html[data-theme="night"] .brand-logo-night { display: block; }
|
||||
}
|
||||
|
||||
/* ─── 数据表 ────────────────────────────────────────────────────── */
|
||||
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); }
|
||||
.table-wrap {
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-lg);
|
||||
background: var(--surface);
|
||||
}
|
||||
.table-wrap.dash-master-scroll {
|
||||
overflow-y: auto;
|
||||
}
|
||||
.ds-table { width: 100%; border-collapse: collapse; font-size: 13px; min-width: 640px; }
|
||||
.ds-table th, .ds-table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
|
||||
.ds-table th {
|
||||
@@ -784,19 +800,71 @@ html[data-theme="night"] .brand-logo-night { display: block; }
|
||||
font: inherit;
|
||||
font-size: 13.5px;
|
||||
min-height: 34px;
|
||||
color-scheme: inherit;
|
||||
}
|
||||
.input:focus, .select:focus, .textarea:focus, .field .input:focus, .field .select:focus, .field .textarea:focus {
|
||||
outline: none;
|
||||
border-color: var(--focus-ring);
|
||||
box-shadow: 0 0 0 3px var(--focus-glow);
|
||||
}
|
||||
.input:disabled, .select:disabled, .textarea:disabled,
|
||||
.field .input:disabled, .field .select:disabled, .field .textarea:disabled {
|
||||
color: var(--text-3);
|
||||
background: var(--fill);
|
||||
opacity: 0.72;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.select option,
|
||||
.select optgroup {
|
||||
background-color: var(--surface);
|
||||
color: var(--text);
|
||||
}
|
||||
.select option:checked,
|
||||
.select option:hover {
|
||||
background-color: var(--accent-soft);
|
||||
color: var(--text);
|
||||
}
|
||||
.select option:disabled {
|
||||
color: var(--text-3);
|
||||
}
|
||||
.input.num-input { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
|
||||
.textarea { min-height: 84px; resize: vertical; line-height: 1.55; }
|
||||
.field .hint { font-size: 11.5px; color: var(--muted); }
|
||||
.field .hint.error { color: var(--danger); }
|
||||
|
||||
/* 关闭原生日历层，改由 ds-datepicker 锚定在触发器旁 */
|
||||
input[type="date"]::-webkit-calendar-picker-indicator {
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
display: none;
|
||||
}
|
||||
.input[type="date"],
|
||||
.field .input[type="date"],
|
||||
.input[data-ds-date="1"],
|
||||
.field .input[data-ds-date="1"] {
|
||||
padding-right: 34px;
|
||||
background-color: var(--fill);
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%236e6e73' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='3.5' width='11' height='10' rx='1.5'/%3E%3Cpath d='M2.5 6.5h11M6 2v3M10 2v3'/%3E%3C/svg%3E");
|
||||
background-repeat: no-repeat;
|
||||
background-position: right 10px center;
|
||||
background-size: 16px 16px;
|
||||
}
|
||||
html[data-theme="night"] .input[type="date"],
|
||||
html[data-theme="night"] .field .input[type="date"],
|
||||
html[data-theme="night"] .input[data-ds-date="1"],
|
||||
html[data-theme="night"] .field .input[data-ds-date="1"] {
|
||||
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23d9b45c' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.5' y='3.5' width='11' height='10' rx='1.5'/%3E%3Cpath d='M2.5 6.5h11M6 2v3M10 2v3'/%3E%3C/svg%3E");
|
||||
}
|
||||
|
||||
/* ─── Tabs ──────────────────────────────────────────────────────── */
|
||||
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); margin-bottom: 16px; overflow-x: auto; }
|
||||
.tabs {
|
||||
display: flex;
|
||||
gap: 2px;
|
||||
border-bottom: 1px solid var(--border);
|
||||
margin-bottom: 16px;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
}
|
||||
.tabs button {
|
||||
background: none; border: 0;
|
||||
padding: 9px 14px;
|
||||
@@ -867,7 +935,7 @@ html[data-theme="night"] .brand-logo-night { display: block; }
|
||||
border-radius: 16px;
|
||||
border: 1px solid var(--gold-line);
|
||||
width: 100%; max-width: min(520px, 94vw);
|
||||
max-height: 86vh; overflow-y: auto;
|
||||
max-height: 86vh; overflow-x: hidden; overflow-y: auto;
|
||||
padding: 22px 24px;
|
||||
box-shadow: var(--shadow-modal);
|
||||
}
|
||||
@@ -1190,6 +1258,7 @@ a.flow-step.doing:hover { background: color-mix(in oklch, var(--warn) 16%, trans
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
overflow-x: auto;
|
||||
overflow-y: hidden;
|
||||
padding: 8px 4px;
|
||||
flex: 1;
|
||||
}
|
||||
@@ -1207,7 +1276,7 @@ a.flow-step.doing:hover { background: color-mix(in oklch, var(--warn) 16%, trans
|
||||
.theme-seg { margin-bottom: 0; width: 92px; grid-template-columns: 1fr 1fr; }
|
||||
.account-box { padding: 4px; background: transparent; }
|
||||
.side-foot .user-name, .side-foot .user-meta, .side-foot .avatar { display: none; }
|
||||
.main { min-height: 0; height: 100%; overflow-y: auto; }
|
||||
.main { min-height: 0; height: 100%; overflow-x: hidden; overflow-y: auto; }
|
||||
}
|
||||
|
||||
/* ─── Toast 轻量提示 ───────────────────────────────────────────── */
|
||||
@@ -1265,7 +1334,7 @@ a.flow-step.doing:hover { background: color-mix(in oklch, var(--warn) 16%, trans
|
||||
}
|
||||
.drawer-head .d-title { font-size: 16px; font-weight: 700; margin-top: 6px; }
|
||||
.drawer-head .d-desc { color: var(--muted); font-size: 12.5px; margin-top: 4px; }
|
||||
.drawer-body { flex: 1; overflow-y: auto; padding: 16px 20px; }
|
||||
.drawer-body { flex: 1; overflow-x: hidden; overflow-y: auto; padding: 16px 20px; }
|
||||
.drawer-body .kv { grid-template-columns: auto 1fr; gap: 8px 18px; }
|
||||
.drawer-body .kv dt { color: var(--muted); white-space: nowrap; }
|
||||
.drawer-body .kv dd { text-align: right; word-break: break-all; }
|
||||
@@ -1429,7 +1498,7 @@ body[data-portal="company"] .side-nav a[data-view="transfers"].active svg {
|
||||
background-position: center;
|
||||
}
|
||||
.batch-bar { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
|
||||
.login-page { min-height: 100vh; overflow: auto; }
|
||||
.login-page { min-height: 100vh; overflow-x: hidden; overflow-y: auto; }
|
||||
.toast .t-detail { color: rgba(255,255,255,.72); }
|
||||
.toast .t-dot { margin-top: 0; }
|
||||
|
||||
@@ -1675,3 +1744,171 @@ body[data-portal="company"] .side-nav a[data-view="transfers"].active svg {
|
||||
.audit-event-cards { display: grid; gap: 10px; }
|
||||
}
|
||||
|
||||
/* ─── 夜间滚动条：金色滑块 + 深色轨道（HEL-351） ─────────────── */
|
||||
html[data-theme="night"] ::-webkit-scrollbar {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
}
|
||||
html[data-theme="night"] ::-webkit-scrollbar-track {
|
||||
background: var(--surface-2);
|
||||
}
|
||||
html[data-theme="night"] ::-webkit-scrollbar-thumb {
|
||||
background-color: var(--gold);
|
||||
border: 2px solid var(--surface-2);
|
||||
border-radius: 999px;
|
||||
background-clip: padding-box;
|
||||
}
|
||||
html[data-theme="night"] ::-webkit-scrollbar-thumb:hover {
|
||||
background-color: var(--gold-bright);
|
||||
}
|
||||
html[data-theme="night"] ::-webkit-scrollbar-corner {
|
||||
background: var(--surface);
|
||||
}
|
||||
|
||||
/* ─── 日期选择弹层：锚定触发器，夜间黑金点缀 ───────────────── */
|
||||
.ds-datepicker {
|
||||
position: fixed;
|
||||
z-index: var(--z-tooltip);
|
||||
width: 280px;
|
||||
padding: 12px;
|
||||
background: var(--material-drawer);
|
||||
backdrop-filter: blur(28px);
|
||||
-webkit-backdrop-filter: blur(28px);
|
||||
border: 1px solid var(--hairline);
|
||||
border-radius: 16px;
|
||||
box-shadow: var(--shadow-modal);
|
||||
color: var(--text);
|
||||
}
|
||||
html[data-theme="night"] .ds-datepicker {
|
||||
background: var(--surface);
|
||||
border-color: var(--gold-line);
|
||||
}
|
||||
.ds-datepicker[hidden] { display: none !important; }
|
||||
.ds-dp-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 8px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.ds-dp-title {
|
||||
font-size: 13.5px;
|
||||
font-weight: 650;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
html[data-theme="night"] .ds-dp-title { color: var(--gold); }
|
||||
.ds-dp-nav {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border: 0;
|
||||
border-radius: 7px;
|
||||
background: var(--fill);
|
||||
color: var(--text-2);
|
||||
}
|
||||
.ds-dp-nav:hover { background: var(--hover); color: var(--text); }
|
||||
.ds-dp-week,
|
||||
.ds-dp-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(7, 1fr);
|
||||
gap: 2px;
|
||||
}
|
||||
.ds-dp-week span {
|
||||
height: 28px;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
font-size: 11px;
|
||||
font-weight: 600;
|
||||
color: var(--text-3);
|
||||
}
|
||||
.ds-dp-day {
|
||||
height: 32px;
|
||||
border: 0;
|
||||
border-radius: 8px;
|
||||
background: transparent;
|
||||
color: var(--text);
|
||||
font-size: 13px;
|
||||
font-variant-numeric: tabular-nums;
|
||||
font-family: var(--font-mono);
|
||||
}
|
||||
.ds-dp-day:hover { background: var(--hover); }
|
||||
.ds-dp-day.is-other { color: var(--text-3); }
|
||||
.ds-dp-day.is-today {
|
||||
box-shadow: inset 0 0 0 1px var(--accent);
|
||||
color: var(--accent);
|
||||
}
|
||||
.ds-dp-day.is-selected {
|
||||
background: var(--accent-soft);
|
||||
color: var(--accent);
|
||||
font-weight: 700;
|
||||
}
|
||||
.ds-dp-day.is-selected.is-today { box-shadow: none; }
|
||||
html[data-theme="night"] .ds-dp-day.is-today {
|
||||
box-shadow: inset 0 0 0 1px var(--gold-line);
|
||||
color: var(--gold);
|
||||
}
|
||||
html[data-theme="night"] .ds-dp-day.is-selected {
|
||||
background: var(--gold-soft);
|
||||
color: var(--gold);
|
||||
}
|
||||
.ds-dp-day:disabled {
|
||||
color: var(--text-3);
|
||||
opacity: 0.45;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.ds-dp-foot {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-top: 8px;
|
||||
padding-top: 8px;
|
||||
border-top: 1px solid var(--hairline);
|
||||
}
|
||||
.ds-dp-foot button {
|
||||
height: 26px;
|
||||
padding: 0 10px;
|
||||
border: 0;
|
||||
border-radius: 7px;
|
||||
background: transparent;
|
||||
color: var(--text-2);
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.ds-dp-foot button:hover { background: var(--hover); color: var(--text); }
|
||||
|
||||
/* ─── 一次性初始密码领取 ─────────────────────────────────────── */
|
||||
.cred-box {
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
padding: 12px 14px;
|
||||
border: 1px solid var(--gold-line);
|
||||
border-radius: 14px;
|
||||
background: var(--gold-soft);
|
||||
}
|
||||
.cred-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
min-width: 0;
|
||||
}
|
||||
.cred-row .cred-label {
|
||||
flex: none;
|
||||
width: 72px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
color: var(--text-2);
|
||||
}
|
||||
.cred-row .cred-value {
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
font-family: var(--font-mono);
|
||||
font-variant-numeric: tabular-nums;
|
||||
font-size: 14px;
|
||||
font-weight: 650;
|
||||
color: var(--text);
|
||||
word-break: break-all;
|
||||
}
|
||||
.cred-warn {
|
||||
margin-top: 12px;
|
||||
font-size: 12.5px;
|
||||
color: var(--text-2);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user