| .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; | |
| } | |
| } |