/* Notification bell -- [rmp_notification_bell]. Trigger button matches the exact size/shape of .rmp-lpt-usericon-box (see rmp-lpt-panel.css) so the two sit as a visually matched pair in the header. Dropdown positioning (open/close, portal-to-, RTL alignment, outside-click/Escape/ scroll/resize handling) is done in rmp-lpt-bell.js using the identical approach already proven by the user-menu dropdown. */ .rmp-lpt-bellmenu { position: relative; display: inline-flex; } .rmp-lpt-bellmenu-trigger { all: unset; box-sizing: border-box; position: relative; width: var(--rmp-usericon-size, 40px); height: var(--rmp-usericon-size, 40px); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; color: inherit; transition: box-shadow .15s ease, background .15s ease; } .rmp-lpt-bellmenu-trigger:hover, .rmp-lpt-bellmenu-trigger[aria-expanded="true"] { box-shadow: 0 0 0 3px rgba(0,0,0,.06); } .rmp-lpt-bell-icon-box { width: 60%; height: 60%; display: flex; } .rmp-lpt-bell-icon-box svg { width: 100%; height: 100%; } .rmp-lpt-bell-badge { position: absolute; top: 0; left: 0; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 999px; background: #e5484d; color: #fff; font-size: 10.5px; font-weight: 700; line-height: 16px; text-align: center; box-shadow: 0 0 0 2px var(--rmp-header-bg, #fff); } .rmp-lpt-bell-badge.is-hidden { display: none; } /* Dropdown -- same portal/positioning contract as .rmp-lpt-usermenu-dropdown: fixed position, JS sets top/left (or --portaled variant) right under the trigger, RTL-aware right-edge alignment. */ .rmp-lpt-bellmenu-dropdown { display: none; position: fixed; z-index: 100000; width: 340px; max-width: calc(100vw - 24px); max-height: min(480px, 70vh); overflow: hidden; flex-direction: column; background: #fff; border-radius: 14px; box-shadow: 0 18px 48px rgba(20,20,30,.18), 0 2px 8px rgba(20,20,30,.08); border: 1px solid rgba(20,20,30,.06); } .rmp-lpt-bellmenu.is-open .rmp-lpt-bellmenu-dropdown { display: flex; } .rmp-lpt-bell-title { font-size: 14px; font-weight: 800; padding: 14px 16px 10px; border-bottom: 1px solid rgba(20,20,30,.06); flex: none; } .rmp-lpt-bell-list { overflow-y: auto; padding: 6px; } .rmp-lpt-bell-empty { padding: 32px 16px; text-align: center; font-size: 12.5px; color: #8a8f98; } .rmp-lpt-bell-item { display: block; text-decoration: none; color: inherit; border-radius: 10px; padding: 8px; cursor: default; } .rmp-lpt-bell-item.is-clickable { cursor: pointer; } .rmp-lpt-bell-item.is-clickable:hover { background: rgba(20,20,30,.04); } .rmp-lpt-bell-item-row { display: flex; align-items: flex-start; gap: 10px; } .rmp-lpt-bell-icon, .rmp-lpt-bell-icon-img { width: 34px; height: 34px; border-radius: 9px; flex: none; object-fit: cover; } .rmp-lpt-bell-icon { display: flex; align-items: center; justify-content: center; } .rmp-lpt-bell-icon svg { width: 18px; height: 18px; } /* Same color-per-type language as the Player's bell. */ .rmp-lpt-bell-icon.type-news, .rmp-lpt-bell-icon.type-text { background: rgba(26,143,227,.12); color: #1a8fe3; } .rmp-lpt-bell-icon.type-video { background: rgba(230,164,58,.14); color: #b8790f; } .rmp-lpt-bell-icon.type-warning { background: rgba(229,72,77,.13); color: #c0292e; } .rmp-lpt-bell-icon.type-ticket { background: rgba(140,100,230,.14); color: #6e46c9; } .rmp-lpt-bell-icon.type-bell { background: rgba(120,128,140,.14); color: #6b7280; } .rmp-lpt-bell-item-text { flex: 1; min-width: 0; } .rmp-lpt-bell-item-title-row { display: flex; align-items: center; gap: 6px; } .rmp-lpt-bell-unread-dot { width: 7px; height: 7px; border-radius: 50%; background: #1a8fe3; flex: none; display: none; } .rmp-lpt-bell-item.is-unread .rmp-lpt-bell-unread-dot { display: inline-block; } .rmp-lpt-bell-item-title { font-size: 13px; font-weight: 700; line-height: 1.5; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rmp-lpt-bell-item-body { font-size: 12px; color: #6b7280; line-height: 1.6; margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .rmp-lpt-bell-item-date { font-size: 11px; color: #9aa0aa; margin-top: 4px; } @media (max-width: 480px) { .rmp-lpt-bellmenu-dropdown { width: calc(100vw - 20px); } } /* Bell placed inside the panel's own avatar/edit/tickets cluster (see render_topbar_profile() in class-rmp-lpt-panel.php) -- sized to match the neighboring .rmp-lpt-topbar-action chips at each breakpoint instead of the header's own plain/minimal trigger, so it reads as one consistent set of circular buttons rather than an oddly-sized addition. */ .rmp-lpt-topbar-profile .rmp-lpt-bellmenu-trigger { width: 40px; height: 40px; border-radius: 50%; background: #f3f4f6; color: #374151; transition: background .15s ease, color .15s ease, transform .15s ease; } .rmp-lpt-topbar-profile .rmp-lpt-bellmenu-trigger:hover { background: var(--rmp-accent, #1a8fe3); color: #fff; transform: translateY(-1px); } .rmp-lpt-content-topbar .rmp-lpt-bellmenu-trigger { width: 50px; height: 50px; } .rmp-lpt-content-topbar .rmp-lpt-bellmenu-trigger .rmp-lpt-bell-icon-box svg { width: 22px; height: 22px; }