שיתוף | קוד לעיצוב בידול ההודעות בצ'אט בפורום
באגים/הצעות ייעול
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; }בעז"ה אני יעלה בקרוב קוד למשתמשים הרגילים.
@מים-אחרונים לאחר עזרה עם ג׳ימני הצלחתי להפעיל את זה באייפון! אני בשוק!
אבל פחות אהבתי את העיצוב..
אולי תעשה את העיצוב של וואטסאפ.. -
כתב בשיתוף | קוד לעיצוב בידול ההודעות בצ'אט בפורום:
בעז"ה אני יעלה בקרוב קוד למשתמשים הרגילים.
לא מצליח, אם יש למישהו כח להפוך את זה לטמפרונסקי, זה יהיה מוצלח.
@מים-אחרונים
בבקשה:// ==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(``); -
מקווה שזה בסדר להקפיץ. (מדובר בעדכון לקוד.)
ישבתי על הקוד המון זמן, אמנם לא הגעתי לתוצאה המושלמת, אבל כבר יש במה להשתמש.
ואני סומך על הציבור המקצועי כאן בפורום שיתן את הפיצ'רים המדויקים, בשביל השלמות של הקוד.
בהצלחה!
הקוד עבור מנהלי פורומים בנודביבי, לעדכון הקוד ב 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; }בעז"ה אני יעלה בקרוב קוד למשתמשים הרגילים.
-
@מים-אחרונים
בבקשה:// ==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(``); -
@יאנג-בוי לא עובד.
-
@מחנה-ידידים
לי עובד מעולה.
מעניין. -
@יאנג-בוי אולי לא הבנתי איך להכניס לטמפרמונקי
-
@מחנה-ידידים
ליצור סקריפט חדש, למחוק את כל מה שיש שם ולהדביק את הקוד ששמתי בפוסט הזה. -
@יאנג-בוי זה מה שעשיתי!
-
@יאנג-בוי זה מה שעשיתי!
@מחנה-ידידים תכנס להגדרות ההרחבה של Tampermonkey
ותסמן את "אפשר סקריפטים של משתמשים" -
@מים-אחרונים לאחר עזרה עם ג׳ימני הצלחתי להפעיל את זה באייפון! אני בשוק!
אבל פחות אהבתי את העיצוב..
אולי תעשה את העיצוב של וואטסאפ..@שניאור-שמח כתב בשיתוף | קוד לעיצוב בידול ההודעות בצ'אט בפורום:
אולי תעשה את העיצוב של וואטסאפ..
זה כבר קיים, חפש בפורום.
אולי @ע-ה-דכו-ע אמור לדעת. -
@שניאור-שמח כתב בשיתוף | קוד לעיצוב בידול ההודעות בצ'אט בפורום:
אולי תעשה את העיצוב של וואטסאפ..
זה כבר קיים, חפש בפורום.
אולי @ע-ה-דכו-ע אמור לדעת.@מים-אחרונים כתב בשיתוף | קוד לעיצוב בידול ההודעות בצ'אט בפורום:
@שניאור-שמח כתב בשיתוף | קוד לעיצוב בידול ההודעות בצ'אט בפורום:
אולי תעשה את העיצוב של וואטסאפ..
זה כבר קיים, חפש בפורום.
זה קיים פה למעלה, רק שזה לא כזה טוב..
צריך לשפר את זה.. -
@מים-אחרונים למה זה רק מצב כהה?
@צדיק-וטוב-לו-0 זה לא מצב כהה, זה עיצוב כחול, משהו שמעיד על יוקרה...
סתם כי זה מה שהייתי צריך וזה הדוגמא שנתתי ל AI אבל זה לא מצב כהה.
 { const baseUrl = "https://www.google.co.il/search?q=site:mitmachim.top"; const m = location.pathname.match(/^\/(topic|category)\/(\d+)/); const type = m ? m[1] : null; const id = m ? m[2] : null; let searchInput; function search(path = "") { const query = searchInput.value.trim(); if (query) { window.open(`${baseUrl}${path}%20${encodeURIComponent(query)}`, "_blank"); } } let buttons = {}; buttons.searchAll = { id: "bb-search-all", label: `חיפוש ${type ? "בכל הפורום" : ""}`, className: type ? "btn-secondary" : "btn-primary", callback: () => search(), }; if (type === "topic") { buttons.searchTopic = { label: "חיפוש בנושא זה", className: "btn-primary", callback: () => search(`/topic/${id}`), }; } else if (type === "category") { buttons.searchCategory = { label: "חיפוש בקטגוריה זו", className: "btn-primary", callback: () => search(`/category/${id}`), }; } buttons.cancel = { label: "ביטול", className: "btn-default", "data-bs-dismiss": "modal" }; const dialog = bootbox.dialog({ title: '<div style="text-align:center;"><img src="/assets/uploads/files/1625950269825-mt-google.png" width="400" alt="חיפוש בגוגל"></div>', message: '<input id="bb-inp" class="bootbox-input bootbox-input-text form-control" placeholder="הקלידו כדי לחפש בגוגל" autocomplete="off"/>', buttons, backdrop: true, show: true, onEscape: true }); dialog.on("shown.bs.modal", function () { searchInput = document.getElementById("bb-inp"); if (searchInput) { searchInput.focus(); searchInput.addEventListener("keydown", function (e) { if (e.key === "Enter") { e.preventDefault(); const query = this.value.trim(); if (query) { search(); dialog.modal("hide"); } } else if (e.key === "Escape") { e.preventDefault(); dialog.modal("hide"); } }); } const searchAllButton = document.getElementById("bb-search-all"); if (searchAllButton) { searchAllButton.title = "לחצו על אנטר כדי לחפש"; } }); })(); void 0;){kind=link}