rixty/SillyTavern
1
0
Fork 0
mirror of https://github.com/SillyTavern/SillyTavern.git synced 2025-06-05 21:59:27 +02:00
Code Issues Packages Projects Releases Wiki Activity

fix styles for extensions menu

Browse Source
This commit is contained in:
RossAscends
2023-05-18 02:25:47 +09:00
parent 3951049e03
commit 2e86775d4a
7 changed files with 45 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
public/scripts/extensions/tts/index.js
View File

@ -233,9 +233,9 @@ function updateUiAudioPlayState() {
let img
// Give user feedback that TTS is active by setting the stop icon if processing or playing
if (!audioElement.paused || isTtsProcessing()) {
img = 'fa-solid fa-stop-circle list-group-item'
img = 'fa-solid fa-stop-circle extensionsMenuExtensionButton'
} else {
img = 'fa-solid fa-circle-play list-group-item'
img = 'fa-solid fa-circle-play extensionsMenuExtensionButton'
}
audioControl.className = img
} else {
@ -256,7 +256,12 @@ function onAudioControlClicked() {
}
function addAudioControl() {
$('#extensionsMenu').prepend('<div id="tts_media_control" class="list-group-item" />')
$('#extensionsMenu').prepend(`
<div id="ttsExtensionMenuItem" class="list-group-item flex-container flexGap5">
<div id="tts_media_control" class="extensionsMenuExtensionButton "/></div>
TTS Playback
</div>`)
$('#tts_media_control').attr('title', 'TTS play/pause').on('click', onAudioControlClicked)
audioControl = document.getElementById('tts_media_control')
updateUiAudioPlayState()

18
public/scripts/extensions/tts/style.css
View File

@ -1,5 +1,5 @@
#tts_media_control {
order: 100;
/* order: 100; */
/* width: 40px;
height: 40px;
margin: 0;
@ -7,14 +7,24 @@
outline: none;
border: none;
cursor: pointer;
transition: 0.3s;
opacity: 0.7;
/* transition: 0.3s;
opacity: 0.7; */
display: flex;
align-items: center;
justify-content: center;
/* justify-content: center; */
}
#ttsExtensionMenuItem {
transition: 0.3s;
opacity: 0.7;
}
#ttsExtensionMenuItem:hover {
opacity: 1;
filter: brightness(1.2);
}
#tts_media_control:hover {
opacity: 1;
filter: brightness(1.2);