feat: update input style
This commit is contained in:
parent
50a2f0ee69
commit
e525120a15
@ -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
2
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;
|
||||
}
|
||||
|
82
styles.css
82
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);
|
||||
|
Loading…
x
Reference in New Issue
Block a user