css lots of css

Author: simonjonsson87

chat-ui-quince/index.html

@@ -77,15 +77,7 @@ <h2 class="sidebar-title">Your assets</h2>
         <div class="input-container">
           <textarea id="message-input" rows="2" placeholder="Type your command..."></textarea>
           <div id="chat-buttons">
-            <!-- Microphone Button for Voice Input -->
-            <!-- <button id="voice-btn-old" type="button"> 🎤</button> -->
-            <button id="voice-btn">
-              <svg fill="#000000" width="32px" height="32px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12,15a4,4,0,0,0,4-4V5A4,4,0,0,0,8,5v6A4,4,0,0,0,12,15ZM10,5a2,2,0,0,1,4,0v6a2,2,0,0,1-4,0Zm10,6a1,1,0,0,0-2,0A6,6,0,0,1,6,11a1,1,0,0,0-2,0,8,8,0,0,0,7,7.93V21H9a1,1,0,0,0,0,2h6a1,1,0,0,0,0-2H13V18.93A8,8,0,0,0,20,11Z" stroke="currentColor"/></svg>
-              <div id="voice-btn-text"></div>
-            </button>
-
-            <!-- <button id="read-out-loud-btn"><img src="speaker-disabled.png" alt="Read Out Loud" id="speaker-icon"></button> -->
-
+            
             <div class="read-out-loud-btn">
               <div id="read-out-loud-btn-enabled">
                 <svg  version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
@@ -128,6 +120,11 @@ <h2 class="sidebar-title">Your assets</h2>
             </div>
           </div>
 
+          <button id="voice-btn">
+            <svg fill="#000000" width="32px" height="32px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M12,15a4,4,0,0,0,4-4V5A4,4,0,0,0,8,5v6A4,4,0,0,0,12,15ZM10,5a2,2,0,0,1,4,0v6a2,2,0,0,1-4,0Zm10,6a1,1,0,0,0-2,0A6,6,0,0,1,6,11a1,1,0,0,0-2,0,8,8,0,0,0,7,7.93V21H9a1,1,0,0,0,0,2h6a1,1,0,0,0,0-2H13V18.93A8,8,0,0,0,20,11Z" stroke="currentColor"/></svg>
+            <div id="voice-btn-text"></div>
+          </button>
+
           <div id="send-btn" type="button">
             <svg id="button-arrow" width="20" height="20" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" class="stroke-[2] relative">
               <path d="M5 11L12 4M12 4L19 11M12 4V21" stroke="currentColor"></path>

chat-ui-quince/src/style.css

@@ -130,12 +130,13 @@ body {
 }
 
 #chat-buttons {
-  height: 50px;
+  height: 60px;
+  width: 100%;
 }
 
 #voice-btn, .read-out-loud-btn, #send-btn {
-  width: 30px; /* Match width of send button */
-  height: 30px; /* Match height of send button */
+  width: 40px; /* Match width of send button */
+  height: 40px; /* Match height of send button */
   display: flex; /* Use flex to center the icon inside */
   justify-content: center;
   align-items: center;
@@ -144,7 +145,7 @@ body {
   border: none;
   cursor: pointer;
   box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-  padding: 12px;              /* Some padding to make the button larger */
+  /*padding: 12px;              /* Some padding to make the button larger */
 }
 
 #send-btn {
@@ -168,17 +169,17 @@ body {
 
 .read-out-loud-btn {
   position: absolute;
-  left: 40px;
+  left: 70px;
   bottom: 20px;
 }
 
-#speaker-icon {
-  width: 20px; /* Match width of send button */
-  height: 20px;
+#read-out-loud-btn-disabled {
+  display: none;
 }
 
 
 
+
 .disclaimer {
   font-size: 12px;
   color: #666;