| .message-page { |
| .selected { |
| background-color: #f0f2f5; |
| } |
| |
| .chat-message { |
| margin: 8px 0; |
| padding: 8px; |
| border-radius: 4px; |
| |
| &.sent { |
| background-color: #e6f7ff; |
| margin-left: 40px; |
| } |
| |
| &.received { |
| background-color: #f0f2f5; |
| margin-right: 40px; |
| } |
| } |
| |
| .message-input { |
| border-top: 1px solid #f0f0f0; |
| padding-top: 16px; |
| } |
| |
| .message-list { |
| height: calc(100vh - 200px); |
| overflow-y: auto; |
| } |
| |
| .chat-container { |
| display: flex; |
| flex-direction: column; |
| height: calc(100vh - 100px); |
| } |
| |
| .chat-messages { |
| flex: 1; |
| overflow-y: auto; |
| padding: 16px; |
| } |
| |
| .ant-list-item { |
| transition: background-color 0.3s; |
| |
| &:hover { |
| background-color: #f5f5f5; |
| } |
| } |
| |
| } |
| |
| .message-page { |
| .chat-message { |
| &.sent { |
| .ant-list-item-meta { |
| text-align: right; |
| } |
| } |
| |
| &.received { |
| .ant-list-item-meta { |
| text-align: left; |
| } |
| } |
| } |
| |
| .selected { |
| background-color: #f0f8ff; |
| } |
| } |