Skip to content

Commit 4504443

Browse files
simonjonsson87simonjonsson87
committed
Even more css
1 parent 8c0af91 commit 4504443

File tree

2 files changed

+47
-48
lines changed

2 files changed

+47
-48
lines changed

‎chat-ui-quince/index.html‎

Lines changed: 45 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -76,55 +76,54 @@ <h2 class="sidebar-title">Your assets</h2>
7676
<div id="chat" class="chat"></div>
7777
<div class="input-container">
7878
<textarea id="message-input" rows="2" placeholder="Type your command..."></textarea>
79+
<div id="chat-buttons">
80+
<!-- Microphone Button for Voice Input -->
81+
<!-- <button id="voice-btn-old" type="button"> 🎤</button> -->
82+
<button id="voice-btn">
83+
<svg fill="#000000" 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>
84+
<div id="voice-btn-text"></div>
85+
</button>
7986

80-
<!-- Microphone Button for Voice Input -->
81-
<!-- <button id="voice-btn-old" type="button"> 🎤</button> -->
82-
<button id="voice-btn">
83-
<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"/></svg>
84-
<div id="voice-btn-text"></div>
85-
</button>
87+
<!-- <button id="read-out-loud-btn"><img src="speaker-disabled.png" alt="Read Out Loud" id="speaker-icon"></button> -->
8688

87-
<!-- <button id="read-out-loud-btn"><img src="speaker-disabled.png" alt="Read Out Loud" id="speaker-icon"></button> -->
88-
89-
<div class="read-out-loud-btn">
90-
<div id="read-out-loud-btn-enabled">
91-
<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"
92-
viewBox="0 0 52.026 52.026" style="enable-background:new 0 0 52.026 52.026;" xml:space="preserve">
93-
<g>
94-
<path d="M26.894,3.013c-0.551,0-1.097,0.153-1.579,0.444c-0.046,0.027-0.09,0.059-0.13,0.093L11.634,15.013H1c-0.553,0-1,0.447-1,1
95-
v19c0,0.553,0.447,1,1,1h10.61l13.543,12.436c0.05,0.046,0.104,0.086,0.161,0.12c0.482,0.291,1.028,0.444,1.579,0.444
96-
c1.713,0,3.106-1.416,3.106-3.156V6.169C30,4.429,28.606,3.013,26.894,3.013z M13,34.013c0,0.553-0.447,1-1,1s-1-0.447-1-1v-4
97-
c0-0.553,0.447-1,1-1s1,0.447,1,1V34.013z M13,21.013c0,0.553-0.447,1-1,1s-1-0.447-1-1v-4c0-0.553,0.447-1,1-1s1,0.447,1,1V21.013
98-
z"/>
99-
<path d="M38.797,7.066c-0.523-0.177-1.091,0.103-1.269,0.626c-0.177,0.522,0.103,1.091,0.626,1.269
100-
c7.101,2.411,11.872,9.063,11.872,16.553c0,7.483-4.762,14.136-11.849,16.554c-0.522,0.178-0.802,0.746-0.623,1.27
101-
c0.142,0.415,0.53,0.677,0.946,0.677c0.107,0,0.216-0.017,0.323-0.054c7.896-2.693,13.202-10.106,13.202-18.446
102-
C52.026,17.167,46.71,9.753,38.797,7.066z"/>
103-
<path d="M43.026,25.513c0-5.972-4.009-11.302-9.749-12.962c-0.533-0.151-1.084,0.152-1.238,0.684
104-
c-0.153,0.53,0.152,1.085,0.684,1.238c4.889,1.413,8.304,5.953,8.304,11.04s-3.415,9.627-8.304,11.04
105-
c-0.531,0.153-0.837,0.708-0.684,1.238c0.127,0.438,0.526,0.723,0.961,0.723c0.092,0,0.185-0.013,0.277-0.039
106-
C39.018,36.815,43.026,31.485,43.026,25.513z"/>
107-
</g>
108-
</svg>
89+
<div class="read-out-loud-btn">
90+
<div id="read-out-loud-btn-enabled">
91+
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="enable-background:new 0 0 52.026 52.026;" xml:space="preserve">
92+
<g>
93+
<path d="M26.894,3.013c-0.551,0-1.097,0.153-1.579,0.444c-0.046,0.027-0.09,0.059-0.13,0.093L11.634,15.013H1c-0.553,0-1,0.447-1,1
94+
v19c0,0.553,0.447,1,1,1h10.61l13.543,12.436c0.05,0.046,0.104,0.086,0.161,0.12c0.482,0.291,1.028,0.444,1.579,0.444
95+
c1.713,0,3.106-1.416,3.106-3.156V6.169C30,4.429,28.606,3.013,26.894,3.013z M13,34.013c0,0.553-0.447,1-1,1s-1-0.447-1-1v-4
96+
c0-0.553,0.447-1,1-1s1,0.447,1,1V34.013z M13,21.013c0,0.553-0.447,1-1,1s-1-0.447-1-1v-4c0-0.553,0.447-1,1-1s1,0.447,1,1V21.013
97+
z" stroke="currentColor"/>
98+
<path d="M38.797,7.066c-0.523-0.177-1.091,0.103-1.269,0.626c-0.177,0.522,0.103,1.091,0.626,1.269
99+
c7.101,2.411,11.872,9.063,11.872,16.553c0,7.483-4.762,14.136-11.849,16.554c-0.522,0.178-0.802,0.746-0.623,1.27
100+
c0.142,0.415,0.53,0.677,0.946,0.677c0.107,0,0.216-0.017,0.323-0.054c7.896-2.693,13.202-10.106,13.202-18.446
101+
C52.026,17.167,46.71,9.753,38.797,7.066z" stroke="currentColor"/>
102+
<path d="M43.026,25.513c0-5.972-4.009-11.302-9.749-12.962c-0.533-0.151-1.084,0.152-1.238,0.684
103+
c-0.153,0.53,0.152,1.085,0.684,1.238c4.889,1.413,8.304,5.953,8.304,11.04s-3.415,9.627-8.304,11.04
104+
c-0.531,0.153-0.837,0.708-0.684,1.238c0.127,0.438,0.526,0.723,0.961,0.723c0.092,0,0.185-0.013,0.277-0.039
105+
C39.018,36.815,43.026,31.485,43.026,25.513z" stroke="currentColor"/>
106+
</g>
107+
</svg>
108+
</div>
109+
<div id="read-out-loud-btn-disabled">
110+
<?xml version="1.0" encoding="iso-8859-1"?>
111+
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
112+
<!-- License: CC0. Made by SVG Repo: https://www.svgrepo.com/svg/135351/speaker -->
113+
<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"
114+
style="enable-background:new 0 0 54 54;" xml:space="preserve">
115+
<g>
116+
<path d="M46.414,26l7.293-7.293c0.391-0.391,0.391-1.023,0-1.414s-1.023-0.391-1.414,0L45,24.586l-7.293-7.293
117+
c-0.391-0.391-1.023-0.391-1.414,0s-0.391,1.023,0,1.414L43.586,26l-7.293,7.293c-0.391,0.391-0.391,1.023,0,1.414
118+
C36.488,34.902,36.744,35,37,35s0.512-0.098,0.707-0.293L45,27.414l7.293,7.293C52.488,34.902,52.744,35,53,35
119+
s0.512-0.098,0.707-0.293c0.391-0.391,0.391-1.023,0-1.414L46.414,26z" stroke="currentColor"/>
120+
<path d="M26.894,4c-0.551,0-1.097,0.153-1.579,0.444c-0.046,0.027-0.09,0.059-0.13,0.093L11.634,16H1c-0.553,0-1,0.447-1,1v19
121+
c0,0.553,0.447,1,1,1h10.61l13.543,12.436c0.05,0.046,0.104,0.086,0.161,0.12C25.797,49.847,26.343,50,26.894,50
122+
C28.606,50,30,48.584,30,46.844V7.156C30,5.416,28.606,4,26.894,4z M13,35c0,0.553-0.447,1-1,1s-1-0.447-1-1v-4
123+
c0-0.553,0.447-1,1-1s1,0.447,1,1V35z M13,22c0,0.553-0.447,1-1,1s-1-0.447-1-1v-4c0-0.553,0.447-1,1-1s1,0.447,1,1V22z" stroke="currentColor"/>
124+
</g>
125+
</svg>
109126
</div>
110-
<div id="read-out-loud-btn-disabled">
111-
<?xml version="1.0" encoding="iso-8859-1"?>
112-
<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
113-
<!-- License: CC0. Made by SVG Repo: https://www.svgrepo.com/svg/135351/speaker -->
114-
<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"
115-
viewBox="0 0 54 54" style="enable-background:new 0 0 54 54;" xml:space="preserve">
116-
<g>
117-
<path d="M46.414,26l7.293-7.293c0.391-0.391,0.391-1.023,0-1.414s-1.023-0.391-1.414,0L45,24.586l-7.293-7.293
118-
c-0.391-0.391-1.023-0.391-1.414,0s-0.391,1.023,0,1.414L43.586,26l-7.293,7.293c-0.391,0.391-0.391,1.023,0,1.414
119-
C36.488,34.902,36.744,35,37,35s0.512-0.098,0.707-0.293L45,27.414l7.293,7.293C52.488,34.902,52.744,35,53,35
120-
s0.512-0.098,0.707-0.293c0.391-0.391,0.391-1.023,0-1.414L46.414,26z"/>
121-
<path d="M26.894,4c-0.551,0-1.097,0.153-1.579,0.444c-0.046,0.027-0.09,0.059-0.13,0.093L11.634,16H1c-0.553,0-1,0.447-1,1v19
122-
c0,0.553,0.447,1,1,1h10.61l13.543,12.436c0.05,0.046,0.104,0.086,0.161,0.12C25.797,49.847,26.343,50,26.894,50
123-
C28.606,50,30,48.584,30,46.844V7.156C30,5.416,28.606,4,26.894,4z M13,35c0,0.553-0.447,1-1,1s-1-0.447-1-1v-4
124-
c0-0.553,0.447-1,1-1s1,0.447,1,1V35z M13,22c0,0.553-0.447,1-1,1s-1-0.447-1-1v-4c0-0.553,0.447-1,1-1s1,0.447,1,1V22z"/>
125-
</g>
126-
</svg>
127-
128127
</div>
129128
</div>
130129

‎chat-ui-quince/src/style.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -130,8 +130,8 @@ body {
130130
}
131131

132132
#voice-btn, .read-out-loud-btn, #send-btn {
133-
width: 20px; /* Match width of send button */
134-
height: 20px; /* Match height of send button */
133+
width: 30px; /* Match width of send button */
134+
height: 30px; /* Match height of send button */
135135
display: flex; /* Use flex to center the icon inside */
136136
justify-content: center;
137137
align-items: center;

0 commit comments

Comments
 (0)