34 lines
1.9 KiB
CSS
34 lines
1.9 KiB
CSS
/* WhatsApp-like theme */
|
|
:root {
|
|
--whatsapp-green: #075E54;
|
|
--whatsapp-bg: #e5ddd5;
|
|
--whatsapp-sidebar: #ffffff;
|
|
--whatsapp-input: #f0f2f5;
|
|
--whatsapp-bubble-me: #dcf8c6;
|
|
--whatsapp-bubble-other: #ffffff;
|
|
}
|
|
|
|
body, html { height: 100%; margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; }
|
|
|
|
.whatsapp-app { display: flex; height: 100vh; overflow: hidden; background: white; }
|
|
|
|
.sidebar { width: 350px; background: var(--whatsapp-sidebar); border-right: 1px solid #ddd; display: flex; flex-direction: column; }
|
|
.sidebar-header { background: var(--whatsapp-input); padding: 15px; display: flex; align-items: center; }
|
|
|
|
.chat-area { flex: 1; background: var(--whatsapp-bg); display: flex; flex-direction: column; }
|
|
.chat-header { background: var(--whatsapp-input); padding: 10px 20px; display: flex; align-items: center; border-left: 1px solid #ddd; }
|
|
|
|
.message-list { flex: 1; overflow-y: auto; padding: 20px; display: flex; flex-direction: column; }
|
|
.bubble { background: var(--whatsapp-bubble-other); padding: 8px 12px; border-radius: 8px; margin-bottom: 5px; max-width: 60%; position: relative; font-size: 0.95rem; box-shadow: 0 1px 0.5px rgba(0,0,0,0.1); }
|
|
.bubble.me { background: var(--whatsapp-bubble-me); align-self: flex-end; }
|
|
|
|
.chat-input { background: var(--whatsapp-input); padding: 10px 20px; display: flex; align-items: center; gap: 15px; }
|
|
.chat-input input { border-radius: 20px; border: none; padding: 10px 15px; }
|
|
|
|
/* Admin layout */
|
|
.admin-layout { display: flex; min-height: 100vh; }
|
|
.admin-sidebar { width: 250px; background: #343a40; color: #fff; padding: 20px; }
|
|
.admin-sidebar a { color: #ccc; display: block; padding: 10px; text-decoration: none; border-bottom: 1px solid #444; }
|
|
.admin-sidebar a.active { color: #fff; background: #495057; }
|
|
.admin-content { flex: 1; padding: 20px; background: #f8f9fa; }
|