diff --git a/css/conversation.css b/css/conversation.css new file mode 100644 index 0000000..00cc2f0 --- /dev/null +++ b/css/conversation.css @@ -0,0 +1,113 @@ +.messages-container { + display: flex; + flex-direction: column; + max-width: 800px; + max-height: 95vh; + margin: 20px auto; + background-color: var(--color-white); + border-radius: 15px; + box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); + overflow: hidden; +} + +.messages-header { + background-color: var(--second-bg); + padding: 15px; + border-bottom: 1px solid var(--linecolor); +} + +.messages-header h2 { + margin: 0; + color: var(--color-black); +} + +.messages-list { + flex: 1; + overflow-y: auto; + padding: 15px; + display: flex; + flex-direction: column; + gap: 15px; + max-height: 100%; +} + +.message { + display: flex; + gap: 10px; + align-items: flex-start; +} + +.message-profile-img { + width: 40px; + height: 40px; + border-radius: 50%; +} + +.message-content { + background-color: var(--second-bg); + padding: 10px; + border-radius: 10px; + max-width: 70%; +} + +.message-sender { + font-weight: bold; + margin-bottom: 5px; +} + +.message-text { + margin: 0; +} + +.message-time { + font-size: 0.8em; + color: #888; + text-align: right; + margin-top: 5px; +} + +.message-input-container { + display: flex; + padding: 15px; + background-color: var(--second-bg); + border-top: 1px solid var(--linecolor); +} + +.message-input { + flex: 1; + padding: 10px; + border: none; + border-radius: 20px; + font-family: inherit; + font-size: 1em; + background-color: var(--color-bg); + color: var(--color-black); +} + +.send-message-btn { + background-color: #4169E1; + color: white; + border: none; + padding: 10px 20px; + border-radius: 20px; + margin-left: 10px; + cursor: pointer; + transition: background-color 0.3s; +} + +.send-message-btn:hover { + background-color: #3658B4; +} + +.message.sent { + justify-content: flex-end; +} + +.message.sent .message-content { + background-color: #4169E1; + color: white; +} + +.message.sent .message-time { + color: #ccc; +} \ No newline at end of file diff --git a/pages/chat-not-included-yet.html b/pages/chat-not-included-yet.html deleted file mode 100644 index 74185bb..0000000 --- a/pages/chat-not-included-yet.html +++ /dev/null @@ -1,164 +0,0 @@ - - -
- - - -