@rtsee/ngx 0.0.103 → 0.0.104

package/dist/ngx/src/lib/theme/messenger/invite-link.scss

@@ -0,0 +1,63 @@
+// ═══════════════════════════════════════════════════════════════════
+// MESSENGER — Invite Link
+// ═══════════════════════════════════════════════════════════════════
+@import "./variables";
+
+.rts-invite-link {
+  padding: $rtsu-space-md;
+
+  .rts-invite-link-info {
+    display: flex;
+    gap: $rtsu-space-sm;
+    align-items: flex-start;
+    margin-bottom: $rtsu-space-md;
+    padding: $rtsu-space-sm + $rtsu-space-xs $rtsu-space-md;
+    background-color: var(--rts-accent-highlight-dim, rgba(191, 139, 255, 0.15));
+    border-radius: $rtsu-radius-md;
+    border: 1px solid rgba(191, 139, 255, 0.1);
+  }
+
+  .rts-invite-link-icon {
+    font-size: 24px;
+    color: var(--rts-accent-highlight, #bf8bff);
+    margin-top: 2px;
+    flex-shrink: 0;
+  }
+
+  .rts-invite-link-info-text {
+    h4 {
+      margin: 0 0 $rtsu-space-xs;
+      font-size: $rtsu-font-size-base;
+      font-weight: $rtsu-font-weight-semibold;
+      color: var(--rts-text-primary);
+    }
+
+    p {
+      margin: 0;
+      font-size: $rtsu-font-size-sm;
+      color: var(--rts-text-secondary);
+      line-height: $rtsu-line-height-snug + 0.1;
+    }
+  }
+
+  .rts-invite-link-url-container {
+    .rts-invite-link-url-input {
+      font-size: $rtsu-font-size-sm + 1px; // 13px
+      color: var(--rts-text-secondary);
+      background-color: var(--rts-bg-surface);
+      border: 1px solid var(--rts-border-med);
+      border-radius: $rtsu-radius-sm;
+      padding: $rtsu-space-sm;
+      width: 100%;
+      cursor: text;
+      user-select: all;
+      font-family: $rtsu-font-family;
+
+      &:focus {
+        user-select: all;
+        outline: none;
+        border-color: var(--rts-accent, #6c5ce7);
+      }
+    }
+  }
+}

package/dist/ngx/src/lib/theme/messenger/message-time-and-status.scss

@@ -1,25 +1,39 @@
-@import "../common-variables";
+// ═══════════════════════════════════════════════════════════════════
+// MESSENGER — Message Time & Status
+// ═══════════════════════════════════════════════════════════════════
+@import "./variables";
 
-.rtsee-messenger-message-time-and-status {
-  height: $rts-user-avatar-d-md * 0.33;
-  width: $rts-message-status-width;
+.rts-messenger-message-time-and-status {
+  height: 18px;
+  width: $rtsu-message-status-width;
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: $rtsu-space-2xs;
 
-  .rtsee-messenger-message-status {
-    height: $rts-user-avatar-d-md * 0.33;
-    line-height: $rts-user-avatar-d-md * 0.33;
+  .rts-messenger-message-status {
+    height: 18px;
+    line-height: 18px;
     width: 20px;
-    float: right;
-    color: $rts-new-primary-color;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--rts-accent-light, #a29bfe);
 
     &.showing-status-inside-chat {
-      color: $rts-font-color-dbg-light;
+      color: rgba(255, 255, 255, 0.7);
+    }
+
+    .material-icons-outlined {
+      font-size: $rtsu-font-size-md;
     }
   }
 
-  .rtsee-messenger-message-time {
-    float: right;
-    font-size: 12px;
-    font-weight: 300;
-    line-height: $rts-user-avatar-d-md * 0.33;
+  .rts-messenger-message-time {
+    font-size: $rtsu-font-size-xs;
+    font-weight: $rtsu-font-weight-light;
+    color: var(--rts-text-muted);
+    line-height: 18px;
+    white-space: nowrap;
   }
 }

package/dist/ngx/src/lib/theme/messenger/message.scss

@@ -1,17 +1,19 @@
-@import "../common-variables";
+// ═══════════════════════════════════════════════════════════════════
+// MESSENGER — Message Bubble
+// ═══════════════════════════════════════════════════════════════════
+@import "./variables";
 
-.rtsee-messenger-message-wrapper-with-sender {
-  .rtsee-messenger-message-container {
-    &.rtsee-message-from-me {
-      .rtsee-messenger-message {
+.rts-messenger-message-wrapper-with-sender {
+  .rts-message-container {
+    &.rts-message-from-me {
+      .rts-messenger-message {
         float: left;
       }
     }
   }
 }
 
-
-.rtsee-messenger-message-container {
+.rts-message-container {
   width: 100%;
   position: relative;
   overflow: hidden;
@@ -22,37 +24,50 @@
     clear: both;
   }
 
-  &.rtsee-message-from-me {
-    .rtsee-messenger-message {
+  // ── My Messages (right-aligned, gradient) ──
+  &.rts-message-from-me {
+    .rts-messenger-message {
       float: right;
-      background-color: $rts-new-primary-color;
-      color: $rts-font-color-dbg-light;
+      background: linear-gradient(
+        135deg,
+        $rtsu-accent-purple 0%,
+        $rtsu-accent-purple-light 100%
+      );
+      color: #fff;
+      border-bottom-right-radius: $rtsu-radius-xs;
+      box-shadow: $rtsu-shadow-accent-sm;
     }
   }
 
-  .rtsee-messenger-message {
+  // ── Message Bubble ──
+  .rts-messenger-message {
     float: left;
-    background-color: $rts-main-bg-color-light;
-    border-radius: $rts-new-border-radius-rounded;
-    padding: $rts-new-offset-xsm;
-    font-size: 14px;
-    margin-bottom: $rts-offset-sm * 0.5;
-
+    background-color: var(--rts-bg-surface);
+    border: 1px solid var(--rts-border-dim);
+    border-radius: $rtsu-radius-lg;
+    border-bottom-left-radius: $rtsu-radius-xs;
+    padding: $rtsu-space-sm + $rtsu-space-xs $rtsu-space-md;
+    font-size: $rtsu-font-size-base;
+    line-height: $rtsu-line-height-normal;
+    margin-bottom: $rtsu-space-xs;
+    max-width: 80%;
+    color: var(--rts-text-primary);
+    animation: rts-fade-up 0.2s ease-out both;
 
     overflow-wrap: break-word;
     word-wrap: break-word;
     word-break: break-word;
-    -webkit-hyphens: auto;
     hyphens: auto;
 
-    .rtsee-messenger-message-text {
+    .rts-messenger-message-text {
       margin: 0;
       white-space: pre-wrap;
       float: left;
     }
 
-    .rtsee-messenger-message-info {
+    .rts-messenger-message-info {
       float: right;
+      margin-left: $rtsu-space-sm;
     }
   }
 }

package/dist/ngx/src/lib/theme/messenger/messages-list.scss

@@ -1,18 +1,20 @@
-@import "../common-variables";
-
-$messenger-date-background-color: #FFFFFF7F;
+// ═══════════════════════════════════════════════════════════════════
+// MESSENGER — Messages List
+// ═══════════════════════════════════════════════════════════════════
+@import "./variables";
 
+// ── Conference mode overrides ──
 .rtsee-shell-conference-mode {
-  .rtsee-chat {
-    .rtsee-messenger-messages-list {
-      .rtsee-messenger-message-wrapper {
-        &.rtsee-messenger-message-wrapper-with-sender {
-          .rtsee-messenger-message-inset {
-            .rtsee-messenger-message-sender-image {
-              top: $rts-messenger-header-height + $rts-offset-sm + $video-container-height;
-
-              @media screen and (min-width: $rts-break-md) {
-                top: $rts-offset-sm;
+  .rts-chat {
+    .rts-messages-list {
+      .rts-messenger-message-wrapper {
+        &.rts-messenger-message-wrapper-with-sender {
+          .rts-messenger-message-inset {
+            .rts-messenger-message-sender-image {
+              top: $rts-messenger-header-height + $rtsu-space-sm + 240px;
+
+              @media screen and (min-width: $rtsu-break-md) {
+                top: $rtsu-space-sm;
               }
             }
           }
@@ -20,16 +22,16 @@ $messenger-date-background-color: #FFFFFF7F;
       }
     }
 
-    &.rtsee-chat-standalone {
-      .rtsee-messenger-messages-list {
-        .rtsee-messenger-message-wrapper {
-          &.rtsee-messenger-message-wrapper-with-sender {
-            .rtsee-messenger-message-inset {
-              .rtsee-messenger-message-sender-image {
-                top: $rts-offset-sm + $video-container-height;
+    &.rts-chat-standalone {
+      .rts-messages-list {
+        .rts-messenger-message-wrapper {
+          &.rts-messenger-message-wrapper-with-sender {
+            .rts-messenger-message-inset {
+              .rts-messenger-message-sender-image {
+                top: $rtsu-space-sm + 240px;
 
-                @media screen and (min-width: $rts-break-md) {
-                  top: $rts-offset-sm;
+                @media screen and (min-width: $rtsu-break-md) {
+                  top: $rtsu-space-sm;
                 }
               }
             }
@@ -40,23 +42,23 @@ $messenger-date-background-color: #FFFFFF7F;
   }
 }
 
-.rtsee-chat {
+// ── Chat container ──
+.rts-chat {
   height: 100%;
-  background: $rts-new-secondary-bg-color-light;
-  padding: 0 $rts-offset-sm;
+  padding: 0 $rtsu-space-sm;
 
-  &.rtsee-chat-standalone {
+  &.rts-chat-standalone {
     background-color: transparent;
 
-    .rtsee-messenger-messages-list {
-      .rtsee-messenger-message-wrapper {
+    .rts-messages-list {
+      .rts-messenger-message-wrapper {
         &:last-child {
-          margin-bottom: 0; // here
+          margin-bottom: 0;
         }
-        &.rtsee-messenger-message-wrapper-with-sender {
-          .rtsee-messenger-message-inset {
-            .rtsee-messenger-message-sender-image {
-              top: $rts-offset-sm;
+        &.rts-messenger-message-wrapper-with-sender {
+          .rts-messenger-message-inset {
+            .rts-messenger-message-sender-image {
+              top: $rtsu-space-sm;
             }
           }
         }
@@ -65,102 +67,115 @@ $messenger-date-background-color: #FFFFFF7F;
   }
 }
 
-.rtsee-messenger-messages-list {
+// ── Messages List ──
+.rts-messages-list {
   height: 100%;
-  background-color: $rts-new-secondary-bg-color-light;
+  background-color: transparent;
   border-top: 1px solid transparent;
 
-  .rtsee-messenger-message-wrapper {
-    margin-bottom: $rts-offset-sm;
+  .rts-messenger-message-wrapper {
+    margin-bottom: $rtsu-space-sm;
     position: relative;
     padding-left: 0;
 
     &:first-child {
-      margin-top: $rts-offset-sm;
+      margin-top: $rtsu-space-sm;
     }
 
-    &.rtsee-messenger-message-wrapper-with-sender {
-      padding-left: $rts-new-user-avatar-d-sm + $rts-offset-sm;
+    // ── With Sender (group chat) ──
+    &.rts-messenger-message-wrapper-with-sender {
+      padding-left: $rtsu-avatar-sm + $rtsu-space-sm;
 
-      .rtsee-messenger-message-sender-name {
+      .rts-messenger-message-sender-name {
         display: block;
       }
 
-      .rtsee-messenger-message-inset {
+      .rts-messenger-message-inset {
         display: block;
       }
     }
 
-    .rtsee-messenger-message-sender-name {
+    // ── Sender Name ──
+    .rts-messenger-message-sender-name {
       display: none;
-      font-size: 13px;
-      padding-left: $rts-offset-sm;
-      color: $rts-font-color-light;
+      font-size: $rtsu-font-size-sm + 1px; // 13px
+      padding-left: $rtsu-space-sm;
+      color: var(--rts-text-secondary);
 
       p {
         margin: 0;
       }
     }
 
-    .rtsee-messenger-message-inset {
+    // ── Sender Avatar (sticky) ──
+    .rts-messenger-message-inset {
       display: none;
       position: absolute;
       inset: 0;
       pointer-events: none;
 
-      .rtsee-messenger-message-sender-image {
+      .rts-messenger-message-sender-image {
         position: sticky;
         left: 0;
-        top: $rts-messenger-header-height + $rts-offset-sm;
+        top: $rts-messenger-header-height + $rtsu-space-sm;
         bottom: 0;
-        width: $rts-new-user-avatar-d-sm;
-        height: $rts-new-user-avatar-d-sm;
+        width: $rtsu-avatar-sm;
+        height: $rtsu-avatar-sm;
         border-radius: 50%;
+        object-fit: cover;
       }
     }
 
     &:last-child {
-      margin-bottom: $rts-bottom-nav-height;
+      margin-bottom: $rtsu-bottom-nav-height;
     }
   }
 
-  .rtsee-messenger-message-date {
+  // ── Date Separator ──
+  .rts-messenger-message-date {
     text-align: center;
-    padding-bottom: $rts-offset-sm;
+    padding-bottom: $rtsu-space-sm;
 
     span {
       display: inline-block;
-      background-color: $messenger-date-background-color;
+      background: linear-gradient(
+        135deg,
+        var(--rts-card-bg-start) 0%,
+        var(--rts-card-bg-end) 100%
+      );
+      border: 1px solid var(--rts-border-dim);
+      backdrop-filter: $rtsu-glass-blur;
       margin: 0 auto;
-      font-size: 16px;
-      font-weight: 400;
-      color: $rts-new-primary-color;
-      padding: $rts-new-offset-xsm / 2 $rts-new-offset-md;
-      border-radius: $rts-new-border-radius-rounded;
+      font-size: $rtsu-font-size-sm;
+      font-weight: $rtsu-font-weight-medium;
+      color: var(--rts-text-secondary);
+      padding: $rtsu-space-xs $rtsu-space-md;
+      border-radius: $rtsu-radius-pill;
     }
   }
 
-  @media screen and (min-width: $rts-break-md) {
+  // ── Tablet+ ──
+  @media screen and (min-width: $rtsu-break-md) {
     overflow: auto;
     overscroll-behavior-y: contain;
 
-    .rtsee-messenger-message-wrapper {
+    .rts-messenger-message-wrapper {
       &:last-child {
         margin-bottom: 0;
       }
 
-
-      .rtsee-messenger-message-inset {
-        .rtsee-messenger-message-sender-image {
-          top: $rts-offset-sm;
+      .rts-messenger-message-inset {
+        .rts-messenger-message-sender-image {
+          top: $rtsu-space-sm;
         }
       }
     }
   }
 }
 
-.rtsee-chat-standalone {
-  .rtsee-messenger-messages-list {
+// ── Standalone chat transparent list ──
+.rts-chat-standalone {
+  .rts-messages-list {
     background-color: transparent;
   }
 }