Extensions styles fix

public/script.js

@@ -2154,7 +2154,7 @@ function isMultigenEnabled() {
 
 function activateSendButtons() {
     is_send_press = false;
-    $("#send_but").css("display", "inline");
+    $("#send_but").css("display", "flex");
     $("#loading_mes").css("display", "none");
 }
 

public/scripts/extensions/caption/index.js

@@ -16,8 +16,8 @@ async function moduleWorker() {
 async function setImageIcon() {
     try {
         const sendButton = document.getElementById('send_picture');
-        sendButton.style.backgroundImage = `url('/img/image-solid.svg')`;
+        sendButton.classList.add('fa-image');
-        sendButton.classList.remove('spin');
+        sendButton.classList.remove('fa-hourglass-half', 'fa-spin');
     }
     catch (error) {
         console.log(error);
@@ -27,7 +27,8 @@ async function setImageIcon() {
 async function setSpinnerIcon() {
     try {
         const sendButton = document.getElementById('send_picture');
-        sendButton.style.backgroundImage = `url('/img/hourglass-half-solid.svg')`;
+        sendButton.classList.remove('fa-image');
+        sendButton.classList.add('fa-hourglass-half', 'fa-spin');
     }
     catch (error) {
         console.log(error);
@@ -96,9 +97,9 @@ $(document).ready(function () {
         $('#send_form').css('grid-template-columns', columns.join(' '));
     }
     function addSendPictureButton() {
-        const sendButton = document.createElement('input');
+        const sendButton = document.createElement('div');
-        sendButton.type = 'button';
         sendButton.id = 'send_picture';
+        sendButton.classList.add('fa-solid');
         $(sendButton).hide();
         $(sendButton).on('click', () => $('#img_file').click());
         $('#send_but_sheld').prepend(sendButton);

public/scripts/extensions/caption/style.css

@@ -4,15 +4,14 @@
     height: 40px;
     margin: 0;
     padding: 1px;
-    background: no-repeat;
-    background-size: 24px 24px;
-    background-position: center center;
     outline: none;
     border: none;
     cursor: pointer;
     transition: 0.3s;
-    filter: invert(1);
     opacity: 0.5;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 #send_picture:hover {

public/scripts/extensions/dice/index.js

@@ -30,6 +30,8 @@ async function doDiceRoll() {
 function addDiceRollButton() {
     const buttonHtml = `
         <div id="roll_dice" class="fa-solid fa-dice" /></div>
+        `;
+    const dropdownHtml = `
     <div id="dice_dropdown">
         <ul class="list-group">
             <li class="list-group-item" data-value="d4">d4</li>
@@ -41,10 +43,10 @@ function addDiceRollButton() {
             <li class="list-group-item" data-value="d100">d100</li>
             <li class="list-group-item" data-value="custom">...</li>
         </ul>
-        </div>
+    </div>`;
-        `;
 
     $('#send_but_sheld').prepend(buttonHtml);
+    $(document.body).append(dropdownHtml)
     $('#dice_dropdown li').on('click', doDiceRoll);
     const button = $('#roll_dice');
     const dropdown = $('#dice_dropdown');

public/scripts/extensions/dice/style.css

@@ -3,19 +3,21 @@
     width: 40px;
     height: 40px;
     margin: 0;
-    margin-right: 5px;
     padding: 1px;
-    background: no-repeat;
-    background-size: 26px auto;
-    background-position: center center;
     outline: none;
     border: none;
     cursor: pointer;
     transition: 0.3s;
-    font-size: 30px;
     opacity: 0.5;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 #roll_dice:hover {
     opacity: 1;
 }
+
+#dice_dropdown {
+    z-index: 100;
+}

public/scripts/extensions/memory/index.js

@@ -317,7 +317,7 @@ $(document).ready(function () {
             <div class="inline-drawer">
                 <div class="inline-drawer-toggle inline-drawer-header">
                     <b>Summarization settings</b>
-                    <div class="inline-drawer-icon down"></div>
+                    <div class="inline-drawer-icon fa-solid fa-circle-chevron-down down"></div>
                 </div>
                 <div class="inline-drawer-content">
                     <label for="memory_short_length">Memory summarization [short-term] length (<span id="memory_short_length_tokens"></span> tokens)</label>

public/style.css

@@ -262,6 +262,9 @@ code {
     background-position: center;
     display: flex;
     flex-direction: row;
+    column-gap: 5px;
+    font-size: 30px;
+    overflow: hidden;
 }
 
 #send_but {
@@ -270,12 +273,14 @@ code {
     margin: 0;
     display: none;
     outline: none;
-    font-size: 30px;
     border: none;
     cursor: pointer;
     transition: 0.3s;
     filter: brightness(0.7);
     order: 99999;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 #send_but:hover {
@@ -290,7 +295,6 @@ code {
     order: 99999;
     align-items: center;
     justify-content: center;
-    font-size: 24px;
     filter: brightness(0.7);
 }
 
@@ -2679,7 +2683,7 @@ a {
 .list-group-item {
     color: rgba(229, 224, 216, 1);
     position: relative;
-    display: block;
+    display: list-item;
     padding: 0.75rem 1.25rem;
     margin-bottom: -1px;
     box-sizing: border-box;