PNG IHDR x sBIT|d pHYs + tEXtSoftware www.inkscape.org< ,tEXtComment
// Variables
$chat-aside-gap-x: 1.25rem;
$chat-aside-gap-x-tab: 2.25rem;
$chat-aside-gap-x-desk: 1.75rem;
$chat-body-gap-x: 1.25rem;
$chat-body-gap-x-tab: 2.25rem;
$chat-body-gap-x-desk: 1.75rem;
$chat-aside-width: 320px;
$chat-aside-width-lg: 325px;
$chat-aside-width-xl: 382px;
$chat-profile-width: 325px;
$chat-profile-width-xl: 365px;
$chat-profile-width-sm: 280px;
$chat-meta-sap: $ni-dot !default;
// for Extend
.add-opt {
&:hover {
.sub-text, .icon {
color: $accent-color;
}
}
}
.add-opt-icon {
.icon{
&-circle{
height: 32px;
width: 32px;
font-size: 1rem;
}
+ span, + div{
@if($rtl==false){
margin-left: 0.75rem;
}
@if($rtl==true){
margin-right: 0.75rem;
}
}
}
}
// Chat Listing
.chat{
&-item{
position: relative;
border-radius: $border-radius;
transition: background-color .3s;
&:hover{
background-color: $light-100;
.chats-dropdown & {
background-color: $lighter;
}
.chat-actions{
opacity: 1;
pointer-events: initial;
transition: opacity .5s;
}
}
&.current{
background-color: $lighter;
&:hover{
background-color: $light-100;
}
}
}
&-link{
display: flex;
align-items: center;
width: 100%;
padding: .75rem;
cursor: pointer;
}
&-media{
height: 44px;
width: 44px;
+ .chat-info{
@if($rtl==false){
margin-left: 1rem;
}
@if($rtl==true){
margin-right: 1rem;
}
}
}
&-info{
width: calc(100% - 3.75rem);
}
&-from{
display: flex;
align-items: center;
justify-content: space-between;
.name{
font-size: 0.9375rem;
margin-bottom: 0;
font-weight: $fw-medium;
color: $base-text;
.is-unread &{
font-weight: $fw-bold;
color: $base-color;
}
}
.time{
font-size: $fx-sz-12;
color: $base-light;
}
}
&-context{
display: flex;
align-items: center;
justify-content: space-between;
.text{
width: calc(100% - 2.5rem);
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
font-size: $fx-sz-13;
color: $base-light;
.is-unread &{
font-weight: $fw-medium;
color: $base-text;
}
}
.status{
display: flex;
color: rgba($base-light,.8);
.is-unread &{
color: $accent-color;
}
&.seen{
color: $accent-color;
}
}
}
&-actions{
background-color: $light-100;
position: absolute;
top: 0;
bottom: 0;
@if($rtl==false){
right: 0.75rem;
}
@if($rtl==true){
left: 0.75rem;
}
opacity: 0;
pointer-events: none;
z-index: 2;
display: flex;
align-items: center;
justify-content: flex-end;
width: 3rem;
}
&-profile{
&-group{
border-top: 1px solid $border-light;
padding: .25rem 0;
}
&-head{
padding: 1.25rem 1.5rem;
display: flex;
align-items: center;
justify-content: space-between;
.title{
margin-bottom: 0;
}
.indicator-icon{
display: inline-flex;
}
&.collapsed{
.indicator-icon{
transform: rotate(-180deg);
}
}
}
&-body{
&-inner{
padding: 0 1.5rem 1.5rem;
}
}
&-options{
margin: -0.25rem;
li{
padding: .25rem;
}
}
&-settings{
margin: -0.5rem;
li{
padding: .5rem;
}
.custom-control-sm .custom-control-label{
@if($rtl==false){
padding-left: 0.25rem;
}
@if($rtl==true){
padding-right: 0.25rem;
}
font-size: $fx-sz-13;
font-weight: $fw-medium;
color: $base-text;
}
}
&-media{
display: flex;
margin: -0.25rem;
li{
width: 33.33%;
padding: 0.25rem;
a{
display: inline-block;
}
img{
border-radius: $border-radius;
}
}
}
}
&-option{
&-link{
display: flex;
align-items: center;
.lead-text{
font-weight: $fw-medium;
font-size: $fx-sz-13;
transition: color .3s;
color: $base-text;
}
@extend .add-opt-icon;
&:hover .lead-text {
color: $base-dark;
}
}
}
&-members{
margin: -0.375rem -.5rem;
li{
position: relative;
}
&-link{
display: flex;
align-items: center;
padding: 0.375rem .5rem;
@extend .add-opt-icon;
}
.user{
&-card{
position: relative;
padding: 0.375rem .5rem;
border-radius: $border-radius-sm;
transition: background-color .3s;
> a{
width: 100%;
display: flex;
align-items: center;
}
&:hover{
background-color: $light-100;
.user-actions{
opacity: 1;
pointer-events: initial;
transition: opacity .5s;
}
}
}
&-role{
@if($rtl==false){
margin-left: auto;
}
@if($rtl==true){
margin-right: auto;
}
font-size: $fx-sz-12;
color: $base-light;
}
&-actions{
position: absolute;
top: 0;
@if($rtl==false){
right: .25rem;
}
@if($rtl==true){
left: .25rem;
}
bottom: 0;
width: 3rem;
background-color: $light-100;
display: flex;
align-items: center;
justify-content: flex-end;
opacity: 0;
pointer-events: none;
}
}
}
}
.chat {
display: flex;
align-items: flex-end;
margin: -4px;
> div{
padding: 4px;
}
+ .chat{
padding-top: 0.5rem;
}
&-avatar{
margin-bottom: 1.4rem;
&.no-meta {
margin-bottom: 0;
}
}
&-bubble{
display: flex;
align-items: center;
padding: .125rem 0;
&:hover{
.chat-msg-more{
opacity: 1;
}
}
&s{
.attach-files{
margin-top: .75rem;
}
}
}
&-msg {
background-color: $white;
border-radius: $border-radius-xl;
padding: .5rem 1rem;
&-more {
display: flex;
align-items: center;
margin:0 0.75rem;
opacity: 0;
flex-shrink: 0;
transition: all .3s;
> li{
padding: 0.25rem;
}
}
&.is-light {
background-color: $light;
color: $base-text;
}
&.is-theme {
background-color: $accent-color;
color: $white;
}
}
&-meta{
display: flex;
align-items: center;
margin: .25rem -.375rem 0;
li{
position: relative;
padding: 0 .375rem;
font-size: $fx-sz-12;
color: $base-light;
&:not(:first-child):before{
content:$chat-meta-sap;
font-family: $nk-dashlite-font;
position: absolute;
top: 50%;
@if($rtl==false){
left: 0;
transform: translate(-50%,-50%);
}
@if($rtl==true){
right: 0;
transform: translate(50%,-50%);
}
font-size: 11px;
line-height: 10px;
opacity: .8;
}
}
}
&-sap{
overflow: hidden;
text-align: center;
padding: 1rem 0;
&-meta {
position: relative;
display: inline-block;
padding: 0 .75rem;
color: $base-light;
font-size: $fx-sz-12;
line-height: 1.4;
&:before,&:after{
position: absolute;
height: 1px;
background: $border-color;
content: '';
width: 100vw;
top: 50%;
}
&:before{
right: 100%;
}
&:after{
left: 100%;
}
}
}
&.is-you{
.chat-bubble{
&s{
.attach-files {
border-color: $white;
overflow: hidden;
}
.attach-files, .attach-foot{
background-color: $white;
}
}
&:last-child{
.chat-msg{
@if($rtl==false){
border-bottom-left-radius: 0;
}
@if($rtl==true){
border-bottom-right-radius: 0;
}
}
}
&:not(:first-child){
.chat-msg{
@if($rtl==false){
border-top-left-radius: $border-radius;
}
@if($rtl==true){
border-top-right-radius: $border-radius;
}
}
}
&:not(:last-child){
.chat-msg{
@if($rtl==false){
border-bottom-left-radius: $border-radius;
}
@if($rtl==true){
border-bottom-right-radius: $border-radius;
}
}
}
}
}
&.is-me{
justify-content: flex-end;
.chat-msg{
background-color: $accent-color;
color: $white;
}
.chat-meta{
justify-content: flex-end;
}
.chat-bubble{
flex-direction: row-reverse;
&s{
.attach-files {
border-color: $accent-300;
overflow: hidden;
}
.attach-files, .attach-foot{
background-color: $white;
}
}
&:last-child{
.chat-msg{
@if($rtl==false){
border-bottom-right-radius: 0;
}
@if($rtl==true){
border-bottom-left-radius: 0;
}
}
}
&:not(:first-child){
.chat-msg{
@if($rtl==false){
border-top-right-radius: $border-radius;
}
@if($rtl==true){
border-top-left-radius: $border-radius;
}
}
}
&:not(:last-child){
.chat-msg{
@if($rtl==false){
border-bottom-right-radius: $border-radius;
}
@if($rtl==true){
border-bottom-left-radius: $border-radius;
}
}
}
}
}
// Upload option
&-upload-option{
display: none;
position: absolute;
@if($rtl==false){
left: 100%;
}
@if($rtl==true){
right: 100%;
}
padding: 0.5rem;
background-color: $white;
&.expanded{
display: block;
}
ul{
display: flex;
align-items: center;
}
a{
color: $accent-color;
font-size: 1.25rem;
height: 36px;
width: 36px;
display: inline-flex;
align-items: center;
justify-content: center;
&:hover{
color: darken($accent-color, 8%);
}
}
}
}
.fav-list{
display: flex;
margin: -0.375rem;
overflow-x: auto;
li{
padding: 0.375rem;
}
a:hover > .user-avatar:after {
opacity: 1;
}
.user-avatar{
height: 44px;
width: 44px;
&:after {
content: "";
position: absolute;
width: 100%;
@if($rtl==false){
left: 0;
}
@if($rtl==true){
right: 0;
}
height: 100%;
background: $light-200;
transform: scale(1.15);
opacity: 0;
border-radius: 50%;
z-index: -1;
transition: opacity .3s;
}
}
}
@include media-breakpoint-up(md){
.fav-list{
flex-wrap: wrap;
}
}
@media (max-width:859px){
.fav-list{
margin: -0.375rem 0;
li{
&:first-child{
@if($rtl==false){
padding-left: 0;
}
@if($rtl==true){
padding-right: 0;
}
}
&:last-child{
@if($rtl==false){
padding-right: 0;
}
@if($rtl==true){
padding-left: 0;
}
}
}
}
}
.channel-list {
li {
margin:0.125rem -0.5rem;
}
a {
padding: 0.375rem .5rem;
display: block;
transition: all .3s;
font-weight: $fw-medium;
color: $base-text;
border-radius: $border-radius-sm;
&:hover, &.active {
color: $accent-color;
background: $accent-100;
}
}
}
.contacts {
&-list {
margin: -0.375rem -.5rem;
& + .contacts-list {
margin-top: 1.75rem;
}
li{
position: relative;
> .title {
@if($rtl==false){
padding-left: 1.25rem;
}
@if($rtl==true){
padding-right: 1.25rem;
}
margin-bottom: .25rem;
}
}
.user{
&-card{
position: relative;
padding: 0.375rem .5rem;
border-radius: $border-radius-sm;
transition: background-color .3s;
> a{
width: 100%;
display: flex;
align-items: center;
}
&:hover{
background-color: $light-100;
.user-actions{
opacity: 1;
pointer-events: initial;
transition: opacity .4s;
}
}
}
&-meta{
@if($rtl==false){
margin-left: auto;
}
@if($rtl==true){
margin-right: auto;
}
font-size: $fx-sz-12;
color: $base-light;
}
&-actions{
font-size: 12px;
position: absolute;
top: 0;
@if($rtl==false){
right: .25rem;
}
@if($rtl==true){
left: .25rem;
}
bottom: 0;
width: 4.5rem;
background-color: $light-100;
display: flex;
align-items: center;
justify-content: flex-end;
opacity: 0;
pointer-events: none;
> a {
padding:0 .375rem;
}
}
}
}
&-add-link{
padding: 0.375rem .5rem;
display: flex;
align-items: center;
.lead-text{
font-weight: $fw-medium;
font-size: $fx-sz-13;
}
@extend .add-opt-icon;
}
}
// Chat Layouts
.nk-chat{
position: relative;
display: flex;
overflow: hidden;
min-height: calc(100vh - (#{$header-height} + 64px));
max-height: calc(100vh - (#{$header-height} + 64px));
background: $white;
&-blank{
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
height: 100%;
background-color: $light;
&-icon{
margin-bottom: 1.5rem;
}
}
&-boxed{
border:1px solid $border-color;
border-radius: $border-radius;
min-height: calc(100vh - (#{$header-height} + 64px + 64px));
max-height: calc(100vh - (#{$header-height} + 64px + 64px));
}
&-aside{
background: $white;
width: 100%;
overflow: hidden;
max-height: 100%;
position: relative;
display: flex;
flex-direction: column;
flex-shrink: 0;
&-head{
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.125rem $chat-aside-gap-x 0.875rem;
}
&-user{
.title{
font-size: 1.375rem;
color:$base-color;
}
.user-avatar{
height: 36px;
width: 36px;
+ .title{
@if($rtl==false){
margin-left: 1rem;
}
@if($rtl==true){
margin-right: 1rem;
}
}
}
.dropdown-toggle{
&:after{
font-size: 1.125rem;
color: $base-light;
@if($rtl==false){
margin-left: 1rem;
}
@if($rtl==true){
margin-right: 1rem;
}
}
}
}
&-tools{
display: flex;
align-items: center;
}
&-body{
max-height: 100%;
height: 100%;
overflow: auto;
}
&-search{
padding: 0 $chat-aside-gap-x;
margin-bottom: 1.75rem;
margin-top: 0.25rem;
.form-control{
background-color: $lighter;
border-color: $lighter;
&::placeholder {
color: $base-light;
}
}
}
}
&-aside-panel{
padding: 0 $chat-aside-gap-x 1.75rem;
.title{
margin-bottom: .75rem;
}
}
&-list{
padding: 0 ($chat-aside-gap-x - .75rem);
.title{
@if($rtl==false){
margin-left: .75rem;
}
@if($rtl==true){
margin-right: .75rem;
}
}
}
&-body{
background: $white;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
flex-grow: 1;
display: flex;
flex-direction: column;
overflow: hidden;
transition: padding .3s ease-in-out;
opacity: 0;
pointer-events: none;
z-index: 5;
&.show-chat{
opacity: 1;
pointer-events: auto;
}
}
&-head{
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
padding: 1rem 1.75rem;
border-bottom: 1px solid $border-light;
background-color: $white;
&-info{
width: 60%;
.user-avatar + .user-info{
@if($rtl==false){
margin-left: 0.75rem;
}
@if($rtl==true){
margin-right: 0.75rem;
}
}
.user-info{
.lead-text{
display: block;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
}
}
&-info,&-tools{
display: flex;
align-items: center;
margin: -0.125rem;
> li{
padding: .125rem;
}
.btn-icon{
.icon{
font-size: 1.25rem;
}
}
}
&-search{
position: absolute;
top: calc(100% + 1rem);
@if($rtl==false){
left: 0;
}
@if($rtl==true){
right: 0;
}
z-index: 9;
width: 100%;
padding: 0 1.75rem;
opacity: 0;
pointer-events: none;
transform: translateY(-10px);
transition: all .5s;
&.show-search{
opacity: 1;
pointer-events: auto;
transform: none;
}
}
}
&-panel{
background-color: rgba($light, .7);
height: 100%;
max-height: 100%;
overflow: auto;
padding: 1.25rem;
}
&-editor{
display: flex;
align-items: center;
padding: 1rem 1.25rem;
background-color: $white;
&-form{
padding: 0 .5rem;
flex-grow: 1;
.form-control{
min-height: 36px;
padding-top: 0.5rem;
}
}
&-upload,&-tools{
display: flex;
align-items: center;
.btn-icon{
.icon{
font-size: 1.5rem;
}
}
}
&-upload{
position: relative;
z-index: 2;
.toggle-opt{
transition: .3s;
&.active{
opacity: 0.7;
transform: rotate(-45deg);
}
}
}
}
&-profile{
position: absolute;
top: 0;
@if($rtl==false){
right: 0;
transform: translateX(100%);
}
@if($rtl==true){
left: 0;
transform: translateX(-100%);
}
width: $chat-profile-width;
height: 100%;
max-height: 100%;
transition: transform .3s ease-in-out;
background: $white;
z-index: 100;
&-overlay{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: $sidebar-overlay;
z-index: 600;
z-index: 90;
animation: overlay-fade-in .4s ease 1;
}
&.visible{
transform: none;
}
}
}
@include media-breakpoint-down(sm){
.nk-chat{
border: none;
border-radius: 0;
min-height: calc(100vh - (#{$header-height} + 85px));
max-height: calc(100vh - (#{$header-height} + 85px));
&-boxed{
border:1px solid $border-color;
border-radius: $border-radius;
}
&-head{
padding: 0.75rem 1.25rem;
&-user{
max-width:calc(100% - 34px);
.user-avatar{
height: 36px;
width: 36px;
}
.user-info{
width: calc(100% - 36px - .75rem);
}
}
}
}
}
@include media-breakpoint-up(sm){
.nk-chat{
&-head{
&-info,&-tools{
margin: -0.375rem;
> li{
padding: .375rem;
}
}
}
}
}
@media (min-width:576px) and (max-width:991px){
.nk-chat{
&-aside{
&-head, &-search{
padding-left: $chat-aside-gap-x-tab;
padding-right: $chat-aside-gap-x-tab;
}
}
&-aside-panel{
padding: 0 $chat-aside-gap-x-tab 1.75rem;
}
&-list{
padding: 0 ($chat-aside-gap-x-tab - .75rem);
}
&-head, &-panel, &-editor{
padding-left: $chat-body-gap-x-tab;
padding-right: $chat-body-gap-x-tab;
}
&-head{
&-search{
padding: 0 $chat-body-gap-x-tab;
}
}
}
}
@media (min-width:860px){
.nk-chat{
&-aside{
width: $chat-aside-width;
@if($rtl==false){
border-right: 1px solid $border-light;
}
@if($rtl==true){
border-left: 1px solid $border-light;
}
}
&-body{
position: static;
opacity: 1;
pointer-events: auto;
&-close{
display: none;
}
}
}
}
@media (max-width:859px){
.nk-chat{
&-body{
&.show-chat{
position: fixed;
z-index: 2999;
}
}
&-head {
padding-top: 0.75rem;
padding-bottom: 0.75rem;
}
}
}
@media (min-width:860px) and (max-width:991px){
.nk-chat{
&-aside{
width: $chat-aside-width + 25px;
@if($rtl==false){
border-right: 1px solid $border-light;
}
@if($rtl==true){
border-left: 1px solid $border-light;
}
}
}
}
@include media-breakpoint-up(lg){
.nk-chat{
&-aside-panel, &-aside-head, &-aside-search {
padding-left: $chat-aside-gap-x-desk;
padding-right: $chat-aside-gap-x-desk;
}
&-list {
padding:0 ($chat-aside-gap-x - .25rem);
}
&-aside{
width: $chat-aside-width-lg;
}
&-panel{
padding: 1.25rem 1.75rem;
}
}
.chat {
&-profile {
&-head, &-body-inner{
padding-right: 1.75rem;
padding-left: 1.75rem;
}
}
}
}
@include media-breakpoint-up(xxl){
.nk-chat{
&-boxed{
min-height: calc(100vh - (#{$header-height} + 64px + 112px));
max-height: calc(100vh - (#{$header-height} + 64px + 112px));
.nk-chat-body{
&.profile-shown{
@if($rtl==false){
padding-right: 0;
}
@if($rtl==true){
padding-left: 0;
}
}
}
}
&-aside{
width: $chat-aside-width-xl;
}
&-body{
&.profile-shown{
@if($rtl==false){
padding-right: $chat-profile-width-xl;
}
@if($rtl==true){
padding-left: $chat-profile-width-xl;
}
}
}
&-profile{
width: $chat-profile-width-xl;
@if($rtl==false){
border-left: 1px solid $border-light;
}
@if($rtl==true){
border-right: 1px solid $border-light;
}
}
}
}
@include media-breakpoint-down(xl){
.profile-shown{
.nk-chat-profile-toggle{
@if($rtl==false){
right: 262px;
}
@if($rtl==true){
left: 262px;
}
.has-apps-sidebar & {
@if($rtl==false){
right: -18px;
}
@if($rtl==true){
left: -18px;
}
}
}
}
}
@media (max-width:359px){
.nk-chat{
&-profile{
width: $chat-profile-width-sm;
}
}
}
b IDATxytVսϓ22 A@IR:hCiZ[v*E:WũZA ^dQeQ @ !jZ'>gsV仿$|?g)&x-E