.hide { opacity: 0 !important; } $otherBox-line: #cccccc; $otherBox-bg: #ffffff; $meBox-line: #cccccc; $meBox-bg: #ffffff; $tablet-l-width: 1024px; $tablet-s-width: 768px; .information-msg { width: 100%; } .message-row { width: 100%; height: 100%; .date-splitter { display: block; width: 100%; margin-bottom: 10px; } .chat-row { position: relative; display: flex; flex-direction: row; margin-left: 0; padding-bottom: 20px; .profile-img { flex: 0 0 auto; &.thumbnail-mask { width: 40px; height: 40px; border: 1px solid rgb(0, 0, 0, 0.1); border-radius: 50%; overflow: hidden; img { width: 40px; height: auto; } } } } &.me { .chat-row { flex-direction: row-reverse; margin-left: 0; margin-right: 0; .profile-info { flex-direction: row-reverse; display: flex; justify-content: flex-end; } } } .message-main-container { display: Flex; flex-flow: row; margin-left: 10px; width: 80%; @media screen and (max-width: #{$tablet-s-width}), (max-height: 600px) { flex-flow: column; max-width: 80%; width: unset; } .message-main { margin-right: 6px; max-width: calc(100% - 60px); @media screen and (max-width: #{$tablet-s-width}), (max-height: 600px) { flex-flow: column; max-width: 100%; } .chat-name { font-size: 12px; color: #333333; margin-bottom: 6px; } .bubble { border-radius: 0 10px 10px 10px; position: relative; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15); word-break: break-all; word-wrap: break-word; } } .secondary-text { align-self: flex-end; font-size: 0.84em; color: #666666; word-wrap: break-word; white-space: nowrap; @media screen and (max-width: #{$tablet-s-width}), (max-height: 600px) { flex-flow: row; align-self: flex-start; ul { display: flex; flex-flow: row-reverse; justify-items: flex-end; margin-top: 4px; li { display: inline-flex; &.unread { margin-left: 10px; } } } } ul { li { &.unread { padding: 0px 6px; border-radius: 30px; background-color: #888888; color: #ffffff; display: inline-flex; } } } } } &.me { .message-main-container { display: Flex; flex-flow: row-reverse; margin-left: 0px; margin-right: 10px; @media screen and (max-width: #{$tablet-s-width}), (max-height: 600px) { flex-flow: column; } } } &.highlight { .bubble { color: red; } } } .message-row.me { .profile-img { display: none; } .message-main-container { .chat-name { display: none; } .message-main { display: flex; justify-content: flex-end; text-align: right; margin-left: 6px; margin-right: 0; .bubble { border-radius: 10px 10px 0 10px; } } .secondary-text { text-align: end; @media screen and (max-width: #{$tablet-s-width}), (max-height: 600px) { flex-flow: column; align-self: flex-end; } } } } .bubble-main { word-wrap: break-word; white-space: pre-wrap; word-break: break-word; } ::ng-deep .view-previous { display: flex; flex-flow: column; //background-color: rgba(0, 0, 0, 0.4); color: #ffffff; justify-content: center; justify-items: center; margin: 10px 0 20px; button { height: 100%; width: 100%; font-size: 1em; line-height: 2em; border-radius: 100px; .mat-button-wrapper { justify-items: center; svg { stroke: #ffffff; align-self: center; margin-right: 4px; } } } .unRead-count { display: flex; justify-items: self-end; flex-flow: row; align-items: flex-end; height: 20px; margin: 10px 0; .line { height: 1px; background-color: #cccccc; width: 40%; flex: 1 1 auto; margin-bottom: 10px; display: inline-flex; } .count { width: 260px; font-size: 13px; text-align: center; font-weight: 600; color: #333333; } } }