Revert changes to options button and close button

This commit is contained in:
Ajay
2022-06-03 01:45:47 -04:00
parent 9664bbea73
commit 3415dafb02
2 changed files with 10 additions and 62 deletions

View File

@@ -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
*/

View File

@@ -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>