dovodi
/
Dovodi_Backend
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

color of chat updated to imam javad theme , and location of chat cart modyfied

master
Mohsen Taba 2 months ago
parent
2705527934
commit
c62d4d4242
2 changed files with 108 additions and 61 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 139
      static/css/live_chat.css
  2. 26
      templates/admin/chat/live_chat.html

139
static/css/live_chat.css
View File

@ -1,7 +1,7 @@
/* ── در هم شکستن محدودیت عرض و پدینگ‌های پیش‌فرض انفولد ── */
/* ── Break out of Unfold constraints but keep elegant symmetric padding ── */
#content {
padding-left: 0 !important;
padding-right: 0 !important;
padding-left: 1.5rem !important;
padding-right: 1.5rem !important;
padding-bottom: 0 !important;
max-width: 100% !important;
width: 100% !important;
@ -21,14 +21,15 @@ html {
/* ── Layout & Structure ── */
.chat-main-wrapper {
width: 100% !important;
height: calc(100vh - 140px);
margin-top: -1rem;
margin: 0 auto;
}
.rooms-sidebar {
width: 320px;
background: #f8fafc;
/* رنگ پس‌زمینه خیلی ملایم برای سایدبار */
background: #FAF6E9;
/* جایگزین خاکستری ملایم با کرمی */
}
@media (min-width: 1024px) {
@ -38,7 +39,8 @@ html {
}
.dark .rooms-sidebar {
background: #1f2937;
background: #052B18;
/* پس‌زمینه سایدبار در حالت دارک: سبز تیره */
}
/* ── Custom Scrollbar ── */
@ -55,42 +57,43 @@ html {
.chat-scrollbar::-webkit-scrollbar-thumb,
.chat-messages::-webkit-scrollbar-thumb {
background: rgba(0, 136, 204, 0.3);
background: rgba(10, 82, 46, 0.3);
/* سبز اصلی با شفافیت */
border-radius: 4px;
transition: all 0.3s ease;
}
.chat-scrollbar::-webkit-scrollbar-thumb:hover,
.chat-messages::-webkit-scrollbar-thumb:hover {
background: rgba(0, 136, 204, 0.5);
background: rgba(10, 82, 46, 0.5);
/* سبز اصلی پررنگ‌تر موقع هاور */
}
/* ── Room List Styles (New Telegram/Modern Style) ── */
.room-item {
margin: 4px 8px;
/* ایجاد فاصله از دیواره‌های سایدبار */
border-radius: 12px;
/* گرد کردن گوشه‌های کل روم */
border-left: none !important;
/* حذف بوردر چپ قدیمی */
transition: background-color 0.2s ease, transform 0.1s ease;
}
.room-item:hover {
background-color: rgba(0, 136, 204, 0.05);
background-color: rgba(10, 82, 46, 0.05);
/* هاور روی روم‌ها با هاله سبز اصلی */
}
.dark .room-item:hover {
background-color: rgba(255, 255, 255, 0.05);
background-color: rgba(250, 246, 233, 0.1);
/* هاور در دارک مود با هاله کرمی */
}
.room-item-active {
background: linear-gradient(135deg, rgba(0, 136, 204, 0.1), rgba(28, 156, 232, 0.05)) !important;
box-shadow: 0 2px 8px rgba(0, 136, 204, 0.05);
background: linear-gradient(135deg, rgba(10, 82, 46, 0.1), rgba(5, 43, 24, 0.05)) !important;
box-shadow: 0 2px 8px rgba(10, 82, 46, 0.05);
}
.dark .room-item-active {
background: linear-gradient(135deg, rgba(28, 156, 232, 0.15), rgba(0, 136, 204, 0.05)) !important;
background: linear-gradient(135deg, rgba(250, 246, 233, 0.15), rgba(10, 82, 46, 0.1)) !important;
}
/* آواتار کوچک داخل لیست چت‌ها */
@ -98,7 +101,8 @@ html {
width: 44px;
height: 44px;
border-radius: 50%;
background: linear-gradient(135deg, #cbd5e1, #94a3b8);
background: linear-gradient(135deg, #d4d0c1, #a8a496);
/* تنالیته خاکستری-کرمی خنثی برای روم‌های عادی */
display: flex;
align-items: center;
justify-content: center;
@ -109,19 +113,22 @@ html {
}
.room-item-active .room-avatar {
background: linear-gradient(135deg, #0088cc, #1c9ce8);
background: linear-gradient(135deg, #0A522E, #052B18);
/* آواتار روم فعال با گرادیان سبز اصلی و تیره */
}
/* ── Telegram-style Header ── */
.telegram-header {
background: linear-gradient(135deg, #0088cc, #1c9ce8);
background: linear-gradient(135deg, #0A522E, #052B18);
/* گرادیان سبز اصلی به سبز تیره */
border: none;
box-shadow: 0 2px 8px rgba(0, 136, 204, 0.2);
box-shadow: 0 2px 8px rgba(10, 82, 46, 0.2);
backdrop-filter: blur(20px);
}
.dark .telegram-header {
background: linear-gradient(135deg, #1f2937, #374151);
background: linear-gradient(135deg, #052B18, #031c0f);
/* سبز خیلی تیره در حالت دارک */
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
@ -132,19 +139,22 @@ html {
display: flex;
align-items: center;
justify-content: center;
border: 2px solid rgba(255, 255, 255, 0.25);
border: 2px solid rgba(250, 246, 233, 0.25);
/* بردر کرمی نیمه‌شفاف */
}
/* ── Chat Area Background ── */
.chat-messages {
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.5), rgba(248, 250, 252, 0.8));
background: linear-gradient(to bottom, rgba(250, 246, 233, 0.8), rgba(255, 255, 255, 1));
/* پس‌زمینه چت: کرمی محو شونده به سفید */
overflow-y: auto;
overscroll-behavior: contain;
padding: 1.5rem;
}
.dark .chat-messages {
background: linear-gradient(to bottom, rgba(17, 24, 39, 0.5), rgba(31, 41, 55, 0.8));
background: linear-gradient(to bottom, rgba(5, 43, 24, 0.9), rgba(10, 82, 46, 0.4));
/* پس‌زمینه دارک: سبز تیره */
}
/* ── Message Bubbles (Telegram Style) ── */
@ -181,24 +191,29 @@ html {
}
.message-bubble-sent {
background: linear-gradient(135deg, #0088cc, #1c9ce8);
color: white;
background: linear-gradient(135deg, #0A522E, #074023);
/* حباب پیام ارسال شده: سبز اصلی */
color: #FAF6E9;
/* متن کرمی روشن روی زمینه سبز */
border-radius: 18px 18px 4px 18px;
box-shadow: 0 2px 8px rgba(0, 136, 204, 0.25);
box-shadow: 0 2px 8px rgba(10, 82, 46, 0.25);
}
.message-bubble-received {
background: #ffffff;
color: #374151;
color: #052B18;
/* متن پیام دریافتی: سبز تیره روی زمینه سفید */
border-radius: 18px 18px 18px 4px;
border: 1px solid rgba(229, 231, 235, 0.6);
border: 1px solid rgba(250, 246, 233, 0.8);
/* کادر محو کرمی */
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.dark .message-bubble-received {
background: #374151;
color: #f9fafb;
border: 1px solid rgba(75, 85, 99, 0.3);
background: #052B18;
/* حباب دریافتی در دارک: سبز تیره */
color: #FAF6E9;
border: 1px solid rgba(10, 82, 46, 0.4);
}
.message-content {
@ -218,18 +233,20 @@ html {
/* ── Input Area ── */
.message-input-area {
background: linear-gradient(135deg, #ffffff, #f8fafc);
border-top: 1px solid rgba(229, 231, 235, 0.3);
background: linear-gradient(135deg, #ffffff, #FAF6E9);
/* زمینه باکس ارسال: سفید به کرمی */
border-top: 1px solid rgba(10, 82, 46, 0.1);
}
.dark .message-input-area {
background: linear-gradient(135deg, #374151, #4b5563);
border-top: 1px solid rgba(75, 85, 99, 0.3);
background: linear-gradient(135deg, #052B18, #031c0f);
border-top: 1px solid rgba(250, 246, 233, 0.1);
}
.telegram-input-container {
background: #ffffff;
border: 2px solid rgba(0, 136, 204, 0.1);
border: 2px solid rgba(10, 82, 46, 0.15);
/* کادر باکس تایپ با هاله سبز */
border-radius: 25px;
padding: 6px 16px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
@ -237,17 +254,17 @@ html {
}
.telegram-input-container:focus-within {
border-color: #0088cc;
box-shadow: 0 6px 25px rgba(0, 136, 204, 0.12);
border-color: #0A522E;
box-shadow: 0 6px 25px rgba(10, 82, 46, 0.15);
}
.dark .telegram-input-container {
background: rgba(55, 65, 81, 0.9);
border-color: rgba(75, 85, 99, 0.3);
background: rgba(10, 82, 46, 0.1);
border-color: rgba(250, 246, 233, 0.2);
}
.dark .telegram-input-container:focus-within {
border-color: #1c9ce8;
border-color: #FAF6E9;
}
.telegram-message-input {
@ -256,15 +273,20 @@ html {
outline: none;
font-size: 14px;
padding: 8px 0;
color: #374151;
color: #052B18;
/* رنگ تایپ سبز تیره */
}
.dark .telegram-message-input {
color: #f9fafb;
color: #FAF6E9;
}
.telegram-message-input::placeholder {
color: #9ca3af;
color: rgba(5, 43, 24, 0.5);
}
.dark .telegram-message-input::placeholder {
color: rgba(250, 246, 233, 0.5);
}
.telegram-action-btn {
@ -281,13 +303,14 @@ html {
}
.send-btn-telegram {
background: linear-gradient(135deg, #0088cc, #1c9ce8);
color: white;
background: linear-gradient(135deg, #0A522E, #052B18);
/* دکمه ارسال: سبز اصلی به تیره */
color: #FAF6E9;
}
.send-btn-telegram:hover {
transform: scale(1.05);
box-shadow: 0 4px 12px rgba(0, 136, 204, 0.4);
box-shadow: 0 4px 12px rgba(10, 82, 46, 0.4);
}
.send-btn-telegram:active {
@ -296,28 +319,30 @@ html {
/* ── Users Modal Solid Backgrounds ── */
#users-modal {
background-color: #f8fafc !important;
background-color: #FAF6E9 !important;
/* پس‌زمینه مودال: کرمی */
}
#users-modal>div:nth-child(2) {
background-color: #ffffff !important;
border-bottom: 1px solid #e5e7eb !important;
border-bottom: 1px solid rgba(10, 82, 46, 0.1) !important;
}
#users-list {
background-color: #f8fafc !important;
background-color: #FAF6E9 !important;
}
/* Dark Mode Support */
/* Dark Mode Support for Modal */
.dark #users-modal {
background-color: #1f2937 !important;
background-color: #052B18 !important;
/* پس‌زمینه دارک مودال: سبز تیره */
}
.dark #users-modal>div:nth-child(2) {
background-color: #111827 !important;
border-bottom: 1px solid #374151 !important;
background-color: #031c0f !important;
border-bottom: 1px solid rgba(250, 246, 233, 0.1) !important;
}
.dark #users-list {
background-color: #1f2937 !important;
background-color: #052B18 !important;
}

26
templates/admin/chat/live_chat.html
View File

@ -12,11 +12,33 @@
<link href="https://cdn.jsdelivr.net/gh/rastikerdar/vazirmatn@v33.003/Vazirmatn-font-face.css" rel="stylesheet"
type="text/css" />
<link rel="stylesheet" href="{% static 'css/live_chat.css' %}">
<style>
/* ── Break out of Unfold constraints & Center card with symmetric padding ── */
#content {
padding-left: 1.5rem !important;
padding-right: 1.5rem !important;
padding-bottom: 0 !important;
max-width: 100% !important;
width: 100% !important;
}
div:has(> #content) {
padding-left: 0 !important;
padding-right: 0 !important;
padding-bottom: 0 !important;
}
.chat-main-wrapper {
width: 100% !important;
max-width: 100% !important;
margin: 0 auto !important;
}
</style>
{% endblock %}
{% block content %}
<div
class="chat-main-wrapper flex w-full shadow-md border-y border-gray-200 dark:border-gray-700 overflow-hidden mt-0 relative">
class="chat-main-wrapper flex w-full shadow-md border border-gray-200 dark:border-gray-700 rounded-xl overflow-hidden mt-0 relative">
<div
class="rooms-sidebar flex-shrink-0 flex flex-col border-r border-gray-200 dark:border-gray-700 bg-gray-50 dark:bg-gray-800/50 relative z-20">
@ -73,7 +95,7 @@
</div>
</div>
<div class="chat-area flex-1 flex flex-col relative z-10">
<div class="chat-area flex-1 flex flex-col relative z-10" style="min-width: 0; overflow: hidden;">
<div id="no-chat-selected"
class="absolute inset-0 flex flex-col items-center justify-center text-gray-400 z-30 bg-[#f8fafc] dark:bg-[#111827]">
<div

Write Preview
Loading…
Cancel
Save