@ash-qw/dsh-theme-prts 1.0.4 → 1.0.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ash-qw/dsh-theme-prts",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "private": false,
   "type": "module",
   "description": "Unofficial Arknights P.R.T.S.-inspired UI theme for DeepSeek Harness Web",

package/src/assets/cursors/animation.json

@@ -424,5 +424,87 @@
       "file": "prts-text-click-84.png",
       "duration": 60000.0
     }
-  ]
+  ],
+  "link": {
+    "hotspot": [
+      7,
+      7
+    ],
+    "press": [
+      {
+        "file": "prts-link-press-00.png",
+        "duration": 16.666666666666668
+      },
+      {
+        "file": "prts-link-press-01.png",
+        "duration": 16.666666666666668
+      },
+      {
+        "file": "prts-link-press-02.png",
+        "duration": 16.666666666666668
+      },
+      {
+        "file": "prts-link-press-03.png",
+        "duration": 16.666666666666668
+      },
+      {
+        "file": "prts-link-press-04.png",
+        "duration": 16.666666666666668
+      },
+      {
+        "file": "prts-link-press-05.png",
+        "duration": 60000.0
+      }
+    ],
+    "release": [
+      {
+        "file": "prts-link-release-00.png",
+        "duration": 16.666666666666668
+      },
+      {
+        "file": "prts-link-release-01.png",
+        "duration": 16.666666666666668
+      },
+      {
+        "file": "prts-link-release-02.png",
+        "duration": 16.666666666666668
+      },
+      {
+        "file": "prts-link-release-03.png",
+        "duration": 16.666666666666668
+      },
+      {
+        "file": "prts-link-release-04.png",
+        "duration": 16.666666666666668
+      },
+      {
+        "file": "prts-link-release-05.png",
+        "duration": 16.666666666666668
+      },
+      {
+        "file": "prts-link-release-06.png",
+        "duration": 16.666666666666668
+      },
+      {
+        "file": "prts-link-release-07.png",
+        "duration": 16.666666666666668
+      },
+      {
+        "file": "prts-link-release-08.png",
+        "duration": 16.666666666666668
+      },
+      {
+        "file": "prts-link-release-09.png",
+        "duration": 16.666666666666668
+      },
+      {
+        "file": "prts-link-release-10.png",
+        "duration": 16.666666666666668
+      },
+      {
+        "file": "prts-link-release-11.png",
+        "duration": 60000.0
+      }
+    ]
+  }
 }

package/src/client/cursor-adapter.js

@@ -4,12 +4,121 @@ export function createCursorAdapter({ document, window, assets }) {
   let listening = false
   let pointerId
   let timer
-  let mode
-  let pressX
-  let pressY
   let handPhase
+  let gestureAssets = assets
+  let textTarget
+  let lastPoint
+  const contentSelector = '[data-markdown], [data-slot*="markdown" i], [class*="markdown" i], [data-chat-flow-kind="user"] [class$="_bubble"]'
+  const controlSelector = 'a[href], button, summary, input, textarea, select, [contenteditable], [role="button"], [role="toolbar"], [role="tab"]'
+  function clearTextHit() {
+    textTarget?.removeAttribute('data-prts-text-hit')
+    textTarget = undefined
+  }
+  function updateTextHit(event) {
+    const nextTarget = findTextHit(event)
+    if (nextTarget === textTarget) return
+    clearTextHit()
+    textTarget = nextTarget
+    textTarget?.setAttribute('data-prts-text-hit', '')
+  }
+  function findTextHit(event) {
+    if (event.pointerType !== 'mouse') return
+    lastPoint = { clientX: event.clientX, clientY: event.clientY, pointerType: 'mouse' }
+    const target = event.target?.nodeType === 1 ? event.target : event.target?.parentElement
+    const content = target?.closest?.(contentSelector)
+    if (!content?.closest('[data-chat-flow-kind], [data-message-role]') || target.closest(controlSelector)) return
+    const style = window.getComputedStyle(target)
+    if (style.userSelect === 'none' || !style.cursor.includes('data:image/png')) return
+    // Caret APIs return the nearest insertion point even over empty space.
+    // Check its adjacent character rectangles before treating it as a text hit.
+    const caret = document.caretPositionFromPoint?.(event.clientX, event.clientY)
+    const fallback = caret ? undefined : document.caretRangeFromPoint?.(event.clientX, event.clientY)
+    const node = caret?.offsetNode ?? fallback?.startContainer
+    const offset = caret?.offset ?? fallback?.startOffset
+    if (node?.nodeType !== 3 || !content.contains(node) || node.parentElement?.closest(controlSelector)) return
+    if (window.getComputedStyle(node.parentElement).userSelect === 'none') return
+    const range = document.createRange()
+    for (const index of [offset - 1, offset]) {
+      if (index < 0 || index >= node.length) continue
+      range.setStart(node, index)
+      range.setEnd(node, index + 1)
+      for (const rect of range.getClientRects()) {
+        if (rect.width > 0 && event.clientX >= rect.left && event.clientX < rect.right && event.clientY >= rect.top && event.clientY < rect.bottom) {
+          return target
+        }
+      }
+    }
+  }
+  function refreshTextHit() {
+    if (!lastPoint) return
+    updateTextHit({ ...lastPoint, target: document.elementFromPoint(lastPoint.clientX, lastPoint.clientY) })
+  }
+  let resizeTarget
+  let resizeOriginal
+  let resizePriority
+  let resizeApplied
+  function clearResize() {
+    if (resizeTarget && resizeTarget.style.cursor === resizeApplied) {
+      if (resizeOriginal) resizeTarget.style.setProperty('cursor', resizeOriginal, resizePriority)
+      else resizeTarget.style.removeProperty('cursor')
+    }
+    resizeTarget = undefined
+  }
+  function updateResize(event) {
+    if (event.pointerType !== 'mouse' || !assets.resize) return
+    const target = event.target?.nodeType === 1 ? event.target : event.target?.parentElement
+    if (target === resizeTarget && target.style.cursor === resizeApplied) return
+    clearResize()
+    if (!target) return
+    const cursor = window.getComputedStyle(target).cursor
+    const direction = { 'n-resize': 'ns', 's-resize': 'ns', 'ns-resize': 'ns', 'row-resize': 'ns',
+      'e-resize': 'ew', 'w-resize': 'ew', 'ew-resize': 'ew', 'col-resize': 'ew',
+      'ne-resize': 'nesw', 'sw-resize': 'nesw', 'nesw-resize': 'nesw',
+      'nw-resize': 'nwse', 'se-resize': 'nwse', 'nwse-resize': 'nwse' }[cursor]
+    if (!direction) return
+    resizeTarget = target
+    resizeOriginal = target.style.getPropertyValue('cursor')
+    resizePriority = target.style.getPropertyPriority('cursor')
+    target.style.setProperty('cursor', `url("${assets.resize[direction]}") 16 16, ${cursor}`, resizePriority)
+    resizeApplied = target.style.cursor
+  }
   const reducedMedia = window?.matchMedia?.('(prefers-reduced-motion: reduce)')
-  const frameProperty = '--prts-hand-frame'
+  let handTarget
+  let handCursor
+  let originalCursor
+  let originalPriority
+  let appliedCursor
+  function restoreHandTarget() {
+    if (handTarget && handTarget.style.cursor === appliedCursor) {
+      if (originalCursor) handTarget.style.setProperty('cursor', originalCursor, originalPriority)
+      else handTarget.style.removeProperty('cursor')
+    }
+    handTarget?.removeAttribute('data-prts-hand-active')
+    handTarget = undefined
+  }
+  // Cursor is inherited. Animating a large container still restyles its subtree.
+  // Keep those background hits static, while controls retain native animation.
+  const maxAnimatedDescendants = 128
+  function canAnimate(target) {
+    return target && target.getElementsByTagName('*').length <= maxAnimatedDescendants
+  }
+  function followHand(target) {
+    if (target === handTarget && target !== textTarget) return
+    restoreHandTarget()
+    if (!canAnimate(target) || !handCursor || target === textTarget) return
+    const cursor = window.getComputedStyle(target).cursor
+    if (!cursor.includes('data:image/png') || /(?:,\s*text|resize)$/.test(cursor)) return
+    handTarget = target
+    originalCursor = target.style.getPropertyValue('cursor')
+    originalPriority = target.style.getPropertyPriority('cursor')
+    target.setAttribute('data-prts-hand-active', '')
+    applyHandFrame()
+  }
+  function applyHandFrame() {
+    if (!handTarget) return
+    handTarget.style.setProperty('cursor', handCursor)
+    appliedCursor = handTarget.style.cursor
+  }
   function clearTimer() {
     if (timer !== undefined) window.clearTimeout(timer)
     timer = undefined
@@ -17,14 +126,15 @@ export function createCursorAdapter({ document, window, assets }) {
   function reset() {
     clearTimer()
     pointerId = undefined
-    root?.style.removeProperty(frameProperty)
+    restoreHandTarget()
+    handCursor = undefined
     root?.style.removeProperty('--prts-text-frame')
-    mode = undefined
     handPhase = undefined
   }
   function show(url) {
-    const [x, y] = mode === 'text' ? assets.textHotspot : assets.hotspot
-    root.style.setProperty(mode === 'text' ? '--prts-text-frame' : frameProperty, `url("${url}") ${x} ${y}`)
+    const [x, y] = gestureAssets.hotspot
+    handCursor = `url("${url}") ${x} ${y}, pointer`
+    applyHandFrame()
   }
   function reduced() {
     return root.dataset.prtsMotion === 'reduced' || reducedMedia?.matches
@@ -44,59 +154,58 @@ export function createCursorAdapter({ document, window, assets }) {
   }
   function down(event) {
     if (event.pointerType !== 'mouse' || event.button !== 0 || event.isPrimary === false) return
+    updateResize(event)
+    updateTextHit(event)
     const target = event.target?.nodeType === 1 ? event.target : event.target?.parentElement
-    const cursor = target ? window.getComputedStyle(target).cursor : ''
     reset()
+    const cursor = target ? window.getComputedStyle(target).cursor : ''
     if (!cursor.includes('data:image/png')) return
-    mode = /,\s*text$/.test(cursor) ? 'text' : 'hand'
+    if (/(?:,\s*text|resize)$/.test(cursor) || !canAnimate(target)) return
+    gestureAssets = /,\s*pointer$/.test(cursor) && assets.link ? assets.link : assets
     pointerId = event.pointerId
-    pressX = event.clientX
-    pressY = event.clientY
-    if (mode === 'text') {
-      if (reduced() || !assets.textClick) { reset(); return }
-      play(assets.textClick, reset)
-      return
-    }
-    if (reduced()) { clearTimer(); show(assets.hold); return }
+    handCursor = cursor
+    followHand(target)
+    if (reduced()) { clearTimer(); show(gestureAssets.hold); return }
     handPhase = 'press'
-    play(assets.press, () => {
+    play(gestureAssets.press, () => {
       handPhase = 'hold'
-      show(assets.hold)
+      show(gestureAssets.hold)
       // A quick tap must still reach a visible pressed pose before recovering.
       if (pointerId === undefined) timer = window.setTimeout(releaseHand, 48)
     })
   }
   function releaseHand() {
     handPhase = 'release'
-    play(assets.release, reset)
+    play(gestureAssets.release, reset)
   }
   function up(event) {
     if (pointerId === undefined || event.pointerId !== pointerId || event.button !== 0) return
     pointerId = undefined
-    if (mode === 'text') return
     if (reduced()) { reset(); return }
     if (handPhase === 'press') return
     releaseHand()
   }
   function move(event) {
-    if (mode === 'text') {
-      const target = event.target?.nodeType === 1 ? event.target : event.target?.parentElement
-      const cursor = target ? window.getComputedStyle(target).cursor : ''
-      const selecting = pointerId === event.pointerId && (event.buttons & 1) && Math.hypot(event.clientX - pressX, event.clientY - pressY) > 4
-      if (!/,\s*text$/.test(cursor) || selecting) reset()
-      return
-    }
+    updateResize(event)
+    updateTextHit(event)
+    if (handCursor) followHand(event.target?.nodeType === 1 ? event.target : event.target?.parentElement)
     if (pointerId !== undefined && event.pointerId === pointerId && !(event.buttons & 1)) reset()
   }
-  function leave(event) { if (!event.relatedTarget) reset() }
+  function resetInteraction() {
+    reset()
+    clearResize()
+    clearTextHit()
+    lastPoint = undefined
+  }
+  function leave(event) { if (!event.relatedTarget) resetInteraction() }
   function blur(event) {
     // Captured element blur also reaches window when focus changes inside the app.
-    if (event.target === window) reset()
+    if (event.target === window) resetInteraction()
   }
-  function visibility() { if (document.hidden) reset() }
-  const events = [['pointerdown', down], ['pointerup', up], ['pointermove', move], ['pointercancel', reset], ['blur', blur], ['dragstart', reset], ['pointerout', leave]]
+  function visibility() { if (document.hidden) resetInteraction() }
+  const events = [['pointerdown', down], ['pointerup', up], ['pointermove', move], ['pointercancel', resetInteraction], ['blur', blur], ['dragstart', resetInteraction], ['pointerout', leave], ['scroll', refreshTextHit], ['resize', refreshTextHit]]
   function dispose() {
-    reset()
+    resetInteraction()
     if (!listening) return
     for (const [name, handler] of events) window.removeEventListener(name, handler, true)
     document.removeEventListener('visibilitychange', visibility)

package/src/client/theme-settings-workbench.js

@@ -15,7 +15,7 @@ const PRESET_OPTIONS = [
 ]
 
 const COMMON_CONTROLS = [
-  ['cursor', '鼠标样式', [['system', '系统'], ['prts', 'PRTS 手形']]],
+  ['cursor', 'PRTS 光标', [['system', '关闭'], ['prts', '开启']]],
   ['railDefaultHidden', '默认隐藏导航栏', [['false', '关闭'], ['true', '开启']]],
   ['texture', '环境底纹', [['off', '关闭'], ['restrained', '克制'], ['full', '完整']]],
   ['glass', '玻璃材质', [['off', '关闭'], ['soft', '柔和'], ['standard', '标准'], ['clear', '清晰']]],
@@ -53,6 +53,10 @@ function settingButtons(key, label, options) {
       : key === 'sessionFlowPalette'
         ? '<small data-prts-setting-note>同时适配日间与夜间模式</small>'
       : ''
+  if (['cursor', 'railDefaultHidden', 'sessionFlow', 'sessionGlow'].includes(key)) return `<div data-prts-setting-row="${key}">
+    <span><strong>${label}</strong>${note}</span>
+    <button type="button" role="switch" aria-label="${label}" aria-checked="false" data-prts-setting-switch="${key}" ${key === 'cursor' ? 'data-prts-cursor-switch' : ''}><span aria-hidden="true"></span></button>
+  </div>`
   const sample = value => key === 'texture' || key === 'glass' || key === 'sessionFlowPalette'
     ? `<i data-prts-option-sample="${key}" data-prts-option-sample-value="${value}" aria-hidden="true"></i>`
     : ''
@@ -114,26 +118,47 @@ export function themeSettingsMarkup() {
           <button type="button" data-prts-theme-settings-close aria-label="关闭主题设置">×</button>
         </header>
 
+        <div data-prts-settings-body>
+        <nav data-prts-settings-nav aria-label="设置分区">
+          <button type="button" data-prts-settings-jump="appearance">外观</button>
+          <button type="button" data-prts-settings-jump="interaction">交互</button>
+          <button type="button" data-prts-settings-jump="flow">会话流线</button>
+          <button type="button" data-prts-settings-jump="particles">粒子效果</button>
+        </nav>
         <div data-prts-theme-settings-scroll>
-          <section data-prts-settings-presets>
-            <header><span><small>快速配置</small><strong>视觉预设</strong></span></header>
+          <section data-prts-settings-presets data-prts-settings-section="appearance" tabindex="-1">
+            <header><span><strong>视觉预设</strong></span></header>
             <div>${presetMarkup()}</div>
           </section>
 
           <section data-prts-settings-common>
-            <header><span><small>常用设置</small><strong>主题表现</strong></span></header>
-            <div data-prts-settings-common-grid>${COMMON_CONTROLS.map(([key, label, options]) => settingButtons(key, label, options)).join('')}
+            <header><span><strong>界面外观</strong></span></header>
+            <div data-prts-settings-common-grid>
+              ${COMMON_CONTROLS.filter(([key]) => ['texture', 'glass'].includes(key)).map(([key, label, options]) => settingButtons(key, label, options)).join('')}
+              ${settingButtons('conversationStyle', '会话主题', [['native', '原有'], ['deck-chat', '通讯链路']])}
+            </div>
+          </section>
+          <section data-prts-settings-common data-prts-settings-section="interaction" tabindex="-1">
+            <header><span><strong>交互</strong></span></header>
+            <div data-prts-settings-common-grid>
+              ${COMMON_CONTROLS.filter(([key]) => ['cursor', 'railDefaultHidden', 'motion'].includes(key)).map(([key, label, options]) => settingButtons(key, label, options)).join('')}
+            </div>
+          </section>
+          <section data-prts-settings-common data-prts-settings-section="flow" tabindex="-1">
+            <header><span><strong>会话流线</strong></span></header>
+            <div data-prts-settings-common-grid>
+              ${COMMON_CONTROLS.filter(([key]) => ['sessionFlow', 'sessionGlow', 'sessionFlowPalette'].includes(key)).map(([key, label, options]) => settingButtons(key, label, options)).join('')}
               ${sessionFlowColorMarkup()}
               <label data-prts-setting-row="sessionFlowSpeed" data-prts-setting-range-row data-prts-session-flow-speed>
                 <span><strong>流线速度</strong><small data-prts-setting-note>控制当前会话流线的形变速度</small></span>
                 <div><input type="range" min="0.25" max="2" step="0.25" value="1" data-prts-setting-range data-prts-setting-key="sessionFlowSpeed" aria-label="当前会话流线速度"><output data-prts-session-flow-speed-output>1× · 标准</output></div>
               </label>
-              ${settingButtons('conversationStyle', '会话主题', [['native', '原有'], ['deck-chat', '通讯链路']])}
+
             </div>
           </section>
 
-          <details data-prts-settings-advanced>
-            <summary><span><small>精细调整</small><strong>粒子效果</strong></span><output data-prts-advanced-summary>标准 / 1×</output></summary>
+          <details data-prts-settings-advanced data-prts-settings-section="particles" tabindex="-1">
+            <summary><span><strong>粒子效果</strong></span><output data-prts-advanced-summary>标准 / 1×</output></summary>
             <div data-prts-settings-advanced-content>
               <section data-prts-particle-detail>
                 <header><strong>粒子精度</strong><span>同时调整会话与新会话徽记</span></header>
@@ -163,6 +188,7 @@ export function themeSettingsMarkup() {
             </div>
           </footer>
         </div>
+        </div>
       </div>
     </dialog>`
 }
@@ -429,6 +455,18 @@ export function createThemeSettingsOverlay({
 
   function renderState() {
     if (!panel || !currentPreferences) return
+    for (const toggle of panel.querySelectorAll('[data-prts-setting-switch]')) {
+      const key = toggle.dataset.prtsSettingSwitch
+      const enabled = key === 'cursor' ? currentPreferences.cursor === 'prts'
+        : key === 'railDefaultHidden' ? currentPreferences[key] === true : currentPreferences[key] !== false
+      toggle.setAttribute('aria-checked', String(enabled))
+      toggle.classList.toggle('is-active', enabled)
+    }
+    for (const key of ['sessionGlow', 'sessionFlowPalette', 'sessionFlowColors', 'sessionFlowSpeed']) {
+      const row = panel.querySelector(`[data-prts-setting-row="${key}"]`)
+      if (row) row.hidden = currentPreferences.sessionFlow === false
+        || (key === 'sessionFlowColors' && activeSessionFlowPalette() !== 'custom')
+    }
     const particleDetail = resolveParticleDetail(currentPreferences)
     for (const button of panel.querySelectorAll('button[data-prts-setting-key]')) {
       const key = button.dataset.prtsSettingKey
@@ -482,7 +520,23 @@ export function createThemeSettingsOverlay({
     if (event.target === panel) { setOpen(false); return }
     const target = event.target?.closest?.('button')
     if (!target) return
+    if (target.hasAttribute('data-prts-settings-jump')) {
+      const section = panel.querySelector(`[data-prts-settings-section="${target.dataset.prtsSettingsJump}"]`)
+      const scroller = panel.querySelector('[data-prts-theme-settings-scroll]')
+      if (section && scroller) {
+        if (section.tagName === 'DETAILS') section.open = true
+        scroller.scrollTo?.({ top: target.dataset.prtsSettingsJump === 'appearance' ? 0 : scroller.scrollTop + section.getBoundingClientRect().top - scroller.getBoundingClientRect().top, behavior: 'instant' })
+        section.focus?.({ preventScroll: true })
+      }
+      return
+    }
     if (target.hasAttribute('data-prts-theme-settings-close')) { setOpen(false); return }
+    if (target.hasAttribute('data-prts-setting-switch')) {
+      const key = target.dataset.prtsSettingSwitch
+      const enabled = target.getAttribute('aria-checked') === 'true'
+      onPreferenceChange(key, key === 'cursor' ? (enabled ? 'system' : 'prts') : !enabled)
+      return
+    }
     if (target.hasAttribute('data-prts-setting-key')) {
       const raw = target.dataset.prtsSettingValue
       if (target.dataset.prtsSettingKey === 'sessionFlowPalette') {

package/src/styles/cursor.css

@@ -3,10 +3,14 @@
   html[data-dsh-prts][data-prts-cursor="prts"] {
     --prts-hand-cursor: var(--prts-hand-frame, url("__PRTS_HAND__") 7 6);
     --prts-text-cursor: var(--prts-text-frame, url("__PRTS_TEXT__") 24 24);
+    --prts-link-cursor: url("__PRTS_LINK__") 7 7;
     cursor: var(--prts-hand-cursor), default;
   }
   html[data-dsh-prts][data-prts-cursor="prts"] :is(button, a[href], summary, [role="button"], [role="tab"], [role="treeitem"], [role="menuitem"], [role="menuitemcheckbox"], [role="menuitemradio"], [role="option"], [data-prts-workspace-row], [data-prts-session-row], .dsh-partner-sidebar-row, select, input[type="button"], input[type="submit"], input[type="checkbox"], input[type="radio"], input[type="color"], input[type="range"]) {
-    cursor: var(--prts-hand-cursor), pointer;
+    cursor: var(--prts-link-cursor), pointer;
+  }
+  html[data-dsh-prts][data-prts-cursor="prts"] [data-prts-text-hit] {
+    cursor: var(--prts-text-cursor), text;
   }
   html[data-dsh-prts][data-prts-cursor="prts"] :is(textarea, input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="password"], input[type="number"], input[type="tel"], [contenteditable=""], [contenteditable="true"], [contenteditable="plaintext-only"]) {
     cursor: var(--prts-text-cursor), text;

package/src/styles/prts.css

@@ -1712,7 +1712,7 @@ html[data-dsh-prts-settings] .prts-plugin-settings__copy strong {
   font-weight: 600;
 }
 
-html[data-dsh-prts-settings] .prts-plugin-settings button[role='switch'] {
+html[data-dsh-prts-settings] :is(.prts-plugin-settings button[role='switch'], [data-prts-setting-switch]) {
   position: relative;
   width: 42px;
   height: 24px;
@@ -1725,7 +1725,7 @@ html[data-dsh-prts-settings] .prts-plugin-settings button[role='switch'] {
   cursor: pointer;
 }
 
-html[data-dsh-prts-settings] .prts-plugin-settings button[role='switch'] > span {
+html[data-dsh-prts-settings] :is(.prts-plugin-settings button[role='switch'], [data-prts-setting-switch]) > span {
   position: absolute;
   top: 3px;
   left: 3px;
@@ -1736,22 +1736,22 @@ html[data-dsh-prts-settings] .prts-plugin-settings button[role='switch'] > span
   transition: transform 120ms ease;
 }
 
-html[data-dsh-prts-settings] .prts-plugin-settings button[role='switch'].is-active {
+html[data-dsh-prts-settings] :is(.prts-plugin-settings button[role='switch'], [data-prts-setting-switch]).is-active {
   background: var(--color-primary, #d9b800);
   color: #111;
 }
 
-html[data-dsh-prts-settings] .prts-plugin-settings button[role='switch'].is-active > span {
+html[data-dsh-prts-settings] :is(.prts-plugin-settings button[role='switch'], [data-prts-setting-switch]).is-active > span {
   transform: translateX(18px);
 }
 
-html[data-dsh-prts-settings] .prts-plugin-settings button[role='switch']:disabled {
+html[data-dsh-prts-settings] :is(.prts-plugin-settings button[role='switch'], [data-prts-setting-switch]):disabled {
   cursor: not-allowed;
   opacity: .45;
 }
 
 @media (prefers-reduced-motion: reduce) {
-  html[data-dsh-prts-settings] .prts-plugin-settings button[role='switch'] > span {
+  html[data-dsh-prts-settings] :is(.prts-plugin-settings button[role='switch'], [data-prts-setting-switch]) > span {
     transition: none;
   }
 }
@@ -1763,7 +1763,7 @@ html[data-dsh-prts-settings] .prts-plugin-settings button[role='switch']:disable
     gap: 10px;
   }
 
-  html[data-dsh-prts-settings] .prts-plugin-settings button[role='switch'] {
+  html[data-dsh-prts-settings] :is(.prts-plugin-settings button[role='switch'], [data-prts-setting-switch]) {
     align-self: flex-end;
   }
 }