diff --git a/public/scripts/extensions/dice/index.js b/public/scripts/extensions/dice/index.js index ebac90681..02cefcccb 100644 --- a/public/scripts/extensions/dice/index.js +++ b/public/scripts/extensions/dice/index.js @@ -29,7 +29,10 @@ async function doDiceRoll() { function addDiceRollButton() { const buttonHtml = ` -
+
+
+ Roll Dice +
`; const dropdownHtml = `
@@ -55,7 +58,7 @@ function addDiceRollButton() { button.hide(); let popper = Popper.createPopper(button.get(0), dropdown.get(0), { - placement: 'left-end', + placement: 'bottom', }); $(document).on('click touchend', function (e) { diff --git a/public/scripts/extensions/dice/style.css b/public/scripts/extensions/dice/style.css index f574d81fe..abe38c1ef 100644 --- a/public/scripts/extensions/dice/style.css +++ b/public/scripts/extensions/dice/style.css @@ -1,5 +1,5 @@ #roll_dice { - order: 100; + /* order: 100; */ /* width: 40px; height: 40px; margin: 0; @@ -11,7 +11,7 @@ opacity: 0.7; display: flex; align-items: center; - justify-content: center; + /* justify-content: center; */ } diff --git a/public/scripts/extensions/stable-diffusion/index.js b/public/scripts/extensions/stable-diffusion/index.js index c6f175192..86356ec0c 100644 --- a/public/scripts/extensions/stable-diffusion/index.js +++ b/public/scripts/extensions/stable-diffusion/index.js @@ -537,11 +537,14 @@ async function sendMessage(prompt, image) { function addSDGenButtons() { const buttonHtml = ` -
+
+
+ StableDiffusion +
`; const waitButtonHtml = ` -
+
` const dropdownHtml = `
@@ -570,7 +573,7 @@ function addSDGenButtons() { messageButton.hide(); let popper = Popper.createPopper(button.get(0), dropdown.get(0), { - placement: 'left-end', + placement: 'bottom', }); $(document).on('click', '.sd_message_gen', sdMessageButton); diff --git a/public/scripts/extensions/stable-diffusion/style.css b/public/scripts/extensions/stable-diffusion/style.css index b7f4f3839..4399b0803 100644 --- a/public/scripts/extensions/stable-diffusion/style.css +++ b/public/scripts/extensions/stable-diffusion/style.css @@ -3,8 +3,8 @@ } #sd_gen { - order: 100; - /* width: 40px; + /*order: 100; + width: 40px; height: 40px; margin: 0; padding: 1px; */ @@ -15,7 +15,7 @@ opacity: 0.7; display: flex; align-items: center; - justify-content: center; + /* justify-content: center; */ } #sd_gen:hover { diff --git a/public/scripts/extensions/tts/index.js b/public/scripts/extensions/tts/index.js index e5fd6e1e6..48d2d6d82 100644 --- a/public/scripts/extensions/tts/index.js +++ b/public/scripts/extensions/tts/index.js @@ -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('
') + + $('#extensionsMenu').prepend(` +
+
+ TTS Playback +
`) $('#tts_media_control').attr('title', 'TTS play/pause').on('click', onAudioControlClicked) audioControl = document.getElementById('tts_media_control') updateUiAudioPlayState() diff --git a/public/scripts/extensions/tts/style.css b/public/scripts/extensions/tts/style.css index 77ece89cd..81bd0727d 100644 --- a/public/scripts/extensions/tts/style.css +++ b/public/scripts/extensions/tts/style.css @@ -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); diff --git a/public/style.css b/public/style.css index e1ba569d6..139a7b626 100644 --- a/public/style.css +++ b/public/style.css @@ -512,10 +512,14 @@ code { #extensionsMenu { z-index: 100; backdrop-filter: blur(var(--SmartThemeBlurStrength)); - font-size: 30px; /* padding: 10px; */ display: flex; - gap: 10px; +} + +.extensionsMenuExtensionButton { + font-size: 20px; + height: 20px; + width: 20px; } #right-nav-panel hr, @@ -526,7 +530,7 @@ code { } .options-content a, -#extensionsMenu div { +#extensionsMenu>div { color: var(--SmartThemeBodyColor); padding: 12px 16px; text-decoration: none;