@ermis-network/ermis-chat-react 1.0.0

package/src/styles/_message-bubble.css

@@ -0,0 +1,656 @@
+/* --- Quoted message preview --- */
+.ermis-quoted-message {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: var(--ermis-spacing-xs) var(--ermis-spacing-sm);
+  border-left: 3px solid var(--ermis-accent);
+  background-color: var(--ermis-quote-other-bg);
+  border-radius: 0 var(--ermis-radius-sm) var(--ermis-radius-sm) 0;
+  cursor: pointer;
+  max-width: 100%;
+  transition: background-color 0.15s;
+  margin-top: var(--ermis-spacing-sm);
+}
+
+.ermis-quoted-message:hover {
+  background-color: var(--ermis-quote-other-bg-hover);
+}
+
+.ermis-quoted-message--own {
+  border-left-color: var(--ermis-quote-own-border);
+  background-color: var(--ermis-quote-own-bg);
+  border-radius: var(--ermis-radius-sm);
+}
+
+.ermis-quoted-message--own:hover {
+  background-color: var(--ermis-quote-own-bg-hover);
+}
+
+.ermis-quoted-message__author {
+  font-size: var(--ermis-font-size-xs);
+  font-weight: 600;
+  color: var(--ermis-accent);
+}
+
+.ermis-quoted-message--own .ermis-quoted-message__author {
+  color: var(--ermis-quote-own-author);
+}
+
+.ermis-quoted-message__text {
+  font-size: var(--ermis-font-size-xs);
+  color: var(--ermis-text-muted);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.ermis-quoted-message--own .ermis-quoted-message__text {
+  color: var(--ermis-quote-own-text);
+}
+
+/* Light theme: same approach works since we darken the accent bg */
+
+/* Avatar column: fixed width for consistent alignment */
+.ermis-message-list__item-avatar {
+  flex-shrink: 0;
+}
+
+.ermis-message-list__item-content {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+  max-width: 75%;
+  gap: 2px;
+}
+
+.ermis-message-list__item--own .ermis-message-list__item-content {
+  align-items: flex-end;
+}
+
+.ermis-message-list__bubble-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+  align-items: center; /* Center actions vertically with the bubble */
+  position: relative;
+  width: 100%;
+}
+
+.ermis-message-list__item--own .ermis-message-list__bubble-wrapper {
+  flex-direction: row-reverse;
+}
+
+.ermis-message-list__item-user {
+  font-size: var(--ermis-font-size-xs);
+  font-weight: 600;
+  color: var(--ermis-accent);
+  margin-bottom: 1px;
+}
+
+/* Timestamp inside bubble — bottom right */
+.ermis-message-list__item-time {
+  font-size: 0.625rem;
+  color: var(--ermis-text-muted);
+  margin-left: auto;
+  padding-left: var(--ermis-spacing-md);
+  white-space: nowrap;
+  line-height: 1;
+  align-self: flex-end;
+  padding-top: 4px;
+  width: 100%;
+  text-align: right;
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-end;
+  gap: 3px;
+}
+
+.ermis-message-list__edited-indicator {
+  margin-right: 2px;
+}
+
+/* --- Inline message status icon (inside bubble, after timestamp) --- */
+.ermis-message-status-icon {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  line-height: 0;
+}
+
+.ermis-message-status-icon--sent {
+  color: var(--ermis-text-muted);
+  opacity: 0.5;
+}
+
+.ermis-message-bubble--own .ermis-message-status-icon--sent {
+  color: rgba(255, 255, 255, 0.6);
+  opacity: 1;
+}
+
+.ermis-message-status-icon--sending {
+  color: var(--ermis-text-muted);
+  opacity: 0.4;
+}
+
+.ermis-message-bubble--own .ermis-message-status-icon--sending {
+  color: rgba(255, 255, 255, 0.4);
+  opacity: 1;
+}
+
+.ermis-message-status-icon--failed {
+  color: var(--ermis-color-error, #f44336);
+}
+
+.ermis-message-bubble--own .ermis-message-list__item-time {
+  color: rgba(255, 255, 255, 0.6);
+}
+
+.ermis-message-list__item-text {
+  font-size: var(--ermis-font-size-sm);
+  line-height: 1.5;
+  word-break: break-word;
+}
+
+/* --- Mentions --- */
+.ermis-mention {
+  color: var(--ermis-accent);
+  font-weight: 600;
+  cursor: pointer;
+}
+
+.ermis-message-bubble--own .ermis-mention {
+  color: rgba(255, 255, 255, 0.9);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+}
+
+/* Auto-detected URLs/emails in message text */
+.ermis-text-link {
+  color: var(--ermis-accent);
+  text-decoration: underline;
+  text-underline-offset: 2px;
+  cursor: pointer;
+  word-break: break-all;
+}
+
+.ermis-text-link:hover {
+  opacity: 0.8;
+}
+
+.ermis-message-bubble--own .ermis-text-link {
+  color: rgba(255, 255, 255, 0.9);
+}
+
+/* --- Message Bubble --- */
+.ermis-message-bubble {
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  align-items: flex-end;
+  padding: var(--ermis-spacing-sm) var(--ermis-spacing-md);
+  border-radius: var(--ermis-radius-lg);
+  width: 100%;
+  word-break: break-word;
+}
+
+.ermis-message-bubble--own {
+  background-color: var(--ermis-bubble-own-bg);
+  color: var(--ermis-bubble-own-text);
+  border-bottom-right-radius: var(--ermis-radius-sm);
+}
+
+.ermis-message-bubble--other {
+  background-color: var(--ermis-bubble-other-bg);
+  color: var(--ermis-bubble-other-text);
+  border-bottom-left-radius: var(--ermis-radius-sm);
+}
+
+/* --- System messages --- */
+.ermis-message-list__system {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--ermis-spacing-sm);
+  padding: var(--ermis-spacing-sm) 0;
+  margin: var(--ermis-spacing-xs) 0;
+  align-self: center;
+}
+
+.ermis-message-list__system-text {
+  font-size: var(--ermis-font-size-xs);
+  color: var(--ermis-text-muted);
+  font-style: italic;
+}
+
+/* --- Signal messages (call events) --- */
+.ermis-message-list__signal-text {
+  font-size: var(--ermis-font-size-sm);
+  color: inherit;
+  line-height: 1.5;
+  word-break: break-word;
+}
+
+/* --- Attachments --- */
+
+/* When message has attachments, constrain entire content column (quote + bubble) */
+.ermis-message-list__item-content--has-attachments {
+  width: 350px;
+}
+
+/* Container for messages with both text + attachments */
+.ermis-message-content--with-attachments {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+.ermis-message-content--with-attachments .ermis-message-list__item-text {
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+}
+
+.ermis-attachment-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--ermis-spacing-xs);
+  margin-top: var(--ermis-spacing-xs);
+  width: 100%;
+}
+
+/* Media grid (images + videos) */
+.ermis-attachment-grid {
+  display: grid;
+  gap: 2px;
+  border-radius: var(--ermis-radius-md);
+  overflow: hidden;
+}
+
+.ermis-attachment-grid--single {
+  grid-template-columns: 1fr;
+}
+
+.ermis-attachment-grid--multi {
+  grid-template-columns: 1fr 1fr;
+}
+
+.ermis-attachment-grid .ermis-attachment--image,
+.ermis-attachment-grid .ermis-attachment--video {
+  width: 100%;
+  height: 100%;
+  max-width: none;
+  max-height: 200px;
+  object-fit: cover;
+  border-radius: 0;
+  display: block;
+}
+
+/* Single media: larger height allowed */
+.ermis-attachment-grid--single .ermis-attachment--image,
+.ermis-attachment-grid--single .ermis-attachment--video {
+  max-height: 300px;
+}
+
+/* If odd number of media in multi-grid, last item spans full width */
+.ermis-attachment-grid--multi > :last-child:nth-child(odd) {
+  grid-column: 1 / -1;
+}
+
+/* --- Aspect Ratio Box — prevents CLS (Cumulative Layout Shift) --- */
+.ermis-attachment-aspect-box {
+  position: relative;
+  overflow: hidden;
+  border-radius: var(--ermis-radius-md);
+  width: 100%;
+  max-width: 300px;
+  min-height: 120px;
+  background-color: var(--ermis-bg-hover, #2a2a4a);
+}
+
+/* Blurred thumbnail preview (shown while full image loads) */
+.ermis-attachment-blur-preview {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  filter: blur(20px);
+  transform: scale(1.1); /* hide blur edges */
+  z-index: 1;
+}
+
+/* Shimmer animation placeholder (when no thumbnail available) */
+.ermis-attachment-shimmer {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1;
+  background: linear-gradient(
+    110deg,
+    var(--ermis-bg-hover, #2a2a4a) 30%,
+    var(--ermis-bg-active, #3a3a5a) 50%,
+    var(--ermis-bg-hover, #2a2a4a) 70%
+  );
+  background-size: 200% 100%;
+  animation: ermis-shimmer 1.5s ease-in-out infinite;
+}
+
+@keyframes ermis-shimmer {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+/* Full image — hidden until loaded, fades in over blur/shimmer */
+.ermis-attachment-aspect-box .ermis-attachment--image {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+  z-index: 2;
+  /* Reset standalone styles inside aspect-box */
+  max-width: none;
+  max-height: none;
+  border-radius: 0;
+}
+
+.ermis-attachment-aspect-box .ermis-attachment--image.ermis-attachment--loaded {
+  opacity: 1;
+}
+
+/* Override aspect-box inside grid: remove constraints */
+.ermis-attachment-grid .ermis-attachment-aspect-box {
+  max-width: none;
+  border-radius: 0;
+  min-height: 100px;
+}
+
+.ermis-attachment--image {
+  max-width: 300px;
+  max-height: 200px;
+  border-radius: var(--ermis-radius-md);
+  object-fit: cover;
+  cursor: pointer;
+}
+
+.ermis-attachment--video {
+  max-width: 300px;
+  max-height: 200px;
+  border-radius: var(--ermis-radius-md);
+}
+
+.ermis-attachment--file {
+  display: flex;
+  align-items: center;
+  gap: var(--ermis-spacing-sm);
+  padding: var(--ermis-spacing-sm) var(--ermis-spacing-md);
+  border-radius: var(--ermis-radius-md);
+  background-color: var(--ermis-bg-hover);
+  text-decoration: none;
+  color: var(--ermis-text-primary);
+  transition: background-color var(--ermis-transition);
+}
+
+.ermis-attachment--file:hover {
+  background-color: var(--ermis-bg-active);
+}
+
+.ermis-attachment__file-icon {
+  font-size: 1.25rem;
+  flex-shrink: 0;
+}
+
+.ermis-attachment__file-info {
+  display: flex;
+  flex-direction: column;
+  min-width: 0;
+}
+
+.ermis-attachment__file-name {
+  font-size: var(--ermis-font-size-sm);
+  font-weight: 500;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.ermis-attachment__file-size {
+  font-size: var(--ermis-font-size-xs);
+  color: var(--ermis-text-muted);
+}
+
+/* --- Voice recording --- */
+.ermis-attachment--voice {
+  display: flex;
+  align-items: center;
+  gap: var(--ermis-spacing-sm);
+  padding: var(--ermis-spacing-sm) var(--ermis-spacing-md);
+  border-radius: var(--ermis-radius-md);
+  background-color: var(--ermis-bg-hover);
+  overflow: hidden;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.ermis-attachment__voice-icon {
+  font-size: 1.25rem;
+  flex-shrink: 0;
+}
+
+.ermis-attachment__voice-player {
+  flex: 1;
+  min-width: 0;
+  width: 100%;
+  max-width: 100%;
+  height: 32px;
+}
+
+.ermis-attachment__voice-duration {
+  font-size: var(--ermis-font-size-xs);
+  color: var(--ermis-text-muted);
+  flex-shrink: 0;
+}
+
+/* --- Link preview --- */
+.ermis-attachment--link-preview {
+  display: flex;
+  flex-direction: column;
+  border-radius: var(--ermis-radius-md);
+  overflow: hidden;
+  border: 1px solid var(--ermis-border);
+  text-decoration: none;
+  color: var(--ermis-text-primary);
+  transition: border-color var(--ermis-transition);
+}
+
+.ermis-attachment--link-preview:hover {
+  border-color: var(--ermis-accent);
+}
+
+.ermis-attachment__link-image {
+  width: 100%;
+  max-height: 160px;
+  object-fit: cover;
+}
+
+.ermis-attachment__link-info {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: var(--ermis-spacing-sm) var(--ermis-spacing-md);
+}
+
+.ermis-attachment__link-title {
+  font-size: var(--ermis-font-size-sm);
+  font-weight: 600;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.ermis-attachment__link-description {
+  font-size: var(--ermis-font-size-xs);
+  color: var(--ermis-text-secondary);
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.ermis-attachment__link-url {
+  font-size: var(--ermis-font-size-xs);
+  color: var(--ermis-text-muted);
+  margin-top: 2px;
+}
+
+/* --- Poll message --- */
+.ermis-message-poll {
+  display: flex;
+  align-items: center;
+  gap: var(--ermis-spacing-sm);
+}
+
+.ermis-message-poll__icon {
+  font-size: 1.25rem;
+}
+
+.ermis-message-poll__text {
+  font-size: var(--ermis-font-size-sm);
+}
+
+/* --- Sticker message --- */
+.ermis-message-sticker {
+  max-width: 120px;
+  max-height: 120px;
+}
+
+/* --- Error message --- */
+.ermis-message-error {
+  font-size: var(--ermis-font-size-sm);
+  color: #ef4444;
+  font-style: italic;
+}
+
+/* --- Read receipts --- */
+.ermis-read-receipts {
+  display: flex;
+  justify-content: flex-end;
+  width: 100%;
+  padding-top: 2px;
+}
+
+.ermis-read-receipts__avatars {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  cursor: default;
+  position: relative;
+}
+
+.ermis-read-receipts__avatar {
+  flex-shrink: 0;
+  border: 1.5px solid var(--ermis-bg-primary, #1a1a2e);
+  border-radius: 50%;
+  box-sizing: content-box;
+}
+
+/* Stack overlapping */
+.ermis-read-receipts__avatar + .ermis-read-receipts__avatar {
+  margin-left: -4px;
+}
+
+.ermis-read-receipts__overflow {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background-color: var(--ermis-bg-hover, #2a2a4a);
+  color: var(--ermis-text-muted, #888);
+  font-size: 0.5rem;
+  font-weight: 700;
+  margin-left: -4px;
+  border: 1.5px solid var(--ermis-bg-primary, #1a1a2e);
+  box-sizing: content-box;
+  flex-shrink: 0;
+}
+
+/* Tooltip Wrapper — hidden by default, shown on hover of __avatars */
+.ermis-read-receipts__tooltip-wrapper {
+  display: none;
+  position: absolute;
+  bottom: calc(100% + 6px);
+  right: 0;
+  z-index: 50;
+}
+
+/* Invisible bridge to prevent hover loss when moving mouse from avatar to tooltip */
+.ermis-read-receipts__tooltip-wrapper::after {
+  content: '';
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  height: 6px;
+  background: transparent;
+}
+
+.ermis-read-receipts__avatars:hover .ermis-read-receipts__tooltip-wrapper {
+  display: flex;
+}
+
+/* Inner Tooltip with scrolling and styling */
+.ermis-read-receipts__tooltip {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  background-color: var(--ermis-bg-secondary, #1e1e3a);
+  border: 1px solid var(--ermis-border, #333);
+  border-radius: var(--ermis-radius-md, 8px);
+  padding: var(--ermis-spacing-xs, 6px) var(--ermis-spacing-sm, 8px);
+  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
+  width: 200px;
+  max-height: 200px;
+  overflow-y: auto;
+}
+
+.ermis-read-receipts__tooltip-item {
+  display: flex;
+  align-items: center;
+  gap: var(--ermis-spacing-sm, 8px);
+}
+
+.ermis-read-receipts__tooltip-info {
+  display: flex;
+  flex-direction: column;
+  gap: 1px;
+  min-width: 0;
+}
+
+.ermis-read-receipts__tooltip-name {
+  font-size: var(--ermis-font-size-xs, 0.75rem);
+  color: var(--ermis-text-primary, #e0e0e0);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.ermis-read-receipts__tooltip-time {
+  font-size: 0.625rem;
+  color: var(--ermis-text-muted, #888);
+  white-space: nowrap;
+}