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

155 lines
2.9 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;
li.message {
margin: @line-height-computed / 2;
.date {
font-size: 12px;
color: @gray-light;
border-bottom: 1px solid @gray-lightest;
margin-bottom: @line-height-computed / 2;
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;
color: @gray-light;
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;
box-shadow: -1px 2px 3px #ddd;
border-raduis: @border-radius-base;
position: relative;
.message-content {
padding: @line-height-computed / 2;
overflow-x: auto;
}
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;
background-color: @gray-lightest;
padding: @line-height-computed / 4;
border-top: 1px solid @toolbar-border-color;
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;
border: 1px solid @toolbar-border-color;
height: 100%;
width: 100%;
color: @gray-dark;
font-size: 14px;
padding: @line-height-computed / 4;
}
}
}
.break-word {
word-break: break-all;
}
.editor-dark {
.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
}