fix: match highlight swatches and soften macOS palette corners

Author: reycn

src/ReadingAnnotations.vue

@@ -44,6 +44,7 @@ function finishGesture(e,cancelled=false){if(!gesture||gesture.pointerId!==e.poi
 function clickAnnotation(a,e,note=false){if(performance.now()<suppressClickUntil){e.preventDefault();return;}activate(a);if(note&&props.annotations.some(b=>b.id===a.id)){popupFromNote.value=true;opened.value=a;}}
 
 const colors=['#FFFF00','#00FF00','#00FFFF','#FF0000'];
+const highlightOpacity=.42;
 const favorite=ref('#00FFFF');try{favorite.value=JSON.parse(localStorage.getItem('highlightColors')||'{}').favorite||'#00FFFF';}catch{}
 const visible=computed(()=>[...props.annotations.filter(a=>a.page===props.page.number&&!erasing.value.has(a.id)),...erasing.value.values()].map(a=>({...a,rects:annotationLineRects(a.rects)})));
 function eraseStyle(a,index,r){if(!erasing.value.has(a.id))return {};
@@ -144,14 +145,14 @@ watch(()=>props.zoom,()=>{toolbar.value=false;updatePopupLayout();});
 <template>
 <div class="annotation-layer">
 <template v-for="a in visible" :key="a.id">
-<button v-for="(r,i) in ((a.origin==='translation')===translatedAt(a))?a.rects:[]" :key="i" class="annotation-mark annotation-highlight" :class="{'annotation-erasing':erasing.has(a.id),'annotation-new-highlight':isNew(a),'annotation-comment-highlight':a.kind==='comment'}" :style="{...highlightPosition(r,a),...motionStyle(a,r),...eraseStyle(a,i,r),background:a.kind==='comment'?'#9b9b9b':a.color,...strokeStyle(a,i)}" :aria-hidden="erasing.has(a.id)||undefined" :tabindex="erasing.has(a.id)?-1:0" :aria-label="a.kind==='comment'?'查看批注：'+a.comment:a.text" @pointerdown.stop="down(a,$event)" @pointermove="move" @pointerup="finishGesture($event)" @pointercancel="finishGesture($event,true)" @lostpointercapture="finishGesture($event,true)" @contextmenu.prevent.stop="openContextMenu(a,$event)" @click.stop="clickAnnotation(a,$event)"/>
+<button v-for="(r,i) in ((a.origin==='translation')===translatedAt(a))?a.rects:[]" :key="i" class="annotation-mark annotation-highlight" :class="{'annotation-erasing':erasing.has(a.id),'annotation-new-highlight':isNew(a),'annotation-comment-highlight':a.kind==='comment'}" :style="{...highlightPosition(r,a),...motionStyle(a,r),...eraseStyle(a,i,r),background:a.kind==='comment'?'#9b9b9b':a.color,opacity:a.kind==='comment'?undefined:highlightOpacity,...strokeStyle(a,i)}" :aria-hidden="erasing.has(a.id)||undefined" :tabindex="erasing.has(a.id)?-1:0" :aria-label="a.kind==='comment'?'查看批注：'+a.comment:a.text" @pointerdown.stop="down(a,$event)" @pointermove="move" @pointerup="finishGesture($event)" @pointercancel="finishGesture($event,true)" @lostpointercapture="finishGesture($event,true)" @contextmenu.prevent.stop="openContextMenu(a,$event)" @click.stop="clickAnnotation(a,$event)"/>
 <button v-if="(erasing.has(a.id)?a.eraseHasNote:opened?.id!==a.id)&&(a.kind==='comment'||((a.origin==='translation')!==translatedAt(a)))" class="annotation-mark annotation-note" :class="{'annotation-comment-note':a.kind==='comment','annotation-erasing':erasing.has(a.id)}" title="查看批注" :style="{...position(noteRect(a)),...motionStyle(a,noteRect(a)),...eraseStyle(a,undefined,noteRect(a))}" :aria-hidden="erasing.has(a.id)||undefined" :tabindex="erasing.has(a.id)?-1:0" :aria-label="a.comment||a.text" @pointerdown.stop="down(a,$event)" @pointermove="move" @pointerup="finishGesture($event)" @pointercancel="finishGesture($event,true)" @lostpointercapture="finishGesture($event,true)" @click.stop="clickAnnotation(a,$event,true)" @contextmenu.prevent.stop="openContextMenu(a,$event)"><svg class="annotation-comment-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 3.5h14a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2h-8l-5 3v-3H5a2 2 0 0 1-2-2v-11a2 2 0 0 1 2-2Z"/><path d="M7 8h10M7 12h7"/></svg></button>
 </template>
 </div>
 <Teleport to="body">
 <div v-if="assistance" :data-platform="popupPlatform" class="annotation-ui annotation-modal"><section class="annotation-confirm annotation-assistance" role="dialog" aria-modal="true" :aria-label="assistance.title"><strong>{{assistance.title}}</strong><p v-if="assistance.busy" role="status">正在处理…</p><p v-else>{{assistance.error||assistance.text}}</p><button @click="assistController?.abort();assistance=null">关闭</button></section></div>
 <Transition name="annotation-fade"><div v-if="toolbar" ref="toolbarPopup" :data-platform="popupPlatform" class="annotation-ui annotation-toolbar" :style="toolbarPoint()" role="toolbar" aria-label="文字批注" @pointerdown.prevent @pointermove="touch" @keydown="touch">
-<button v-for="(c,i) in colors" :key="i" :aria-label="['荧光黄','荧光绿','荧光青','荧光红'][i]" :title="['荧光黄 (1)','荧光绿 (2)','荧光青 (3)','荧光红 (4)'][i]" :aria-keyshortcuts="String(i+1)" :aria-pressed="selection?.id?selection.color?.toUpperCase()===c:undefined" @click="add('highlight',c)"><i class="annotation-color-swatch" :style="{background:c}" aria-hidden="true"/></button><button v-if="false" aria-label="自定义高亮颜色" @click="clearTimeout(timer);colorInput.click()"><i class="annotation-color-swatch annotation-custom-color" :style="{'--annotation-color':favorite}" aria-hidden="true"/></button><input ref="colorInput" type="color" class="annotation-color-input" :value="favorite" @change="add('highlight',$event.target.value)"/><span class="annotation-separator"/><button aria-label="添加批注" title="添加批注 (5)" aria-keyshortcuts="5" @click="comment(selection?.id?selection:undefined)"><svg class="annotation-comment-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 3.5h14a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2h-8l-5 3v-3H5a2 2 0 0 1-2-2v-11a2 2 0 0 1 2-2Z"/><path d="M7 8h10M7 12h7"/></svg></button>
+<button v-for="(c,i) in colors" :key="i" :aria-label="['荧光黄','荧光绿','荧光青','荧光红'][i]" :title="['荧光黄 (1)','荧光绿 (2)','荧光青 (3)','荧光红 (4)'][i]" :aria-keyshortcuts="String(i+1)" :aria-pressed="selection?.id?selection.color?.toUpperCase()===c:undefined" @click="add('highlight',c)"><i class="annotation-color-swatch" :style="{background:`color-mix(in srgb, ${c} ${highlightOpacity*100}%, white)`}" aria-hidden="true"/></button><button v-if="false" aria-label="自定义高亮颜色" @click="clearTimeout(timer);colorInput.click()"><i class="annotation-color-swatch annotation-custom-color" :style="{'--annotation-color':favorite}" aria-hidden="true"/></button><input ref="colorInput" type="color" class="annotation-color-input" :value="favorite" @change="add('highlight',$event.target.value)"/><span class="annotation-separator"/><button aria-label="添加批注" title="添加批注 (5)" aria-keyshortcuts="5" @click="comment(selection?.id?selection:undefined)"><svg class="annotation-comment-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M5 3.5h14a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2h-8l-5 3v-3H5a2 2 0 0 1-2-2v-11a2 2 0 0 1 2-2Z"/><path d="M7 8h10M7 12h7"/></svg></button>
 <button v-if="selection?.id" class="annotation-delete" :aria-label="deleteArmed?'双击删除高亮':'删除高亮'" :title="deleteArmed?'双击删除高亮':'单击确认，双击删除高亮'" @click="armToolbarDelete" @dblclick.prevent.stop="deleteFromToolbar"><svg class="annotation-comment-icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><template v-if="deleteArmed"><path d="M9 7a3 3 0 0 1 6 0c0 2-3 2.5-3 5"/><path d="M12 17h.01"/></template><template v-else><path d="M3 6h18M9 6V3h6v3M5 6l1 15h12l1-15M10 10v7M14 10v7"/></template></svg></button>
 </div></Transition>
 <Transition name="annotation-fade"><div v-if="opened" ref="readerPopup" :data-platform="popupPlatform" class="annotation-ui annotation-reader" :style="readerPoint()"><header class="annotation-reader-header"><span>{{opened.origin==='translation'?'译文':'原文'}}{{opened.kind==='highlight'?'高亮':'批注'}}</span><button @click="opened=null" aria-label="关闭"><svg viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" aria-hidden="true"><path d="m4 4 8 8M12 4l-8 8"/></svg></button></header><p>{{opened.kind==='highlight'?(opened.text||'').replace(/[\r\n\u2028\u2029]+/g,'').trim():opened.comment||opened.text}}</p><time>{{opened.dateUnknown&&!opened.modifiedAt?'日期未知':new Date(opened.modifiedAt||opened.createdAt).toLocaleString()}}</time></div></Transition>
@@ -210,7 +211,7 @@ watch(()=>props.zoom,()=>{toolbar.value=false;updatePopupLayout();});
  --annotation-inner-edge:rgba(255,255,255,.72);
  --annotation-shadow:0 8px 24px rgba(0,0,0,.14),0 2px 5px rgba(0,0,0,.08);
  padding:6px;gap:3px;
- border-radius:14px;
+ border-radius:20px;
  corner-shape:squircle;
  backdrop-filter:blur(30px) saturate(1.6);
  -webkit-backdrop-filter:blur(30px) saturate(1.6);
@@ -222,7 +223,7 @@ watch(()=>props.zoom,()=>{toolbar.value=false;updatePopupLayout();});
  --annotation-inner-edge:rgba(255,255,255,.10);
  --annotation-shadow:0 8px 24px rgba(0,0,0,.30),0 2px 5px rgba(0,0,0,.18);
 }
-.annotation-toolbar[data-platform="darwin"] button {padding:7px;border-radius:9px;corner-shape:squircle;}
+.annotation-toolbar[data-platform="darwin"] button {padding:7px;border-radius:14px;corner-shape:squircle;}
 .annotation-toolbar[data-platform="darwin"] button[aria-pressed="true"] {background:var(--annotation-hover);box-shadow:inset 0 0 0 .5px var(--annotation-divider);}
 .annotation-toolbar[data-platform="darwin"] .annotation-separator {height:20px;margin:0 4px;background:var(--annotation-divider);}
 /* Match the selection palette's continuous corners and softer edge. */