.notification-toast-container { position: fixed; z-index: 9999; width: 320px; background: var(--bg-secondary); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid var(--border-light); // 浅色模式下使用完全不透明背景，并禁用毛玻璃效果 [data-mode="light"] &, :not([data-mode]) & { background: rgba(255, 255, 255, 1); backdrop-filter: none; -webkit-backdrop-filter: none; } border-radius: 12px; box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12); padding: 12px; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); opacity: 0; transform: scale(0.95); pointer-events: none; // Allow clicking through when hidden &.visible { opacity: 1; transform: scale(1); pointer-events: auto; } &.static { position: relative !important; width: calc(100% - 4px) !important; // Leave 2px margin for anti-aliasing saftey height: auto !important; // Fits content min-height: 0; top: 0 !important; bottom: 0 !important; left: 0 !important; right: 0 !important; transform: none !important; margin: 2px !important; // 2px centered margin border-radius: 12px !important; // Rounded corners // Disable backdrop filter backdrop-filter: none !important; -webkit-backdrop-filter: none !important; // 独立通知窗口：默认使用浅色模式硬编码值，确保不依赖 上的主题属性 background: #ffffff; color: #3d3d3d; --text-primary: #3d3d3d; --text-secondary: #666666; --text-tertiary: #999999; --border-light: rgba(0, 0, 0, 0.08); // 深色模式覆盖 [data-mode="dark"] & { background: var(--bg-secondary-solid, #282420); color: var(--text-primary, #F0EEE9); --text-primary: #F0EEE9; --text-secondary: #b3b0aa; --text-tertiary: #807d78; --border-light: rgba(255, 255, 255, 0.1); } box-shadow: none !important; // NO SHADOW border: 1px solid var(--border-light); display: flex; padding: 16px; padding-right: 32px; // Make space for close button box-sizing: border-box; // Force close button to be visible but transparent background .notification-close { opacity: 1 !important; top: 12px; right: 12px; background: transparent !important; // Transparent per user request &:hover { color: var(--text-primary); background: rgba(255, 255, 255, 0.1) !important; // Subtle hover effect } } .notification-time { top: 24px; // Match padding right: 40px; // Left of close button (12px + 20px + 8px) } } // Position variants &.bottom-right { bottom: 24px; right: 24px; transform: translate(0, 20px) scale(0.95); &.visible { transform: translate(0, 0) scale(1); } } &.top-right { top: 24px; right: 24px; transform: translate(0, -20px) scale(0.95); &.visible { transform: translate(0, 0) scale(1); } } &.bottom-left { bottom: 24px; left: 24px; transform: translate(0, 20px) scale(0.95); &.visible { transform: translate(0, 0) scale(1); } } &.top-left { top: 24px; left: 24px; transform: translate(0, -20px) scale(0.95); &.visible { transform: translate(0, 0) scale(1); } } &:hover { box-shadow: 0 12px 48px rgba(0, 0, 0, 0.16) !important; } .notification-content { display: flex; align-items: flex-start; gap: 12px; } .notification-avatar { flex-shrink: 0; } .notification-text { flex: 1; min-width: 0; .notification-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; .notification-title { font-weight: 600; font-size: 14px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; // 允许缩放 flex: 1; // 占据剩余空间 min-width: 0; // 关键：允许 flex 子项收缩到内容以下 margin-right: 60px; // Make space for absolute time + close button } .notification-time { font-size: 12px; color: var(--text-tertiary); position: absolute; top: 16px; right: 36px; // Left of close button (8px + 20px + 8px) font-variant-numeric: tabular-nums; } } .notification-body { font-size: 13px; color: var(--text-secondary); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-all; } } .notification-close { position: absolute; top: 8px; right: 8px; width: 20px; height: 20px; border-radius: 50%; display: flex; align-items: center; justify-content: center; border: none; background: transparent; color: var(--text-tertiary); cursor: pointer; opacity: 0; transition: all 0.2s; &:hover { background: var(--bg-tertiary); color: var(--text-primary); } } &:hover .notification-close { opacity: 1; } }