* {
margin: 0;
padding: 0;
font-family: Segoe UI,Helvetica Neue,Helvetica,Lucida Grande,Arial,Ubuntu,Cantarell,Fira Sans,sans-serif;
}
body {
background-color: #0e1315;
}
header {
display: flex;
width: 100%;
height: 59px;
background-color: #2a2f32;
}
.icon {
margin-left: 10px;
float: right;
padding: 8px;
cursor: pointer;
}
.main {
display: flex;
height: calc(100vh - 59px);
}
.user-menu {
max-width: 421px;
min-width: 421px;
width: 100%;
height: 100%;
padding: 10px 16px;
color: #b1b3b5;
box-sizing: border-box;
border-right: 1px solid #404447;
}
.chats {
flex: 0 100%;
height: 100%;
max-width: 420px;
min-width: 420px;
background-color: #131c21;
border-right: 1px solid #404447;
}
.current {
height: 100%;
flex: 1 auto;
min-width: 524px;
background-color: #0d1418;
background-repeat: repeat;
}
.current-chat {
width: 100%;
overflow-y: auto;
position: relative;
background-image: url('../background.png');
height: calc(100% - 62px);
}
.current-chat::-webkit-scrollbar{
width: 7px;
background-color: rgba(0, 0, 0, 0);
}
.current-chat::-webkit-scrollbar-thumb {
background-color: #323739;
opacity: 0.5;
}
.current-chat-input {
width: 100%;
height: 62px;
box-sizing: border-box;
display: flex;
padding: 5px 10px;
background-color: #1e2428;
}
.chat {
cursor: pointer;
display: flex;
flex-flow: row wrap;
height: 72px;
}
.chat:hover{
background-color: #2d3134;
}
.active {
background-color: #323739;
}
.active:hover {
background-color: #323739;
}
.search {
display: flex;
height: 48px;
border-bottom: 1px solid #242d32;
}
.search-input {
margin: auto;
width: 100%;
height: 35px;
border-radius: 18px;
background-color: #323739;
}
.avatar {
padding: 12px 15px 12px 13px;
width: 49px;
}
.avatar img{
width: 49px;
height: 49px;
border-radius: 50%;
}
.name {
color: #d4d5d7;
flex: 1 auto;
border-top: 1px solid #30383d;
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: center;
padding-right: 15px;
}
.first {
border-top: 0;
}
.contact-header {
flex: 1 auto;
display: flex;
position: relative;
flex-flow: row wrap;
padding: 10px 16px;
min-width: 524px;
}
.typing {
font-size: 12px;
display: none;
color: rgba(241,241,242,0.92);
}
.contact-header-name {
font-weight: 500;
display: flex;
flex-direction: column;
justify-content: center;
color: rgba(241,241,242,0.92);
}
.msg {
display: flex;
padding: 0 20px;
margin-bottom: 20px;
word-wrap: break-word;
}
.msg-from {
background-color: #262d31;
padding: 6px 82px 8px 9px;
color: rgba(241,241,242,0.95);
font-size: 14.2px;
line-height: 19px;
max-width: 30%;
margin-right: auto;
border-radius: 0 7.5px 7.5px 7.5px;
}
.messages {
margin-top: 20px;
width: 100%;
/* position: absolute; */
/* overflow: auto; */
bottom: 20px;
}
.msg-to {
background-color: #056162;
margin-left: auto;
padding: 6px 82px 8px 9px;
max-width: 30%;
color: rgba(241,241,242,0.95);
font-size: 14.2px;
line-height: 19px;
border-radius: 7.5px 0 7.5px 7.5px;
}
.longText {
position: relative;
}
.longText:before {
content:"Нажмите, чтобы развернуть";
position: absolute;
bottom: 0;
width: 90%;
height: 60px;
color: #fff;
line-height: 66px;
text-align: center;
background: linear-gradient(to top, #262d31, transparent);
}
#return-back {
display: none;
margin-right: 7px;
width: 20px;
}
.strelka-left-3 {
transform: rotate(180deg);
fill: #b1b3b5;
}
@media screen and (max-width: 768px){
#return-back{
display: block;
}
.contact-header {
display: none;
}
.current {
display: none;
}
.chats {
max-width: 100%;
min-width: 320px;
}
.user-menu {
max-width: 100%;
min-width: 320px;
}
.longText:before {
line-height: normal;
}
.contact-header {
min-width: 0;
}
#header-buttons {
font-size: 14px;
bottom: 4px;
}
}