691 lines
12 KiB
SCSS
691 lines
12 KiB
SCSS
$chat-max-width: 696px;
|
|
$time-background: rgba(0, 0, 0, .35);
|
|
|
|
#bubble-contextmenu > div {
|
|
padding: 0 84px 0 16px;
|
|
}
|
|
|
|
#topbar {
|
|
width: 100%;
|
|
background-color: #fff;
|
|
box-sizing: border-box;
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
display: flex;
|
|
align-items: center;
|
|
box-shadow: 0 1px 2px 0 rgba(16, 35, 47, .07);
|
|
padding: .5rem 15px;
|
|
flex: 0 0 auto; /* Forces side columns to stay same width */
|
|
min-height: 61px;
|
|
max-height: 61px;
|
|
border-bottom: 1px solid #DADCE0;
|
|
|
|
/* & > * {
|
|
margin: 0 2px;
|
|
} */
|
|
|
|
.chat-more-button {
|
|
margin-left: 8px;
|
|
|
|
.btn-menu {
|
|
top: calc(100% + 7px);
|
|
}
|
|
}
|
|
|
|
.chat-info {
|
|
flex-grow: 1;
|
|
}
|
|
|
|
.content {
|
|
flex: 1;
|
|
padding-left: 17px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
.person {
|
|
display: flex;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
margin-left: 4px;
|
|
|
|
&:hover {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.bottom {
|
|
font-size: 14px;
|
|
line-height: 18px;
|
|
color: #707579;
|
|
|
|
.online {
|
|
color: $color-blue;
|
|
}
|
|
}
|
|
}
|
|
|
|
#im-avatar {
|
|
width: 44px;
|
|
height: 44px;
|
|
line-height: 44px;
|
|
}
|
|
}
|
|
|
|
#chat-input {
|
|
display: flex;
|
|
align-items: center;
|
|
width: 100%;
|
|
max-width: $chat-max-width;
|
|
padding-top: .35rem;
|
|
padding-bottom: 21px;
|
|
justify-content: space-between;
|
|
flex: 0 0 auto; /* Forces side columns to stay same width */
|
|
position: relative;
|
|
|
|
#input-message {
|
|
background: none;
|
|
border: none;
|
|
width: 100%;
|
|
font-size: 16px;
|
|
padding: 10px 9px;
|
|
/* height: 100%; */
|
|
max-height: 30rem;
|
|
overflow-y: none;
|
|
resize: none;
|
|
border: none;
|
|
outline: none;
|
|
cursor: text;
|
|
}
|
|
|
|
[contenteditable=true]:empty:before {
|
|
content: attr(data-placeholder);
|
|
color: #a2acb4;
|
|
display: block; /* For Firefox By Ariel Flesler */
|
|
}
|
|
|
|
#btn-record-cancel {
|
|
visibility: hidden;
|
|
opacity: 0;
|
|
transition: width .1s .1s, margin-right .1s .1s, visibility 0s .1s, opacity .1s 0s;
|
|
padding: 0;
|
|
z-index: 3;
|
|
}
|
|
|
|
.btn-send-container {
|
|
flex: 0 0 auto;
|
|
position: relative;
|
|
align-self: flex-end;
|
|
z-index: 2;
|
|
}
|
|
|
|
#btn-send {
|
|
color: #9e9e9e;
|
|
|
|
&.tgico-send {
|
|
color: $color-blue;
|
|
}
|
|
}
|
|
|
|
#btn-record-cancel, #btn-send {
|
|
font-size: 1.5rem;
|
|
line-height: 1.5rem;
|
|
background-color: #fff;
|
|
}
|
|
|
|
.record-time {
|
|
height: 44px;
|
|
line-height: 44px;
|
|
display: none;
|
|
|
|
&:after {
|
|
content: " ";
|
|
width: 10px;
|
|
height: 10px;
|
|
background-color: #e53935;
|
|
border-radius: 50%;
|
|
margin: 0 .5rem;
|
|
display: inline-block;
|
|
animation: recordBlink 1.25s infinite;
|
|
}
|
|
}
|
|
|
|
.record-ripple {
|
|
border-radius: 50%;
|
|
background-color: rgba(0, 0, 0, .2);
|
|
width: 150px;
|
|
height: 150px;
|
|
transform: scale(0);
|
|
position: absolute;
|
|
top: -48px;
|
|
left: -48px;
|
|
transition: transform .03s, visibility .1s;
|
|
visibility: hidden;
|
|
}
|
|
|
|
&.is-recording {
|
|
#btn-record-cancel {
|
|
opacity: 1;
|
|
visibility: visible;
|
|
margin-right: .5rem;
|
|
transition: width .1s, margin-right .1s, visibility 0s .1s, opacity .1s .1s;
|
|
}
|
|
|
|
#attach-file {
|
|
display: none;
|
|
}
|
|
|
|
.record-time {
|
|
display: block;
|
|
}
|
|
|
|
.record-ripple {
|
|
transition: transform .03s, visibility 0s;
|
|
visibility: visible;
|
|
}
|
|
}
|
|
|
|
&:not(.is-recording) {
|
|
#btn-record-cancel {
|
|
margin-right: 0;
|
|
width: 0px;
|
|
}
|
|
}
|
|
}
|
|
|
|
@keyframes recordBlink {
|
|
0% {
|
|
opacity: 1;
|
|
}
|
|
|
|
50% {
|
|
opacity: .2;
|
|
}
|
|
|
|
100% {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
#im-title {
|
|
cursor: pointer;
|
|
|
|
span.emoji {
|
|
vertical-align: inherit;
|
|
}
|
|
}
|
|
|
|
.chat-container {
|
|
display: flex;
|
|
// padding: 200px;
|
|
width: 100%;
|
|
align-items: center;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
flex-direction: column;
|
|
position: relative;
|
|
/* background-image: url('../../../public/assets/img/camomile.jpg'); */
|
|
background-image: url('../../../public/assets/img/camomile_blurred.jpg');
|
|
background-size: cover;
|
|
background-position: center center;
|
|
|
|
/* .chat-background, #chat-closed {
|
|
position: absolute;
|
|
/* left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%; *
|
|
left: -1%;
|
|
top: -1%;
|
|
width: 102%;
|
|
height: 102%;
|
|
background-image: url('../../../public/assets/img/camomile.jpg');
|
|
background-size: cover;
|
|
background-position: center center;
|
|
display: none;
|
|
} */
|
|
|
|
#chat-background-canvas {
|
|
display: none;
|
|
}
|
|
|
|
/* #chat-closed {
|
|
z-index: 3;
|
|
}
|
|
|
|
> *:not(.chat-background) {
|
|
z-index: 2;
|
|
} */
|
|
|
|
.input-message {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
width: calc(100% - 3.75rem);
|
|
justify-content: center;
|
|
background-color: #fff;
|
|
border-radius: 12px;
|
|
border-bottom-right-radius: 0;
|
|
box-shadow: 0 1px 2px 0 rgba(16, 35, 47, 0.07);
|
|
margin-right: 9px;
|
|
padding: 4.5px .5rem;
|
|
/* padding: 3px .5rem 6px .5rem; */
|
|
min-height: 54px;
|
|
max-height: 30rem;
|
|
caret-color: $button-primary-background;
|
|
flex: 1;
|
|
position: relative;
|
|
z-index: 3;
|
|
|
|
&:after {
|
|
position: absolute;
|
|
bottom: -1px;
|
|
width: 11px;
|
|
height: 20px;
|
|
background-repeat: no-repeat repeat;
|
|
content: '';
|
|
background-size: 11px 20px;
|
|
right: -9px;
|
|
background-image: url('../../assets/img/msg-tail-left.svg');
|
|
transform: scaleX(-1);
|
|
}
|
|
|
|
#attach-file {
|
|
&.menu-open {
|
|
color: $color-blue;
|
|
background-color: transparent;
|
|
}
|
|
|
|
.btn-menu {
|
|
padding: 8px 0;
|
|
right: -8px;
|
|
bottom: calc(100% + 16px);
|
|
|
|
> div {
|
|
padding: 0 38px 0 16px;
|
|
}
|
|
}
|
|
}
|
|
|
|
> div {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
width: 100%;
|
|
//min-height: inherit;
|
|
}
|
|
|
|
.reply-wrapper {
|
|
justify-content: flex-start;
|
|
overflow: hidden;
|
|
transition: .2s all;
|
|
height: 0px;
|
|
|
|
&.active {
|
|
height: 39px;
|
|
}
|
|
|
|
.reply {
|
|
width: 100%;
|
|
margin-left: .5rem;
|
|
min-height: 35px;
|
|
}
|
|
}
|
|
|
|
.new-message-wrapper {
|
|
//padding: 4.5px 0;
|
|
//padding-bottom: 4.5px;
|
|
align-items: flex-end;
|
|
|
|
.btn-icon:before {
|
|
vertical-align: bottom;
|
|
}
|
|
}
|
|
|
|
.input-message-container {
|
|
width: 1%;
|
|
max-height: inherit;
|
|
flex: 1 1 auto;
|
|
position: relative;
|
|
overflow: hidden;
|
|
|
|
> .scrollable {
|
|
position: relative;
|
|
}
|
|
}
|
|
|
|
.btn-icon {
|
|
display: block;
|
|
transition: .2s color;
|
|
flex: 0 0 auto;
|
|
|
|
font-size: 24px;
|
|
line-height: 24px;
|
|
padding: 10px 7px 9px 7.5px;
|
|
color: #8d969c;
|
|
|
|
&.active {
|
|
color: $color-blue;
|
|
}
|
|
}
|
|
|
|
.emoji {
|
|
font-size: 24px;
|
|
height: 24px;
|
|
width: 24px;
|
|
}
|
|
}
|
|
|
|
.pinned-message, .reply {
|
|
cursor: pointer;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
overflow: hidden;
|
|
box-sizing: border-box;
|
|
width: 187px;
|
|
margin-right: 1rem;
|
|
max-height: 35px;
|
|
position: relative;
|
|
/* padding: .25rem; */
|
|
|
|
&.is-reply-media {
|
|
.pinned-message-content, .reply-content {
|
|
padding-left: 40px;
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
background-color: rgba(112, 117, 121, 0.08);
|
|
}
|
|
|
|
&-border {
|
|
height: 32px;
|
|
border-radius: 1px;
|
|
min-width: 2px;
|
|
background: $color-blue;
|
|
}
|
|
|
|
&-content {
|
|
margin-left: 8px;
|
|
flex-grow: 1;
|
|
flex-shrink: 1;
|
|
overflow: hidden;
|
|
pointer-events: none;
|
|
position: relative;
|
|
height: 32px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
&-title {
|
|
color: $color-blue;
|
|
}
|
|
|
|
&-title, &-subtitle {
|
|
font-size: 14px;
|
|
//line-height: 18px;
|
|
//line-height: 1;
|
|
line-height: 15px;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
&-subtitle {
|
|
white-space: nowrap;
|
|
color: #111;
|
|
}
|
|
|
|
&-media {
|
|
height: 32px;
|
|
width: 32px;
|
|
border-radius: 8px;
|
|
overflow: hidden;
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
background-position: center center;
|
|
}
|
|
|
|
i {
|
|
font-style: normal;
|
|
color: $color-blue;
|
|
}
|
|
|
|
img.emoji {
|
|
height: 16px;
|
|
width: 16px;
|
|
vertical-align: top;
|
|
}
|
|
|
|
span.emoji {
|
|
font-size: 16px;
|
|
vertical-align: unset;
|
|
}
|
|
}
|
|
|
|
/* #chat-closed {
|
|
position: absolute;
|
|
left: 0;
|
|
top: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: inherit;
|
|
z-index: 3;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
flex-direction: column;
|
|
|
|
|
|
.tgico-chatsplaceholder {
|
|
font-size: 10rem;
|
|
color: #ABB0B3;
|
|
}
|
|
|
|
h3 {
|
|
font-size: 2rem;
|
|
color: #707579;
|
|
text-align: center;
|
|
}
|
|
|
|
.buttons {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-top: 1rem;
|
|
|
|
button {
|
|
margin: 0 2.5rem;
|
|
width: 4rem;
|
|
height: 4rem;
|
|
background: #fff;
|
|
border: none;
|
|
position: relative;
|
|
font-size: 2rem;
|
|
color: #707579;
|
|
cursor: pointer;
|
|
|
|
box-shadow: 0 1px 2px 0 rgba(16, 35, 47, 0.07);
|
|
|
|
&:hover {
|
|
background: #4EA4F6;
|
|
color: #fff;
|
|
|
|
span {
|
|
color: #4EA4F6;
|
|
}
|
|
}
|
|
|
|
span {
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 50%;
|
|
width: 100%;
|
|
padding-top: 1rem;
|
|
transform: translateX(-50%);
|
|
font-size: .9rem;
|
|
font-family: "Roboto";
|
|
}
|
|
}
|
|
}
|
|
} */
|
|
}
|
|
|
|
#bubbles {
|
|
/* overflow-y: scroll;
|
|
scrollbar-width: none;
|
|
-ms-overflow-style: none; */
|
|
width: 100%;
|
|
height: 100%;
|
|
max-height: 100%;
|
|
flex: 1 1 auto; /* Lets middle column shrink/grow to available width */
|
|
overflow: hidden;
|
|
position: relative;
|
|
padding: 0 .5rem;
|
|
|
|
> .scrollable {
|
|
//position: unset;
|
|
|
|
height: auto;
|
|
/* position: absolute;
|
|
bottom: 0;
|
|
left: 0; */
|
|
//position: relative; // неизвестно зачем это было
|
|
|
|
//display: flex; // for end
|
|
//flex-direction: unset;
|
|
display: block;
|
|
|
|
|
|
/* display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-end; */
|
|
}
|
|
|
|
&:not(.scrolled-down) {
|
|
-webkit-mask-image: -webkit-linear-gradient(bottom, transparent, #000 20px);
|
|
mask-image: linear-gradient(0deg, transparent 0, #000 20px);
|
|
|
|
#bubbles-go-down {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
.preloader {
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
svg {
|
|
width: 50px;
|
|
height: 50px;
|
|
}
|
|
|
|
&-container .preloader-circular {
|
|
background-color: $time-background;
|
|
}
|
|
}
|
|
}
|
|
|
|
#bubbles-inner {
|
|
//max-width: 700px;
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
flex-shrink: 1;
|
|
//padding-top: 9px;
|
|
margin: 0 auto;
|
|
box-sizing: border-box;
|
|
min-height: 100%;
|
|
justify-content: flex-end;
|
|
//flex: 1;
|
|
|
|
&.is-chat {
|
|
.is-in .bubble__container {
|
|
margin-left: 3rem;
|
|
}
|
|
}
|
|
|
|
&.is-channel:not(.is-chat) {
|
|
.bubble__container {
|
|
max-width: 100%;
|
|
}
|
|
|
|
&:not(.has-rights) {
|
|
padding-bottom: 55px;
|
|
}
|
|
}
|
|
|
|
&:not(.is-channel), &.is-chat {
|
|
.message {
|
|
max-width: 480px;
|
|
}
|
|
}
|
|
|
|
&.is-scrolling .is-sticky {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
|
|
#bubbles-go-down {
|
|
position: absolute;
|
|
//opacity: 0;
|
|
background-color: #fff;
|
|
border-radius: 50%;
|
|
width: 3.25rem;
|
|
height: 3.25rem;
|
|
color: $placeholder-color;
|
|
font-size: 30px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
right: 17.5px;
|
|
bottom: 17.5px;
|
|
cursor: pointer;
|
|
opacity: 0;
|
|
transition: .2s opacity;
|
|
user-select: none;
|
|
-webkit-user-select: none;
|
|
|
|
&:before {
|
|
margin-left: .75px;
|
|
}
|
|
}
|
|
|
|
.popup {
|
|
&.popup-delete-message {
|
|
.popup-header {
|
|
margin-bottom: 1rem;
|
|
}
|
|
}
|
|
|
|
.popup-buttons {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: flex-end;
|
|
align-items: flex-end;
|
|
|
|
button {
|
|
background: none;
|
|
outline: none;
|
|
border: none;
|
|
padding: .5rem;
|
|
text-transform: uppercase;
|
|
transition: .2s;
|
|
border-radius: $border-radius;
|
|
cursor: pointer;
|
|
color: $color-blue;
|
|
|
|
&:hover {
|
|
background-color: rgba(112, 117, 121, 0.08);
|
|
}
|
|
|
|
& + button {
|
|
margin-top: .5rem;
|
|
}
|
|
}
|
|
}
|
|
}
|