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 {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
background: #e5ddd5;
background: linear-gradient(135deg, #f0f4f7 0%, #e5ddd5 100%);
margin: 0;
height: 100vh;
min-height: 100vh;
overflow: hidden;
color: #222;
font-size: 14px;
}
.chat-container {
display: flex;
height: 100vh;
background: white;
background: transparent;
gap: 12px;
padding: 12px;
}
.chat-sidebar {
width: 350px;
width: 360px;
background: var(--sidebar-bg);
border-right: 1px solid #e1e5e9;
border-radius: 8px;
border: 1px solid #e9eef2;
display: flex;
flex-direction: column;
box-shadow: 0 4px 14px rgba(16,24,40,0.04);
overflow: hidden;
}
.sidebar-header {
padding: 20px;
background: var(--whatsapp-dark);
padding: 14px 16px;
background: linear-gradient(180deg, var(--whatsapp-dark) 0%, #054f45 100%);
color: white;
display: flex;
align-items: center;
@@ -48,45 +55,47 @@
}
.sidebar-search {
padding: 10px 20px;
padding: 10px 12px;
background: white;
border-bottom: 1px solid #e1e5e9;
border-bottom: 1px solid #eef2f5;
}
.conversation-list {
flex: 1;
overflow-y: auto;
padding: 6px;
}
.conversation-item {
padding: 15px 20px;
border-bottom: 1px solid #f1f1f1;
padding: 12px 14px;
border-bottom: 1px solid #f1f5f8;
cursor: pointer;
transition: background-color 0.2s;
transition: background-color 0.12s, transform 0.08s;
display: flex;
align-items: center;
}
.conversation-item:hover {
background: #f5f5f5;
background: #f6fbff;
transform: translateY(-1px);
}
.conversation-item.active {
background: #e3f2fd;
background: #e9fbf1;
border-right: 3px solid var(--whatsapp-green);
}
.conversation-avatar {
width: 50px;
height: 50px;
width: 46px;
height: 46px;
border-radius: 50%;
background: var(--whatsapp-green);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
margin-right: 15px;
font-weight: 700;
margin-right: 12px;
flex-shrink: 0;
}
@@ -96,22 +105,22 @@
}
.conversation-name {
font-weight: 600;
font-size: 16px;
color: #333;
margin-bottom: 5px;
font-weight: 700;
font-size: 15px;
color: #262626;
margin-bottom: 4px;
}
.conversation-preview {
color: #666;
font-size: 14px;
color: #6b7280;
font-size: 13px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.conversation-time {
color: #999;
color: #9aa4af;
font-size: 12px;
text-align: right;
flex-shrink: 0;
@@ -122,51 +131,52 @@
flex: 1;
display: flex;
flex-direction: column;
background: #e5ddd5;
background: transparent;
}
.chat-header {
padding: 15px 20px;
background: var(--whatsapp-dark);
padding: 12px 18px;
background: linear-gradient(180deg, var(--whatsapp-dark) 0%, #0a5347 100%);
color: white;
border-bottom: 1px solid #ddd;
border-radius: 8px;
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
display: flex;
align-items: center;
gap: 12px;
box-shadow: 0 2px 6px rgba(15,23,42,0.06);
}
.chat-header-avatar {
width: 40px;
height: 40px;
width: 44px;
height: 44px;
border-radius: 50%;
background: var(--whatsapp-green);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
margin-right: 15px;
font-weight: 700;
margin-right: 12px;
}
.chat-header-info h6 {
margin: 0;
font-size: 16px;
}
.chat-header-info small {
color: #ccc;
}
.chat-header-info h6 { margin: 0; font-size: 15px; }
.chat-header-info small { color: rgba(255,255,255,0.85); }
.chat-conversations {
flex: 1;
overflow-y: auto;
padding: 20px;
background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTAwIiBoZWlnaHQ9IjEwMCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPGRlZnM+CjxwYXR0ZXJuIGlkPSJ3aGF0c2FwcC1iZyIgcGF0dGVyblVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeD0iMCIgeT0iMCIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiPgo8cG9seWdvbiBmaWxsPSJyZ2JhKDIyOSwyMjEsMjEzLDAuMSkiIHBvaW50cz0iMCwwIDEwMCwwIDEwMCwxMDAgMCwxMDAiLz4KPGV+';
padding: 12px 16px;
background: #f8f9fb;
border: 1px solid #eef2f5;
border-radius: 0 0 8px 8px;
}
.message {
max-width: 70%;
margin-bottom: 10px;
width: 100%;
margin-bottom: 8px;
display: flex;
align-items: flex-end;
}
.message.outgoing {
@@ -182,32 +192,50 @@
border-radius: 18px;
position: relative;
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 {
background: var(--whatsapp-light);
color: #333;
border-bottom-right-radius: 4px;
color: #222;
border-bottom-right-radius: 6px;
}
.message.incoming .message-bubble {
background: white;
color: #333;
border-bottom-left-radius: 4px;
color: #222;
border-bottom-left-radius: 6px;
}
.message-time {
font-size: 11px;
color: #999;
text-align: right;
margin-top: 5px;
/* Cola tipo WhatsApp */
.message.outgoing .message-bubble::after {
content: '';
position: absolute;
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 {
position: absolute;
right: 8px;
@@ -218,6 +246,10 @@
transition: opacity 0.12s ease-in-out;
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:focus-within .message-time {
opacity: 1;