json-object-editor
Version:
JOE the Json Object Editor | Platform Edition
174 lines (163 loc) • 3.06 kB
CSS
joe-ai-chatbox{
top:50px;
}
chatbox-wrapper {
padding: 5px;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
display: block;
}
chat-footer,
chat-header,
chat-content{
position: absolute;
left: 0;
right: 0;
display: block;
}
chat-header {
top: 0;
margin:5px;
}
chat-content {
display: block;;
position: absolute;
top: 80px;
bottom: 70px;
left: 0;
right: 0;
overflow: auto;
/* margin-bottom: 10px; */
background: #fff;
border: 1px solid #ccc;
margin: 5px;
overflow-x: clip;
}
chat-footer {
bottom: 0;
}
.close-btn {
position: absolute;
top: 8px;
right: 8px;
width: 24px;
height: 24px;
cursor: pointer;
z-index:10;
}
.close-btn svg {
width: 100%;
height: 100%;
}
chat-title{
margin: 0;
font-size: 14px;
display:block;
font-weight: bold;
}
chat-header p {
margin: 4px 0 0 0;
font-size: 12px;
color: #666;
}
chat-header svg {
width: 36px;
height: 36px;
}
label-select-wrapper {
display: flex;
align-items: center;
gap: 8px;
}
.thinking-message {
font-size: 13px;
color: #888;
font-style: italic;
margin: 10px 0;
text-align: center;
}
.meta {
font-size: 14px;
font-weight: bold;
margin-bottom: 2px;
/* display: flex
; */
align-items: center;
gap: 8px;
color: #99999999;
}
.content {
font-size: 14px;
white-space: pre-wrap;
line-height: 1.4em;
}
input[type="text"] {
flex: 1;
padding: 8px;
border-radius: 4px;
border: 1px solid #ccc;
}
button {
padding: 8px 12px;
background: #007bff;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
position: absolute;
bottom: 20px;
right: 10px;
}
button:disabled {
opacity: 0.5;
cursor: default;
}
participant-name{
color:#20202099
}
.message {
margin-bottom: 10px;
padding: 8px;
background: #f5f5f5;
}
.message.user{
text-align:right;
margin-left: 30px;
border-radius: 10px 0 0 10px;
}
.message.system {
background: #fee;
}
.message.assistant{
background: #00666633;
margin-right: 30px;
border-radius: 0px 10px 10px 0px;
}
#chat-input {
width: calc(100% - 100px);
margin: 5px;
min-height: 50px;
/* border-radius: 0px 0px 0px 8px; */
bottom: 0;
position: absolute;
/* overflow: visible; */
padding: 5px;
resize: vertical;
}
joe-object {
display: block;
margin: 0 auto;
/* width: 100%; */
/* height: 100%; */
padding:5px;
background: #fff;
margin: 10px;
padding: 10px;
text-align: center;
box-shadow: 1px 1px 10px #20202020;
border: 1px solid #00666699;
cursor: pointer;
}