diff --git a/_locales/en/messages.json b/_locales/en/messages.json index 11148287..1f0e84cf 100644 --- a/_locales/en/messages.json +++ b/_locales/en/messages.json @@ -103,6 +103,10 @@ "updateCheckHistory": { "message": "History of update checks" }, + "clickToUninstall": { + "message": "Click to uninstall", + "description": "Label for the overlay on a style thumbnail when installed via inline search in the popup" + }, "configureStyle": { "message": "Configure", "description": "Label for the button to configure usercss userstyle" diff --git a/popup.html b/popup.html index 63804646..e2d50968 100644 --- a/popup.html +++ b/popup.html @@ -88,8 +88,8 @@
-
+
diff --git a/popup/search-results.css b/popup/search-results.css index fb0e619a..fe08f70d 100755 --- a/popup/search-results.css +++ b/popup/search-results.css @@ -103,24 +103,33 @@ body.search-results-shown { line-height: 18px; text-align: center; position: absolute; - background-color: rgba(0, 128, 0, 0.76); + background-color: hsla(180, 100%, 27%, .75); color: #fff; + transition: background-color .5s; + pointer-events: none; } -.search-result:hover .search-result-actions { - opacity: 1; +.search-result-screenshot:hover ~ .search-result-status { + background-color: hsla(180, 100%, 27%, 1); } .search-result-actions { bottom: 20px; text-align: center; z-index: 10; - opacity: 0; position: absolute; width: 100%; +} + +.search-result:not([data-installed]) .search-result-actions { + opacity: 0; transition: opacity .5s; } +.search-result:not([data-installed]):hover .search-result-actions { + opacity: 1; +} + #search-results .search-result-actions button { background-color: #fff; box-shadow: 2px 2px 20px #000; diff --git a/popup/search-results.js b/popup/search-results.js index 70e23c31..502e8a3c 100755 --- a/popup/search-results.js +++ b/popup/search-results.js @@ -498,7 +498,7 @@ window.addEventListener('showStyles:done', function _() { if (result.installed && !('installed' in entry.dataset)) { entry.dataset.installed = ''; - $('.search-result-status', entry).textContent = t('installButtonInstalled'); + $('.search-result-status', entry).textContent = t('clickToUninstall'); } else if (!result.installed && 'installed' in entry.dataset) { delete entry.dataset.installed; $('.search-result-status', entry).textContent = ''; @@ -506,7 +506,7 @@ window.addEventListener('showStyles:done', function _() { const screenshot = $('.search-result-screenshot', entry); screenshot.onclick = result.installed ? onUninstallClicked : onInstallClicked; - screenshot.title = result.installed ? t('deleteStyleLabel') : t('installButton'); + screenshot.title = result.installed ? '' : t('installButton'); const uninstallButton = $('.search-result-uninstall', entry); uninstallButton.onclick = onUninstallClicked; @@ -528,9 +528,6 @@ window.addEventListener('showStyles:done', function _() { handleEvent.openURLandHide.call(this, event); }; } - - //installButton.classList.toggle('hidden', Boolean(result.installed)); - uninstallButton.classList.toggle('hidden', !result.installed); } function onUninstallClicked(event) {