/* ========================================== ULTRAKIT RECENT ACTIVITY FEED ========================================== */ .ultrakit-rac-wrapper { --rac-a: #6c5ce7; --rac-b: #00cec9; --rac-r: 16px; width: 100%; box-sizing: border-box; font-family: inherit; } .ultrakit-rac-wrapper *, .ultrakit-rac-wrapper *::before, .ultrakit-rac-wrapper *::after, .ukrac-pop *, .ukrac-pop *::before, .ukrac-pop *::after { box-sizing: border-box; } .ultrakit-rac-head { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin-bottom: 16px; } .ultrakit-rac-head h4 { margin: 0; font-size: 19px; font-weight: 800; color: inherit; } .ultrakit-rac-live { display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px; border-radius: 30px; background: rgba(22,199,132,0.15); color: #16c784; font-size: 11px; font-weight: 900; letter-spacing: 1px; } .ultrakit-rac-live i { width: 8px; height: 8px; border-radius: 50%; background: #16c784; animation: ukRacPulse 1.6s infinite; } @keyframes ukRacPulse { 0% { box-shadow: 0 0 0 0 rgba(22,199,132,0.55); } 70%, 100% { box-shadow: 0 0 0 9px transparent; } } .ultrakit-rac-now { margin-left: auto; font-size: 13px; font-weight: 700; opacity: 0.7; } .ultrakit-rac-now b { font-variant-numeric: tabular-nums; } .ultrakit-rac-list { display: flex; flex-direction: column; gap: 10px; } /* card shared by feed rows and pop-ups */ .ukrac-card { --bg: #ffffff; --tx: #1a1a2e; --mu: #6b6b85; --bd: #ececf4; position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 18px 14px 14px; background: var(--bg); color: var(--tx); border: 1.5px solid var(--bd); border-radius: var(--rac-r); box-shadow: 0 8px 26px rgba(20,20,50,0.07); font-family: inherit; } .rac-skin-dark .ukrac-card, .ukrac-pop.rac-skin-dark .ukrac-card { --bg: #1b1b36; --tx: #ffffff; --mu: #a9a9cb; --bd: rgba(255,255,255,0.09); box-shadow: 0 10px 30px rgba(0,0,0,0.3); } .rac-skin-glass .ukrac-card, .ukrac-pop.rac-skin-glass .ukrac-card { --bg: rgba(255,255,255,0.65); --bd: rgba(255,255,255,0.75); -webkit-backdrop-filter: blur(16px) saturate(1.5); backdrop-filter: blur(16px) saturate(1.5); } .rac-skin-accent .ukrac-card, .ukrac-pop.rac-skin-accent .ukrac-card { --tx: #ffffff; --mu: rgba(255,255,255,0.82); --bd: transparent; background: linear-gradient(135deg, var(--rac-a), var(--rac-b)); } .ukrac-emoji { display: inline-flex; align-items: center; justify-content: center; width: 46px; height: 46px; border-radius: 14px; background: color-mix(in srgb, var(--rac-a) 12%, transparent); font-size: 22px; line-height: 1; flex-shrink: 0; } .rac-skin-accent .ukrac-emoji, .ukrac-pop.rac-skin-accent .ukrac-emoji { background: rgba(255,255,255,0.22); } .ukrac-body { flex: 1; min-width: 0; } .ukrac-msg { margin: 0; font-size: 14px; line-height: 1.45; color: var(--mu); } .ukrac-msg b { color: var(--tx); font-weight: 800; } .ukrac-time { display: block; margin-top: 3px; font-size: 12px; font-weight: 700; color: var(--rac-a); } .rac-skin-accent .ukrac-time, .ukrac-pop.rac-skin-accent .ukrac-time { color: rgba(255,255,255,0.9); } .ukrac-row-in { animation: ukRacRow 0.6s cubic-bezier(.22,.9,.3,1) both; } @keyframes ukRacRow { from { opacity: 0; transform: translateY(-18px) scale(0.97); } } /* pop-up mode (element lives on ) */ .ukrac-pop { --rac-a: #6c5ce7; --rac-b: #00cec9; --rac-r: 16px; position: fixed; z-index: 99990; width: 360px; max-width: calc(100vw - 32px); opacity: 0; visibility: hidden; transform: translateY(24px); transition: opacity 0.4s ease, transform 0.5s cubic-bezier(.22,.9,.3,1), visibility 0s linear 0.5s; font-family: inherit; } .ukrac-pop.is-in { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; } .ukrac-pop.rac-pos-bottom-left { left: 20px; bottom: 20px; } .ukrac-pop.rac-pos-bottom-right { right: 20px; bottom: 20px; } .ukrac-pop.rac-pos-top-left { left: 20px; top: 20px; transform: translateY(-24px); } .ukrac-pop.rac-pos-top-right { right: 20px; top: 20px; transform: translateY(-24px); } .ukrac-pop.is-in.rac-pos-top-left, .ukrac-pop.is-in.rac-pos-top-right { transform: none; } .admin-bar .ukrac-pop.rac-pos-top-left, .admin-bar .ukrac-pop.rac-pos-top-right { top: 52px; } .ukrac-close { position: absolute; top: 8px; right: 8px; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0 !important; box-sizing: border-box; background: rgba(20,20,50,0.07); color: var(--mu) !important; border: 0; border-radius: 50%; font-size: 14px; line-height: 1; cursor: pointer; } .ukrac-close:hover { background: #ff4d6d; color: #ffffff !important; } .ukrac-pop .ukrac-card { padding-right: 36px; box-shadow: 0 20px 55px rgba(20,20,50,0.25); } @media (max-width: 480px) { .ukrac-pop { left: 16px !important; right: 16px !important; width: auto; } }