remix-nlux
Version:
Remix IDE NLUX integration. Remix IDE is the leading IDE for building and deploying smart contracts on Ethereum. NLUX is a JavaScript and React library for building conversational AI experiences.
59 lines (51 loc) • 1.63 kB
CSS
.nlux-comp-chatItem {
display: flex;
margin-bottom: 0.5em;
gap: 0.5em;
> .nlux-comp-message {
display: flex;
overflow: hidden;
align-items: flex-start;
flex: 1;
flex-direction: column;
flex-shrink: initial;
min-width: 80px;
min-height: 22px;
margin: 0;
text-align: left;
border-radius: 0.25em;
outline: 0;
gap: var(--nlux-chItm-msg--gap);
}
> .nlux-comp-chatItem-participantInfo {
display: flex;
align-items: center;
flex-direction: row;
justify-content: center;
padding: var(--nlux-comp-chatItem-participantInfo--pdng);
gap: var(--nlux-comp-chatItem-participantInfo--gap);
> .nlux-comp-chatItem-participantName {
font-size: var(--nlux-prtInfo-prtNm--ftSz);
font-weight: var(--nlux-prtInfo-prtNm--ftWg);
color: var(--nlux-prtInfo-prtNm--clr);
}
}
}
/** OUT Chat item */
.nlux-comp-chatItem.nlux-comp-chatItem--sent {
> .nlux-comp-chatItem-participantInfo > .nlux-comp-avatar {
border-color: var(--nlux-hmMsg--brdClr);
> .nlux-comp-avatarContainer > .nlux-comp-avatarPicture {
background-color: var(--nlux-hmMsg--bgClr);
}
}
}
/** IN Chat item */
.nlux-comp-chatItem.nlux-comp-chatItem--received {
> .nlux-comp-chatItem-participantInfo > .nlux-comp-avatar {
border-color: var(--nlux-aiMsg--brdClr);
> .nlux-comp-avatarContainer > .nlux-comp-avatarPicture {
background-color: var(--nlux-aiMsg--bgClr);
}
}
}