diff --git a/inc/css/shortcodes.css b/inc/css/shortcodes.css index dada1c38..5bdb0bf7 100644 --- a/inc/css/shortcodes.css +++ b/inc/css/shortcodes.css @@ -33,20 +33,55 @@ pointer-events: none; } -.abt_tooltip_touch_close:before { +.abt_tooltip_touch_close-container { + width: 50px; + height: 50px; position: absolute; - color: #f1f1f1; - content: '✖'; top: -10px; - text-align: center; - background: #555; - width: 24px; - height: 24px; - border-radius: 50px; right: -10px; - font: 20px monospace; + text-align: right; } +.abt_tooltip_touch_close { + position: relative; + border-radius: 50%; + width: 26px; + height: 26px; + box-sizing: border-box; + display: inline-block; + vertical-align: middle; + font-style: normal; + color: #f1f1f1; + background: #555; + text-indent: -9999px; + transform: rotate(45deg); +} + +.abt_tooltip_touch_close:before { + width: 14px; + content: ''; + pointer-events: none; + height: 2px; + box-shadow: inset 0 0 0 32px; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); +} + +.abt_tooltip_touch_close:after { + height: 14px; + content: ''; + pointer-events: none; + width: 2px; + box-shadow: inset 0 0 0 32px; + position: absolute; + left: 50%; + top: 50%; + transform: translate(-50%, -50%); +} + + .noselect { -webkit-touch-callout: none; /* iOS Safari */ diff --git a/inc/js/peer-review.js b/inc/js/peer-review.js index 71540b16..e0a8b478 100644 --- a/inc/js/peer-review.js +++ b/inc/js/peer-review.js @@ -89,12 +89,15 @@ var ABT_Frontend; tooltipArrow.className = 'abt_tooltip_arrow'; if (this._isTouchDevice()) { var closeButton = document.createElement('div'); + var touchContainer = document.createElement('div'); + touchContainer.className = 'abt_tooltip_touch_close-container'; closeButton.className = 'abt_tooltip_touch_close'; - closeButton.addEventListener('touchend', function () { return tooltip.remove(); }); + touchContainer.addEventListener('touchend', function () { return tooltip.remove(); }); tooltip.style.left = '0'; tooltip.style.right = '0'; tooltip.style.maxWidth = '90%'; - tooltip.appendChild(closeButton); + touchContainer.appendChild(closeButton); + tooltip.appendChild(touchContainer); document.body.appendChild(tooltip); tooltip.appendChild(tooltipArrow); tooltipArrow.style.left = "calc(" + rect.left + "px - 5% + " + ((rect.right - rect.left) / 2) + "px - 3px)"; diff --git a/inc/js/peer-review.ts b/inc/js/peer-review.ts index 6bda53ce..b4eb6db0 100644 --- a/inc/js/peer-review.ts +++ b/inc/js/peer-review.ts @@ -131,13 +131,17 @@ module ABT_Frontend { if (this._isTouchDevice()) { let closeButton: HTMLDivElement = document.createElement('div'); + let touchContainer: HTMLDivElement = document.createElement('div'); + touchContainer.className = 'abt_tooltip_touch_close-container'; closeButton.className = 'abt_tooltip_touch_close'; - closeButton.addEventListener('touchend', () => tooltip.remove()); + touchContainer.addEventListener('touchend', () => tooltip.remove()); tooltip.style.left = '0'; tooltip.style.right = '0'; tooltip.style.maxWidth = '90%' - tooltip.appendChild(closeButton); + touchContainer.appendChild(closeButton); + tooltip.appendChild(touchContainer); + // tooltip.appendChild(closeButton); document.body.appendChild(tooltip); tooltip.appendChild(tooltipArrow);