polish: widen gap between the two bind-icon circles (1px to 5px)
This commit is contained in:
@@ -155,16 +155,16 @@ export const css = [
|
||||
'.dsh-wt_presetAddText{font-size:10px;line-height:13px}',
|
||||
// 项目卡片上的对话绑定按钮(○○ 空心 = 未绑定 / ●● 实心 = 已绑定;CSS 双圆绘制,黑白单色克制:
|
||||
// 未绑定次级灰空心、已绑定主色实心,不用强调色;hover 区域 = 22×22 圆角矩形按钮底,
|
||||
// 气泡向左伸出(留在侧栏内,不被右侧对话区遮挡),垂直居中于按钮)
|
||||
// 气泡为 body 级元素向右伸出(跨层显示),垂直居中于按钮)
|
||||
'.dsh-wt_bindBtn{position:absolute;right:26px;top:50%;transform:translateY(-50%);width:22px;height:22px;margin:0;display:block;border-radius:6px;color:var(--dsw-alias-label-secondary,#9aa4b2);cursor:pointer;user-select:none}',
|
||||
'.dsh-wt_bindBtn:hover{background:var(--dsw-alias-fill-l2,rgba(255,255,255,.09));color:var(--dsw-alias-label-primary,#e6e8eb)}',
|
||||
'.dsh-wt_bindBtn[data-bound=true]{color:var(--dsw-alias-label-primary,#e6e8eb)}',
|
||||
// 气泡为 body 级独立元素(.dsh-wt_bindTip),此处只保留按钮本体样式
|
||||
'.dsh-wt_bindTip{position:fixed;transform:translateY(-50%);padding:5px 9px;border:1px solid var(--dsw-alias-border-l2,#3a4150);border-radius:6px;background:var(--dsw-alias-fill-l2,#171b22);color:var(--dsw-alias-label-primary,#e6e8eb);font-size:11px;line-height:15px;white-space:nowrap;pointer-events:none;z-index:1200;box-shadow:0 4px 12px rgba(0,0,0,.35);display:none}',
|
||||
'.dsh-wt_bindCircles{position:absolute;left:50%;top:50%;width:14px;height:7px;transform:translate(-50%,-50%)}',
|
||||
'.dsh-wt_bindCircles{position:absolute;left:50%;top:50%;width:17px;height:7px;transform:translate(-50%,-50%)}',
|
||||
'.dsh-wt_bindCircles::before,.dsh-wt_bindCircles::after{content:\'\';position:absolute;top:50%;width:6px;height:6px;margin-top:-3px;border-radius:50%;box-sizing:border-box;border:1.2px solid currentColor;background:transparent}',
|
||||
'.dsh-wt_bindCircles::before{left:0}',
|
||||
'.dsh-wt_bindCircles::after{left:7px}',
|
||||
'.dsh-wt_bindCircles::after{left:11px}',
|
||||
'.dsh-wt_bindBtn[data-bound=true] .dsh-wt_bindCircles::before,.dsh-wt_bindBtn[data-bound=true] .dsh-wt_bindCircles::after{background:currentColor}',
|
||||
|
||||
// 布局条目卡片
|
||||
|
||||
@@ -805,6 +805,16 @@
|
||||
侧栏内)✓;未绑定/已绑定颜色与实心空心不变;functional-diag ERROR_COUNT: 0。
|
||||
- 备注:纯客户端改动,F5 即生效。
|
||||
|
||||
## 补记(绑定图标两点间距加大)
|
||||
|
||||
- 用户反馈:○○/●● 两个点挨得太近,分开一点(实心空心一起改)。
|
||||
- 处理:圆点定位 left 0 / 7px → 0 / 11px,圆 6px 不变 → 间距 1px → 5px;容器 14px → 17px
|
||||
(22×22 按钮底内居中不变)。
|
||||
- 验证(bindicon-mini.cjs):circleLeft=0px / circle2Left=11px / gap=5,空心与实心两态一致;
|
||||
functional-diag ERROR_COUNT: 0。
|
||||
- 备注:纯客户端改动,F5 即生效。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
@@ -48,7 +48,8 @@ const sleep = (ms) => new Promise((r) => setTimeout(r, ms));
|
||||
var cs = getComputedStyle(b);
|
||||
var c4 = getComputedStyle(b.querySelector('.dsh-wt_bindCircles'), '::before');
|
||||
var aft = getComputedStyle(b, '::after');
|
||||
return { w: cs.width, h: cs.height, radius: cs.borderRadius, color: cs.color, circleW: c4.width, circleBorder: c4.borderTopWidth, circleFill: c4.backgroundColor, tip: aft.content, tipRight: aft.right, tipLeft: aft.left, hoverBg: cs.backgroundColor };
|
||||
var c5 = getComputedStyle(b.querySelector('.dsh-wt_bindCircles'), '::after');
|
||||
return { w: cs.width, h: cs.height, radius: cs.borderRadius, color: cs.color, circleW: c4.width, circleBorder: c4.borderTopWidth, circleFill: c4.backgroundColor, circleLeft: c4.left, circle2Left: c5.left, gap: (parseFloat(c5.left)||0) - (parseFloat(c4.width)||0), tip: aft.content, tipRight: aft.right, tipLeft: aft.left, hoverBg: cs.backgroundColor };
|
||||
};
|
||||
// 未绑定态
|
||||
out.unbound = read(btn);
|
||||
|
||||
Reference in New Issue
Block a user