diff --git a/platform/mv3/extension/css/zapper-ui.css b/platform/mv3/extension/css/zapper-ui.css index 4385d626d..5f66d49a5 100644 --- a/platform/mv3/extension/css/zapper-ui.css +++ b/platform/mv3/extension/css/zapper-ui.css @@ -16,11 +16,11 @@ html#ubol-zapper, outline: none; } #ubol-zapper aside { - background-color: var(--surface-1); box-sizing: border-box; cursor: default; display: flex; flex-direction: column; + gap: 2px; position: fixed; right: 2px; top: 50%; @@ -31,14 +31,6 @@ html#ubol-zapper, left: 2px; right: unset; } -#ubol-zapper aside > #quit { - border: 1px solid rgba(0,0,0,0.5); - fill: none; - stroke: var(--ink-1); - stroke-width: 3px; - width: var(--quit-button-size); - height: var(--quit-button-size); -} #ubol-zapper svg#sea { cursor: crosshair; box-sizing: border-box; @@ -57,6 +49,19 @@ html#ubol-zapper, stroke-width: 0.5px; fill: rgba(255,255,63,0.20); } -#ubol-zapper #quit:hover { +#ubol-zapper aside > div { + background-color: var(--surface-1); + border: 1px solid rgba(0,0,0,0.5); + box-sizing: border-box; + fill: none; + stroke: var(--ink-1); + stroke-width: 2px; + width: var(--quit-button-size); + height: var(--quit-button-size); +} +#ubol-zapper aside > div:hover { background-color: var(--surface-2) } +:root:not(.mobile) #pick { + display: none; +} \ No newline at end of file diff --git a/platform/mv3/extension/js/zapper-ui.js b/platform/mv3/extension/js/zapper-ui.js index 46bf3217a..ec9e08c19 100644 --- a/platform/mv3/extension/js/zapper-ui.js +++ b/platform/mv3/extension/js/zapper-ui.js @@ -126,6 +126,7 @@ const svgListening = (( ) => { }; return state => { + if ( $stor(':root.mobile') !== null ) { return; } if ( state === on ) { return; } on = state; if ( on ) { @@ -190,6 +191,7 @@ const startZapper = function(port) { $stor('svg#sea').addEventListener('touchstart', onSvgTouch, { passive: true }); $stor('svg#sea').addEventListener('touchend', onSvgTouch); $id('quit').addEventListener('click', quitZapper ); + $id('pick').addEventListener('click', resetZapper ); svgListening(true); }; @@ -201,6 +203,7 @@ const quitZapper = function() { $stor('svg#sea').removeEventListener('touchstart', onSvgTouch, { passive: true }); $stor('svg#sea').removeEventListener('touchend', onSvgTouch); $id('quit').removeEventListener('click', quitZapper ); + $id('pick').removeEventListener('click', resetZapper ); svgListening(false); if ( zapperScriptPort ) { zapperScriptPort.postMessage({ what: 'quitZapper' }); @@ -213,6 +216,14 @@ const quitZapper = function() { /******************************************************************************/ +const resetZapper = function() { + zapperScriptPort.postMessage({ + what: 'unhighlight' + }); +}; + +/******************************************************************************/ + // Wait for the content script to establish communication globalThis.addEventListener('message', ev => { diff --git a/platform/mv3/extension/zapper-ui.html b/platform/mv3/extension/zapper-ui.html index a739d97a4..c80208fb6 100644 --- a/platform/mv3/extension/zapper-ui.html +++ b/platform/mv3/extension/zapper-ui.html @@ -14,12 +14,18 @@