usite-sas-bic/whatsapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Update conversations.php

Browse Source
This commit is contained in:
Lizandro Guarnizo
2026-01-23 23:28:35 -05:00
parent fee3135ace
commit 349f326c65
1 changed files with 91 additions and 59 deletions
Download Patch File Download Diff File Expand all files Collapse all files
conversations.php
+91 -59
View File
@@ -18,29 +18,36 @@
body { body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
background: #e5ddd5; background: linear-gradient(135deg, #f0f4f7 0%, #e5ddd5 100%);
margin: 0; margin: 0;
height: 100vh; min-height: 100vh;
overflow: hidden; overflow: hidden;
color: #222;
font-size: 14px;
} }
.chat-container { .chat-container {
display: flex; display: flex;
height: 100vh; height: 100vh;
background: white; background: transparent;
gap: 12px;
padding: 12px;
} }
.chat-sidebar { .chat-sidebar {
width: 350px; width: 360px;
background: var(--sidebar-bg); background: var(--sidebar-bg);
border-right: 1px solid #e1e5e9; border-radius: 8px;
border: 1px solid #e9eef2;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
box-shadow: 0 4px 14px rgba(16,24,40,0.04);
overflow: hidden;
} }
.sidebar-header { .sidebar-header {
padding: 20px; padding: 14px 16px;
background: var(--whatsapp-dark); background: linear-gradient(180deg, var(--whatsapp-dark) 0%, #054f45 100%);
color: white; color: white;
display: flex; display: flex;
align-items: center; align-items: center;
@@ -48,45 +55,47 @@
} }
.sidebar-search { .sidebar-search {
padding: 10px 20px; padding: 10px 12px;
background: white; background: white;
border-bottom: 1px solid #e1e5e9; border-bottom: 1px solid #eef2f5;
} }
.conversation-list { .conversation-list {
flex: 1; flex: 1;
overflow-y: auto; overflow-y: auto;
padding: 6px;
} }
.conversation-item { .conversation-item {
padding: 15px 20px; padding: 12px 14px;
border-bottom: 1px solid #f1f1f1; border-bottom: 1px solid #f1f5f8;
cursor: pointer; cursor: pointer;
transition: background-color 0.2s; transition: background-color 0.12s, transform 0.08s;
display: flex; display: flex;
align-items: center; align-items: center;
} }
.conversation-item:hover { .conversation-item:hover {
background: #f5f5f5; background: #f6fbff;
transform: translateY(-1px);
} }
.conversation-item.active { .conversation-item.active {
background: #e3f2fd; background: #e9fbf1;
border-right: 3px solid var(--whatsapp-green); border-right: 3px solid var(--whatsapp-green);
} }
.conversation-avatar { .conversation-avatar {
width: 50px; width: 46px;
height: 50px; height: 46px;
border-radius: 50%; border-radius: 50%;
background: var(--whatsapp-green); background: var(--whatsapp-green);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: white; color: white;
font-weight: bold; font-weight: 700;
margin-right: 15px; margin-right: 12px;
flex-shrink: 0; flex-shrink: 0;
} }
@@ -96,22 +105,22 @@
} }
.conversation-name { .conversation-name {
font-weight: 600; font-weight: 700;
font-size: 16px; font-size: 15px;
color: #333; color: #262626;
margin-bottom: 5px; margin-bottom: 4px;
} }
.conversation-preview { .conversation-preview {
color: #666; color: #6b7280;
font-size: 14px; font-size: 13px;
white-space: nowrap; white-space: nowrap;
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
} }
.conversation-time { .conversation-time {
color: #999; color: #9aa4af;
font-size: 12px; font-size: 12px;
text-align: right; text-align: right;
flex-shrink: 0; flex-shrink: 0;
@@ -122,51 +131,52 @@
flex: 1; flex: 1;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background: #e5ddd5; background: transparent;
} }
.chat-header { .chat-header {
padding: 15px 20px; padding: 12px 18px;
background: var(--whatsapp-dark); background: linear-gradient(180deg, var(--whatsapp-dark) 0%, #0a5347 100%);
color: white; color: white;
border-bottom: 1px solid #ddd; border-radius: 8px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
display: flex; display: flex;
align-items: center; align-items: center;
gap: 12px;
box-shadow: 0 2px 6px rgba(15,23,42,0.06);
} }
.chat-header-avatar { .chat-header-avatar {
width: 40px; width: 44px;
height: 40px; height: 44px;
border-radius: 50%; border-radius: 50%;
background: var(--whatsapp-green); background: var(--whatsapp-green);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
color: white; color: white;
font-weight: bold; font-weight: 700;
margin-right: 15px; margin-right: 12px;
} }
.chat-header-info h6 { .chat-header-info h6 { margin: 0; font-size: 15px; }
margin: 0; .chat-header-info small { color: rgba(255,255,255,0.85); }
font-size: 16px;
}
.chat-header-info small {
color: #ccc;
}
.chat-conversations { .chat-conversations {
flex: 1; flex: 1;
overflow-y: auto; overflow-y: auto;
padding: 20px; padding: 12px 16px;
background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGRlZnM+CjxwYXR0ZXJuIGlkPSJ3aGF0c2FwcC1iZyIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiPgo8cG9seWdvbiBmaWxsPSJyZ2JhKDIyOSwyMjEsMjEzLDAuMSkiIHBvaW50cz0iMCwwIDEwMCwwIDEwMCwxMDAgMCwxMDAiLz4KPGV+'; background: #f8f9fb;
border: 1px solid #eef2f5;
border-radius: 0 0 8px 8px;
} }
.message { .message {
max-width: 70%; width: 100%;
margin-bottom: 10px; margin-bottom: 8px;
display: flex; display: flex;
align-items: flex-end;
} }
.message.outgoing { .message.outgoing {
@@ -182,32 +192,50 @@
border-radius: 18px; border-radius: 18px;
position: relative; position: relative;
word-wrap: break-word; word-wrap: break-word;
box-shadow: 0 1px 1px rgba(0,0,0,0.1); box-shadow: 0 3px 10px rgba(2,6,23,0.06);
max-width: 72%;
line-height: 1.35;
transition: transform 0.08s ease, box-shadow 0.12s ease;
} }
.message.outgoing .message-bubble { .message.outgoing .message-bubble {
background: var(--whatsapp-light); background: var(--whatsapp-light);
color: #333; color: #222;
border-bottom-right-radius: 4px; border-bottom-right-radius: 6px;
} }
.message.incoming .message-bubble { .message.incoming .message-bubble {
background: white; background: white;
color: #333; color: #222;
border-bottom-left-radius: 4px; border-bottom-left-radius: 6px;
} }
.message-time { /* Cola tipo WhatsApp */
font-size: 11px; .message.outgoing .message-bubble::after {
color: #999; content: '';
text-align: right; position: absolute;
margin-top: 5px; right: -6px;
bottom: 6px;
width: 12px;
height: 12px;
background: var(--whatsapp-light);
transform: rotate(45deg);
z-index: 0;
box-shadow: 0 1px 2px rgba(0,0,0,0.04);
}
.message.incoming .message-bubble::after {
content: '';
position: absolute;
left: -6px;
bottom: 6px;
width: 12px;
height: 12px;
background: white;
transform: rotate(45deg);
z-index: 0;
box-shadow: 0 1px 2px rgba(0,0,0,0.04);
} }
/* Diseño estilo ventana: timestamp oculto hasta hover */
.message-bubble {
position: relative;
}
.message-bubble .message-time { .message-bubble .message-time {
position: absolute; position: absolute;
right: 8px; right: 8px;
@@ -218,6 +246,10 @@
transition: opacity 0.12s ease-in-out; transition: opacity 0.12s ease-in-out;
white-space: nowrap; white-space: nowrap;
} }
.message-bubble:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(2,6,23,0.06);
}
.message-bubble:hover .message-time, .message-bubble:hover .message-time,
.message-bubble:focus-within .message-time { .message-bubble:focus-within .message-time {
opacity: 1; opacity: 1;