.hide { opacity: 0 !important; } $otherBox-line: #cccccc; $otherBox-bg: #ffffff; $meBox-line: #cccccc; $meBox-bg: #ffffff; .chat-messages { padding: 30px 40px; display: flex; flex-direction: column; } .information-msg { width: 100%; } .message-row { width: 100%; height: 100%; margin-bottom: 20px; .date-splitter { display: block; width: 100%; margin-bottom: 10px; } .chat-row { position: relative; display: flex; flex-direction: row; margin-left: 0; .profile-img { flex: 0 0 auto; &.thumbnail-mask { border-radius: 50%; width: 50px; height: 50px; overflow: hidden; img { width: 50px; 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 { margin-left: 20px; margin-right: 10px; max-width: 80%; .chat-name { font-size: 12px; color: #333333; margin-bottom: 6px; } .bubble { border-radius: 0 10px 10px 10px; font-weight: 900; 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: 11px; color: #666666; word-wrap: break-word; white-space: nowrap; } &.me { .secondary-text { text-align: end; } } &.highlight { .bubble { color: red; } } } /*.message-row.me > .bubble { border: 1px solid $meBox-line; background-color: $meBox-bg; }*/ .message-row.me { .profile-img { display: none; } .chat-name { display: none; } .message-main { text-align: right; margin-left: 10px; margin-right: 20px; .bubble { border-radius: 10px 10px 0 10px; } /* & .bubble:before { content: ''; width: 0px; height: 0px; position: absolute; border-left: 6px solid $meBox-line; border-right: 6px solid transparent; border-top: 6px solid $meBox-line; border-bottom: 6px solid transparent; left: initial; right: -12px; top: 4px; } & .bubble:after { content: ''; width: 0px; height: 0px; position: absolute; border-left: 6px solid $meBox-bg; border-right: 6px solid transparent; border-top: 6px solid $meBox-bg; border-bottom: 6px solid transparent; left: initial; right: -10px; top: 5px; }*/ } } .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%; 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; } } }