okooooooo/dsh-context
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(client): give the native selects dsh's form-field border

Browse Source 
The 1px border-l2 hairline on a white layer-2 background reads as
borderless. Adopt dsh's own form-field recipe (0.5px solid border-l4,
the settings inputs/selects idiom) for all four native selects: the
overview coverage picker, the fleet sort/filter, and the context
browser step picker.
This commit is contained in:
bowenliang123 committed 2026-10-16 16:37:35 +08:00
1 parent 7ae8de869d
commit dd690e0599
3 files changed
+5 -4
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/client/styles/browser.css
+1 -1
View File
@@ -31,7 +31,7 @@
.lc-map-num { font-size: 10px; color: var(--dsw-alias-label-secondary); line-height: 1.2; font-variant-numeric: tabular-nums; }
.lc-map-tip { display: flex; flex-direction: column; max-width: 240px; padding: 5px 8px; line-height: 1.45; white-space: nowrap; }
.lc-map-tip-on { opacity: 1; }
.lc-br-pick { font: inherit; font-size: 12px; color: var(--dsw-alias-label-primary); background: var(--dsw-alias-bg-layer-2); border: 1px solid var(--dsw-alias-border-l2); border-radius: 6px; padding: 3px 6px; max-width: 240px; }
.lc-br-pick { font: inherit; font-size: 12px; color: var(--dsw-alias-label-primary); background: var(--dsw-alias-bg-layer-2); border: 0.5px solid var(--dsw-alias-border-l4); border-radius: 6px; padding: 3px 6px; max-width: 240px; }
/* The right figure sits at the main column's edge — the button column takes its own slack, so the figures no longer sit beside the button. */
.lc-br-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; color: var(--dsw-alias-label-secondary); }
.lc-br-meta b { color: var(--dsw-alias-label-primary); }
src/client/styles/fleet.css
+1 -1
View File
@@ -8,7 +8,7 @@
.lc-fleet-filters { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 2px; border-radius: 7px; background: var(--dsw-alias-bg-layer-2); border: 1px solid var(--dsw-alias-border-l2); }
.lc-fleet-search { flex: 1 1 140px; min-width: 120px; max-width: 240px; font: inherit; font-size: 11.5px; padding: 4px 9px; border-radius: 7px; border: 1px solid var(--dsw-alias-border-l2); background: var(--dsw-alias-bg-layer-2); color: var(--dsw-alias-label-primary); outline: none; }
.lc-fleet-search:focus-visible { border-color: var(--dsw-alias-brand-primary, var(--color-blue-500)); }
.lc-fleet-sort { font: inherit; font-size: 11.5px; padding: 3px 6px; border-radius: 7px; border: 1px solid var(--dsw-alias-border-l2); background: var(--dsw-alias-bg-layer-2); color: var(--dsw-alias-label-primary); }
.lc-fleet-sort { font: inherit; font-size: 11.5px; padding: 3px 6px; border-radius: 7px; border: 0.5px solid var(--dsw-alias-border-l4); background: var(--dsw-alias-bg-layer-2); color: var(--dsw-alias-label-primary); }
/* ---- Overview strip ---- */
.lc-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; }
src/client/styles/overview.css
+3 -2
View File
@@ -165,8 +165,9 @@ button.lc-heat-cell:hover { box-shadow: 0 0 0 1.5px color-mix(in srgb, var(--col
.lc-ov-search { flex: 1 1 150px; min-width: 110px; border: 1px solid var(--dsw-alias-border-l2); background: var(--dsw-alias-bg-layer-2); border-radius: 6px; padding: 4px 10px; font: inherit; font-size: 12px; color: var(--dsw-alias-label-primary); outline: none; transition: border-color var(--ds-transition-duration, 0.2s) var(--ds-ease-in-out, ease-in-out); }
.lc-ov-search:focus { border-color: var(--dsw-alias-label-secondary); }
.lc-ov-search::placeholder { color: var(--dsw-alias-label-secondary); }
/* The coverage picker neighbors the search box; the search recipe keeps the two one height. */
.lc-ov-cover { flex: none; border: 1px solid var(--dsw-alias-border-l2); background: var(--dsw-alias-bg-layer-2); border-radius: 6px; padding: 4px 8px; font: inherit; font-size: 12px; color: var(--dsw-alias-label-primary); }
/* The coverage picker neighbors the search box; the search recipe keeps the two one height.
The 0.5px border-l4 hairline is dsh's own form-field border: l2 at 1px reads as borderless on white. */
.lc-ov-cover { flex: none; border: 0.5px solid var(--dsw-alias-border-l4); background: var(--dsw-alias-bg-layer-2); border-radius: 6px; padding: 4px 8px; font: inherit; font-size: 12px; color: var(--dsw-alias-label-primary); }
.lc-ov-groups { display: flex; gap: 6px; flex-wrap: wrap; margin: -2px 0 10px; }
.lc-ov-chip { display: inline-flex; align-items: baseline; gap: 5px; border: 1px solid var(--dsw-alias-border-l2); background: transparent; color: var(--dsw-alias-label-secondary); border-radius: 999px; font: inherit; font-size: 11px; line-height: 1.5; padding: 2px 10px; cursor: pointer; max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: color var(--ds-transition-duration, 0.2s) var(--ds-ease-in-out, ease-in-out), border-color var(--ds-transition-duration, 0.2s) var(--ds-ease-in-out, ease-in-out), background-color var(--ds-transition-duration, 0.2s) var(--ds-ease-in-out, ease-in-out); }