diff --git a/src/js/popup.js b/src/js/popup.js index 69a0267a2d..558ff5705c 100644 --- a/src/js/popup.js +++ b/src/js/popup.js @@ -537,7 +537,12 @@ function createBreakageNote(domain, i18n_message_key) { // return the tooltip we want (the breakage note, not Allow) $slider_allow.tooltipster('destroy').tooltipster({ autoClose: false, - content: chrome.i18n.getMessage(i18n_message_key), + content: $(`
+ + + +
${chrome.i18n.getMessage(i18n_message_key)}
+
`), functionReady: function (tooltip) { // close on tooltip click/tap $(tooltip.elementTooltip()).on('click', function (e) { diff --git a/src/lib/i18n.js b/src/lib/i18n.js index 191ede1f41..64093884aa 100644 --- a/src/lib/i18n.js +++ b/src/lib/i18n.js @@ -59,6 +59,15 @@ function setTextDirection() { ['#fittslaw', '.overlay-close'].forEach((selector) => { toggle_css_value(selector, "float", "right", "left"); }); + // Workaround for tooltipster dynamically inserted after localization + let css = document.createElement("style"); + css.textContent = ` + #dismiss-tooltip { + float: left; + right: unset; + left: -5px; + }`; + document.body.appendChild(css); // options page } else if (document.location.pathname == "/skin/options.html") { diff --git a/src/skin/popup.css b/src/skin/popup.css index 1e10a3090e..53f4d4030b 100644 --- a/src/skin/popup.css +++ b/src/skin/popup.css @@ -508,6 +508,24 @@ a.overlay-close:hover { cursor: pointer; } +#dismiss-tooltip { + float: right; + margin: 5px; + position: relative; + top: -5px; + right: -5px; +} + +#dismiss-tooltip img { + height: 18px; + filter: invert(100%) sepia(0%) saturate(7489%) hue-rotate(126deg) brightness(106%) contrast(100%); +} + +#dismiss-tooltip:hover img, #dismiss-tooltip:focus img { + /* Calculated with https://codepen.io/sosuke/pen/Pjoqqp to match #fff */ + filter: invert(93%) sepia(8%) saturate(30%) hue-rotate(203deg) brightness(99%) contrast(94%); +} + #firstparty-protections-container, #youtube-message-container { border-bottom: 1px solid #d3d3d3; margin: 10px 0;