diff --git a/index.html b/index.html
index c0de9a3..7210dfa 100644
--- a/index.html
+++ b/index.html
@@ -3,6 +3,7 @@
+
@@ -19,9 +20,11 @@
NAME is typing...
-
diff --git a/main.js b/main.js
index 3c022c5..9795ec8 100644
--- a/main.js
+++ b/main.js
@@ -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;
}
diff --git a/styles.css b/styles.css
index d7eda23..14ae21f 100644
--- a/styles.css
+++ b/styles.css
@@ -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);