ktyl/shift
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: update input style

Browse Source
This commit is contained in:
Cat Flynn 2025-05-01 00:21:28 +01:00
parent 50a2f0ee69
commit e525120a15
3 changed files with 52 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
index.html
View File

@ -3,6 +3,7 @@
<head>
<link rel="stylesheet" href="styles.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
@ -19,9 +20,11 @@
<p id="typing-indicator">NAME is typing...</p>
<div id="textbox">
<input id="textbox-input" class="rounded-rectangle" type="text" onkeydown="pressSendButton()"></input>
<button class="rounded-rectangle" onclick="pressSendButton()">send</button>
<div id="input-panel-container">
<div id="input-panel" class="rounded-rectangle">
<input id="textbox-input" type="text" onkeydown="pressSendButton()"></input>
<button onclick="pressSendButton()"><i class="fa fa-arrow-right" style="font-size:2em"></i></button>
</div>
</div>
</div>

2
main.js
View File

@ -10,7 +10,7 @@ class Conversation {
}
setInteractive(isInteractive) {
const children = document.getElementById("textbox").children;
const children = document.getElementById("input-panel").children;
for (let i = 0; i < children.length; i++) {
children[i].disabled = !isInteractive;
}

82
styles.css
View File

@ -11,6 +11,8 @@
--light-cyan: #e0fbfc;
--buff: #edb88b;
--eeriee-black: #1d201f;
--clear: #00000000;
}
html {
@ -171,11 +173,11 @@ h1 {
}
ul {
margin: 0;
padding-top: 1em;
padding-right: 2em;
height: 100%;
overflow: scroll;
/*height:100%;*/
flex-grow: 1;
margin: 0 .5em;
padding: .5em 0;
list-style: none;
}
@ -192,14 +194,49 @@ li.message {
margin-bottom: 1em;
}
#textbox {
width: 100%;
#input-panel-container {
padding: 0 1em 1em 1em;
}
#input-panel {
display: flex;
bottom: 0;
justify-content: space-between;
padding: 0;
z-index: 1;
/*background-color: var(--light-cyan);*/
background-color: var(--light-cyan);
border-radius: 100vw;
}
#input-panel input {
width: 100%;
color: var(--onyx);
background-color: rgba(0,0,0,0);
border-style: none;
padding: 0 2em;
z-index: 1;
font-size: 1em;
}
#input-panel input:focus {
outline: none;
}
button {
color: var(--vermilion);
background-color: #00000000;
border-style: none;
border-radius: 100% !important;
padding: 1em !important;
float: right;
}
button:hover {
color: var(--light-cyan);
background-color: var(--onyx);
}
#typing-indicator {
@ -213,35 +250,6 @@ li.message {
bottom: 3em;
}
#textbox input {
flex-grow: 4;
color: var(--onyx);
background-color: var(--light-cyan);
margin: 0.5em;
left: 1em;
font-size: 1em;
z-index: 1;
}
button {
background-color: var(--vermilion);
color: var(--light-cyan);
margin: 0.5em;
padding: 0;
flex-grow: 1;
right: 0;
font-size: 1em;
}
button:hover {
color: var(--light-cyan);
background-color: var(--onyx);
}
.message-status {
color: var(--onyx);