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

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

// @*************************************************************************@
// @ @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-profile{
	main.main-content-container{
		div.main-content-container-inner{
			div.timeline-container{
				div.timeline-header{
					div.lp div.profile-name-holder{
						display: block;
						line-height: 0px;
						padding: 0;
						margin: 0;

h5{
							padding: 0;
							margin: 0;
							line-height: 18px;
							font-size: 14px;

span{
								color: $black;
								font-weight: 700;
							}
						}

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

svg{
								width: 13px;
								height: 13px;
								display: inline-block;
								vertical-align: middle;
								stroke: $grey;
							}
						}
					}
				}

div.timeline-prof-info-area{
					width: 100%;
					display: block;
					line-height: 0;

div.profile-info-header{
						width: 100%;
						display: block;
						position: relative;

div.profile-cover-holder{
							width: 100%;
							display: block;
							height: auto;
							background: #444;
							position: relative;
							z-index: 10;
							max-height: 200px;
							overflow: hidden;

img.cover{
								width: 100%;
								object-fit: cover;

&.original-cover{
									cursor: -webkit-grab;
									cursor: grab;

&:active{
										cursor: -webkit-grabbing;
										cursor: grabbing;
									}
								}
							}

div.cover-adjustment-ctrls{
								background-color: $blue;
								line-height: 0px;
								padding: 0px 10px;
								width: 100px;
								height: 35px;
								border-radius: $border_rad2;
								z-index: 11;
								display: flex;
								flex-direction: row;
								justify-content: center;
								align-items: center;
								position: absolute;
								top: 0px;
								left: 0px;
								right: 0px;
								bottom: 0px;
								margin: auto;
								transition: visibility 0.1s linear,opacity 0.1s linear;
								opacity: 0;
								visibility: hidden;

button.control-btn{
									border: none;
									line-height: 0px;
									padding: 0px;
									margin: 0px 10px;
									width: 20px;
									height: 20px;
									cursor: pointer;
									outline: 0;
									background: none;
									box-shadow: none;
		
									svg{
										width: 100%;
										height: 100%;
										stroke: #fff;
										display: inline-block;
										stroke-width: 2;
									}

&:disabled{
										cursor: wait !important;
									}
								}
							}

&:hover{
								div.cover-adjustment-ctrls{
									visibility: visible;
									opacity: 1;
								}
							}
						}

div.profile-avatar-holder{
							display: inline-block;
							padding: 0px 15px;
							line-height: 0px;
							position: absolute;
							z-index: 10;
							left: 0px;
							bottom: -60px;

div.profile-avatar{
								width: 120px;
								height: 120px;
								border: none;
								overflow: hidden;
								border-radius: 10em;
								border: 3px solid #fff;
								box-shadow: none;
								position: relative;

img{
									width: 100%;
									height: 100%;
									object-fit: cover;
									padding: 0;
									margin: 0;
								}

button.upload-avatar{
									border: none;
									background-color: $blue;
									line-height: 0px;
									padding: 0px;
									width: 100%;
									height: 100%;
									display: flex;
									flex-direction: row;
									flex-wrap: nowrap;
									visibility: hidden;
									z-index: 13;
									cursor: pointer;
									justify-content: center;
									align-items: center;
									position: absolute;
									top: 0px;
									right: 0px;
									bottom: 0px;
									left: 0px;
									outline: 0;
									transition: visibility 0.1s linear,opacity 0.1s linear;
									opacity: 0;

svg{
										width: 25px;
										height: 25px;
										stroke: #fff;
										stroke-width: 2;
										display: inline-block;
									}

&:disabled{
										cursor: wait !important;
									}
								}

&:hover{
									button.upload-avatar{
										visibility: visible;
										opacity: 1;
									}
								}
							}
						}
					}

div.profile-main--info-holder{
						width: 100%;
						border-bottom: 1px solid $border;
						position: relative;

div.profile-page-ctrls{
							width: 100%;
							display: flex;
							flex-direction: row;
							flex-wrap: nowrap;
							justify-content: flex-end;
							height: 60px;
							align-items: center;
							padding: 0px 15px;
							margin-bottom: 20px;

button.ctrl-item{
								width: 25px;
								height: 25px;
								cursor: pointer;
								background: transparent;
								border: none;
								margin-left: 20px;
								outline: 0;
								padding: 0px;
								box-shadow: none;

a.ctrl-inner, span.ctrl-inner{
									width: 100%;
									height: 100%;
									position: relative;
									display: inline-block;
									line-height: 0px;
									outline: 0;

svg{
										width: 25px;
										height: 25px;
										stroke: $blue;
									}

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

div.dropdown-menu{
									top: 25px !important;
								}
							}

button.btn.btn-custom{
								margin-left: 20px;
							}
						}

div.profile-name-holder{
							width: 100%;
							line-height: 0px;
							display: block;
							padding: 0px 15px;
							margin-bottom: 10px;

h4{
								font-size: 18px;
								line-height: 22px;
								color: $black;
								padding: 0;
								margin: 0;
								font-weight: 700;
							}

a{
								display: block;
								color: $grey;
								font-size: 13px;
								padding: 0;
								margin: 0;
								line-height: 18px;
								text-decoration: none;
							}
						}

div.profile-description-holder{
							width: 100%;
							display: block;
							line-height: 0px;
							padding: 0px 15px;
							margin-bottom: 15px;

p{
								font-size: 13px;
								color: $black;
								font-weight: 400;
								line-height: 18px;
								padding: 0;
								margin: 0;
								word-wrap: break-word;
							}
						}

div.profile--user-info-block-set{
							width: 100%;
							display: flex;
							line-height: 0px;
							display: flex;
							flex-direction: row;
							flex-wrap: wrap;
							padding: 0px 15px;

div.block-item{
								line-height: 0px;
								margin-right: 15px;
								margin-bottom: 15px;

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

span.banner{
									display: inline-block;
									line-height: 0px;

svg{
										width: 22px;
										height: 13px;
										vertical-align: middle;
									}
								}

span.icon{
									display: inline-block;
									line-height: 0px;
									svg{
										width: 15px;
										height: 15px;
										stroke: $grey;
										vertical-align: middle;
									}
								}

span.text{
									font-size: 12px;
									line-height: 12px;
									color: $grey;
									display: inline-block;

a{
										color: $link;
										text-decoration: underline;
										font-size: inherit;
										line-height: inherit;
									}
								}
							}
						}

div.profile--activity-stats-info{
							margin-bottom: 10px;
							width: 100%;
							overflow: hidden;
							display: flex;
							flex-direction: row;
							flex-wrap: nowrap;
							padding: 0px 15px;

div.stat-holder{
								margin-right: 25px;

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

span.stat-holder-inner,a.stat-holder-inner{
									display: inline-block;
									line-height: 0px;
									text-decoration: none;

span,b{
										width: 100%;
									}

span{
										font-size: 11px;
										line-height: 20px;
										color: $grey;
										margin-left: 3px;
										text-transform: uppercase;
									}

b{
										font-size: 14px;
										color: $black;
										font-weight: 500;
										line-height: 16px;
									}
								}

a.stat-holder-inner{
									&:hover,&:active{
										span,b{
											color: $blue;
										}
									}
								}
							}
						}

div.profile--activity-navbar{
							width: 100%;
							overflow: hidden;
							display: flex;
							flex-direction: row;
							flex-wrap: nowrap;
							justify-content: space-between;
							border-top: 1px solid $border;
							
							a{
								flex: 1;
								outline: 0;

button.navbar-item-btn{
									background: transparent;
									font-size: 11px;
									font-weight: 900;
									color: $grey;
									line-height: 13px;
									box-shadow: none;
									border: none;
									padding: 15px 30px;
									width: 100%;
									cursor: pointer;
									outline: 0;
									text-transform: uppercase;

&.active{
										border-bottom: 2px solid $blue;
									}

&:hover,&:active,&:focus{
										background: $el_hovbg;
									}
								}
							}
						}
					}
				}

div.timeline-posts-container{
					div.timeline-posts-ls{
						div.empty-profile-placeholder{
							width: 100%;
							display: flex;
							flex-direction: column;
							flex-wrap: nowrap;
							align-items: center;
							line-height: 0px;
							padding: 50px;
							overflow: hidden;

div.icon{
					 			line-height: 0px;
								margin-bottom: 20px;
								width: 100%;
								text-align: center;

svg{
						 			width: 50px;
						 			height: 50px;
						 			stroke: $blue;
						 		}
					 		}

div.pl-message{
								line-height: 0px;
								width: 100%;
								margin-bottom: 20px;

h4{
									font-size: 20px;
									padding: 0;
									margin: 0 0 10px 0;
									line-height: 20px;
									color: $black;
									font-weight: 700;
									text-align: center;
								}

p{
									font-size: 13px;
									line-height: 20px;
									padding: 0;
									margin: 0;
									color: $grey;
									text-align: center;
									overflow-wrap: break-word;
								}
							}

div.c2action-single{
								width: 100%;
								line-height: 0px;
								text-align: center;

a{
									display: inline-block;
									line-height: 0px;
									text-decoration: none;

button{
										padding-left: 40px;
										padding-right: 40px;
									}
								}
							}
						}
					}
				}
			}
		}
	}
}

[-] 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]