139 lines
2.3 KiB
Stylus
139 lines
2.3 KiB
Stylus
[data-component='ChatWidget'] {
|
|
position: absolute;
|
|
bottom: 0;
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin: 0 10px 10px 0;
|
|
max-width: 300px;
|
|
right: 0;
|
|
width: 90vw;
|
|
z-index: 9999;
|
|
|
|
> .launcher {
|
|
align-self: flex-end;
|
|
margin-top: 10px;
|
|
background-position: center;
|
|
background-size: 70%;
|
|
background-repeat: no-repeat;
|
|
background-color: rgba(#fff, 0.3);
|
|
background-image: url('/resources/images/chat-icon.svg');
|
|
cursor: pointer;
|
|
transition-property: opacity, background-color;
|
|
transition-duration: 0.15s;
|
|
border-radius: 100%;
|
|
height: 45px;
|
|
width: 45px;
|
|
position: relative;
|
|
|
|
&.focus {
|
|
outline: none;
|
|
}
|
|
|
|
&.on {
|
|
background-color: rgba(#fff, 0.7);
|
|
}
|
|
|
|
&.disabled {
|
|
pointer-events: none;
|
|
opacity: 0.5;
|
|
}
|
|
> .badge{
|
|
border-radius: 50%;
|
|
padding: 0.7vmin;
|
|
top: -1vmin;
|
|
font-size: 1.5vmin;
|
|
left: -1vmin;
|
|
background: rgba(255,0,0,0.9);
|
|
color: #fff;
|
|
font-weight: bold;
|
|
position: absolute;
|
|
}
|
|
}
|
|
}
|
|
|
|
[data-component='Conversation'] {
|
|
border-radius: 5px;
|
|
box-shadow: 0px 2px 10px 1px #000;
|
|
}
|
|
|
|
[data-component='Chat'] {
|
|
height: 100%;
|
|
}
|
|
|
|
[data-component='MessageList'] {
|
|
background-color: rgba(#fff, 0.9);
|
|
height: 91vmin;
|
|
overflow-y: scroll;
|
|
padding-top: 5px;
|
|
border-radius: 5px 5px 0px 0px;
|
|
|
|
> .message {
|
|
margin: 5px;
|
|
display: flex;
|
|
word-wrap: break-word;
|
|
color: rgba(#000, 1.0)
|
|
|
|
> .client {
|
|
background-color: rgba(#fff, 0.9);
|
|
border-radius: 5px;
|
|
padding: 6px;
|
|
max-width: 215px;
|
|
text-align: left;
|
|
margin-left: auto;
|
|
|
|
> .message-text {
|
|
font-size: 1.3vmin;
|
|
color: rgba(#000, 1.0);
|
|
}
|
|
|
|
> .message-time {
|
|
font-size: 1vmin;
|
|
color: rgba(#777, 1.0)
|
|
}
|
|
}
|
|
|
|
> .response {
|
|
background-color: rgba(#fff, 0.9);
|
|
border-radius: 5px;
|
|
padding: 6px;
|
|
max-width: 215px;
|
|
text-align: left;
|
|
font-size: 1.3vmin;
|
|
|
|
> .message-text {
|
|
font-size: 1.3vmin;
|
|
color: rgba(#000, 1.0);
|
|
}
|
|
|
|
> .message-time {
|
|
font-size: 1vmin;
|
|
color: rgba(#777, 1.0);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
[data-component='Sender'] {
|
|
align-items: center;
|
|
display: flex;
|
|
background-color: rgba(#fff, 0.9);
|
|
height: 6vmin;
|
|
padding: 0.5vmin;
|
|
border-radius: 0 0 5px 5px;
|
|
|
|
> .new-message {
|
|
width: 100%;
|
|
border: 0;
|
|
border-radius: 5px;
|
|
background-color: rgba(#fff, 0.9);
|
|
color: #000;
|
|
height: 30px;
|
|
padding-left: 10px;
|
|
font-size: 1.4vmin;
|
|
|
|
&.focus {
|
|
outline: none;
|
|
}
|
|
}
|
|
}
|