HEL-373: 主题化 combobox 覆盖夜间下拉全状态，日期面板支持年月直选
原生 select 弹层无法可靠套黑金 token，改为可访问 listbox；日期标题增加年份/月份下拉，越月不提交非法日。 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
1061f125a8
commit
6eccbe9765
+174
-1
@@ -1793,11 +1793,23 @@ html[data-theme="night"] .ds-datepicker {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.ds-dp-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 6px;
|
||||
flex: 1;
|
||||
min-width: 0;
|
||||
font-size: 13.5px;
|
||||
font-weight: 650;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
html[data-theme="night"] .ds-dp-title { color: var(--gold); }
|
||||
.ds-dp-ym {
|
||||
min-height: 26px;
|
||||
padding: 2px 8px;
|
||||
font-size: 12.5px;
|
||||
font-weight: 650;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
.ds-dp-nav {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
@@ -1875,6 +1887,167 @@ html[data-theme="night"] .ds-dp-day.is-selected {
|
||||
}
|
||||
.ds-dp-foot button:hover { background: var(--hover); color: var(--text); }
|
||||
|
||||
/* ─── 主题化 combobox（替代原生 select 弹层） ───────────────── */
|
||||
.ds-combo {
|
||||
position: relative;
|
||||
display: inline-grid;
|
||||
vertical-align: top;
|
||||
max-width: 100%;
|
||||
min-width: 0;
|
||||
}
|
||||
.field > .ds-combo {
|
||||
display: grid;
|
||||
width: 100%;
|
||||
}
|
||||
.ds-combo-native {
|
||||
grid-area: 1 / 1;
|
||||
opacity: 0;
|
||||
pointer-events: none;
|
||||
min-width: 0;
|
||||
}
|
||||
.ds-combo-trigger {
|
||||
grid-area: 1 / 1;
|
||||
position: relative;
|
||||
appearance: none;
|
||||
-webkit-appearance: none;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
width: 100%;
|
||||
min-width: 0;
|
||||
min-height: 34px;
|
||||
margin: 0;
|
||||
padding: 7px 28px 7px 11px;
|
||||
border: 1px solid var(--hairline);
|
||||
border-radius: 9px;
|
||||
background: var(--fill);
|
||||
color: var(--fg);
|
||||
font: inherit;
|
||||
font-size: 13.5px;
|
||||
line-height: 1.3;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
color-scheme: inherit;
|
||||
}
|
||||
.ds-combo-trigger::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: 11px;
|
||||
top: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
margin-top: -2px;
|
||||
border: 4px solid transparent;
|
||||
border-top-color: var(--text-3);
|
||||
pointer-events: none;
|
||||
}
|
||||
.ds-combo-trigger.is-placeholder {
|
||||
color: var(--text-3);
|
||||
}
|
||||
.ds-combo.is-open .ds-combo-trigger {
|
||||
border-color: var(--focus-ring);
|
||||
box-shadow: 0 0 0 3px var(--focus-glow);
|
||||
}
|
||||
.ds-combo-trigger:focus {
|
||||
outline: none;
|
||||
border-color: var(--focus-ring);
|
||||
box-shadow: 0 0 0 3px var(--focus-glow);
|
||||
}
|
||||
.ds-combo-trigger:focus-visible {
|
||||
outline: 2px solid var(--focus-ring);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
.ds-combo.is-disabled .ds-combo-trigger,
|
||||
.ds-combo-trigger:disabled {
|
||||
color: var(--text-3);
|
||||
background: var(--fill);
|
||||
opacity: 0.72;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.ds-combo--compact .ds-combo-trigger {
|
||||
min-height: 26px;
|
||||
padding: 2px 22px 2px 8px;
|
||||
font-size: 12.5px;
|
||||
font-weight: 650;
|
||||
font-variant-numeric: tabular-nums;
|
||||
}
|
||||
html[data-theme="night"] .ds-combo.is-open .ds-combo-trigger,
|
||||
html[data-theme="night"] .ds-combo-trigger:focus {
|
||||
border-color: var(--gold-line);
|
||||
}
|
||||
html[data-theme="night"] .ds-combo.is-open .ds-combo-trigger::after,
|
||||
html[data-theme="night"] .ds-combo-trigger:focus::after {
|
||||
border-top-color: var(--gold);
|
||||
}
|
||||
|
||||
.ds-listbox {
|
||||
position: fixed;
|
||||
z-index: var(--z-tooltip);
|
||||
max-height: min(280px, 50vh);
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
padding: 4px;
|
||||
background: var(--surface);
|
||||
color: var(--text);
|
||||
border: 1px solid var(--hairline);
|
||||
border-radius: 9px;
|
||||
box-shadow: var(--shadow-modal);
|
||||
}
|
||||
html[data-theme="night"] .ds-listbox {
|
||||
background: var(--surface);
|
||||
border-color: var(--gold-line);
|
||||
}
|
||||
.ds-listbox[hidden] { display: none !important; }
|
||||
.ds-listbox-option {
|
||||
display: block;
|
||||
width: 100%;
|
||||
padding: 7px 10px;
|
||||
border: 0;
|
||||
border-radius: 7px;
|
||||
background: transparent;
|
||||
color: var(--text);
|
||||
font: inherit;
|
||||
font-size: 13.5px;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
.ds-listbox-option.is-placeholder {
|
||||
color: var(--text-3);
|
||||
}
|
||||
.ds-listbox-option:hover,
|
||||
.ds-listbox-option.is-active {
|
||||
background: var(--hover);
|
||||
}
|
||||
.ds-listbox-option.is-selected,
|
||||
.ds-listbox-option[aria-selected="true"] {
|
||||
background: var(--accent-soft);
|
||||
color: var(--accent);
|
||||
font-weight: 650;
|
||||
}
|
||||
html[data-theme="night"] .ds-listbox-option.is-selected,
|
||||
html[data-theme="night"] .ds-listbox-option[aria-selected="true"] {
|
||||
background: var(--gold-soft);
|
||||
color: var(--gold);
|
||||
}
|
||||
html[data-theme="night"] .ds-listbox-option.is-active {
|
||||
box-shadow: inset 0 0 0 1px var(--gold-line);
|
||||
}
|
||||
.ds-listbox-option.is-disabled,
|
||||
.ds-listbox-option[aria-disabled="true"] {
|
||||
color: var(--text-3);
|
||||
opacity: 0.45;
|
||||
cursor: not-allowed;
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.ds-combo-trigger,
|
||||
.ds-listbox-option {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
|
||||
/* ─── 一次性初始密码领取 ─────────────────────────────────────── */
|
||||
.cred-box {
|
||||
display: grid;
|
||||
|
||||
Reference in New Issue
Block a user