@rtsee/ngx 0.0.25 → 0.0.26

package/dist/ngx/src/lib/common/compiled-scss/styles.scss

@@ -7,21 +7,110 @@ $rts-offset-md: 16px;
 $rts-offset-lg: 24px;
 
 $rts-default-border-radius: 8px;
+$rts-rounded-border-radius: 16px;
 
 $rts-main-bg-color-light: #ffffff;
 $rts-secondary-bg-color-light: #e6eef3;
 $rts-main-bg-color-dark: #000000;
+$rts-live-color: #91d8bb;
+
+$rts-active-bg-color-light: #bbdffd;
+
+
+$rts-font-color-dark: #000000;
+$rts-font-color-light: #333333;
+
+$rts-font-color-dbg-light: #ffffff;
+
+$rts-user-avatar-d-sm: 42px;
+$rts-user-avatar-d-md: 54px;
+$rts-user-avatar-d-lg: 65px;
+
+$rts-message-status-width: 69px;
+
+
+
+
+
+$rts-state-bg-color: #D1F1EF;
+$rts-disabled-color: #82DBD8;
+$rts-slightly-active-color: #B3E8E5;
+$rts-super-active-color: #3BACB6;
+
+$rts-offset-sm: 8px;
+$rts-offset-md: 16px;
+$rts-offset-lg: 24px;
+
+$rts-default-border-radius: 8px;
+$rts-rounded-border-radius: 16px;
+
+$rts-main-bg-color-light: #ffffff;
+$rts-secondary-bg-color-light: #e6eef3;
+$rts-main-bg-color-dark: #000000;
+$rts-live-color: #91d8bb;
+
+$rts-active-bg-color-light: #bbdffd;
 
-$rts-active-bg-color-light: #eeffde;
 
 $rts-font-color-dark: #000000;
 $rts-font-color-light: #333333;
 
+$rts-font-color-dbg-light: #ffffff;
+
 $rts-user-avatar-d-sm: 42px;
 $rts-user-avatar-d-md: 54px;
 $rts-user-avatar-d-lg: 65px;
 
+$rts-message-status-width: 69px;
+
+
+
+
 
+$rts-state-bg-color: #D1F1EF;
+$rts-disabled-color: #82DBD8;
+$rts-slightly-active-color: #B3E8E5;
+$rts-super-active-color: #3BACB6;
+
+
+.rtsee-preloader {
+  text-align: center;
+  padding: $rts-offset-md;
+
+  svg {
+    margin: 0 auto;
+  }
+
+  path {
+    stroke-width: 8;
+    stroke-dasharray: 288.5;
+    stroke-linecap: round;
+    fill: none;
+    transform-origin: 50px 50px;
+    animation:
+      pathStroke 3.75s infinite ease-in-out,
+      pathRotate 7.5s infinite cubic-bezier(1,.5,0,.5);
+  }
+
+  @keyframes pathStroke {
+    0% {  stroke-dashoffset: -288.5; }
+    40%, 70% { stroke-dashoffset: 0; }
+    100% { stroke-dashoffset: 288.5; }
+  }
+
+  @keyframes pathRotate {
+    0% {  transform: rotate(0deg); }
+    50% { transform: rotate(-540deg); }
+    100% { transform: rotate(-1080deg); }
+  }
+}
+
+
+
+
+.rtsee-messenger, .rtsee-events-dashboard {
+  font-family: Roboto,-apple-system,BlinkMacSystemFont,Segoe UI,Oxygen-Sans,Ubuntu,Cantarell,Helvetica Neue,sans-serif;
+}
 .rts-section {
   padding: $rts-offset-sm;
   background-color: $rts-main-bg-color-light;
@@ -32,20 +121,36 @@ $rts-offset-md: 16px;
 $rts-offset-lg: 24px;
 
 $rts-default-border-radius: 8px;
+$rts-rounded-border-radius: 16px;
 
 $rts-main-bg-color-light: #ffffff;
 $rts-secondary-bg-color-light: #e6eef3;
 $rts-main-bg-color-dark: #000000;
+$rts-live-color: #91d8bb;
+
+$rts-active-bg-color-light: #bbdffd;
 
-$rts-active-bg-color-light: #eeffde;
 
 $rts-font-color-dark: #000000;
 $rts-font-color-light: #333333;
 
+$rts-font-color-dbg-light: #ffffff;
+
 $rts-user-avatar-d-sm: 42px;
 $rts-user-avatar-d-md: 54px;
 $rts-user-avatar-d-lg: 65px;
 
+$rts-message-status-width: 69px;
+
+
+
+
+
+$rts-state-bg-color: #D1F1EF;
+$rts-disabled-color: #82DBD8;
+$rts-slightly-active-color: #B3E8E5;
+$rts-super-active-color: #3BACB6;
+
 
 $rts-messenger-header-height: $rts-offset-sm + $rts-user-avatar-d-sm + $rts-offset-sm;
 
@@ -54,20 +159,36 @@ $rts-offset-md: 16px;
 $rts-offset-lg: 24px;
 
 $rts-default-border-radius: 8px;
+$rts-rounded-border-radius: 16px;
 
 $rts-main-bg-color-light: #ffffff;
 $rts-secondary-bg-color-light: #e6eef3;
 $rts-main-bg-color-dark: #000000;
+$rts-live-color: #91d8bb;
+
+$rts-active-bg-color-light: #bbdffd;
 
-$rts-active-bg-color-light: #eeffde;
 
 $rts-font-color-dark: #000000;
 $rts-font-color-light: #333333;
 
+$rts-font-color-dbg-light: #ffffff;
+
 $rts-user-avatar-d-sm: 42px;
 $rts-user-avatar-d-md: 54px;
 $rts-user-avatar-d-lg: 65px;
 
+$rts-message-status-width: 69px;
+
+
+
+
+
+$rts-state-bg-color: #D1F1EF;
+$rts-disabled-color: #82DBD8;
+$rts-slightly-active-color: #B3E8E5;
+$rts-super-active-color: #3BACB6;
+
 
 * {
   box-sizing: border-box;
@@ -83,6 +204,34 @@ $rts-user-avatar-d-lg: 65px;
   overflow: hidden;
   background-color: $rts-main-bg-color-light;
 
+  .rtsee-messenger-overlay {
+    display: none;
+    background-color: rgba(0,0,0,0.8);
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+  }
+
+  &.rtsee-messenger-main-menu-opened {
+    .rtsee-messenger-main-menu-container {
+      top: $rts-messenger-header-height;
+    }
+
+    .rtsee-messenger-overlay {
+      display: block;
+    }
+  }
+
+  &.rtsee-messenger-header-expanded {
+    .rtsee-messenger-header-container {
+      height: 100%;
+      padding: 0;
+      z-index: 1;
+    }
+  }
+
 
   .rtsee-messenger-header-container {
     position: absolute;
@@ -95,15 +244,69 @@ $rts-user-avatar-d-lg: 65px;
   .rtsee-messenger-body-container {
     height: 100%;
     overflow: auto;
+    position: relative;
   }
+
+  .rtsee-messenger-main-menu-container {
+    position: absolute;
+    top: 100%;
+    left: 0;
+    width: 100%;
+    height: calc(100% - #{$rts-messenger-header-height});
+    background-color: $rts-main-bg-color-light;
+    z-index: 1;
+  }
+
+
 }
 
+$rts-offset-sm: 8px;
+$rts-offset-md: 16px;
+$rts-offset-lg: 24px;
+
+$rts-default-border-radius: 8px;
+$rts-rounded-border-radius: 16px;
+
+$rts-main-bg-color-light: #ffffff;
+$rts-secondary-bg-color-light: #e6eef3;
+$rts-main-bg-color-dark: #000000;
+$rts-live-color: #91d8bb;
+
+$rts-active-bg-color-light: #bbdffd;
+
+
+$rts-font-color-dark: #000000;
+$rts-font-color-light: #333333;
+
+$rts-font-color-dbg-light: #ffffff;
+
+$rts-user-avatar-d-sm: 42px;
+$rts-user-avatar-d-md: 54px;
+$rts-user-avatar-d-lg: 65px;
+
+$rts-message-status-width: 69px;
+
+
+
+
+
+$rts-state-bg-color: #D1F1EF;
+$rts-disabled-color: #82DBD8;
+$rts-slightly-active-color: #B3E8E5;
+$rts-super-active-color: #3BACB6;
+
+
 .rtsee-chats-list {
   .rtsee-chat-thumbnail-container {
 
   }
-  .rtsee-chat-separator {
 
+  .rtsee-chat-thumbnail-separator {
+    height: 1px;
+    width: 90%;
+    background-color: $rts-main-bg-color-dark;
+    margin: 0 auto;
+    opacity: 0.2;
   }
 }
 
@@ -112,20 +315,36 @@ $rts-offset-md: 16px;
 $rts-offset-lg: 24px;
 
 $rts-default-border-radius: 8px;
+$rts-rounded-border-radius: 16px;
 
 $rts-main-bg-color-light: #ffffff;
 $rts-secondary-bg-color-light: #e6eef3;
 $rts-main-bg-color-dark: #000000;
+$rts-live-color: #91d8bb;
+
+$rts-active-bg-color-light: #bbdffd;
 
-$rts-active-bg-color-light: #eeffde;
 
 $rts-font-color-dark: #000000;
 $rts-font-color-light: #333333;
 
+$rts-font-color-dbg-light: #ffffff;
+
 $rts-user-avatar-d-sm: 42px;
 $rts-user-avatar-d-md: 54px;
 $rts-user-avatar-d-lg: 65px;
 
+$rts-message-status-width: 69px;
+
+
+
+
+
+$rts-state-bg-color: #D1F1EF;
+$rts-disabled-color: #82DBD8;
+$rts-slightly-active-color: #B3E8E5;
+$rts-super-active-color: #3BACB6;
+
 
 $rtsee-chat-input-height: 60px;
 
@@ -135,9 +354,6 @@ $rtsee-chat-input-height: 60px;
 
   .rtsee-chat-body-container {
     height: 100%;
-    overflow: auto;
-    background-color: $rts-secondary-bg-color-light;
-    padding-top: $rts-offset-sm;
   }
 
   .rtsee-chat-footer-container {
@@ -153,20 +369,36 @@ $rts-offset-md: 16px;
 $rts-offset-lg: 24px;
 
 $rts-default-border-radius: 8px;
+$rts-rounded-border-radius: 16px;
 
 $rts-main-bg-color-light: #ffffff;
 $rts-secondary-bg-color-light: #e6eef3;
 $rts-main-bg-color-dark: #000000;
+$rts-live-color: #91d8bb;
+
+$rts-active-bg-color-light: #bbdffd;
 
-$rts-active-bg-color-light: #eeffde;
 
 $rts-font-color-dark: #000000;
 $rts-font-color-light: #333333;
 
+$rts-font-color-dbg-light: #ffffff;
+
 $rts-user-avatar-d-sm: 42px;
 $rts-user-avatar-d-md: 54px;
 $rts-user-avatar-d-lg: 65px;
 
+$rts-message-status-width: 69px;
+
+
+
+
+
+$rts-state-bg-color: #D1F1EF;
+$rts-disabled-color: #82DBD8;
+$rts-slightly-active-color: #B3E8E5;
+$rts-super-active-color: #3BACB6;
+
 
 $rts-messenger-header-height: $rts-offset-sm + $rts-user-avatar-d-sm + $rts-offset-sm;
 
@@ -175,25 +407,55 @@ $rts-offset-md: 16px;
 $rts-offset-lg: 24px;
 
 $rts-default-border-radius: 8px;
+$rts-rounded-border-radius: 16px;
 
 $rts-main-bg-color-light: #ffffff;
 $rts-secondary-bg-color-light: #e6eef3;
 $rts-main-bg-color-dark: #000000;
+$rts-live-color: #91d8bb;
+
+$rts-active-bg-color-light: #bbdffd;
 
-$rts-active-bg-color-light: #eeffde;
 
 $rts-font-color-dark: #000000;
 $rts-font-color-light: #333333;
 
+$rts-font-color-dbg-light: #ffffff;
+
 $rts-user-avatar-d-sm: 42px;
 $rts-user-avatar-d-md: 54px;
 $rts-user-avatar-d-lg: 65px;
 
+$rts-message-status-width: 69px;
+
+
+
+
+
+$rts-state-bg-color: #D1F1EF;
+$rts-disabled-color: #82DBD8;
+$rts-slightly-active-color: #B3E8E5;
+$rts-super-active-color: #3BACB6;
+
+
+$unread-count-block: 24px;
 
 .rtsee-chat-thumbnail {
   position: relative;
   height: $rts-user-avatar-d-md + $rts-offset-sm * 2;
   padding: $rts-offset-sm $rts-offset-sm $rts-offset-sm $rts-offset-sm * 2 + $rts-user-avatar-d-md;
+  cursor: pointer;
+
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+
+  &:hover {
+    background-color: $rts-active-bg-color-light;
+  }
 
   .rtsee-chat-thumbnail-image {
     position: absolute;
@@ -207,12 +469,13 @@ $rts-user-avatar-d-lg: 65px;
     }
   }
 
-  .rtsee-chat-thumbnail-info {
+  .rtsee-chat-thumbnail-left {
     height: $rts-user-avatar-d-md;
 
     .rtsee-chat-thumbnail-name {
-      height: $rts-user-avatar-d-md * 0.5;
-      line-height: $rts-user-avatar-d-md * 0.5;;
+      position: relative;
+      height: $rts-user-avatar-d-md * 0.33;
+      line-height: $rts-user-avatar-d-md * 0.33;;
       margin: 0;
       font-size: 16px;
       font-weight: 600;
@@ -220,18 +483,59 @@ $rts-user-avatar-d-lg: 65px;
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
+
+
+      padding-right: $rts-message-status-width + $rts-offset-sm;
+
+      .rtsee-chat-thumbnail-status {
+        height: $rts-user-avatar-d-md * 0.33;
+        position: absolute;
+        right: 0;
+        top: 0;
+      }
     }
 
     .rtsee-chat-thumbnail-last-message {
-      height: $rts-user-avatar-d-md * 0.5;
-      line-height: $rts-user-avatar-d-md * 0.5;
+      position: relative;
+      height: $rts-user-avatar-d-md * 0.66;
+      line-height: $rts-user-avatar-d-md * 0.33;
       margin: 0;
       font-size: 16px;
       font-weight: 400;
       color: #707579;
-      white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
+      white-space: pre-wrap;
+      overflow-wrap: break-word;
+      word-wrap: break-word;
+      -ms-word-break: break-all;
+      word-break: break-all;
+      word-break: break-word;
+      -webkit-hyphens: auto;
+      hyphens: auto;
+
+      &.rtsee-has-unread {
+        padding-right: $unread-count-block + $rts-offset-sm;
+      }
+
+      .rtsee-messenger-thumbnail-unread {
+        position: absolute;
+        right: 0;
+        top: 4px;
+        height: $unread-count-block;
+        width: $unread-count-block;
+        border-radius: 50%;
+        background-color: $rts-main-bg-color-dark;
+        text-align: center;
+        line-height: 22px;
+        opacity: 0.7;
+
+        .rtsee-messenger-thumbnail-unread-count {
+          font-size: 14px;
+          color: #ffffff;
+          font-weight: 300;
+        }
+      }
     }
   }
 
@@ -243,24 +547,39 @@ $rts-offset-md: 16px;
 $rts-offset-lg: 24px;
 
 $rts-default-border-radius: 8px;
+$rts-rounded-border-radius: 16px;
 
 $rts-main-bg-color-light: #ffffff;
 $rts-secondary-bg-color-light: #e6eef3;
 $rts-main-bg-color-dark: #000000;
+$rts-live-color: #91d8bb;
+
+$rts-active-bg-color-light: #bbdffd;
 
-$rts-active-bg-color-light: #eeffde;
 
 $rts-font-color-dark: #000000;
 $rts-font-color-light: #333333;
 
+$rts-font-color-dbg-light: #ffffff;
+
 $rts-user-avatar-d-sm: 42px;
 $rts-user-avatar-d-md: 54px;
 $rts-user-avatar-d-lg: 65px;
 
+$rts-message-status-width: 69px;
+
+
+
+
+
+$rts-state-bg-color: #D1F1EF;
+$rts-disabled-color: #82DBD8;
+$rts-slightly-active-color: #B3E8E5;
+$rts-super-active-color: #3BACB6;
+
 
 .rtsee-messenger-message-container {
   width: 100%;
-  margin-bottom: $rts-offset-sm;
   padding: 0 $rts-offset-sm;
 
   &:after {
@@ -292,14 +611,79 @@ $rts-user-avatar-d-lg: 65px;
     .rtsee-messenger-message-text {
       margin: 0;
       white-space: pre-wrap;
+      float: left;
+    }
+
+    .rtsee-messenger-message-info {
+      float: right;
     }
   }
 }
 
+$rts-offset-sm: 8px;
+$rts-offset-md: 16px;
+$rts-offset-lg: 24px;
+
+$rts-default-border-radius: 8px;
+$rts-rounded-border-radius: 16px;
+
+$rts-main-bg-color-light: #ffffff;
+$rts-secondary-bg-color-light: #e6eef3;
+$rts-main-bg-color-dark: #000000;
+$rts-live-color: #91d8bb;
+
+$rts-active-bg-color-light: #bbdffd;
+
+
+$rts-font-color-dark: #000000;
+$rts-font-color-light: #333333;
+
+$rts-font-color-dbg-light: #ffffff;
+
+$rts-user-avatar-d-sm: 42px;
+$rts-user-avatar-d-md: 54px;
+$rts-user-avatar-d-lg: 65px;
+
+$rts-message-status-width: 69px;
+
+
+
+
+
+$rts-state-bg-color: #D1F1EF;
+$rts-disabled-color: #82DBD8;
+$rts-slightly-active-color: #B3E8E5;
+$rts-super-active-color: #3BACB6;
+
+
 .rtsee-messenger-messages-list {
+  height: 100%;
+  overflow: auto;
+  background-color: $rts-secondary-bg-color-light;
+  padding-top: $rts-offset-sm;
+
   .rtsee-messenger-message-wrapper {
+    margin-bottom: $rts-offset-md;
+
+    &.rtsee-messenger-message-wrapper-consecutive {
+      margin-bottom: 4px;
+    }
+  }
 
+  .rtsee-messenger-message-date {
+    text-align: center;
+    padding-bottom: $rts-offset-sm;
+
+    span {
+      display: inline-block;
+      background-color: $rts-main-bg-color-dark;
+      color: $rts-font-color-dbg-light;
+      padding: 4px $rts-offset-sm;
+      border-radius: $rts-rounded-border-radius;
+      margin: 0 auto;
+    }
   }
+
 }
 
 $rts-offset-sm: 8px;
@@ -307,20 +691,36 @@ $rts-offset-md: 16px;
 $rts-offset-lg: 24px;
 
 $rts-default-border-radius: 8px;
+$rts-rounded-border-radius: 16px;
 
 $rts-main-bg-color-light: #ffffff;
 $rts-secondary-bg-color-light: #e6eef3;
 $rts-main-bg-color-dark: #000000;
+$rts-live-color: #91d8bb;
+
+$rts-active-bg-color-light: #bbdffd;
 
-$rts-active-bg-color-light: #eeffde;
 
 $rts-font-color-dark: #000000;
 $rts-font-color-light: #333333;
 
+$rts-font-color-dbg-light: #ffffff;
+
 $rts-user-avatar-d-sm: 42px;
 $rts-user-avatar-d-md: 54px;
 $rts-user-avatar-d-lg: 65px;
 
+$rts-message-status-width: 69px;
+
+
+
+
+
+$rts-state-bg-color: #D1F1EF;
+$rts-disabled-color: #82DBD8;
+$rts-slightly-active-color: #B3E8E5;
+$rts-super-active-color: #3BACB6;
+
 
 $rts-messenger-header-height: $rts-offset-sm + $rts-user-avatar-d-sm + $rts-offset-sm;
 
@@ -329,20 +729,36 @@ $rts-offset-md: 16px;
 $rts-offset-lg: 24px;
 
 $rts-default-border-radius: 8px;
+$rts-rounded-border-radius: 16px;
 
 $rts-main-bg-color-light: #ffffff;
 $rts-secondary-bg-color-light: #e6eef3;
 $rts-main-bg-color-dark: #000000;
+$rts-live-color: #91d8bb;
+
+$rts-active-bg-color-light: #bbdffd;
 
-$rts-active-bg-color-light: #eeffde;
 
 $rts-font-color-dark: #000000;
 $rts-font-color-light: #333333;
 
+$rts-font-color-dbg-light: #ffffff;
+
 $rts-user-avatar-d-sm: 42px;
 $rts-user-avatar-d-md: 54px;
 $rts-user-avatar-d-lg: 65px;
 
+$rts-message-status-width: 69px;
+
+
+
+
+
+$rts-state-bg-color: #D1F1EF;
+$rts-disabled-color: #82DBD8;
+$rts-slightly-active-color: #B3E8E5;
+$rts-super-active-color: #3BACB6;
+
 
 .rtsee-messenger-header {
   position: relative;
@@ -353,11 +769,23 @@ $rts-user-avatar-d-lg: 65px;
   box-shadow: 0 1px 5px -1px rgb(0 0 0 / 21%);
   background-color: $rts-main-bg-color-light;
 
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+
   &.rtsee-messenger-header-chat-opened {
-    padding-left: $rts-messenger-header-height;
+    padding-right: 0;
 
-    .rtsee-messenger-profile-image {
-      padding-left: 0;
+    &.rtsee-messenger-header-expanded {
+      height: 100%;
+      padding: 0;
+
+      .rtsee-messenger-header-opened-chat-info {
+        padding: 0;
+      }
     }
 
     .rtsee-messenger-header-chat-title {
@@ -372,10 +800,47 @@ $rts-user-avatar-d-lg: 65px;
 
   .rtsee-messenger-header-opened-chat-info {
     position: relative;
-    padding: $rts-offset-sm $rts-messenger-header-height $rts-offset-sm $rts-messenger-header-height - $rts-offset-sm;
+    padding: $rts-offset-sm $rts-messenger-header-height $rts-offset-sm $rts-offset-sm;
     height: $rts-messenger-header-height;
-  }
+    transition: height, padding-left 0.2s;
+
+    .rtsee-messenger-profile-image-container {
+      right: 0;
+      left: unset;
+    }
 
+    &.rtsee-messenger-header-opened-chat-info-expanded {
+      height: 100%;
+
+      .rtsee-messenger-profile-image-container {
+        width: 100%;
+        height: unset;
+        padding: 0;
+
+        .rtsee-messenger-profile-image {
+          border-radius: 0;
+        }
+      }
+
+      .rtsee-messenger-profile-header-placeholder {
+        padding-top: 100%;
+        height: unset;
+        position: relative;
+
+        .rtsee-messenger-header-chat-title {
+          position: absolute;
+          left: $rts-offset-sm;
+          bottom: $rts-offset-sm;
+          color: $rts-font-color-dbg-light;
+          z-index: 2;
+        }
+      }
+
+      .rtsee-messenger-profile-data-container {
+        opacity: 1;
+      }
+    }
+  }
 
   .rtsee-messenger-close-chat {
     position: absolute;
@@ -391,35 +856,57 @@ $rts-user-avatar-d-lg: 65px;
     font-size: 18px;
   }
 
-  .rtsee-messenger-profile-image {
-    height: $rts-messenger-header-height;
-    width: $rts-messenger-header-height;
+  .rtsee-messenger-profile-image-container {
     position: absolute;
     left: 0;
     top: 0;
+    height: $rts-messenger-header-height;
+    width: $rts-messenger-header-height;
+    transition: width 0.2s;
     padding: $rts-offset-sm;
+    overflow: hidden;
 
-    img {
-      width: $rts-user-avatar-d-sm;
-      height: $rts-user-avatar-d-sm;
+    .rtsee-messenger-profile-image {
+      width: 100%;
+      background-size: contain;
+      padding-top: 100%;
       border-radius: 50%;
-      overflow: hidden;
+      transition: border-radius 0.2s;
     }
   }
 
+  .rtsee-messenger-profile-image-placeholder {
+    height: 100%;
+    width: 100%;
+    position: relative;
+  }
 
+  .rtsee-messenger-profile-data-container {
+    opacity: 0;
+    transition: opacity 0.2s;
+  }
 
-
-  .rtsee-messenger-call-button {
+  .rtsee-messenger-menu-toggle {
     position: absolute;
     right: 0;
     top: 0;
     height: $rts-messenger-header-height;
+    min-width: $rts-messenger-header-height;
     overflow: hidden;
     border: none;
     outline: none;
     background-color: transparent;
-    padding: 8px;
+    padding: $rts-offset-sm;
+    cursor: pointer;
+
+    :hover {
+      opacity: 0.7;
+    }
+
+    .rtsee-messenger-menu-toggle-icon {
+      line-height: $rts-messenger-header-height - $rts-offset-sm * 2;
+      font-size: 24px;
+    }
   }
 
   .rtsee-messenger-header-title {
@@ -443,20 +930,36 @@ $rts-offset-md: 16px;
 $rts-offset-lg: 24px;
 
 $rts-default-border-radius: 8px;
+$rts-rounded-border-radius: 16px;
 
 $rts-main-bg-color-light: #ffffff;
 $rts-secondary-bg-color-light: #e6eef3;
 $rts-main-bg-color-dark: #000000;
+$rts-live-color: #91d8bb;
+
+$rts-active-bg-color-light: #bbdffd;
 
-$rts-active-bg-color-light: #eeffde;
 
 $rts-font-color-dark: #000000;
 $rts-font-color-light: #333333;
 
+$rts-font-color-dbg-light: #ffffff;
+
 $rts-user-avatar-d-sm: 42px;
 $rts-user-avatar-d-md: 54px;
 $rts-user-avatar-d-lg: 65px;
 
+$rts-message-status-width: 69px;
+
+
+
+
+
+$rts-state-bg-color: #D1F1EF;
+$rts-disabled-color: #82DBD8;
+$rts-slightly-active-color: #B3E8E5;
+$rts-super-active-color: #3BACB6;
+
 
 $rts-messenger-header-height: $rts-offset-sm + $rts-user-avatar-d-sm + $rts-offset-sm;
 
@@ -465,20 +968,36 @@ $rts-offset-md: 16px;
 $rts-offset-lg: 24px;
 
 $rts-default-border-radius: 8px;
+$rts-rounded-border-radius: 16px;
 
 $rts-main-bg-color-light: #ffffff;
 $rts-secondary-bg-color-light: #e6eef3;
 $rts-main-bg-color-dark: #000000;
+$rts-live-color: #91d8bb;
+
+$rts-active-bg-color-light: #bbdffd;
 
-$rts-active-bg-color-light: #eeffde;
 
 $rts-font-color-dark: #000000;
 $rts-font-color-light: #333333;
 
+$rts-font-color-dbg-light: #ffffff;
+
 $rts-user-avatar-d-sm: 42px;
 $rts-user-avatar-d-md: 54px;
 $rts-user-avatar-d-lg: 65px;
 
+$rts-message-status-width: 69px;
+
+
+
+
+
+$rts-state-bg-color: #D1F1EF;
+$rts-disabled-color: #82DBD8;
+$rts-slightly-active-color: #B3E8E5;
+$rts-super-active-color: #3BACB6;
+
 
 .rtsee-chat-input {
   height: 100%;
@@ -517,11 +1036,435 @@ $rts-user-avatar-d-lg: 65px;
     background: none;
     border: none;
     outline: none;
+    font-size: 27px;
+  }
+}
+
+$rts-offset-sm: 8px;
+$rts-offset-md: 16px;
+$rts-offset-lg: 24px;
+
+$rts-default-border-radius: 8px;
+$rts-rounded-border-radius: 16px;
+
+$rts-main-bg-color-light: #ffffff;
+$rts-secondary-bg-color-light: #e6eef3;
+$rts-main-bg-color-dark: #000000;
+$rts-live-color: #91d8bb;
+
+$rts-active-bg-color-light: #bbdffd;
+
+
+$rts-font-color-dark: #000000;
+$rts-font-color-light: #333333;
+
+$rts-font-color-dbg-light: #ffffff;
+
+$rts-user-avatar-d-sm: 42px;
+$rts-user-avatar-d-md: 54px;
+$rts-user-avatar-d-lg: 65px;
+
+$rts-message-status-width: 69px;
+
+
+
+
+
+$rts-state-bg-color: #D1F1EF;
+$rts-disabled-color: #82DBD8;
+$rts-slightly-active-color: #B3E8E5;
+$rts-super-active-color: #3BACB6;
+
+
+.rtsee-messenger-message-time-and-status {
+  height: $rts-user-avatar-d-md * 0.33;
+  width: $rts-message-status-width;
+
+  .rtsee-messenger-message-status {
+    height: $rts-user-avatar-d-md * 0.33;
+    line-height: $rts-user-avatar-d-md * 0.33;
+    width: 20px;
+    float: right;
+
+    .rtsee-message-sent-status {
+      color: #707579;
+    }
+
+    .rtsee-message-delivered-status {
+      color: blue;
+    }
+
+    .rtsee-message-seen-status {
+      color: green;
+    }
+  }
+
+  .rtsee-messenger-message-time {
+    float: right;
+    font-size: .75rem;
+    font-weight: 300;
+    line-height: $rts-user-avatar-d-md * 0.33;
+  }
+}
+
+
+
+
+$rts-offset-sm: 8px;
+$rts-offset-md: 16px;
+$rts-offset-lg: 24px;
+
+$rts-default-border-radius: 8px;
+$rts-rounded-border-radius: 16px;
+
+$rts-main-bg-color-light: #ffffff;
+$rts-secondary-bg-color-light: #e6eef3;
+$rts-main-bg-color-dark: #000000;
+$rts-live-color: #91d8bb;
+
+$rts-active-bg-color-light: #bbdffd;
+
+
+$rts-font-color-dark: #000000;
+$rts-font-color-light: #333333;
+
+$rts-font-color-dbg-light: #ffffff;
+
+$rts-user-avatar-d-sm: 42px;
+$rts-user-avatar-d-md: 54px;
+$rts-user-avatar-d-lg: 65px;
+
+$rts-message-status-width: 69px;
+
+
+
+
+
+$rts-state-bg-color: #D1F1EF;
+$rts-disabled-color: #82DBD8;
+$rts-slightly-active-color: #B3E8E5;
+$rts-super-active-color: #3BACB6;
+
+
+.rtsee-events-dashboard {
+  background-color: $rts-main-bg-color-light;
+  padding: $rts-offset-sm;
+  border-radius: $rts-default-border-radius;
+
+  .rtsee-events-dashboard-client-thumbnails {
+    .rtsee-events-dashboard-client-thumbnail-wrapper {
+      margin-bottom: $rts-offset-md;
+
+      &:last-of-type {
+        margin-bottom: 0;
+      }
+    }
+  }
+}
+
+$rts-offset-sm: 8px;
+$rts-offset-md: 16px;
+$rts-offset-lg: 24px;
+
+$rts-default-border-radius: 8px;
+$rts-rounded-border-radius: 16px;
+
+$rts-main-bg-color-light: #ffffff;
+$rts-secondary-bg-color-light: #e6eef3;
+$rts-main-bg-color-dark: #000000;
+$rts-live-color: #91d8bb;
+
+$rts-active-bg-color-light: #bbdffd;
+
+
+$rts-font-color-dark: #000000;
+$rts-font-color-light: #333333;
+
+$rts-font-color-dbg-light: #ffffff;
+
+$rts-user-avatar-d-sm: 42px;
+$rts-user-avatar-d-md: 54px;
+$rts-user-avatar-d-lg: 65px;
+
+$rts-message-status-width: 69px;
+
+
+
+
+
+$rts-state-bg-color: #D1F1EF;
+$rts-disabled-color: #82DBD8;
+$rts-slightly-active-color: #B3E8E5;
+$rts-super-active-color: #3BACB6;
+
+
+$live-indicator-d: 15px;
+$engage-button-border-thickness: 2px;
+
+.rtsee-dashboard-client-thumbnail {
+  position: relative;
+
+  .rtsee-dashboard-client-header {
+    position: relative;
+    padding-left: $rts-user-avatar-d-sm + $rts-offset-sm;
+    height: $rts-user-avatar-d-sm;
+
+    .rtsee-dashboard-client-header-photo {
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: $rts-user-avatar-d-sm;
+      height: $rts-user-avatar-d-sm;
+
+      .rtsee-dashboard-client-header-image {
+        width: 100%;
+        height: 100%;
+        border-radius: 50%;
+        overflow: hidden;
+        background-size: cover;
+      }
+
+      .rtsee-dashboard-client-live-indicator {
+        position: absolute;
+        bottom: -1px;
+        right: -1px;
+        width: $live-indicator-d;
+        height: $live-indicator-d;
+        border-radius: 50%;
+        background: $rts-live-color;
+      }
+    }
+
+    .rtsee-dashboard-client-name {
+      height: $rts-user-avatar-d-sm;
+      line-height: $rts-user-avatar-d-sm;
+      margin: 0;
+      font-size: 16px;
+      font-weight: 600;
+      padding-right: $rts-user-avatar-d-sm + $rts-offset-sm;
+      position: relative;
+      display: inline-block;
+      max-width: 100%;
+
+      .rtsee-dashboard-client-name-text {
+        width: 100%;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: inline-block;
+      }
+
+      .rtsee-dashboard-client-engage {
+        position: absolute;
+        width: $rts-user-avatar-d-sm;
+        height: $rts-user-avatar-d-sm;
+        right: 0;
+        top: 0;
+        outline: none;
+        border: $engage-button-border-thickness solid $rts-font-color-light;
+        background-color: transparent;
+        cursor: pointer;
+        border-radius: $rts-default-border-radius;
+
+        &:hover {
+          opacity: 0.7;
+        }
+
+        .rtsee-dashboard-client-engage-icon {
+          font-size: 23px;
+          line-height: $rts-user-avatar-d-sm - $engage-button-border-thickness * 2;
+        }
+      }
+    }
+  }
+
+  .rtsee-dashboard-sessions {
+    overflow-x: auto;
+    overflow-y: hidden;
+    white-space: nowrap;
+    padding-top: $rts-offset-sm;
+
+    .rtsee-dashboard-sessions-container {
+      display: inline-block;
+      width: 320px;
+      margin-right: $rts-offset-sm;
+      vertical-align: top;
+    }
   }
+
+
 }
 
+$rts-offset-sm: 8px;
+$rts-offset-md: 16px;
+$rts-offset-lg: 24px;
+
+$rts-default-border-radius: 8px;
+$rts-rounded-border-radius: 16px;
+
+$rts-main-bg-color-light: #ffffff;
+$rts-secondary-bg-color-light: #e6eef3;
+$rts-main-bg-color-dark: #000000;
+$rts-live-color: #91d8bb;
+
+$rts-active-bg-color-light: #bbdffd;
+
+
+$rts-font-color-dark: #000000;
+$rts-font-color-light: #333333;
+
+$rts-font-color-dbg-light: #ffffff;
+
+$rts-user-avatar-d-sm: 42px;
+$rts-user-avatar-d-md: 54px;
+$rts-user-avatar-d-lg: 65px;
+
+$rts-message-status-width: 69px;
+
+
+
+
+
+$rts-state-bg-color: #D1F1EF;
+$rts-disabled-color: #82DBD8;
+$rts-slightly-active-color: #B3E8E5;
+$rts-super-active-color: #3BACB6;
+
+
+.rtsee-events-dashboard-session {
+  position: relative;
+  border-radius: $rts-default-border-radius;
+  padding: $rts-offset-sm;
+  background-color: $rts-state-bg-color;
+
+  .rtsee-events-dashboard-session-header {
+    height: $rts-user-avatar-d-sm;
+    padding-right: $rts-user-avatar-d-sm + $rts-offset-sm;
 
+    .rtsee-events-dashboard-session-client-info {
+      font-size: 16px;
+      margin: 0;
+      color: $rts-font-color-dark;
+    }
 
+    .rtsee-events-dashboard-session-os-info {
+      font-size: 14px;
+      margin: 0;
+      color: $rts-font-color-light;
+    }
+
+    .rtsee-events-dashboard-session-device-info {
+      position: absolute;
+      right: 0;
+      top: 0;
+      width: $rts-user-avatar-d-sm;
+      height: $rts-user-avatar-d-sm;
+      line-height: $rts-user-avatar-d-sm;
+      text-align: center;
+
+      .rtsee-events-dashboard-session-device-info-icon {
+        font-size: 24px;
+        vertical-align: middle;
+      }
+    }
+  }
+
+  .rtsee-events-dashboard-session-events-list {
+    list-style-type: none;
+    padding-left: 0;
+    margin: 0;
+
+    .rtsee-events-dashboard-session-event {
+      margin-bottom: $rts-offset-sm;
+
+      &:last-of-type {
+       margin-bottom: 0;
+      }
+    }
+  }
+}
+
+$rts-offset-sm: 8px;
+$rts-offset-md: 16px;
+$rts-offset-lg: 24px;
+
+$rts-default-border-radius: 8px;
+$rts-rounded-border-radius: 16px;
+
+$rts-main-bg-color-light: #ffffff;
+$rts-secondary-bg-color-light: #e6eef3;
+$rts-main-bg-color-dark: #000000;
+$rts-live-color: #91d8bb;
+
+$rts-active-bg-color-light: #bbdffd;
+
+
+$rts-font-color-dark: #000000;
+$rts-font-color-light: #333333;
+
+$rts-font-color-dbg-light: #ffffff;
+
+$rts-user-avatar-d-sm: 42px;
+$rts-user-avatar-d-md: 54px;
+$rts-user-avatar-d-lg: 65px;
+
+$rts-message-status-width: 69px;
+
+
+
+
+
+$rts-state-bg-color: #D1F1EF;
+$rts-disabled-color: #82DBD8;
+$rts-slightly-active-color: #B3E8E5;
+$rts-super-active-color: #3BACB6;
+
+
+
+.rtsee-events-dashboard-event-thumbnail {
+
+  .rtsee-events-dashboard-default-event-thumbnail {
+    display: flex;
+    justify-content: space-between;
+    height: $rts-user-avatar-d-sm;
+    background-color: $rts-slightly-active-color;
+    padding: 0 $rts-offset-sm;
+    border-radius: $rts-default-border-radius;
+
+    .rtsee-events-dashboard-default-event-thumbnail-name {
+      font-size: 16px;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      line-height: $rts-user-avatar-d-sm;
+    }
+
+    .rtsee-events-dashboard-default-event-thumbnail-info  {
+      display: flex;
+      justify-content: flex-end;
+
+      .rtsee-events-dashboard-default-event-thumbnail-time {
+        padding-left: $rts-offset-sm;
+        font-size: 12px;
+        font-weight: 300;
+        color: $rts-font-color-light;
+        line-height: $rts-user-avatar-d-sm;
+      }
+
+
+      .rtsee-events-dashboard-default-event-thumbnail-details {
+        height: $rts-user-avatar-d-sm;
+        line-height: $rts-user-avatar-d-sm;
+
+        .rtsee-events-dashboard-default-event-thumbnail-details-icon {
+          height: 100%;
+          font-size: 24px;
+          line-height: $rts-user-avatar-d-sm;
+        }
+      }
+    }
+  }
+}