Compare commits
6 Commits
bf7a989b75
...
d2cfa6cb24
Author | SHA1 | Date | |
---|---|---|---|
d2cfa6cb24 | |||
f83f33a8c9 | |||
4a1837bb52 | |||
07b31a6bca | |||
fa6679587d | |||
913d452144 |
@ -3,7 +3,6 @@
|
||||
<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>
|
||||
|
||||
@ -20,11 +19,9 @@
|
||||
|
||||
<p id="typing-indicator">NAME is typing...</p>
|
||||
|
||||
<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 id="textbox">
|
||||
<input id="textbox-input" class="rounded-rectangle" type="text" onkeydown="pressSendButton()"></input>
|
||||
<button class="rounded-rectangle" onclick="pressSendButton()">send</button>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
2
main.js
2
main.js
@ -11,7 +11,7 @@ class Conversation {
|
||||
}
|
||||
|
||||
setInteractive(isInteractive) {
|
||||
const children = document.getElementById("input-panel").children;
|
||||
const children = document.getElementById("textbox").children;
|
||||
for (let i = 0; i < children.length; i++) {
|
||||
children[i].disabled = !isInteractive;
|
||||
}
|
||||
|
89
styles.css
89
styles.css
@ -11,8 +11,6 @@
|
||||
--light-cyan: #e0fbfc;
|
||||
--buff: #edb88b;
|
||||
--eeriee-black: #1d201f;
|
||||
|
||||
--clear: #00000000;
|
||||
}
|
||||
|
||||
html {
|
||||
@ -137,8 +135,6 @@ h1 {
|
||||
color: var(--light-cyan);
|
||||
|
||||
float: left;
|
||||
|
||||
border-bottom-left-radius: 0;
|
||||
}
|
||||
|
||||
.message-content.theirs h3 {
|
||||
@ -158,8 +154,6 @@ h1 {
|
||||
|
||||
right: 0;
|
||||
margin-bottom: 0.5em;
|
||||
|
||||
border-bottom-right-radius: 0;
|
||||
}
|
||||
|
||||
.ours .message-text {
|
||||
@ -173,11 +167,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;
|
||||
}
|
||||
|
||||
@ -194,52 +188,14 @@ li.message {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
#input-panel-container {
|
||||
padding: 0 1em 1em 1em;
|
||||
}
|
||||
|
||||
#input-panel {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0;
|
||||
|
||||
z-index: 1;
|
||||
|
||||
background-color: var(--light-cyan);
|
||||
border-radius: 100vw;
|
||||
}
|
||||
|
||||
#input-panel input {
|
||||
|
||||
#textbox {
|
||||
width: 100%;
|
||||
color: var(--onyx);
|
||||
background-color: rgba(0,0,0,0);
|
||||
border-style: none;
|
||||
padding: 0 2em;
|
||||
display: flex;
|
||||
bottom: 0;
|
||||
|
||||
z-index: 1;
|
||||
<<<<<<< HEAD
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
#input-panel input:focus {
|
||||
outline: none;
|
||||
=======
|
||||
>>>>>>> 021d12d (feat: update input style)
|
||||
}
|
||||
|
||||
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);
|
||||
/*background-color: var(--light-cyan);*/
|
||||
}
|
||||
|
||||
#typing-indicator {
|
||||
@ -253,6 +209,35 @@ button:hover {
|
||||
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