447 lines
9.8 KiB
CSS
447 lines
9.8 KiB
CSS
/* WhatsApp-style Chat CSS for Template Documentation
|
|
* Use this to display sample dialogs that demonstrate how templates work
|
|
*/
|
|
|
|
/* Chat Container */
|
|
.wa-chat {
|
|
background-color: #e5ddd5;
|
|
background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M54.627 0l.83.828-1.415 1.415L51.8 0h2.827zM5.373 0l-.83.828L5.96 2.243 8.2 0H5.374zM48.97 0l3.657 3.657-1.414 1.414L46.143 0h2.828zM11.03 0L7.372 3.657 8.787 5.07 13.857 0H11.03zm32.284 0L49.8 6.485 48.384 7.9l-7.9-7.9h2.83zM16.686 0L10.2 6.485 11.616 7.9l7.9-7.9h-2.83zM22.343 0L13.857 8.485 15.272 9.9l9.9-9.9h-2.83zM32 0l-3.486 3.485-1.414-1.414L30.172 0H32zM0 5.373l.828-.83 1.415 1.415L0 8.2V5.374zm0 5.656l.828-.829 5.657 5.657-1.414 1.414L0 11.03v2.828zm0 5.656l.828-.828 8.485 8.485-1.414 1.414L0 16.686v2.83zm0 5.657l.828-.828 11.314 11.314-1.414 1.414L0 22.343v2.83zM0 32l.828-.828 14.142 14.142-1.414 1.414L0 32.172V32z' fill='%23c5c5c5' fill-opacity='0.1' fill-rule='evenodd'/%3E%3C/svg%3E");
|
|
border-radius: 8px;
|
|
padding: 20px 15px;
|
|
margin: 20px 0;
|
|
max-width: 600px;
|
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
|
|
font-size: 14px;
|
|
}
|
|
|
|
/* Dark theme support */
|
|
.coal .wa-chat,
|
|
.navy .wa-chat,
|
|
.ayu .wa-chat,
|
|
.dark .wa-chat {
|
|
background-color: #0b141a;
|
|
background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M54.627 0l.83.828-1.415 1.415L51.8 0h2.827zM5.373 0l-.83.828L5.96 2.243 8.2 0H5.374zM48.97 0l3.657 3.657-1.414 1.414L46.143 0h2.828zM11.03 0L7.372 3.657 8.787 5.07 13.857 0H11.03zm32.284 0L49.8 6.485 48.384 7.9l-7.9-7.9h2.83zM16.686 0L10.2 6.485 11.616 7.9l7.9-7.9h-2.83zM22.343 0L13.857 8.485 15.272 9.9l9.9-9.9h-2.83zM32 0l-3.486 3.485-1.414-1.414L30.172 0H32zM0 5.373l.828-.83 1.415 1.415L0 8.2V5.374zm0 5.656l.828-.829 5.657 5.657-1.414 1.414L0 11.03v2.828zm0 5.656l.828-.828 8.485 8.485-1.414 1.414L0 16.686v2.83zm0 5.657l.828-.828 11.314 11.314-1.414 1.414L0 22.343v2.83zM0 32l.828-.828 14.142 14.142-1.414 1.414L0 32.172V32z' fill='%23ffffff' fill-opacity='0.05' fill-rule='evenodd'/%3E%3C/svg%3E");
|
|
}
|
|
|
|
/* Message Bubbles Base */
|
|
.wa-message {
|
|
clear: both;
|
|
margin-bottom: 10px;
|
|
max-width: 85%;
|
|
position: relative;
|
|
}
|
|
|
|
/* User Messages (Right side, light gray) */
|
|
.wa-message.user {
|
|
float: right;
|
|
}
|
|
|
|
.wa-message.user .wa-bubble {
|
|
background-color: #dcf8c6;
|
|
border-radius: 8px 0 8px 8px;
|
|
margin-left: 40px;
|
|
position: relative;
|
|
}
|
|
|
|
.wa-message.user .wa-bubble::after {
|
|
content: '';
|
|
position: absolute;
|
|
right: -8px;
|
|
top: 0;
|
|
border: 8px solid transparent;
|
|
border-left-color: #dcf8c6;
|
|
border-top-color: #dcf8c6;
|
|
}
|
|
|
|
/* Dark theme user messages */
|
|
.coal .wa-message.user .wa-bubble,
|
|
.navy .wa-message.user .wa-bubble,
|
|
.ayu .wa-message.user .wa-bubble,
|
|
.dark .wa-message.user .wa-bubble {
|
|
background-color: #005c4b;
|
|
}
|
|
|
|
.coal .wa-message.user .wa-bubble::after,
|
|
.navy .wa-message.user .wa-bubble::after,
|
|
.ayu .wa-message.user .wa-bubble::after,
|
|
.dark .wa-message.user .wa-bubble::after {
|
|
border-left-color: #005c4b;
|
|
border-top-color: #005c4b;
|
|
}
|
|
|
|
/* Bot Messages (Left side, white) */
|
|
.wa-message.bot {
|
|
float: left;
|
|
}
|
|
|
|
.wa-message.bot .wa-bubble {
|
|
background-color: #ffffff;
|
|
border-radius: 0 8px 8px 8px;
|
|
margin-right: 40px;
|
|
position: relative;
|
|
}
|
|
|
|
.wa-message.bot .wa-bubble::before {
|
|
content: '';
|
|
position: absolute;
|
|
left: -8px;
|
|
top: 0;
|
|
border: 8px solid transparent;
|
|
border-right-color: #ffffff;
|
|
border-top-color: #ffffff;
|
|
}
|
|
|
|
/* Dark theme bot messages */
|
|
.coal .wa-message.bot .wa-bubble,
|
|
.navy .wa-message.bot .wa-bubble,
|
|
.ayu .wa-message.bot .wa-bubble,
|
|
.dark .wa-message.bot .wa-bubble {
|
|
background-color: #202c33;
|
|
}
|
|
|
|
.coal .wa-message.bot .wa-bubble::before,
|
|
.navy .wa-message.bot .wa-bubble::before,
|
|
.ayu .wa-message.bot .wa-bubble::before,
|
|
.dark .wa-message.bot .wa-bubble::before {
|
|
border-right-color: #202c33;
|
|
border-top-color: #202c33;
|
|
}
|
|
|
|
/* Bubble Content */
|
|
.wa-bubble {
|
|
padding: 8px 12px;
|
|
box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.13);
|
|
}
|
|
|
|
.wa-bubble p {
|
|
margin: 0;
|
|
line-height: 1.4;
|
|
color: #303030;
|
|
word-wrap: break-word;
|
|
}
|
|
|
|
/* Dark theme text */
|
|
.coal .wa-bubble p,
|
|
.navy .wa-bubble p,
|
|
.ayu .wa-bubble p,
|
|
.dark .wa-bubble p {
|
|
color: #e9edef;
|
|
}
|
|
|
|
/* Timestamp */
|
|
.wa-time {
|
|
font-size: 11px;
|
|
color: #8696a0;
|
|
text-align: right;
|
|
margin-top: 4px;
|
|
}
|
|
|
|
.wa-message.user .wa-time {
|
|
color: #61a05e;
|
|
}
|
|
|
|
.coal .wa-message.user .wa-time,
|
|
.navy .wa-message.user .wa-time,
|
|
.ayu .wa-message.user .wa-time,
|
|
.dark .wa-message.user .wa-time {
|
|
color: #8eb589;
|
|
}
|
|
|
|
/* Sender Name (for bot) */
|
|
.wa-sender {
|
|
font-size: 12px;
|
|
font-weight: 600;
|
|
color: #06cf9c;
|
|
margin-bottom: 2px;
|
|
}
|
|
|
|
/* Checkmarks for sent/delivered/read */
|
|
.wa-status {
|
|
display: inline-block;
|
|
margin-left: 4px;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.wa-status.sent::after {
|
|
content: '✓';
|
|
color: #8696a0;
|
|
}
|
|
|
|
.wa-status.delivered::after {
|
|
content: '✓✓';
|
|
color: #8696a0;
|
|
}
|
|
|
|
.wa-status.read::after {
|
|
content: '✓✓';
|
|
color: #53bdeb;
|
|
}
|
|
|
|
/* System Messages */
|
|
.wa-system {
|
|
text-align: center;
|
|
margin: 15px 0;
|
|
clear: both;
|
|
}
|
|
|
|
.wa-system span {
|
|
background-color: #e1f2fb;
|
|
color: #54656f;
|
|
padding: 5px 12px;
|
|
border-radius: 8px;
|
|
font-size: 12px;
|
|
box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.13);
|
|
}
|
|
|
|
.coal .wa-system span,
|
|
.navy .wa-system span,
|
|
.ayu .wa-system span,
|
|
.dark .wa-system span {
|
|
background-color: #182229;
|
|
color: #8696a0;
|
|
}
|
|
|
|
/* Date Separator */
|
|
.wa-date {
|
|
text-align: center;
|
|
margin: 15px 0;
|
|
clear: both;
|
|
}
|
|
|
|
.wa-date span {
|
|
background-color: #ffffff;
|
|
color: #54656f;
|
|
padding: 5px 12px;
|
|
border-radius: 8px;
|
|
font-size: 12px;
|
|
box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.13);
|
|
}
|
|
|
|
.coal .wa-date span,
|
|
.navy .wa-date span,
|
|
.ayu .wa-date span,
|
|
.dark .wa-date span {
|
|
background-color: #182229;
|
|
color: #8696a0;
|
|
}
|
|
|
|
/* Typing Indicator */
|
|
.wa-typing {
|
|
float: left;
|
|
clear: both;
|
|
}
|
|
|
|
.wa-typing .wa-bubble {
|
|
background-color: #ffffff;
|
|
border-radius: 0 8px 8px 8px;
|
|
padding: 12px 16px;
|
|
}
|
|
|
|
.coal .wa-typing .wa-bubble,
|
|
.navy .wa-typing .wa-bubble,
|
|
.ayu .wa-typing .wa-bubble,
|
|
.dark .wa-typing .wa-bubble {
|
|
background-color: #202c33;
|
|
}
|
|
|
|
.wa-typing-dots {
|
|
display: flex;
|
|
gap: 4px;
|
|
}
|
|
|
|
.wa-typing-dots span {
|
|
width: 8px;
|
|
height: 8px;
|
|
background-color: #8696a0;
|
|
border-radius: 50%;
|
|
animation: wa-typing 1.4s infinite ease-in-out;
|
|
}
|
|
|
|
.wa-typing-dots span:nth-child(1) { animation-delay: 0s; }
|
|
.wa-typing-dots span:nth-child(2) { animation-delay: 0.2s; }
|
|
.wa-typing-dots span:nth-child(3) { animation-delay: 0.4s; }
|
|
|
|
@keyframes wa-typing {
|
|
0%, 60%, 100% { transform: translateY(0); opacity: 0.6; }
|
|
30% { transform: translateY(-4px); opacity: 1; }
|
|
}
|
|
|
|
/* Clear float */
|
|
.wa-chat::after {
|
|
content: '';
|
|
display: table;
|
|
clear: both;
|
|
}
|
|
|
|
/* Chat Header (optional) */
|
|
.wa-header {
|
|
background-color: #075e54;
|
|
color: white;
|
|
padding: 10px 15px;
|
|
margin: -20px -15px 15px -15px;
|
|
border-radius: 8px 8px 0 0;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.coal .wa-header,
|
|
.navy .wa-header,
|
|
.ayu .wa-header,
|
|
.dark .wa-header {
|
|
background-color: #202c33;
|
|
}
|
|
|
|
.wa-header-avatar {
|
|
width: 40px;
|
|
height: 40px;
|
|
background-color: #25d366;
|
|
border-radius: 50%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 18px;
|
|
}
|
|
|
|
.wa-header-info {
|
|
flex: 1;
|
|
}
|
|
|
|
.wa-header-name {
|
|
font-weight: 600;
|
|
font-size: 16px;
|
|
}
|
|
|
|
.wa-header-status {
|
|
font-size: 12px;
|
|
opacity: 0.8;
|
|
}
|
|
|
|
/* Input Area (for visual reference) */
|
|
.wa-input {
|
|
background-color: #f0f2f5;
|
|
margin: 15px -15px -20px -15px;
|
|
padding: 10px 15px;
|
|
border-radius: 0 0 8px 8px;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
}
|
|
|
|
.coal .wa-input,
|
|
.navy .wa-input,
|
|
.ayu .wa-input,
|
|
.dark .wa-input {
|
|
background-color: #202c33;
|
|
}
|
|
|
|
.wa-input-field {
|
|
flex: 1;
|
|
background-color: #ffffff;
|
|
border: none;
|
|
border-radius: 20px;
|
|
padding: 10px 15px;
|
|
font-size: 14px;
|
|
color: #3b4a54;
|
|
}
|
|
|
|
.coal .wa-input-field,
|
|
.navy .wa-input-field,
|
|
.ayu .wa-input-field,
|
|
.dark .wa-input-field {
|
|
background-color: #2a3942;
|
|
color: #e9edef;
|
|
}
|
|
|
|
/* Code in messages */
|
|
.wa-bubble code {
|
|
background-color: rgba(0, 0, 0, 0.08);
|
|
padding: 2px 4px;
|
|
border-radius: 3px;
|
|
font-family: 'SF Mono', Monaco, 'Courier New', monospace;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.coal .wa-bubble code,
|
|
.navy .wa-bubble code,
|
|
.ayu .wa-bubble code,
|
|
.dark .wa-bubble code {
|
|
background-color: rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
/* Links in messages */
|
|
.wa-bubble a {
|
|
color: #027eb5;
|
|
text-decoration: none;
|
|
}
|
|
|
|
.wa-bubble a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
.coal .wa-bubble a,
|
|
.navy .wa-bubble a,
|
|
.ayu .wa-bubble a,
|
|
.dark .wa-bubble a {
|
|
color: #53bdeb;
|
|
}
|
|
|
|
/* Emoji sizing */
|
|
.wa-bubble .emoji {
|
|
font-size: 20px;
|
|
}
|
|
|
|
/* Media messages placeholder */
|
|
.wa-media {
|
|
background-color: rgba(0, 0, 0, 0.1);
|
|
border-radius: 8px;
|
|
padding: 40px 60px;
|
|
text-align: center;
|
|
color: #8696a0;
|
|
font-size: 12px;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.wa-media::before {
|
|
content: '📷';
|
|
display: block;
|
|
font-size: 24px;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
/* Reply/Quote */
|
|
.wa-reply {
|
|
background-color: rgba(0, 0, 0, 0.05);
|
|
border-left: 4px solid #06cf9c;
|
|
padding: 6px 10px;
|
|
margin-bottom: 6px;
|
|
border-radius: 4px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
.wa-reply-name {
|
|
color: #06cf9c;
|
|
font-weight: 600;
|
|
font-size: 12px;
|
|
}
|
|
|
|
.wa-reply-text {
|
|
color: #667781;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
.coal .wa-reply,
|
|
.navy .wa-reply,
|
|
.ayu .wa-reply,
|
|
.dark .wa-reply {
|
|
background-color: rgba(255, 255, 255, 0.05);
|
|
}
|
|
|
|
.coal .wa-reply-text,
|
|
.navy .wa-reply-text,
|
|
.ayu .wa-reply-text,
|
|
.dark .wa-reply-text {
|
|
color: #8696a0;
|
|
}
|