דילוג לתוכן
  • חוקי הפורום
  • פופולרי
  • לא נפתר
  • משתמשים
  • חיפוש גוגל בפורום
  • צור קשר
עיצובים
  • Light
  • Brite
  • Cerulean
  • Cosmo
  • Flatly
  • Journal
  • Litera
  • Lumen
  • Lux
  • Materia
  • Minty
  • Morph
  • Pulse
  • Sandstone
  • Simplex
  • Sketchy
  • Spacelab
  • United
  • Yeti
  • Zephyr
  • Dark
  • Cyborg
  • Darkly
  • Quartz
  • Slate
  • Solar
  • Superhero
  • Vapor
  • ברירת מחדל (ללא עיצוב (ברירת מחדל))
  • ללא עיצוב (ברירת מחדל)
כיווץ
מתמחים טופ
  1. דף הבית
  2. אזור המערכת
  3. באגים/הצעות ייעול
  4. שיתוף | קוד לעיצוב בידול ההודעות בצ'אט בפורום

שיתוף | קוד לעיצוב בידול ההודעות בצ'אט בפורום

מתוזמן נעוץ נעול הועבר באגים/הצעות ייעול
60 פוסטים 14 כותבים 2.9k צפיות 16 עוקבים
  • מהישן לחדש
  • מהחדש לישן
  • הכי הרבה הצבעות
תגובה
  • תגובה כנושא
התחברו כדי לפרסם תגובה
נושא זה נמחק. רק משתמשים עם הרשאות מתאימות יוכלו לצפות בו.
  • מים אחרוניםמ מים אחרונים

    מקווה שזה בסדר להקפיץ. (מדובר בעדכון לקוד.)
    ישבתי על הקוד המון זמן, אמנם לא הגעתי לתוצאה המושלמת, אבל כבר יש במה להשתמש.
    ואני סומך על הציבור המקצועי כאן בפורום שיתן את הפיצ'רים המדויקים, בשביל השלמות של הקוד.
    בהצלחה!
    הקוד עבור מנהלי פורומים בנודביבי, לעדכון הקוד ב CSS מותאם אישית.

    /* =============================================================================
   הלובי — Premium Chat Redesign v2.0
   RTL | Luxury Navy/Gold | WhatsApp-style bubbles
   ============================================================================= */

/* ─────────────────────────────────────────────
   DESIGN TOKENS — צבעי הברנד
───────────────────────────────────────────── */
#private-rooms,
[component="chat/main-wrapper"],
[class="modal-content ui-resizable"] {
  --lobby-navy-deep:    #0d1628;
  --lobby-navy:         #1a2744;
  --lobby-navy-mid:     #243460;
  --lobby-navy-light:   #2e4080;
  --lobby-gold:         #c9a84c;
  --lobby-gold-light:   #e0bf6e;
  --lobby-gold-pale:    #f5e9c8;
  --lobby-cream:        #f4f1eb;
  --lobby-white:        #ffffff;

  /* בועות */
  --bubble-self-bg:     linear-gradient(135deg, #1a2744 0%, #243460 100%);
  --bubble-self-text:   #f0e6c8;
  --bubble-other-bg:    linear-gradient(135deg, #ffffff 0%, #f4f1eb 100%);
  --bubble-other-text:  #1a2744;

  /* צלליות */
  --shadow-gold:        0 4px 20px rgba(201,168,76,0.22);
  --shadow-navy:        0 4px 20px rgba(13,22,40,0.45);
  --shadow-bubble:      0 2px 8px rgba(13,22,40,0.15);

  /* גבולות */
  --border-gold:        1px solid rgba(201,168,76,0.35);
  --border-gold-strong: 2px solid rgba(201,168,76,0.6);
}

/* ─────────────────────────────────────────────
   1. LAYOUT — מסגרת כללית
───────────────────────────────────────────── */

#private-rooms {
  background: var(--lobby-navy-deep) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-navy), 0 0 0 1px rgba(201,168,76,0.2) !important;
  border: var(--border-gold) !important;
}

/* רקע אזור הצ'אט הראשי */
[component="chat/main-wrapper"],
[class="modal-content ui-resizable"] {
  background-image: url(https://good-link.org/assets/uploads/system/whatsapp-wallpaper-39.jpg) !important;
  background-blend-mode: overlay !important;
  background-color: rgba(13, 22, 40, 0.72) !important;
  position: relative !important;
}

/* חלוקה לעמודות */
#private-rooms .row {
  margin: 0 !important;
  height: 100%;
}

/* ─────────────────────────────────────────────
   2. SIDEBAR — רשימת הצ'אטים
───────────────────────────────────────────── */

#private-rooms .col-lg-3,
#private-rooms [component="chat/nav-wrapper"] {
  background: var(--lobby-navy-deep) !important;
  border-left: var(--border-gold-strong) !important;
  border-right: none !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
}

/* כותרת הסרגל */
#private-rooms .col-lg-3 .d-flex.align-items-center.justify-content-between,
#private-rooms [component="chat/nav-wrapper"] > .d-flex {
  background: linear-gradient(135deg, var(--lobby-navy) 0%, var(--lobby-navy-mid) 100%) !important;
  padding: 14px 16px !important;
  border-bottom: var(--border-gold) !important;
  box-shadow: 0 2px 12px rgba(201,168,76,0.15) !important;
}

/* כותרת "צ'אטים" */
#private-rooms .col-lg-3 h5,
#private-rooms [component="chat/nav-wrapper"] h5 {
  color: var(--lobby-gold-light) !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em;
  font-size: 15px !important;
  text-shadow: 0 1px 6px rgba(201,168,76,0.3);
}

/* כפתורי אייקון בסרגל */
#private-rooms .col-lg-3 .btn-ghost,
#private-rooms [component="chat/nav-wrapper"] .btn-ghost,
#private-rooms .col-lg-3 .btn.p-1 {
  color: var(--lobby-gold) !important;
  background: transparent !important;
  border: none !important;
  border-radius: 8px !important;
  transition: background 0.18s, color 0.18s, transform 0.15s !important;
}

#private-rooms .col-lg-3 .btn-ghost:hover,
#private-rooms [component="chat/nav-wrapper"] .btn-ghost:hover {
  background: rgba(201,168,76,0.15) !important;
  color: var(--lobby-gold-light) !important;
  transform: scale(1.1) !important;
}

/* שדה חיפוש */
#private-rooms .form-control,
#private-rooms .form-control-sm,
#private-rooms input[type="text"] {
  background: rgba(255,255,255,0.06) !important;
  border: var(--border-gold) !important;
  border-radius: 20px !important;
  color: var(--lobby-cream) !important;
  padding: 7px 16px !important;
  font-size: 13px !important;
  box-shadow: none !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

#private-rooms .form-control:focus,
#private-rooms input[type="text"]:focus {
  border-color: var(--lobby-gold) !important;
  box-shadow: 0 0 0 3px rgba(201,168,76,0.18) !important;
  outline: none !important;
}

#private-rooms .form-control::placeholder,
#private-rooms input::placeholder {
  color: rgba(201,168,76,0.4) !important;
}

/* כפתור ניקוי חיפוש */
#private-rooms .fa-times,
#private-rooms .opacity-75 {
  color: var(--lobby-gold) !important;
  opacity: 0.7 !important;
}

/* ─── רשימת חדרים ─── */
#private-rooms .chats-list,
#private-rooms [component="chat/rooms"],
#private-rooms [component="chat/list"] {
  background: transparent !important;
  overflow-y: auto !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(201,168,76,0.3) transparent !important;
}

#private-rooms .chats-list::-webkit-scrollbar { width: 4px; }
#private-rooms .chats-list::-webkit-scrollbar-thumb {
  background: rgba(201,168,76,0.3);
  border-radius: 4px;
}

/* שורת צ'אט בודדת */
#private-rooms .chat-room-btn,
#private-rooms [component="chat/room/item"] {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(201,168,76,0.08) !important;
  padding: 11px 14px !important;
  transition: background 0.18s ease, border-right 0.18s !important;
  cursor: pointer;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  text-align: right !important;
  border-right: 3px solid transparent !important;
}

#private-rooms .chat-room-btn:hover {
  background: rgba(201,168,76,0.07) !important;
  border-right-color: rgba(201,168,76,0.4) !important;
}

#private-rooms .chat-room-btn.active,
#private-rooms [component="chat/room/item"].active {
  background: rgba(201,168,76,0.13) !important;
  border-right: 3px solid var(--lobby-gold) !important;
  box-shadow: inset 0 0 20px rgba(201,168,76,0.05) !important;
}

/* אווטאר בסרגל */
#private-rooms .main-avatar .avatar,
#private-rooms .chat-room-btn .avatar,
#private-rooms .stacked-avatars .avatar {
  border-radius: 50% !important;
  border: 2px solid rgba(201,168,76,0.4) !important;
  box-shadow: 0 0 0 2px rgba(13,22,40,0.6) !important;
  transition: border-color 0.18s !important;
}

#private-rooms .chat-room-btn.active .avatar {
  border-color: var(--lobby-gold) !important;
  box-shadow: 0 0 8px rgba(201,168,76,0.4) !important;
}

/* שם הצ'אט */
#private-rooms .room-name,
#private-rooms .fw-semibold {
  color: var(--lobby-cream) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

#private-rooms .chat-room-btn.active .room-name {
  color: var(--lobby-gold-light) !important;
}

/* תצוגה מקדימה / teaser */
#private-rooms .teaser-content,
#private-rooms .text-xs.text-muted,
#private-rooms .teaser-username {
  color: rgba(201,168,76,0.5) !important;
  font-size: 12px !important;
}

/* חותמת זמן */
#private-rooms .teaser-timestamp,
#private-rooms .timeago {
  color: rgba(201,168,76,0.45) !important;
  font-size: 11px !important;
}

/* תג הודעות שלא נקראו */
#private-rooms .unread .fa-circle,
#private-rooms .unread-count,
#private-rooms [component="chat/rooms"] .badge,
#private-rooms [component="chat/list"] .badge {
  color: var(--lobby-gold) !important;
  background: linear-gradient(135deg, var(--lobby-gold), var(--lobby-gold-light)) !important;
  border-radius: 50px !important;
  padding: 2px 7px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  color: var(--lobby-navy-deep) !important;
  box-shadow: 0 0 8px rgba(201,168,76,0.5) !important;
  border: none !important;
}

/* כפתור mark-read */
#private-rooms .mark-read {
  color: var(--lobby-gold) !important;
  opacity: 0.6 !important;
  transition: opacity 0.15s !important;
}
#private-rooms .mark-read:hover { opacity: 1 !important; }

/* ─────────────────────────────────────────────
   3. HEADER — כותרת הצ'אט הפעיל
───────────────────────────────────────────── */

[component="chat/header"],
.modal-header.d-flex.gap-4.justify-content-between.ui-draggable-handle {
  background: linear-gradient(135deg, rgba(13,22,40,0.97) 0%, rgba(26,39,68,0.97) 60%, rgba(36,52,96,0.95) 100%) !important;
  color: #ffffff !important;
  font-weight: bold;
  padding: 12px 18px !important;
  border-bottom: var(--border-gold-strong) !important;
  box-shadow: 0 3px 16px rgba(201,168,76,0.2) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

[component="chat/header"] *,
[component="chat/header"] i,
[component="chat/header"] svg,
[component="chat/header"] button,
.modal-header.d-flex.gap-4.justify-content-between.ui-draggable-handle * {
  color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

[component="chat/header"] .room-name,
[component="chat/header"] h5,
[component="chat/header"] strong {
  color: var(--lobby-gold-light) !important;
  text-shadow: 0 1px 6px rgba(201,168,76,0.35) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

[component="chat/header"] .avatar,
.modal-header .avatar {
  border: 2px solid var(--lobby-gold) !important;
  border-radius: 50% !important;
  box-shadow: 0 0 10px rgba(201,168,76,0.4) !important;
}

[component="chat/header"] .btn,
.modal-header .btn {
  color: var(--lobby-gold) !important;
  background: transparent !important;
  border: none !important;
  border-radius: 50% !important;
  width: 36px; height: 36px;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.18s, transform 0.15s !important;
}

[component="chat/header"] .btn:hover,
.modal-header .btn:hover {
  background: rgba(201,168,76,0.15) !important;
  transform: scale(1.1) !important;
}

/* ─────────────────────────────────────────────
   4. MESSAGES — הודעות (RTL: שלי=שמאל, אחר=ימין)
───────────────────────────────────────────── */

.chat-message,
[component="chat/message"] {
  position: relative !important;
  margin-top: 4px !important;
  margin-bottom: 30px !important;
  padding: 0 !important;
  max-width: calc(100% - 60px) !important;
  width: fit-content !important;
  clear: both !important;
  animation: bubbleIn 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

@keyframes bubbleIn {
  from { opacity: 0; transform: scale(0.88) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ─── הודעות של אחרים — ימין (RTL) ─── */
[data-self="0"][component="chat/message"],
[data-self="0"].chat-message {
  background: var(--bubble-other-bg) !important;
  border-radius: 4px 20px 20px 20px !important;
  margin-right: 10px !important;
  margin-left: auto !important;
  padding: 8px 14px 6px 14px !important;
  border: 1px solid rgba(201,168,76,0.15) !important;
  box-shadow: var(--shadow-bubble), inset 0 1px 0 rgba(255,255,255,0.8) !important;
}

[data-self="0"][component="chat/message"] *,
[data-self="0"].chat-message * {
  color: var(--bubble-other-text) !important;
}

[data-self="0"][component="chat/message"] .text-muted,
[data-self="0"][component="chat/message"] abbr,
[data-self="0"][component="chat/message"] small,
[data-self="0"][component="chat/message"] .teaser-timestamp {
  color: #8a9bb5 !important;
}

/* ─── ההודעות שלי — שמאל (RTL) ─── */
[data-self="1"][component="chat/message"],
[data-self="1"].chat-message {
  background: var(--bubble-self-bg) !important;
  border-radius: 20px 4px 20px 20px !important;
  margin-left: 10px !important;
  margin-right: auto !important;
  padding: 8px 14px 6px 14px !important;
  border: var(--border-gold) !important;
  box-shadow: var(--shadow-bubble), 0 0 0 1px rgba(201,168,76,0.15) !important;
}

[data-self="1"][component="chat/message"] *,
[data-self="1"].chat-message * {
  color: var(--bubble-self-text) !important;
}

[data-self="1"][component="chat/message"] .text-muted,
[data-self="1"][component="chat/message"] abbr,
[data-self="1"][component="chat/message"] small,
[data-self="1"][component="chat/message"] .teaser-timestamp,
[data-self="1"][component="chat/message"] .timeago {
  color: var(--lobby-gold) !important;
  opacity: 0.8 !important;
}

/* הודעות רצופות */
[component="chat/message"][data-break="false"] {
  margin-top: 2px !important;
  margin-bottom: 2px !important;
}

/* ─── header של הודעה (שם שולח) ─── */
[component="chat/message"] .message-header,
.chat-message .message-header {
  margin-bottom: 3px !important;
}

[data-self="0"][component="chat/message"] .chat-user a,
[data-self="0"][component="chat/message"] .chat-user {
  color: var(--lobby-navy-mid) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
}

[data-self="1"][component="chat/message"] .chat-user a,
[data-self="1"][component="chat/message"] .chat-user {
  color: var(--lobby-gold) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
}

/* ─── גוף ההודעה ─── */
[component="chat/message"] .message-body,
.chat-message .message-body {
  font-size: 14px !important;
  line-height: 1.55 !important;
  word-break: break-word !important;
}

/* ─────────────────────────────────────────────
   5. REACTIONS — אימוג'ים
───────────────────────────────────────────── */

[component="chat/message"] [component="message/reactions"],
[component="chat/message"] .reactions {
  position: absolute !important;
  bottom: -24px !important;
  z-index: 5 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 3px !important;
  background: rgba(13,22,40,0.88) !important;
  padding: 3px 7px !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 8px rgba(201,168,76,0.2) !important;
  border: var(--border-gold) !important;
  backdrop-filter: blur(8px) !important;
}

[data-self="0"][component="chat/message"] [component="message/reactions"],
[data-self="0"][component="chat/message"] .reactions {
  right: 5px !important;
  left: auto !important;
}

[data-self="1"][component="chat/message"] [component="message/reactions"],
[data-self="1"][component="chat/message"] .reactions {
  left: 5px !important;
  right: auto !important;
  justify-content: flex-start !important;
}

.reaction-emoji-count {
  color: var(--lobby-gold-pale) !important;
  font-size: 11px !important;
}

.reaction.reacted {
  background: rgba(201,168,76,0.2) !important;
  border-radius: 8px !important;
}

/* ─────────────────────────────────────────────
   6. CONTROLS — כלי הודעה (Reply, React, More)
───────────────────────────────────────────── */

[component="chat/message"] .controls {
  position: absolute !important;
  top: -12px !important;
  bottom: auto !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.2s ease, transform 0.15s ease !important;
  transform: translateY(4px) scale(0.95) !important;
  background: linear-gradient(135deg, var(--lobby-navy), var(--lobby-navy-mid)) !important;
  border-radius: 18px !important;
  padding: 5px 10px !important;
  box-shadow: var(--shadow-gold), 0 0 0 1px rgba(201,168,76,0.3) !important;
  border: none !important;
  z-index: 10 !important;
  display: flex !important;
  gap: 4px !important;
}

[component="chat/message"]:hover .controls {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) scale(1) !important;
}

/* Controls position: הודעות אחרים = שמאל, שלי = ימין */
[data-self="0"][component="chat/message"] .controls {
  left: -10px !important;
  right: auto !important;
}

[data-self="1"][component="chat/message"] .controls {
  right: -10px !important;
  left: auto !important;
}

[component="chat/message"] .controls .btn {
  padding: 3px 5px !important;
  background: none !important;
  border: none !important;
  line-height: 1 !important;
  box-shadow: none !important;
  border-radius: 8px !important;
  transition: background 0.15s ease !important;
}

[component="chat/message"] .controls .btn:hover {
  background: rgba(201,168,76,0.2) !important;
}

[component="chat/message"] .controls i,
[component="chat/message"] .controls svg,
[component="chat/message"] .controls .fa {
  color: var(--lobby-gold) !important;
  fill: var(--lobby-gold) !important;
  stroke: none !important;
  width: 16px !important;
  height: 16px !important;
  font-size: 14px !important;
}

/* ─────────────────────────────────────────────
   7. COMPOSER — תיבת קלט
───────────────────────────────────────────── */

/* wrapper כולל */
.w-100.flex-grow-1.flex-nowrap.position-relative.d-flex.rounded-2.border.border-secondary.p-1.align-items-end,
[component="chat/input-area"],
[component="chat/composer"] {
  background: rgba(13,22,40,0.92) !important;
  border: var(--border-gold) !important;
  border-radius: 28px !important;
  box-shadow: 0 4px 20px rgba(201,168,76,0.18), inset 0 1px 0 rgba(201,168,76,0.1) !important;
  backdrop-filter: blur(12px) !important;
  padding: 8px 12px !important;
  transition: box-shadow 0.2s, border-color 0.2s !important;
}

.w-100.flex-grow-1.flex-nowrap.position-relative.d-flex.rounded-2.border.border-secondary.p-1.align-items-end:focus-within {
  border-color: var(--lobby-gold) !important;
  box-shadow: 0 4px 24px rgba(201,168,76,0.3), inset 0 1px 0 rgba(201,168,76,0.15) !important;
}

/* textarea */
.w-100.flex-grow-1.flex-nowrap.position-relative.d-flex.rounded-2.border.border-secondary.p-1.align-items-end textarea,
[component="chat/input-area"] textarea,
.chat-input,
.mousetrap {
  background: transparent !important;
  border: none !important;
  color: var(--lobby-cream) !important;
  font-size: 14px !important;
  box-shadow: none !important;
  outline: none !important;
  resize: none !important;
  padding: 4px 8px !important;
}

.chat-input::placeholder,
.mousetrap::placeholder,
[component="chat/input-area"] textarea::placeholder {
  color: rgba(201,168,76,0.35) !important;
}

/* כפתורי אייקון (upload, emoji) */
[component="chat/input-area"] .btn:not([component="chat/send"]):not(.btn-primary),
.w-100.flex-grow-1.flex-nowrap.position-relative.d-flex.rounded-2.border.border-secondary.p-1.align-items-end .btn:not([type="submit"]) {
  color: var(--lobby-gold) !important;
  background: transparent !important;
  border: none !important;
  border-radius: 50% !important;
  width: 36px !important; height: 36px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.18s, transform 0.15s !important;
}

[component="chat/input-area"] .btn:not([component="chat/send"]):not(.btn-primary):hover {
  background: rgba(201,168,76,0.15) !important;
  transform: scale(1.12) !important;
}

/* כפתור שליחה */
[component="chat/send"],
[component="chat/input-area"] .btn-primary,
[component="chat/input-area"] button[type="submit"],
.fa-paper-plane {
  background: linear-gradient(135deg, var(--lobby-gold) 0%, var(--lobby-gold-light) 100%) !important;
  border: none !important;
  border-radius: 50% !important;
  width: 40px !important; height: 40px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--lobby-navy-deep) !important;
  font-size: 16px !important;
  box-shadow: 0 3px 12px rgba(201,168,76,0.5) !important;
  transition: transform 0.15s, box-shadow 0.15s !important;
  flex-shrink: 0 !important;
}

[component="chat/send"]:hover,
[component="chat/input-area"] .btn-primary:hover {
  transform: scale(1.1) rotate(-8deg) !important;
  box-shadow: 0 5px 20px rgba(201,168,76,0.65) !important;
}

[component="chat/send"] i,
[component="chat/send"] .fa,
[component="chat/input-area"] .btn-primary i {
  color: var(--lobby-navy-deep) !important;
}

/* ─────────────────────────────────────────────
   8. SCROLL UP ALERT
───────────────────────────────────────────── */

.scroll-up-alert.alert.alert-info {
  background: linear-gradient(135deg, var(--lobby-navy), var(--lobby-navy-mid)) !important;
  border: var(--border-gold) !important;
  color: var(--lobby-gold-light) !important;
  border-radius: 20px !important;
  box-shadow: var(--shadow-gold) !important;
  backdrop-filter: blur(8px) !important;
}

.scroll-up-alert .fa-arrow-down {
  color: var(--lobby-gold) !important;
}

/* ─────────────────────────────────────────────
   9. DROPDOWN MENUS בתוך הצ'אט
───────────────────────────────────────────── */

[component="chat/header"] .dropdown-menu,
[component="chat/message"] .dropdown-menu,
#private-rooms .dropdown-menu {
  background: var(--lobby-navy) !important;
  border: var(--border-gold) !important;
  border-radius: 12px !important;
  box-shadow: var(--shadow-navy), 0 0 0 1px rgba(201,168,76,0.2) !important;
  padding: 6px !important;
  overflow: hidden !important;
}

[component="chat/header"] .dropdown-item,
[component="chat/message"] .dropdown-item,
#private-rooms .dropdown-item {
  color: var(--lobby-cream) !important;
  border-radius: 8px !important;
  padding: 8px 14px !important;
  font-size: 13px !important;
  transition: background 0.15s !important;
}

[component="chat/header"] .dropdown-item:hover,
[component="chat/message"] .dropdown-item:hover,
#private-rooms .dropdown-item:hover {
  background: rgba(201,168,76,0.15) !important;
  color: var(--lobby-gold-light) !important;
}

[component="chat/header"] .dropdown-item i,
[component="chat/message"] .dropdown-item i,
#private-rooms .dropdown-item i,
#private-rooms .dropdown-item .fa {
  color: var(--lobby-gold) !important;
  width: 16px !important;
}

#private-rooms .dropdown-divider {
  border-color: rgba(201,168,76,0.2) !important;
  margin: 4px 8px !important;
}

/* ─────────────────────────────────────────────
   10. MODAL (חלון מוקטן)
───────────────────────────────────────────── */

.modal.chat-modal .modal-content,
[class="modal-content ui-resizable"] {
  border: var(--border-gold-strong) !important;
  border-radius: 16px !important;
  box-shadow: var(--shadow-navy), 0 0 0 1px rgba(201,168,76,0.25) !important;
  overflow: hidden !important;
}

.modal.chat-modal .modal-footer {
  background: rgba(13,22,40,0.97) !important;
  border-top: var(--border-gold) !important;
  padding: 10px 16px !important;
}

/* ─────────────────────────────────────────────
   11. ONLINE STATUS
───────────────────────────────────────────── */

#private-rooms .online .fa-circle,
#private-rooms [data-online="true"] .fa-circle {
  color: #4ade80 !important;
  text-shadow: 0 0 6px rgba(74, 222, 128, 0.6) !important;
}

/* ─────────────────────────────────────────────
   12. MEMBERS / INFO PANEL
───────────────────────────────────────────── */

#private-rooms .members,
[component="chat/members"] {
  background: var(--lobby-navy-deep) !important;
  border-right: var(--border-gold) !important;
}

#private-rooms .members h5,
[component="chat/members"] h5 {
  color: var(--lobby-gold-light) !important;
  font-weight: 700 !important;
  border-bottom: var(--border-gold) !important;
  padding-bottom: 10px !important;
}

#private-rooms .members .avatar {
  border: 2px solid rgba(201,168,76,0.3) !important;
  border-radius: 50% !important;
}

#private-rooms .members a {
  color: var(--lobby-cream) !important;
  transition: color 0.15s !important;
}

#private-rooms .members a:hover {
  color: var(--lobby-gold-light) !important;
}

/* ─────────────────────────────────────────────
   13. QUOTE / REPLY PREVIEW
───────────────────────────────────────────── */

[component="chat/message"] blockquote,
[component="chat/message"] .border-start {
  border-right: 3px solid var(--lobby-gold) !important;
  border-left: none !important;
  background: rgba(201,168,76,0.08) !important;
  border-radius: 0 8px 8px 0 !important;
  padding: 6px 12px !important;
  margin-bottom: 6px !important;
}

[data-self="1"][component="chat/message"] blockquote {
  border-right-color: rgba(255,255,255,0.4) !important;
  background: rgba(255,255,255,0.07) !important;
}

/* ─────────────────────────────────────────────
   14. IMAGEDROP / UPLOAD AREA
───────────────────────────────────────────── */

#private-rooms .imagedrop {
  background: rgba(13,22,40,0.85) !important;
  border: 2px dashed var(--lobby-gold) !important;
  border-radius: 12px !important;
  color: var(--lobby-gold-light) !important;
  backdrop-filter: blur(8px) !important;
}

/* ─────────────────────────────────────────────
   15. HR מפריד תאריך
───────────────────────────────────────────── */

#private-rooms .chat-content hr,
[component="chat/messages"] hr {
  border: none !important;
  border-top: 1px solid rgba(201,168,76,0.2) !important;
  position: relative !important;
}

    בעז"ה אני יעלה בקרוב קוד למשתמשים הרגילים.

    צדיק וטוב לו 0צ מנותק
    צדיק וטוב לו 0צ מנותק
    צדיק וטוב לו 0
    כתב נערך לאחרונה על ידי
    #50

    @מים-אחרונים למה זה רק מצב כהה?

    מים אחרוניםמ תגובה 1 תגובה אחרונה
    1
    • יאנג בויי יאנג בוי

      @מים-אחרונים
      בבקשה:

      // ==UserScript==
// @name         עיצוב בידול ההודעות בצ'אט
// @namespace    https://mitmachim.top/uid/16203
// @version      2026-03-07
// @description  try to take over the world!
// @author       מים אחרונים
// @match        https://mitmachim.top/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=mitmachim.top
// @grant        GM_addStyle
// @run-at       document-end
// ==/UserScript==

(function() {
    'use strict';

GM_addStyle(`

/* =============================================================================
   הלובי — Premium Chat Redesign v2.0
   RTL | Luxury Navy/Gold | WhatsApp-style bubbles
   ============================================================================= */

/* ─────────────────────────────────────────────
   DESIGN TOKENS — צבעי הברנד
───────────────────────────────────────────── */
#private-rooms,
[component="chat/main-wrapper"],
[class="modal-content ui-resizable"] {
  --lobby-navy-deep:    #0d1628;
  --lobby-navy:         #1a2744;
  --lobby-navy-mid:     #243460;
  --lobby-navy-light:   #2e4080;
  --lobby-gold:         #c9a84c;
  --lobby-gold-light:   #e0bf6e;
  --lobby-gold-pale:    #f5e9c8;
  --lobby-cream:        #f4f1eb;
  --lobby-white:        #ffffff;

  /* בועות */
  --bubble-self-bg:     linear-gradient(135deg, #1a2744 0%, #243460 100%);
  --bubble-self-text:   #f0e6c8;
  --bubble-other-bg:    linear-gradient(135deg, #ffffff 0%, #f4f1eb 100%);
  --bubble-other-text:  #1a2744;

  /* צלליות */
  --shadow-gold:        0 4px 20px rgba(201,168,76,0.22);
  --shadow-navy:        0 4px 20px rgba(13,22,40,0.45);
  --shadow-bubble:      0 2px 8px rgba(13,22,40,0.15);

  /* גבולות */
  --border-gold:        1px solid rgba(201,168,76,0.35);
  --border-gold-strong: 2px solid rgba(201,168,76,0.6);
}

/* ─────────────────────────────────────────────
   1. LAYOUT — מסגרת כללית
───────────────────────────────────────────── */

#private-rooms {
  background: var(--lobby-navy-deep) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  box-shadow: var(--shadow-navy), 0 0 0 1px rgba(201,168,76,0.2) !important;
  border: var(--border-gold) !important;
}

/* רקע אזור הצ'אט הראשי */
[component="chat/main-wrapper"],
[class="modal-content ui-resizable"] {
  background-image: url(https://good-link.org/assets/uploads/system/whatsapp-wallpaper-39.jpg) !important;
  background-blend-mode: overlay !important;
  background-color: rgba(13, 22, 40, 0.72) !important;
  position: relative !important;
}

/* חלוקה לעמודות */
#private-rooms .row {
  margin: 0 !important;
  height: 100%;
}

/* ─────────────────────────────────────────────
   2. SIDEBAR — רשימת הצ'אטים
───────────────────────────────────────────── */

#private-rooms .col-lg-3,
#private-rooms [component="chat/nav-wrapper"] {
  background: var(--lobby-navy-deep) !important;
  border-left: var(--border-gold-strong) !important;
  border-right: none !important;
  padding: 0 !important;
  display: flex;
  flex-direction: column;
}

/* כותרת הסרגל */
#private-rooms .col-lg-3 .d-flex.align-items-center.justify-content-between,
#private-rooms [component="chat/nav-wrapper"] > .d-flex {
  background: linear-gradient(135deg, var(--lobby-navy) 0%, var(--lobby-navy-mid) 100%) !important;
  padding: 14px 16px !important;
  border-bottom: var(--border-gold) !important;
  box-shadow: 0 2px 12px rgba(201,168,76,0.15) !important;
}

/* כותרת "צ'אטים" */
#private-rooms .col-lg-3 h5,
#private-rooms [component="chat/nav-wrapper"] h5 {
  color: var(--lobby-gold-light) !important;
  font-weight: 700 !important;
  letter-spacing: 0.04em;
  font-size: 15px !important;
  text-shadow: 0 1px 6px rgba(201,168,76,0.3);
}

/* כפתורי אייקון בסרגל */
#private-rooms .col-lg-3 .btn-ghost,
#private-rooms [component="chat/nav-wrapper"] .btn-ghost,
#private-rooms .col-lg-3 .btn.p-1 {
  color: var(--lobby-gold) !important;
  background: transparent !important;
  border: none !important;
  border-radius: 8px !important;
  transition: background 0.18s, color 0.18s, transform 0.15s !important;
}

#private-rooms .col-lg-3 .btn-ghost:hover,
#private-rooms [component="chat/nav-wrapper"] .btn-ghost:hover {
  background: rgba(201,168,76,0.15) !important;
  color: var(--lobby-gold-light) !important;
  transform: scale(1.1) !important;
}

/* שדה חיפוש */
#private-rooms .form-control,
#private-rooms .form-control-sm,
#private-rooms input[type="text"] {
  background: rgba(255,255,255,0.06) !important;
  border: var(--border-gold) !important;
  border-radius: 20px !important;
  color: var(--lobby-cream) !important;
  padding: 7px 16px !important;
  font-size: 13px !important;
  box-shadow: none !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

#private-rooms .form-control:focus,
#private-rooms input[type="text"]:focus {
  border-color: var(--lobby-gold) !important;
  box-shadow: 0 0 0 3px rgba(201,168,76,0.18) !important;
  outline: none !important;
}

#private-rooms .form-control::placeholder,
#private-rooms input::placeholder {
  color: rgba(201,168,76,0.4) !important;
}

/* כפתור ניקוי חיפוש */
#private-rooms .fa-times,
#private-rooms .opacity-75 {
  color: var(--lobby-gold) !important;
  opacity: 0.7 !important;
}

/* ─── רשימת חדרים ─── */
#private-rooms .chats-list,
#private-rooms [component="chat/rooms"],
#private-rooms [component="chat/list"] {
  background: transparent !important;
  overflow-y: auto !important;
  scrollbar-width: thin !important;
  scrollbar-color: rgba(201,168,76,0.3) transparent !important;
}

#private-rooms .chats-list::-webkit-scrollbar { width: 4px; }
#private-rooms .chats-list::-webkit-scrollbar-thumb {
  background: rgba(201,168,76,0.3);
  border-radius: 4px;
}

/* שורת צ'אט בודדת */
#private-rooms .chat-room-btn,
#private-rooms [component="chat/room/item"] {
  background: transparent !important;
  border: none !important;
  border-bottom: 1px solid rgba(201,168,76,0.08) !important;
  padding: 11px 14px !important;
  transition: background 0.18s ease, border-right 0.18s !important;
  cursor: pointer;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  width: 100% !important;
  text-align: right !important;
  border-right: 3px solid transparent !important;
}

#private-rooms .chat-room-btn:hover {
  background: rgba(201,168,76,0.07) !important;
  border-right-color: rgba(201,168,76,0.4) !important;
}

#private-rooms .chat-room-btn.active,
#private-rooms [component="chat/room/item"].active {
  background: rgba(201,168,76,0.13) !important;
  border-right: 3px solid var(--lobby-gold) !important;
  box-shadow: inset 0 0 20px rgba(201,168,76,0.05) !important;
}

/* אווטאר בסרגל */
#private-rooms .main-avatar .avatar,
#private-rooms .chat-room-btn .avatar,
#private-rooms .stacked-avatars .avatar {
  border-radius: 50% !important;
  border: 2px solid rgba(201,168,76,0.4) !important;
  box-shadow: 0 0 0 2px rgba(13,22,40,0.6) !important;
  transition: border-color 0.18s !important;
}

#private-rooms .chat-room-btn.active .avatar {
  border-color: var(--lobby-gold) !important;
  box-shadow: 0 0 8px rgba(201,168,76,0.4) !important;
}

/* שם הצ'אט */
#private-rooms .room-name,
#private-rooms .fw-semibold {
  color: var(--lobby-cream) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
}

#private-rooms .chat-room-btn.active .room-name {
  color: var(--lobby-gold-light) !important;
}

/* תצוגה מקדימה / teaser */
#private-rooms .teaser-content,
#private-rooms .text-xs.text-muted,
#private-rooms .teaser-username {
  color: rgba(201,168,76,0.5) !important;
  font-size: 12px !important;
}

/* חותמת זמן */
#private-rooms .teaser-timestamp,
#private-rooms .timeago {
  color: rgba(201,168,76,0.45) !important;
  font-size: 11px !important;
}

/* תג הודעות שלא נקראו */
#private-rooms .unread .fa-circle,
#private-rooms .unread-count,
#private-rooms [component="chat/rooms"] .badge,
#private-rooms [component="chat/list"] .badge {
  color: var(--lobby-gold) !important;
  background: linear-gradient(135deg, var(--lobby-gold), var(--lobby-gold-light)) !important;
  border-radius: 50px !important;
  padding: 2px 7px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  color: var(--lobby-navy-deep) !important;
  box-shadow: 0 0 8px rgba(201,168,76,0.5) !important;
  border: none !important;
}

/* כפתור mark-read */
#private-rooms .mark-read {
  color: var(--lobby-gold) !important;
  opacity: 0.6 !important;
  transition: opacity 0.15s !important;
}
#private-rooms .mark-read:hover { opacity: 1 !important; }

/* ─────────────────────────────────────────────
   3. HEADER — כותרת הצ'אט הפעיל
───────────────────────────────────────────── */

[component="chat/header"],
.modal-header.d-flex.gap-4.justify-content-between.ui-draggable-handle {
  background: linear-gradient(135deg, rgba(13,22,40,0.97) 0%, rgba(26,39,68,0.97) 60%, rgba(36,52,96,0.95) 100%) !important;
  color: #ffffff !important;
  font-weight: bold;
  padding: 12px 18px !important;
  border-bottom: var(--border-gold-strong) !important;
  box-shadow: 0 3px 16px rgba(201,168,76,0.2) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

[component="chat/header"] *,
[component="chat/header"] i,
[component="chat/header"] svg,
[component="chat/header"] button,
.modal-header.d-flex.gap-4.justify-content-between.ui-draggable-handle * {
  color: #ffffff !important;
  fill: #ffffff !important;
  stroke: #ffffff !important;
}

[component="chat/header"] .room-name,
[component="chat/header"] h5,
[component="chat/header"] strong {
  color: var(--lobby-gold-light) !important;
  text-shadow: 0 1px 6px rgba(201,168,76,0.35) !important;
  font-size: 15px !important;
  font-weight: 700 !important;
}

[component="chat/header"] .avatar,
.modal-header .avatar {
  border: 2px solid var(--lobby-gold) !important;
  border-radius: 50% !important;
  box-shadow: 0 0 10px rgba(201,168,76,0.4) !important;
}

[component="chat/header"] .btn,
.modal-header .btn {
  color: var(--lobby-gold) !important;
  background: transparent !important;
  border: none !important;
  border-radius: 50% !important;
  width: 36px; height: 36px;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.18s, transform 0.15s !important;
}

[component="chat/header"] .btn:hover,
.modal-header .btn:hover {
  background: rgba(201,168,76,0.15) !important;
  transform: scale(1.1) !important;
}

/* ─────────────────────────────────────────────
   4. MESSAGES — הודעות (RTL: שלי=שמאל, אחר=ימין)
───────────────────────────────────────────── */

.chat-message,
[component="chat/message"] {
  position: relative !important;
  margin-top: 4px !important;
  margin-bottom: 30px !important;
  padding: 0 !important;
  max-width: calc(100% - 60px) !important;
  width: fit-content !important;
  clear: both !important;
  animation: bubbleIn 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

@keyframes bubbleIn {
  from { opacity: 0; transform: scale(0.88) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* ─── הודעות של אחרים — ימין (RTL) ─── */
[data-self="0"][component="chat/message"],
[data-self="0"].chat-message {
  background: var(--bubble-other-bg) !important;
  border-radius: 4px 20px 20px 20px !important;
  margin-right: 10px !important;
  margin-left: auto !important;
  padding: 8px 14px 6px 14px !important;
  border: 1px solid rgba(201,168,76,0.15) !important;
  box-shadow: var(--shadow-bubble), inset 0 1px 0 rgba(255,255,255,0.8) !important;
}

[data-self="0"][component="chat/message"] *,
[data-self="0"].chat-message * {
  color: var(--bubble-other-text) !important;
}

[data-self="0"][component="chat/message"] .text-muted,
[data-self="0"][component="chat/message"] abbr,
[data-self="0"][component="chat/message"] small,
[data-self="0"][component="chat/message"] .teaser-timestamp {
  color: #8a9bb5 !important;
}

/* ─── ההודעות שלי — שמאל (RTL) ─── */
[data-self="1"][component="chat/message"],
[data-self="1"].chat-message {
  background: var(--bubble-self-bg) !important;
  border-radius: 20px 4px 20px 20px !important;
  margin-left: 10px !important;
  margin-right: auto !important;
  padding: 8px 14px 6px 14px !important;
  border: var(--border-gold) !important;
  box-shadow: var(--shadow-bubble), 0 0 0 1px rgba(201,168,76,0.15) !important;
}

[data-self="1"][component="chat/message"] *,
[data-self="1"].chat-message * {
  color: var(--bubble-self-text) !important;
}

[data-self="1"][component="chat/message"] .text-muted,
[data-self="1"][component="chat/message"] abbr,
[data-self="1"][component="chat/message"] small,
[data-self="1"][component="chat/message"] .teaser-timestamp,
[data-self="1"][component="chat/message"] .timeago {
  color: var(--lobby-gold) !important;
  opacity: 0.8 !important;
}

/* הודעות רצופות */
[component="chat/message"][data-break="false"] {
  margin-top: 2px !important;
  margin-bottom: 2px !important;
}

/* ─── header של הודעה (שם שולח) ─── */
[component="chat/message"] .message-header,
.chat-message .message-header {
  margin-bottom: 3px !important;
}

[data-self="0"][component="chat/message"] .chat-user a,
[data-self="0"][component="chat/message"] .chat-user {
  color: var(--lobby-navy-mid) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
}

[data-self="1"][component="chat/message"] .chat-user a,
[data-self="1"][component="chat/message"] .chat-user {
  color: var(--lobby-gold) !important;
  font-weight: 700 !important;
  font-size: 12px !important;
}

/* ─── גוף ההודעה ─── */
[component="chat/message"] .message-body,
.chat-message .message-body {
  font-size: 14px !important;
  line-height: 1.55 !important;
  word-break: break-word !important;
}

/* ─────────────────────────────────────────────
   5. REACTIONS — אימוג'ים
───────────────────────────────────────────── */

[component="chat/message"] [component="message/reactions"],
[component="chat/message"] .reactions {
  position: absolute !important;
  bottom: -24px !important;
  z-index: 5 !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 3px !important;
  background: rgba(13,22,40,0.88) !important;
  padding: 3px 7px !important;
  border-radius: 12px !important;
  box-shadow: 0 2px 8px rgba(201,168,76,0.2) !important;
  border: var(--border-gold) !important;
  backdrop-filter: blur(8px) !important;
}

[data-self="0"][component="chat/message"] [component="message/reactions"],
[data-self="0"][component="chat/message"] .reactions {
  right: 5px !important;
  left: auto !important;
}

[data-self="1"][component="chat/message"] [component="message/reactions"],
[data-self="1"][component="chat/message"] .reactions {
  left: 5px !important;
  right: auto !important;
  justify-content: flex-start !important;
}

.reaction-emoji-count {
  color: var(--lobby-gold-pale) !important;
  font-size: 11px !important;
}

.reaction.reacted {
  background: rgba(201,168,76,0.2) !important;
  border-radius: 8px !important;
}

/* ─────────────────────────────────────────────
   6. CONTROLS — כלי הודעה (Reply, React, More)
───────────────────────────────────────────── */

[component="chat/message"] .controls {
  position: absolute !important;
  top: -12px !important;
  bottom: auto !important;
  opacity: 0 !important;
  pointer-events: none !important;
  transition: opacity 0.2s ease, transform 0.15s ease !important;
  transform: translateY(4px) scale(0.95) !important;
  background: linear-gradient(135deg, var(--lobby-navy), var(--lobby-navy-mid)) !important;
  border-radius: 18px !important;
  padding: 5px 10px !important;
  box-shadow: var(--shadow-gold), 0 0 0 1px rgba(201,168,76,0.3) !important;
  border: none !important;
  z-index: 10 !important;
  display: flex !important;
  gap: 4px !important;
}

[component="chat/message"]:hover .controls {
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateY(0) scale(1) !important;
}

/* Controls position: הודעות אחרים = שמאל, שלי = ימין */
[data-self="0"][component="chat/message"] .controls {
  left: -10px !important;
  right: auto !important;
}

[data-self="1"][component="chat/message"] .controls {
  right: -10px !important;
  left: auto !important;
}

[component="chat/message"] .controls .btn {
  padding: 3px 5px !important;
  background: none !important;
  border: none !important;
  line-height: 1 !important;
  box-shadow: none !important;
  border-radius: 8px !important;
  transition: background 0.15s ease !important;
}

[component="chat/message"] .controls .btn:hover {
  background: rgba(201,168,76,0.2) !important;
}

[component="chat/message"] .controls i,
[component="chat/message"] .controls svg,
[component="chat/message"] .controls .fa {
  color: var(--lobby-gold) !important;
  fill: var(--lobby-gold) !important;
  stroke: none !important;
  width: 16px !important;
  height: 16px !important;
  font-size: 14px !important;
}

/* ─────────────────────────────────────────────
   7. COMPOSER — תיבת קלט
───────────────────────────────────────────── */

/* wrapper כולל */
.w-100.flex-grow-1.flex-nowrap.position-relative.d-flex.rounded-2.border.border-secondary.p-1.align-items-end,
[component="chat/input-area"],
[component="chat/composer"] {
  background: rgba(13,22,40,0.92) !important;
  border: var(--border-gold) !important;
  border-radius: 28px !important;
  box-shadow: 0 4px 20px rgba(201,168,76,0.18), inset 0 1px 0 rgba(201,168,76,0.1) !important;
  backdrop-filter: blur(12px) !important;
  padding: 8px 12px !important;
  transition: box-shadow 0.2s, border-color 0.2s !important;
}

.w-100.flex-grow-1.flex-nowrap.position-relative.d-flex.rounded-2.border.border-secondary.p-1.align-items-end:focus-within {
  border-color: var(--lobby-gold) !important;
  box-shadow: 0 4px 24px rgba(201,168,76,0.3), inset 0 1px 0 rgba(201,168,76,0.15) !important;
}

/* textarea */
.w-100.flex-grow-1.flex-nowrap.position-relative.d-flex.rounded-2.border.border-secondary.p-1.align-items-end textarea,
[component="chat/input-area"] textarea,
.chat-input,
.mousetrap {
  background: transparent !important;
  border: none !important;
  color: var(--lobby-cream) !important;
  font-size: 14px !important;
  box-shadow: none !important;
  outline: none !important;
  resize: none !important;
  padding: 4px 8px !important;
}

.chat-input::placeholder,
.mousetrap::placeholder,
[component="chat/input-area"] textarea::placeholder {
  color: rgba(201,168,76,0.35) !important;
}

/* כפתורי אייקון (upload, emoji) */
[component="chat/input-area"] .btn:not([component="chat/send"]):not(.btn-primary),
.w-100.flex-grow-1.flex-nowrap.position-relative.d-flex.rounded-2.border.border-secondary.p-1.align-items-end .btn:not([type="submit"]) {
  color: var(--lobby-gold) !important;
  background: transparent !important;
  border: none !important;
  border-radius: 50% !important;
  width: 36px !important; height: 36px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transition: background 0.18s, transform 0.15s !important;
}

[component="chat/input-area"] .btn:not([component="chat/send"]):not(.btn-primary):hover {
  background: rgba(201,168,76,0.15) !important;
  transform: scale(1.12) !important;
}

/* כפתור שליחה */
[component="chat/send"],
[component="chat/input-area"] .btn-primary,
[component="chat/input-area"] button[type="submit"],
.fa-paper-plane {
  background: linear-gradient(135deg, var(--lobby-gold) 0%, var(--lobby-gold-light) 100%) !important;
  border: none !important;
  border-radius: 50% !important;
  width: 40px !important; height: 40px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--lobby-navy-deep) !important;
  font-size: 16px !important;
  box-shadow: 0 3px 12px rgba(201,168,76,0.5) !important;
  transition: transform 0.15s, box-shadow 0.15s !important;
  flex-shrink: 0 !important;
}

[component="chat/send"]:hover,
[component="chat/input-area"] .btn-primary:hover {
  transform: scale(1.1) rotate(-8deg) !important;
  box-shadow: 0 5px 20px rgba(201,168,76,0.65) !important;
}

[component="chat/send"] i,
[component="chat/send"] .fa,
[component="chat/input-area"] .btn-primary i {
  color: var(--lobby-navy-deep) !important;
}

/* ─────────────────────────────────────────────
   8. SCROLL UP ALERT
───────────────────────────────────────────── */

.scroll-up-alert.alert.alert-info {
  background: linear-gradient(135deg, var(--lobby-navy), var(--lobby-navy-mid)) !important;
  border: var(--border-gold) !important;
  color: var(--lobby-gold-light) !important;
  border-radius: 20px !important;
  box-shadow: var(--shadow-gold) !important;
  backdrop-filter: blur(8px) !important;
}

.scroll-up-alert .fa-arrow-down {
  color: var(--lobby-gold) !important;
}

/* ─────────────────────────────────────────────
   9. DROPDOWN MENUS בתוך הצ'אט
───────────────────────────────────────────── */

[component="chat/header"] .dropdown-menu,
[component="chat/message"] .dropdown-menu,
#private-rooms .dropdown-menu {
  background: var(--lobby-navy) !important;
  border: var(--border-gold) !important;
  border-radius: 12px !important;
  box-shadow: var(--shadow-navy), 0 0 0 1px rgba(201,168,76,0.2) !important;
  padding: 6px !important;
  overflow: hidden !important;
}

[component="chat/header"] .dropdown-item,
[component="chat/message"] .dropdown-item,
#private-rooms .dropdown-item {
  color: var(--lobby-cream) !important;
  border-radius: 8px !important;
  padding: 8px 14px !important;
  font-size: 13px !important;
  transition: background 0.15s !important;
}

[component="chat/header"] .dropdown-item:hover,
[component="chat/message"] .dropdown-item:hover,
#private-rooms .dropdown-item:hover {
  background: rgba(201,168,76,0.15) !important;
  color: var(--lobby-gold-light) !important;
}

[component="chat/header"] .dropdown-item i,
[component="chat/message"] .dropdown-item i,
#private-rooms .dropdown-item i,
#private-rooms .dropdown-item .fa {
  color: var(--lobby-gold) !important;
  width: 16px !important;
}

#private-rooms .dropdown-divider {
  border-color: rgba(201,168,76,0.2) !important;
  margin: 4px 8px !important;
}

/* ─────────────────────────────────────────────
   10. MODAL (חלון מוקטן)
───────────────────────────────────────────── */

.modal.chat-modal .modal-content,
[class="modal-content ui-resizable"] {
  border: var(--border-gold-strong) !important;
  border-radius: 16px !important;
  box-shadow: var(--shadow-navy), 0 0 0 1px rgba(201,168,76,0.25) !important;
  overflow: hidden !important;
}

.modal.chat-modal .modal-footer {
  background: rgba(13,22,40,0.97) !important;
  border-top: var(--border-gold) !important;
  padding: 10px 16px !important;
}

/* ─────────────────────────────────────────────
   11. ONLINE STATUS
───────────────────────────────────────────── */

#private-rooms .online .fa-circle,
#private-rooms [data-online="true"] .fa-circle {
  color: #4ade80 !important;
  text-shadow: 0 0 6px rgba(74, 222, 128, 0.6) !important;
}

/* ─────────────────────────────────────────────
   12. MEMBERS / INFO PANEL
───────────────────────────────────────────── */

#private-rooms .members,
[component="chat/members"] {
  background: var(--lobby-navy-deep) !important;
  border-right: var(--border-gold) !important;
}

#private-rooms .members h5,
[component="chat/members"] h5 {
  color: var(--lobby-gold-light) !important;
  font-weight: 700 !important;
  border-bottom: var(--border-gold) !important;
  padding-bottom: 10px !important;
}

#private-rooms .members .avatar {
  border: 2px solid rgba(201,168,76,0.3) !important;
  border-radius: 50% !important;
}

#private-rooms .members a {
  color: var(--lobby-cream) !important;
  transition: color 0.15s !important;
}

#private-rooms .members a:hover {
  color: var(--lobby-gold-light) !important;
}

/* ─────────────────────────────────────────────
   13. QUOTE / REPLY PREVIEW
───────────────────────────────────────────── */

[component="chat/message"] blockquote,
[component="chat/message"] .border-start {
  border-right: 3px solid var(--lobby-gold) !important;
  border-left: none !important;
  background: rgba(201,168,76,0.08) !important;
  border-radius: 0 8px 8px 0 !important;
  padding: 6px 12px !important;
  margin-bottom: 6px !important;
}

[data-self="1"][component="chat/message"] blockquote {
  border-right-color: rgba(255,255,255,0.4) !important;
  background: rgba(255,255,255,0.07) !important;
}

/* ─────────────────────────────────────────────
   14. IMAGEDROP / UPLOAD AREA
───────────────────────────────────────────── */

#private-rooms .imagedrop {
  background: rgba(13,22,40,0.85) !important;
  border: 2px dashed var(--lobby-gold) !important;
  border-radius: 12px !important;
  color: var(--lobby-gold-light) !important;
  backdrop-filter: blur(8px) !important;
}

/* ─────────────────────────────────────────────
   15. HR מפריד תאריך
───────────────────────────────────────────── */

#private-rooms .chat-content hr,
[component="chat/messages"] hr {
  border: none !important;
  border-top: 1px solid rgba(201,168,76,0.2) !important;
  position: relative !important;
}

`);
})();

      זה בסה"כ לעטוף את זה בGM_addStyle(``);

      מ מנותק
      מ מנותק
      מחנה ידידים
      כתב נערך לאחרונה על ידי
      #51

      @יאנג-בוי לא עובד.

      יאנג בויי תגובה 1 תגובה אחרונה
      0
      • מ מחנה ידידים

        @יאנג-בוי לא עובד.

        יאנג בויי מחובר
        יאנג בויי מחובר
        יאנג בוי
        מדריכים
        כתב נערך לאחרונה על ידי
        #52

        @מחנה-ידידים
        לי עובד מעולה.
        e8f8b9f0-24fa-4465-b8d4-26c3091a84c2-image.png
        מעניין.

        מ תגובה 1 תגובה אחרונה
        1
        • יאנג בויי יאנג בוי

          @מחנה-ידידים
          לי עובד מעולה.
          e8f8b9f0-24fa-4465-b8d4-26c3091a84c2-image.png
          מעניין.

          מ מנותק
          מ מנותק
          מחנה ידידים
          כתב נערך לאחרונה על ידי
          #53

          @יאנג-בוי אולי לא הבנתי איך להכניס לטמפרמונקי

          יאנג בויי תגובה 1 תגובה אחרונה
          0
          • מ מחנה ידידים

            @יאנג-בוי אולי לא הבנתי איך להכניס לטמפרמונקי

            יאנג בויי מחובר
            יאנג בויי מחובר
            יאנג בוי
            מדריכים
            כתב נערך לאחרונה על ידי
            #54

            @מחנה-ידידים
            ליצור סקריפט חדש, למחוק את כל מה שיש שם ולהדביק את הקוד ששמתי בפוסט הזה.

            מ תגובה 1 תגובה אחרונה
            0
            • יאנג בויי יאנג בוי

              @מחנה-ידידים
              ליצור סקריפט חדש, למחוק את כל מה שיש שם ולהדביק את הקוד ששמתי בפוסט הזה.

              מ מנותק
              מ מנותק
              מחנה ידידים
              כתב נערך לאחרונה על ידי
              #55

              @יאנג-בוי זה מה שעשיתי!

              יאנג בויי יוסי מחשביםי 2 תגובות תגובה אחרונה
              0
              • מ מחנה ידידים

                @יאנג-בוי זה מה שעשיתי!

                יאנג בויי מחובר
                יאנג בויי מחובר
                יאנג בוי
                מדריכים
                כתב נערך לאחרונה על ידי
                #56

                @מחנה-ידידים
                🤷‍♂️

                תגובה 1 תגובה אחרונה
                0
                • מ מחנה ידידים

                  @יאנג-בוי זה מה שעשיתי!

                  יוסי מחשביםי מנותק
                  יוסי מחשביםי מנותק
                  יוסי מחשבים
                  צוות פיקוח
                  כתב נערך לאחרונה על ידי
                  #57

                  @מחנה-ידידים תכנס להגדרות ההרחבה של Tampermonkey‬
                  ותסמן את "אפשר סקריפטים של משתמשים"

                  תגובה 1 תגובה אחרונה
                  2
                  • שניאור שמחש שניאור שמח

                    @מים-אחרונים לאחר עזרה עם ג׳ימני הצלחתי להפעיל את זה באייפון! אני בשוק!
                    אבל פחות אהבתי את העיצוב..
                    אולי תעשה את העיצוב של וואטסאפ..

                    מים אחרוניםמ מנותק
                    מים אחרוניםמ מנותק
                    מים אחרונים
                    כתב נערך לאחרונה על ידי
                    #58

                    @שניאור-שמח כתב בשיתוף | קוד לעיצוב בידול ההודעות בצ'אט בפורום:

                    אולי תעשה את העיצוב של וואטסאפ..

                    זה כבר קיים, חפש בפורום.
                    אולי @ע-ה-דכו-ע אמור לדעת.

                    שניאור שמחש תגובה 1 תגובה אחרונה
                    0
                    • מים אחרוניםמ מים אחרונים

                      @שניאור-שמח כתב בשיתוף | קוד לעיצוב בידול ההודעות בצ'אט בפורום:

                      אולי תעשה את העיצוב של וואטסאפ..

                      זה כבר קיים, חפש בפורום.
                      אולי @ע-ה-דכו-ע אמור לדעת.

                      שניאור שמחש מנותק
                      שניאור שמחש מנותק
                      שניאור שמח
                      מדריכים עימוד
                      כתב נערך לאחרונה על ידי
                      #59

                      @מים-אחרונים כתב בשיתוף | קוד לעיצוב בידול ההודעות בצ'אט בפורום:

                      @שניאור-שמח כתב בשיתוף | קוד לעיצוב בידול ההודעות בצ'אט בפורום:

                      אולי תעשה את העיצוב של וואטסאפ..

                      זה כבר קיים, חפש בפורום.

                      זה קיים פה למעלה, רק שזה לא כזה טוב..
                      צריך לשפר את זה..

                      "אם לא תנסה, איך תדע?"

                      תגובה 1 תגובה אחרונה
                      1
                      • צדיק וטוב לו 0צ צדיק וטוב לו 0

                        @מים-אחרונים למה זה רק מצב כהה?

                        מים אחרוניםמ מנותק
                        מים אחרוניםמ מנותק
                        מים אחרונים
                        כתב נערך לאחרונה על ידי
                        #60

                        @צדיק-וטוב-לו-0 זה לא מצב כהה, זה עיצוב כחול, משהו שמעיד על יוקרה...
                        סתם כי זה מה שהייתי צריך וזה הדוגמא שנתתי ל AI אבל זה לא מצב כהה.

                        תגובה 1 תגובה אחרונה
                        0

                        • התחברות
                        • אין לך חשבון עדיין? הרשמה
                        • התחברו או הירשמו כדי לחפש.
                        • פוסט ראשון
                          פוסט אחרון
                        0
                        • חוקי הפורום
                        • פופולרי
                        • לא נפתר
                        • משתמשים
                        • חיפוש גוגל בפורום
                        • צור קשר