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;