overleaf/services/web/public/stylesheets/app/editor/chat.less

163 lines
3.2 KiB
Text
Raw Normal View History

2014-07-02 10:56:09 -04:00
@new-message-height: 80px;
2016-10-11 09:24:01 -04:00
#chat-wrapper {
> .ui-layout-resizer > .ui-layout-toggler {
display: none !important;
}
}
2014-07-02 10:56:09 -04:00
.chat {
2014-07-15 13:25:12 -04:00
.loading {
font-family: @font-family-serif;
padding: @line-height-computed / 2;
text-align: center;
}
2014-07-21 07:19:13 -04:00
.no-messages {
padding: @line-height-computed / 2;
}
.first-message {
position: absolute;
bottom: 0;
width: 100%;
padding: @line-height-computed / 2;
}
2014-07-02 10:56:09 -04:00
.messages {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: @new-message-height;
overflow-x: hidden;
2017-12-13 06:38:57 -05:00
background-color: @chat-bg;
2014-07-02 10:56:09 -04:00
li.message {
margin: @line-height-computed / 2;
.date {
font-size: 12px;
2017-12-13 09:01:46 -05:00
color: @chat-message-date-color;
margin-bottom: @line-height-computed / 2;
2017-12-13 09:01:46 -05:00
text-align: right;
}
.date when (@is-overleaf = false) {
border-bottom: 1px solid @gray-lightest;
text-align: center;
}
2014-07-02 10:56:09 -04:00
.avatar {
margin-top: 14px;
float: left;
width: 50px;
height: 50px;
border-radius: 50%;
overflow: hidden;
img {
width: 100%;
}
}
.message-wrapper {
margin-left: 50px + @line-height-computed/2;
2014-07-02 10:56:09 -04:00
.name {
font-size: 12px;
2017-12-13 09:01:46 -05:00
color: @chat-message-name-color;
2014-07-02 10:56:09 -04:00
margin-bottom: 4px;
2015-02-05 08:05:57 -05:00
min-height: 16px;
2014-07-02 10:56:09 -04:00
}
.message {
border-left: 3px solid transparent;
font-size: 14px;
2017-12-13 06:38:57 -05:00
box-shadow: @chat-message-box-shadow;
border-radius: @chat-message-border-radius;
position: relative;
.message-content {
2017-12-19 05:51:49 -05:00
padding: @chat-message-padding;
overflow-x: auto;
2017-12-13 09:01:46 -05:00
color: @chat-message-color;
2017-12-19 05:51:49 -05:00
font-weight: @chat-message-weight;
}
2014-07-02 10:56:09 -04:00
.arrow {
right: 100%;
top: @line-height-computed / 4;
border: solid;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
border-top-color: transparent !important;
border-bottom-color: transparent !important;
border-width: 10px;
}
}
p {
margin-bottom: @line-height-computed / 4;
&:last-child {
margin-bottom: 0;
}
}
2014-07-02 10:56:09 -04:00
}
&:not(.self) {
.message {
.arrow {
border-left-color: transparent !important;
}
}
}
&.self {
margin-top: @line-height-computed;
.avatar {
display: none;
}
.message-wrapper .message {
border-left: none;
border-right: 3px solid transparent;
.arrow {
left: 100%;
right: auto;
border-right-color: transparent !important;
}
}
}
}
}
.new-message {
.full-size;
top: auto;
height: @new-message-height;
2017-12-13 06:38:57 -05:00
background-color: @chat-new-message-bg;
2014-07-02 10:56:09 -04:00
padding: @line-height-computed / 4;
2017-11-13 07:03:28 -05:00
border-top: 1px solid @editor-border-color;
2014-07-02 10:56:09 -04:00
textarea {
2014-07-21 07:44:48 -04:00
overflow: auto;
resize: none;
2014-07-02 10:56:09 -04:00
border-radius: @border-radius-base;
2017-11-13 07:03:28 -05:00
border: 1px solid @editor-border-color;
2014-07-02 10:56:09 -04:00
height: 100%;
width: 100%;
2017-12-13 09:18:25 -05:00
color: @chat-new-message-textarea-color;
2014-07-02 10:56:09 -04:00
font-size: 14px;
padding: @line-height-computed / 4;
2017-12-13 09:18:25 -05:00
background-color: @chat-new-message-textarea-bg;
2014-07-02 10:56:09 -04:00
}
}
}
.break-word {
word-break: break-all;
}
.editor-dark when (@is-overleaf = false) {
.chat {
.new-message {
background-color: lighten(@editor-dark-background-color, 10%);
border-color: @editor-dark-toolbar-border-color;
}
}
2014-07-02 10:56:09 -04:00
}