diff --git a/odoo_whatsapp_hub/static/src/css/whatsapp.css b/odoo_whatsapp_hub/static/src/css/whatsapp.css new file mode 100644 index 0000000..0c2e330 --- /dev/null +++ b/odoo_whatsapp_hub/static/src/css/whatsapp.css @@ -0,0 +1,184 @@ +/* WhatsApp Hub Styles */ + +/* WhatsApp Green */ +:root { + --whatsapp-green: #25D366; + --whatsapp-dark-green: #128C7E; + --whatsapp-light-green: #DCF8C6; + --whatsapp-bg: #E5DDD5; +} + +/* Chat container */ +.o_whatsapp_chat_container { + display: flex; + flex-direction: column; + height: 100%; + background: var(--whatsapp-bg); + border-radius: 8px; + overflow: hidden; +} + +/* Chat header */ +.o_whatsapp_chat_header { + background: var(--whatsapp-dark-green); + color: white; + padding: 12px 16px; + display: flex; + align-items: center; + gap: 12px; +} + +.o_whatsapp_chat_header .avatar { + width: 40px; + height: 40px; + border-radius: 50%; + background: white; + display: flex; + align-items: center; + justify-content: center; + font-weight: bold; + color: var(--whatsapp-dark-green); +} + +.o_whatsapp_chat_header .contact-info { + flex: 1; +} + +.o_whatsapp_chat_header .contact-name { + font-weight: 600; + font-size: 16px; +} + +.o_whatsapp_chat_header .contact-status { + font-size: 12px; + opacity: 0.8; +} + +/* Messages container */ +.o_whatsapp_messages { + flex: 1; + overflow-y: auto; + padding: 16px; + display: flex; + flex-direction: column; + gap: 8px; +} + +/* Message bubble */ +.o_whatsapp_message { + max-width: 65%; + padding: 8px 12px; + border-radius: 8px; + position: relative; + word-wrap: break-word; +} + +.o_whatsapp_message.inbound { + align-self: flex-start; + background: white; + border-top-left-radius: 0; +} + +.o_whatsapp_message.outbound { + align-self: flex-end; + background: var(--whatsapp-light-green); + border-top-right-radius: 0; +} + +.o_whatsapp_message .message-content { + margin-bottom: 4px; +} + +.o_whatsapp_message .message-meta { + font-size: 11px; + color: #667781; + text-align: right; + display: flex; + align-items: center; + justify-content: flex-end; + gap: 4px; +} + +.o_whatsapp_message .message-status { + color: #53bdeb; +} + +/* Input area */ +.o_whatsapp_input_area { + background: #F0F2F5; + padding: 12px 16px; + display: flex; + align-items: center; + gap: 12px; +} + +.o_whatsapp_input_area input { + flex: 1; + border: none; + border-radius: 20px; + padding: 10px 16px; + outline: none; +} + +.o_whatsapp_input_area button { + background: var(--whatsapp-green); + color: white; + border: none; + border-radius: 50%; + width: 40px; + height: 40px; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; +} + +.o_whatsapp_input_area button:hover { + background: var(--whatsapp-dark-green); +} + +/* Status badges */ +.o_whatsapp_status_connected { + color: var(--whatsapp-green); +} + +.o_whatsapp_status_disconnected { + color: #dc3545; +} + +/* Partner WhatsApp button */ +.btn-whatsapp { + background-color: var(--whatsapp-green); + border-color: var(--whatsapp-green); + color: white; +} + +.btn-whatsapp:hover { + background-color: var(--whatsapp-dark-green); + border-color: var(--whatsapp-dark-green); + color: white; +} + +/* Unread badge */ +.o_whatsapp_unread_badge { + background: #dc3545; + color: white; + border-radius: 10px; + padding: 2px 8px; + font-size: 12px; + font-weight: bold; +} + +/* QR Code display */ +.o_whatsapp_qr_code { + display: flex; + flex-direction: column; + align-items: center; + padding: 20px; +} + +.o_whatsapp_qr_code img { + max-width: 300px; + border: 1px solid #ddd; + border-radius: 8px; +}