/* * XCHAT_PUBLIC_VIP_GIFT_V1 * * Styling derived from the existing desktop INFO * favorite-gift declarations at installation. * * INFO remains unchanged. * This file is presentation only. */ .xup-avatar-shell .xip-avatar-gift { position: absolute; right: -9px; bottom: -9px; z-index: 6; box-sizing: border-box; width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(210, 220, 255, .92); border-radius: 50%; background: radial-gradient( circle at 35% 25%, rgba(255, 255, 255, .98), rgba(225, 232, 255, .96) 42%, rgba(105, 124, 205, .96) 100% ); box-shadow: 0 0 0 2px rgba(10, 14, 35, .88), 0 3px 10px rgba(0, 0, 0, .55), 0 0 14px var(--xip-aura-2-soft); pointer-events: auto; } .xup-avatar-shell .xip-avatar-gift[hidden] { display: none !important; } .xup-avatar-shell .xip-avatar-gift img { display: block; width: 38px; height: 38px; object-fit: contain; border-radius: 50%; filter: drop-shadow( 0 2px 2px rgba(0, 0, 0, .32) ); } .xup-avatar-shell .xip-avatar-gift:hover { transform: scale(1.08); } .xup-avatar-shell .xip-avatar-gift { transition: transform .12s ease, filter .12s ease; } .xup-avatar-shell .xip-avatar-gift { right: -7px; bottom: -7px; z-index: 8; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; background: transparent !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; outline: none !important; overflow: visible !important; pointer-events: auto; } .xup-avatar-shell .xip-avatar-gift[hidden] { display: none !important; } .xup-avatar-shell .xip-avatar-gift img { display: block; width: 100%; height: 100%; object-fit: contain; border-radius: 0 !important; background: transparent !important; filter: drop-shadow(0 0 4px var(--xip-favorite-gift-glow, rgba(255, 220, 120, .65))) drop-shadow(0 0 9px var(--xip-favorite-gift-glow, rgba(255, 220, 120, .55))) drop-shadow(0 2px 4px rgba(0, 0, 0, .35)); } .xup-avatar-shell .xip-avatar-gift:hover { transform: scale(1.05); } .xup-avatar-shell .xip-avatar-gift { right: -9px !important; bottom: -5px !important; transform: rotate(-12deg) translateZ(0); transform-origin: 55% 70%; transition: transform .16s ease, filter .16s ease; } .xup-avatar-shell .xip-avatar-gift img { transform: scale(1.08); transition: transform .16s ease; } .xup-avatar-shell .xip-avatar-gift:hover { transform: rotate(-7deg) scale(1.06) translateZ(0); } .xup-avatar-shell .xip-avatar-gift:hover img { transform: scale(1.12); } .xup-avatar-shell .xip-avatar-gift { background: transparent !important; border: none !important; outline: none !important; box-shadow: none !important; } .xup-avatar-shell .xip-avatar-gift img { display: block; background: transparent !important; border: none !important; outline: none !important; box-shadow: none !important; border-radius: 0 !important; /* * Crop the outer 1px contour where the * remaining frame/edge is visible. */ clip-path: inset(1px 1px 1px 1px); /* * Slightly enlarge after crop so the gift * does not become visually smaller. */ transform: scale(1.10); filter: drop-shadow( 0 0 4px var( --xip-favorite-gift-glow, rgba(255, 220, 120, .65) ) ) drop-shadow( 0 0 9px var( --xip-favorite-gift-glow, rgba(255, 220, 120, .48) ) ) drop-shadow( 2px 3px 3px rgba(0, 0, 0, .34) ); } .xup-avatar-shell .xip-avatar-gift:hover img { transform: scale(1.14); } .xup-avatar-shell .xip-avatar-gift { position: absolute; overflow: visible !important; isolation: isolate; } .xup-avatar-shell .xip-avatar-gift::before { content: ""; position: absolute; left: 50%; top: 50%; z-index: 0; pointer-events: none; width: 26px; height: 26px; border-radius: 999px; transform: translate(-50%, -50%) rotate(0deg); opacity: 0.95; /* * Soft bright circular glow behind gift. * Brighter and much less "square". */ box-shadow: 0 0 8px 3px var(--xip-favorite-gift-glow, rgba(255, 220, 120, .75)), 0 0 16px 7px var(--xip-favorite-gift-glow, rgba(255, 220, 120, .62)), 0 0 26px 11px var(--xip-favorite-gift-glow, rgba(255, 220, 120, .42)); filter: blur(3px); } .xup-avatar-shell .xip-avatar-gift img { position: relative; z-index: 1; background: transparent !important; border: none !important; outline: none !important; box-shadow: none !important; border-radius: 0 !important; clip-path: inset(1px 1px 1px 1px); transform: scale(1.10); /* * Remove big glow from the image itself. * Leave only tiny depth shadow. */ filter: drop-shadow( 1px 2px 2px rgba(0, 0, 0, .30) ); } .xup-avatar-shell .xip-avatar-gift:hover::before { opacity: 1; box-shadow: 0 0 10px 4px var(--xip-favorite-gift-glow, rgba(255, 220, 120, .82)), 0 0 19px 8px var(--xip-favorite-gift-glow, rgba(255, 220, 120, .68)), 0 0 30px 13px var(--xip-favorite-gift-glow, rgba(255, 220, 120, .46)); } .xup-avatar-shell .xip-avatar-gift:hover img { transform: scale(1.14); } .xup-avatar-shell .xip-avatar-gift { /* * Container must not squeeze the historical image. */ width: 42px !important; height: 42px !important; max-width: 42px !important; max-height: 42px !important; overflow: visible !important; } .xup-avatar-shell .xip-avatar-gift img { /* * Native / intrinsic dimensions. */ width: 42px !important; height: 42px !important; max-width: 100% !important; max-height: 100% !important; min-width: 0 !important; min-height: 0 !important; object-fit: contain !important; } .xup-avatar-shell .xip-avatar-gift img { width: 42px !important; height: 42px !important; max-width: 100% !important; max-height: 100% !important; object-fit: contain !important; } /* * Only the public avatar's positioning differs. * Preserve the original image/glow appearance. */ .xup-avatar-shell { position: relative; overflow: visible; } .xup-avatar-shell .xip-avatar-gift { position: absolute; top: auto; left: auto; right: -10px; bottom: -9px; z-index: 5; pointer-events: auto; } .xup-avatar-shell .xip-avatar-gift img { display: block; }