/* KrunusNotify — notification-bell activity feed. * Loaded after whmcs-overrides.css. Self-contained so it never collides with * server-side edits to the main override sheet. The popover body is cloned into * .popover.kr-popover .popover-body by footer.tpl, so these classes are styled * globally (they live under , not inside the source div). */ /* Unread count badge on the bell button */ #accountNotifications { position: relative; } .kr-notif-badge { position: absolute; top: 2px; right: 2px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 9px; background: #ef4444; color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; box-shadow: 0 0 0 2px var(--kr-surface, #fff); } /* Popover container */ .kr-notif-pop { width: 320px; max-width: 86vw; } .kr-notif-pop-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 6px 10px; border-bottom: 1px solid #eef0f3; margin-bottom: 4px; } .kr-notif-pop-title { font-weight: 700; font-size: 14px; color: #111827; } .kr-notif-markall { border: 0; background: transparent; color: #4f46e5; font-size: 12px; font-weight: 600; cursor: pointer; padding: 2px 4px; } .kr-notif-markall:hover { text-decoration: underline; } /* Pinned core account alerts keep WHMCS's existing .client-alerts look; just give the block a subtle separator from the feed below. */ .kr-notif-alerts { margin: 0 0 4px; padding: 0; } .kr-notif-alerts li { list-style: none; } /* Activity feed list */ .kr-notif-list { list-style: none; margin: 0; padding: 0; max-height: 360px; overflow-y: auto; } .kr-notif-list li.none { padding: 22px 8px; text-align: center; color: #9ca3af; font-size: 13px; } .kr-notif-item { border-radius: 8px; } .kr-notif-item.is-unread { background: #f5f7ff; } .kr-notif-item > a { display: flex; gap: 10px; padding: 9px 8px; text-decoration: none; color: inherit; align-items: flex-start; } .kr-notif-item > a:hover { background: #f3f4f6; border-radius: 8px; } .kr-notif-item .fa-fw { margin-top: 2px; font-size: 14px; } .kr-notif-item .sev-danger { color: #dc2626; } .kr-notif-item .sev-warning { color: #d97706; } .kr-notif-item .sev-success { color: #16a34a; } .kr-notif-item .sev-info { color: #4f46e5; } .kr-notif-text { min-width: 0; flex: 1 1 auto; } .kr-notif-title { font-weight: 600; font-size: 13px; color: #111827; line-height: 1.3; } .kr-notif-msg { font-size: 12px; color: #4b5563; line-height: 1.35; margin-top: 1px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .kr-notif-ago { font-size: 11px; color: #9ca3af; margin-top: 3px; } .kr-notif-viewall { display: block; text-align: center; padding: 9px 0 3px; margin-top: 4px; border-top: 1px solid #eef0f3; color: #4f46e5; font-size: 13px; font-weight: 600; text-decoration: none; } .kr-notif-viewall:hover { text-decoration: underline; color: #4338ca; } /* Dark mode */ [data-theme="dark"] .kr-notif-pop-title { color: #f3f4f6; } [data-theme="dark"] .kr-notif-pop-head, [data-theme="dark"] .kr-notif-viewall { border-color: #2b3650; } [data-theme="dark"] .kr-notif-item.is-unread { background: #1d2742; } [data-theme="dark"] .kr-notif-item > a:hover { background: #232d44; } [data-theme="dark"] .kr-notif-title { color: #f3f4f6; } [data-theme="dark"] .kr-notif-msg { color: #9ca3af; }