diff options
| -rw-r--r-- | public/popup.css | 66 | ||||
| -rw-r--r-- | public/popup.html | 6 |
2 files changed, 10 insertions, 62 deletions
diff --git a/public/popup.css b/public/popup.css index 46b690c4..120c2333 100644 --- a/public/popup.css +++ b/public/popup.css @@ -115,18 +115,19 @@ } /* - * Close popup button when displayed in-page (top-left corner) + * Close popup button when displayed in-page (top-right corner) */ .sbCloseButton { - border: none; + background: transparent; + border: 0; + padding: 8px; cursor: pointer; position: absolute; - background: transparent; + top: 5px; + right: 5px; opacity: 0.5; - padding: 8px; - left: 26px; - top: 26px; } + .sbCloseButton:hover { opacity: 1; } @@ -148,59 +149,6 @@ margin: 8px; } -/* - * Options button (top-right corner) - */ -#optionsButton { - display: flex; - align-items: center; - justify-content: center; - position: absolute; - box-shadow: none; - background: none; - border: none; - padding: 5px; - height: 32px; - width: 32px; - right: 26px; - top: 26px; -} -#optionsButton svg { - transition: transform 0.15s ease-in-out !important; - transform-origin: center center; - color: var(--sb-grey-fg-color); -} -#optionsButton:hover svg { - color: var(--sb-main-fg-color); - transform: rotate(90deg); -} -#optionsButton:active svg { - transform: scale(1.5); -} - -/* - * Options button Tooltip - */ -#optionsButton:before { - background-color: var(--sb-grey-bg-color); - color: var(--sb-main-fg-color); - content: attr(data-hover); - pointer-events: none; - border-radius: 16px; - position: absolute; - padding: 4px 8px; - transition: .3s; - width: content; - left: -200%; - z-index: 1; - opacity: 0; - top: 4px; -} -#optionsButton:hover:before { - transform: translateX(-5px); - opacity: 1; -} - /* * Refresh segments button */ diff --git a/public/popup.html b/public/popup.html index b038706e..7bb4b3e8 100644 --- a/public/popup.html +++ b/public/popup.html @@ -60,9 +60,9 @@ <span id="disableSkipping">__MSG_disableSkipping__</span> <span id="enableSkipping" style="display: none">__MSG_enableSkipping__</span> </label> - <!-- Settings link, re-positioned to top-right --> - <button id="optionsButton" data-hover="__MSG_Options__" title="__MSG_OptionsInfo__"> - <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor"><path d="M24 13.6v-3.2c-1.7-.6-2.7-.8-3.2-2h0c-.5-1.3.1-2.1.8-3.7l-2.3-2.3c-1.6.7-2.4 1.4-3.7.8h0c-1.3-.5-1.4-1.6-2-3.2h-3.2c-.6 1.6-.7 2.7-2 3.2h0c-1.3.5-2.1-.1-3.7-.8L2.4 4.7c.7 1.6 1.4 2.4.8 3.7s-1.6 1.4-3.2 2v3.2c1.6.6 2.7.7 3.2 2 .5 1.3-.1 2.2-.8 3.7l2.3 2.3c1.6-.7 2.4-1.4 3.7-.8h0c1.3.5 1.4 1.6 2 3.2h3.2c.6-1.6.8-2.7 2-3.2h0c1.3-.5 2.1.1 3.7.9l2.3-2.3c-.7-1.6-1.4-2.4-.8-3.7s1.6-1.4 3.2-2zM12 16a4 4 0 1 1 0-8 4 4 0 1 1 0 8z"/></svg> + <button id="optionsButton" class="sbControlsMenu-item" title="__MSG_optionsInfo__"> + <img src="/icons/settings.svg" alt="Settings icon" width="23" height="23" class="sbControlsMenu-itemIcon" id="sbPopupIconSettings" /> + __MSG_Options__ </button> </div> |