ꦫꦣꦺꦤ꧀ꦄꦤ꧀ꦠꦱꦺꦤ

PATH: home / lab2454c / keebchat.com / themes / default / statics / scss / apps / conversation

// @*************************************************************************@
// @ @author Mansur Altamirov (Mansur_TL)									 @
// @ @author_url 1: https://www.instagram.com/mansur_tl                      @
// @ @author_url 2: http://codecanyon.net/user/mansur_tl                     @
// @ @author_email: highexpresstore@gmail.com                                @
// @*************************************************************************@
// @ ColibriSM - The Ultimate Modern Social Media Sharing Platform           @
// @ Copyright (c) 21.03.2020 ColibriSM. All rights reserved.                @
// @*************************************************************************@

@import '../main-variables';

body.cl-app-conversation{
	main.main-content-container{
		div.main-content-container-inner{
			height: 100vh !important;
			padding-bottom: 0px !important;

div.timeline-container-inner{
				height: 100%;
				
				div.timeline-container{
					height: 100%;

div.timeline-container-inner{
						width: 100%;
						height: 100%;
						display: flex;
						flex-direction: column;
						flex-wrap: nowrap;
						overflow: hidden;

div.timeline-header{
							div.lp{
								div.profile-name-holder{
									display: block;
									align-items: center;
									line-height: 0px;
									padding: 0;
									margin: 0;

h5{
										padding: 0;
										margin: 0;
										font-size: 14px;
										color: $black;
										font-weight: 700;
										line-height: 18px;

span{
											color: inherit;
											font-size: inherit;
											line-height: inherit;
											font-weight: inherit;
										}
									}

span{
										padding: 0;
										margin: 0;
										font-size: 13px;
										color: $grey;
										font-weight: 400;
										line-height: 18px;
										display: inline-block;

&.online{
											position: relative;

&:after{
												position: absolute;
												content: "";
												width: 10px;
												height: 10px;
												border-radius: 10em;
												background: $green;
												right: -15px;
												top: 5px;
											}
										}
									}
								}
							}
						}

div.vue-app-body{
							width: 100%;
							flex: 1;
							overflow: hidden;

div.vue-app-body-inner{
								width: 100%;
								height: 100%;
								display: flex;
								flex-direction: column;
								flex-wrap: nowrap;
								overflow: hidden;

div.conversation--search-form-wrapper{
									width: 100%;
									line-height: 0px;

form{
										width: 100%;
										display: flex;
										flex-direction: row;
										flex-wrap: nowrap;
										align-items: center;
										justify-content: space-between;
										padding: 15px;
										border-bottom: 1px solid $border;

div.keyword-input{
											flex: 1;
											line-height: 0px;
											position: relative;
											margin-right: 10px;
											margin-left: 15px;
											
											input{
												border: 1px solid $border;
												background: rgb(230, 236, 240);
												border-radius: 10em;
												padding: 0 0 3px 40px;
												height: 40px;
												font-size: 13px;
												color: $black;
												width: 100%;

&::placeholder{
													color: $pl_holder;
													font-size: 12px;
												}

&:active,&:hover,&:focus{
													box-shadow: none;
													outline: none;
													border: 2px solid $blue;

&  + span.icon svg{
														stroke: $blue;
														opacity: 1;
													}
												}
											}

span.icon{
												position: absolute;
												left: 12px;
												top: 10px;
												text-decoration: none;
												line-height: 0px;
												z-index: 2;
												width: 22px;
												height: 22px;

svg{
													width: 100%;
													height: 100%;
													stroke: $grey;
													opacity: 0.8;
												}
											}

span.spinner-icon{
												position: absolute;
												right: 12px;
												top: 7px;
												text-decoration: none;
												line-height: 0px;
												z-index: 2;
												width: 22px;
												height: 22px;

svg{
													width: 100%;
													height: 100%;
												}
											}
										}

div.interlocutor-info-holder{
											a{
												img{
													width: 30px;
													height: 30px;
													border-radius: 10em;
												}
											}
										}
										
										div.dropdown-menu-holder{
											button.dropdown-toggle{
												line-height: 0px;
												padding: 0;
												background: transparent;
												height: 35px;
												width: 35px;
												border: none;
												box-shadow: none;
												outline: 0;
												position: relative;
												cursor: pointer;

svg{
													position: absolute;
													width: 20px;
													height: 20px;
													left: 0;
													top: 0;
													bottom: 0;
													right: 0;
													margin: auto;
													stroke: $blue;
												}

&:after,&:before{
													display: none !important;
												}
											}

div.dropdown-menu{
												a{
													cursor: pointer;
												}
											}
										}
									}
								}

div.conversation--messages-list-wrapper{
									flex: 1;
									display: flex;
									flex-direction: column;
									flex-wrap: nowrap;
									line-height: 0px;
									overflow: hidden;

div.conversation--messages-list{
										width: 100%;
										height: 100%;
										line-height: 0px;
										background: #fff;
										overflow-x: hidden;
										overflow-y: auto;
										padding: 7px 0px;
										background-repeat: repeat;

div.conversation--messages-list-item{
											width: 100%;
											display: flex;
											flex-direction: row;
											flex-wrap: nowrap;
											align-items: center;
											padding: 7px 15px;

&.active-sqm{
												background: #f2f6fa;
											}

div.dropdown-menu-holder{
												margin-top: -20px;
												display: none;
												opacity: 0;
												visibility: hidden;
												transition: all 0.40s ease;

button.dropdown-toggle{
													line-height: 0px;
													padding: 0;
													background: #ebf2f6;
													height: 35px;
													width: 35px;
													border: none;
													box-shadow: none;
													outline: 0;
													position: relative;
													cursor: pointer;
													border-radius: 10em;

svg{
														position: absolute;
														width: 20px;
														height: 20px;
														left: 0;
														top: 0;
														bottom: 0;
														right: 0;
														margin: auto;
														stroke: $blue;
													}

&:after,&:before{
														display: none !important;
													}
												}

div.dropdown-menu{
													position: absolute;
													z-index: 10;
													a{
														cursor: pointer;
													}
												}
											}

&:last-child{
												margin-bottom: 0px;
											}

&:hover,&:active{
												div.dropdown-menu-holder{
													visibility: visible;
													display: inherit;
													opacity: 1;
												}
											}

div.message-data{
												max-width: 80%;
												width: auto;
												flex-basis: auto;
												
												p.message-text{
													padding: 10px;
													font-size: 13px;
													line-height: 20px;
													color: $black;
													font-weight: 400;
													margin: 0;
												}

div.message-media{
													line-height: 0px;
													display: block;
													width: 100%;

a.image-wrapper{
														display: inline-block;
														width: auto;
														overflow: hidden;
														border-radius: 5px;
														border: 3px solid #eee;
														img{
															max-width: 300px;
															object-fit: cover;
														}
													}
												}

div.message-time{
													width: 100%;
													display: block;
													line-height: 0px;

time{
														font-size: 10px;
														color: $grey;
														line-height: 20px;
													}
												}
											}

&.left{
												div.message-data{
													margin-right: 15px;
													p.message-text{
														background: #f1f1f1;
														border-top-right-radius: 1em;
														border-bottom-right-radius: 1em;
														border-bottom-left-radius: 1em;
														border: 1px solid #eae8e8;
													}

div.message-time{
														text-align: left;
													}
												}
											}

&.right{
												flex-direction: row-reverse;
												div.message-data{
													margin-left: 15px;
													p.message-text{
														background: $blue;
														border-top-right-radius: 0px;
														border-bottom-right-radius: 1em;
														border-bottom-left-radius: 1em;
														border-top-left-radius: 1em;
														border: 1px solid #3690d9;
														color: #fff;

a.inline-link{
															color: #fff !important;
														}
													}

div.message-time{
														text-align: right;
													}
												}
											}
										}

div.empty-search-result{
											width: 100%;
											height: 100%;
											line-height: 0;
											display: flex;
											flex-direction: row;
											flex-wrap: nowrap;
											align-items: center;
											justify-content: center;

span{
												background-color: rgba(0, 0, 0, 0.20);
												padding: 5px 20px;
												line-height: 18px;
												color: #fff;
												font-size: 13px;
												border-radius: 5em;
												max-width: 240px;
												box-shadow: $btn_shadow;
											}
										}

&::-webkit-scrollbar-track{
											background-color: #e6ecf0;
										}

&::-webkit-scrollbar{
											width: 5px;
											background-color: #e6ecf0;

}

&::-webkit-scrollbar-thumb{
											background-color: #d1d1d1;
											border: 0px;
											border-radius: 0px;
										}
									}
								}

div.conversation--messages-form-wrapper{
									width: 100%;
									display: block;
									line-height: 0px;
									border-top: 2px solid $border;

form.form{
										width: 100%;
										display: block;
										line-height: 0px;

div.message-inputs-holder{
											width: 100%;
											display: flex;
											flex-direction: row;
											flex-wrap: nowrap;
											align-items: center;
											line-height: 0px;
											padding: 15px;

div.message-input{
												flex: 1;
												line-height: 0px;
												margin-left: 10px;
												margin-right: 10px;
												border-radius: 10em;

input{
													border: 1px solid $border;
													background: rgb(230, 236, 240);
													border-radius: 10em;
													padding: 0 20px 3px 20px;
													height: 40px;
													font-size: 13px;
													color: $black;

&::placeholder{
														color: $pl_holder;
														font-size: 13px;
													}

&:active,&:hover,&:focus{
														box-shadow: none;
														outline: none;
														border: 2px solid $blue;
													}
												}
											}

button.btn-inline-controls{
												line-height: 0px;
												padding: 0;
												background: transparent;
												height: 35px;
												width: 35px;
												border: none;
												box-shadow: none;
												outline: 0;
												position: relative;
												cursor: pointer;

&:disabled{
													cursor: default;
													opacity: 0.5;
												}

svg{
													position: absolute;
													width: 20px;
													height: 20px;
													left: 0;
													top: 0;
													bottom: 0;
													right: 0;
													margin: auto;
													stroke: $blue;
												}
											}
										}
									}

div.ghost-form{
										width: 100%;
										display: block;
										line-height: 0px;

div.message-input{
												flex: 1;
												line-height: 0px;
												overflow: hidden;
												margin-left: 10px;
												margin-right: 10px;
												border-radius: 10em;

input{
													border: 1px solid $border;
													background: rgb(230, 236, 240);
													border-radius: 5em;
													padding: 0 20px 3px 20px;
													height: 35px;
													font-size: 12px;
													color: $black;
													cursor: not-allowed;

&::placeholder{
														color: $pl_holder;
														font-size: 12px;
													}
												}
											}

button.btn-inline-controls{
												line-height: 0px;
												padding: 0;
												background: rgb(230, 236, 240);
												height: 30px;
												width: 30px;
												border: none;
												border-radius: 10em;
												box-shadow: none;
												outline: 0;
												position: relative;
												cursor: not-allowed;
											}
										}
									}

div.conversation--messages-search-results{
										display: block;
										width: 100%;
										height: 55px;
										background: #fff;

div.fc-row{
											width: 100%;
											height: 100%;
											line-height: 0px;
											padding: 15px;
											display: flex;
											flex-direction: row;
											flex-wrap: nowrap;
											align-items: center;
											justify-content: space-between;

div.lp{
												b{
													color: $blue;
													font-size: 13px;
													line-height: 13px;
													margin: 0;
													padding: 0;
												}

span{
													color: $blue;
													font-size: 13px;
													line-height: 13px;
													margin: 0 0 0 10px;
													padding: 0;
													text-transform: uppercase;
													font-weight: 400;
												}
											}

div.rp{
												button.sr-ctrls{
													background: transparent;
													border: none;
													outline: none;
													padding: 0px;
													margin: 0px;
													box-shadow: none;
													line-height: 0px;
													width: 35px;
													height: 35px;
													border-radius: 10em;
													position: relative;
													cursor: pointer;
													transition: all 0.10s ease-in-out;
													margin-left: 5px;

svg{
														width: 22px;
														height: 22px;
														stroke: $blue;
														position: absolute;
														left: 0;
														top: 0;
														bottom: 0;
														right: 0;
														margin: auto;
													}

&:hover,&:active,&:focus{
														background: #0074b01f;
													}

&:disabled{
														opacity: 0.5;
														cursor: default;
													}
												}
											}
										}
									}
								}
							}
						}	
					}
				}
			}

div.left-sb-container,div.right-sb-container{
				height: 100%;
				overflow-x: hidden;
				overflow-y: auto;
				scrollbar-width: none;
				-ms-overflow-style: none;
				&::-webkit-scrollbar{
					display: none;
				}
			}
		}
	}

div.mobile-bottom-navbar{
		display: none;
	}
}

[-] style.master.scss [edit]
[+] ..
[-] run4 [edit]
[-] run1 [edit]
[+] .sass-cache
[-] style.mq.scss [edit]
[-] style.dark.scss [edit]
[-] run3 [edit]
[-] style.custom.scss [edit]
[-] run2 [edit]