.samin-notify-stack { position: fixed; bottom: 22px; left: 50%; transform: translateX(-50%); z-index: 99990; display: flex; flex-direction: column; gap: 10px; width: min(420px, calc(100vw - 28px)); overflow: visible; padding: 10px 10px 22px; margin: -10px; pointer-events: none; font-family: inherit; scrollbar-width: none; -ms-overflow-style: none; } .samin-notify-stack.samin-notify-size-default { width: min(420px, calc(100vw - 28px)); } .samin-notify-stack.samin-notify-size-large { width: min(560px, calc(100vw - 28px)); } .samin-notify-stack::-webkit-scrollbar { display: none; width: 0; height: 0; } .samin-notify-stack.samin-notify-pos-center { left: 50%; right: auto; inset-inline-start: auto; inset-inline-end: auto; transform: translateX(-50%); } .samin-notify-stack.samin-notify-pos-start { left: auto; right: auto; inset-inline-start: 22px; inset-inline-end: auto; transform: none; } .samin-notify-stack.samin-notify-pos-end { left: auto; right: auto; inset-inline-start: auto; inset-inline-end: 22px; transform: none; } .samin-notify-tools { display: flex; justify-content: center; pointer-events: auto; flex-shrink: 0; } .samin-notify-close-all { border: 1px solid #e2e8f0; background: #fff; color: #475569; font-size: 12px; font-weight: 500; border-radius: 999px; padding: 6px 18px; cursor: pointer; } .samin-notify-close-all:hover { background: #f1f5f9; color: #0f172a; } .samin-notify-card { pointer-events: auto; position: relative; flex-shrink: 0; display: flex; gap: 12px; align-items: flex-start; background: linear-gradient(180deg, #f5f3ff 0%, #ffffff 55%); border: 1.5px solid #c7d2fe; border-radius: 10px; padding: 15px 40px 16px 14px; box-shadow: 0 6px 16px rgba(15, 23, 42, .14); opacity: 1; visibility: hidden; transform: translateY(calc(100% + 48px)); transition: transform 1.1s cubic-bezier(.2, 1.1, .4, 1), visibility 0s; animation: saminNotifyGlow 2.6s ease-in-out .7s infinite; } [dir="rtl"] .samin-notify-card { padding: 15px 14px 16px 40px; } .samin-notify-card.samin-notify-show { visibility: visible; transform: translateY(0); } .samin-notify-card.samin-notify-hide { animation: none; visibility: hidden; transform: translateY(calc(100% + 48px)); transition: transform .45s ease, visibility 0s .45s; pointer-events: none; } .samin-notify-dot { position: relative; flex-shrink: 0; width: 10px; height: 10px; margin-top: 9px; border-radius: 50%; background: #7c3aed; } .samin-notify-dot::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; border: 2px solid rgba(124, 58, 237, .55); animation: saminNotifyPing 1.6s ease-out infinite; } .samin-notify-content { flex: 1; min-width: 0; } .samin-notify-close { position: absolute; top: 8px; inset-inline-end: 8px; z-index: 2; border: 0; background: transparent; box-shadow: none; width: 28px; height: 28px; border-radius: 6px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: #94a3b8; font-size: 19px; font-weight: 400; line-height: 1; } .samin-notify-close:hover { background: rgba(15, 23, 42, .07); box-shadow: none; color: #475569; } .samin-notify-text { font-size: 14.5px; line-height: 2; color: #1e1b4b; font-weight: 500; word-wrap: break-word; overflow: visible; max-height: none; } .samin-notify-text p { margin: 0 0 8px 0; } .samin-notify-text p:last-child { margin-bottom: 0; } .samin-notify-text strong, .samin-notify-text b { color: #4c1d95; font-weight: 800; } .samin-notify-text a { color: #6d28d9; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; } .samin-notify-text img { max-width: 100%; height: auto; border-radius: 6px; border: 1px solid #e5e9f0; margin-top: 6px; } .samin-notify-text.samin-notify-clamped { display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; } .samin-notify-fade { display: none; height: 36px; margin-top: -36px; position: relative; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff); } .samin-notify-fade.samin-notify-show { display: block; } .samin-notify-more { display: none; border: 0; background: transparent; box-shadow: none; padding: 4px 0 0 0; cursor: pointer; font-size: 13px; font-weight: 700; color: #6d28d9; } .samin-notify-more.samin-notify-show { display: inline-block; } .samin-notify-more:hover { color: #4c1d95; text-decoration: underline; text-underline-offset: 3px; } .samin-notify-progress { position: absolute; bottom: 0; left: 14px; right: 14px; height: 3px; border-radius: 99px; background: rgba(109, 40, 217, .14); overflow: hidden; } .samin-notify-progress > span { display: block; height: 100%; width: 100%; border-radius: 99px; background: linear-gradient(90deg, #7c3aed, #a855f7, #d946ef); transform-origin: left; } [dir="rtl"] .samin-notify-progress > span { transform-origin: right; } @keyframes saminNotifyGlow { 0%, 100% { box-shadow: 0 6px 16px rgba(15, 23, 42, .14); } 50% { box-shadow: 0 6px 20px rgba(109, 40, 217, .22); } } @keyframes saminNotifyPing { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } } .samin-notify-card.samin-notify-success { background: #16a34a; border-color: #15803d; } .samin-notify-card.samin-notify-success .samin-notify-fade { background: linear-gradient(180deg, rgba(22, 163, 74, 0), #16a34a); } .samin-notify-card.samin-notify-success .samin-notify-dot { background: #fff; } .samin-notify-card.samin-notify-success .samin-notify-dot::after { border-color: rgba(255, 255, 255, .5); } .samin-notify-card.samin-notify-success .samin-notify-close { color: rgba(255, 255, 255, .85); } .samin-notify-card.samin-notify-success .samin-notify-close:hover { background: rgba(255, 255, 255, .16); color: #fff; } .samin-notify-card.samin-notify-success .samin-notify-text, .samin-notify-card.samin-notify-success .samin-notify-text strong, .samin-notify-card.samin-notify-success .samin-notify-text b { color: #fff; } .samin-notify-card.samin-notify-success .samin-notify-text a, .samin-notify-card.samin-notify-success .samin-notify-more { color: #fff; } .samin-notify-card.samin-notify-success .samin-notify-more:hover, .samin-notify-card.samin-notify-success .samin-notify-text a:hover { color: #f0fdf4; } .samin-notify-card.samin-notify-success .samin-notify-progress { background: rgba(255, 255, 255, .3); } .samin-notify-card.samin-notify-success .samin-notify-progress > span { background: linear-gradient(90deg, #fff, #d1fae5, #a7f3d0); } .samin-notify-card.samin-notify-success { animation: saminNotifyGlowSuccess 2.6s ease-in-out .7s infinite; } @keyframes saminNotifyGlowSuccess { 0%, 100% { box-shadow: 0 6px 16px rgba(15, 23, 42, .14); } 50% { box-shadow: 0 6px 20px rgba(22, 163, 74, .25); } } .samin-notify-card.samin-notify-error { background: #dc2626; border-color: #b91c1c; } .samin-notify-card.samin-notify-error .samin-notify-fade { background: linear-gradient(180deg, rgba(220, 38, 38, 0), #dc2626); } .samin-notify-card.samin-notify-error .samin-notify-dot { background: #fff; } .samin-notify-card.samin-notify-error .samin-notify-dot::after { border-color: rgba(255, 255, 255, .5); } .samin-notify-card.samin-notify-error .samin-notify-close { color: rgba(255, 255, 255, .85); } .samin-notify-card.samin-notify-error .samin-notify-close:hover { background: rgba(255, 255, 255, .16); color: #fff; } .samin-notify-card.samin-notify-error .samin-notify-text, .samin-notify-card.samin-notify-error .samin-notify-text strong, .samin-notify-card.samin-notify-error .samin-notify-text b { color: #fff; } .samin-notify-card.samin-notify-error .samin-notify-text a, .samin-notify-card.samin-notify-error .samin-notify-more { color: #fff; } .samin-notify-card.samin-notify-error .samin-notify-more:hover, .samin-notify-card.samin-notify-error .samin-notify-text a:hover { color: #fef2f2; } .samin-notify-card.samin-notify-error .samin-notify-progress { background: rgba(255, 255, 255, .3); } .samin-notify-card.samin-notify-error .samin-notify-progress > span { background: linear-gradient(90deg, #fff, #fecaca, #fca5a5); } .samin-notify-card.samin-notify-error { animation: saminNotifyGlowError 2.6s ease-in-out .7s infinite; } @keyframes saminNotifyGlowError { 0%, 100% { box-shadow: 0 6px 16px rgba(15, 23, 42, .14); } 50% { box-shadow: 0 6px 20px rgba(220, 38, 38, .25); } } .samin-notify-card.samin-notify-warning { background: #facc15; border-color: #eab308; } .samin-notify-card.samin-notify-warning .samin-notify-fade { background: linear-gradient(180deg, rgba(250, 204, 21, 0), #facc15); } .samin-notify-card.samin-notify-warning .samin-notify-dot { background: #000; } .samin-notify-card.samin-notify-warning .samin-notify-dot::after { border-color: rgba(0, 0, 0, .5); } .samin-notify-card.samin-notify-warning .samin-notify-close { color: rgba(0, 0, 0, .65); } .samin-notify-card.samin-notify-warning .samin-notify-close:hover { background: rgba(0, 0, 0, .1); color: #000; } .samin-notify-card.samin-notify-warning .samin-notify-text, .samin-notify-card.samin-notify-warning .samin-notify-text strong, .samin-notify-card.samin-notify-warning .samin-notify-text b { color: #000; } .samin-notify-card.samin-notify-warning .samin-notify-text a, .samin-notify-card.samin-notify-warning .samin-notify-more { color: #000; } .samin-notify-card.samin-notify-warning .samin-notify-more:hover, .samin-notify-card.samin-notify-warning .samin-notify-text a:hover { color: #713f12; } .samin-notify-card.samin-notify-warning .samin-notify-progress { background: rgba(0, 0, 0, .2); } .samin-notify-card.samin-notify-warning .samin-notify-progress > span { background: linear-gradient(90deg, #000, #713f12, #a16207); } .samin-notify-card.samin-notify-warning { animation: saminNotifyGlowWarning 2.6s ease-in-out .7s infinite; } @keyframes saminNotifyGlowWarning { 0%, 100% { box-shadow: 0 6px 16px rgba(15, 23, 42, .14); } 50% { box-shadow: 0 6px 20px rgba(234, 88, 12, .25); } } @media (max-width: 576px) { .samin-notify-stack, .samin-notify-stack.samin-notify-size-default, .samin-notify-stack.samin-notify-size-large { bottom: 12px; width: calc(100vw - 18px); } .samin-notify-stack.samin-notify-pos-center { left: 50%; transform: translateX(-50%); } .samin-notify-stack.samin-notify-pos-start { inset-inline-start: 9px; inset-inline-end: auto; left: auto; right: auto; transform: none; } .samin-notify-stack.samin-notify-pos-end { inset-inline-end: 9px; inset-inline-start: auto; left: auto; right: auto; transform: none; } .samin-notify-card { padding: 12px 38px 14px 12px; border-radius: 8px; } [dir="rtl"] .samin-notify-card { padding: 12px 12px 14px 38px; } .samin-notify-text { font-size: 14px; } } @media (prefers-color-scheme: dark) { .samin-notify-card { background: linear-gradient(180deg, #2e1065 0%, #1e1b4b 60%, #1e293b 100%); border-color: #7c3aed; } .samin-notify-text { color: #ede9fe; } .samin-notify-text strong, .samin-notify-text b { color: #fff; } .samin-notify-text a, .samin-notify-more { color: #c4b5fd; } .samin-notify-fade { background: linear-gradient(180deg, rgba(30, 27, 75, 0), #1e1b4b); } .samin-notify-close { color: #a78bfa; } .samin-notify-close:hover { background: rgba(167, 139, 250, .16); color: #ede9fe; } .samin-notify-close-all { background: #1e1b4b; border-color: #7c3aed; color: #ddd6fe; } .samin-notify-progress { background: rgba(167, 139, 250, .25); } .samin-notify-card.samin-notify-success { background: #16a34a; border-color: #15803d; } .samin-notify-card.samin-notify-success .samin-notify-text, .samin-notify-card.samin-notify-success .samin-notify-text strong, .samin-notify-card.samin-notify-success .samin-notify-text b { color: #fff; } .samin-notify-card.samin-notify-success .samin-notify-text a, .samin-notify-card.samin-notify-success .samin-notify-more { color: #fff; } .samin-notify-card.samin-notify-success .samin-notify-fade { background: linear-gradient(180deg, rgba(22, 163, 74, 0), #16a34a); } .samin-notify-card.samin-notify-error { background: #dc2626; border-color: #b91c1c; } .samin-notify-card.samin-notify-error .samin-notify-text, .samin-notify-card.samin-notify-error .samin-notify-text strong, .samin-notify-card.samin-notify-error .samin-notify-text b { color: #fff; } .samin-notify-card.samin-notify-error .samin-notify-text a, .samin-notify-card.samin-notify-error .samin-notify-more { color: #fff; } .samin-notify-card.samin-notify-error .samin-notify-fade { background: linear-gradient(180deg, rgba(220, 38, 38, 0), #dc2626); } .samin-notify-card.samin-notify-warning { background: #facc15; border-color: #eab308; } .samin-notify-card.samin-notify-warning .samin-notify-text, .samin-notify-card.samin-notify-warning .samin-notify-text strong, .samin-notify-card.samin-notify-warning .samin-notify-text b { color: #000; } .samin-notify-card.samin-notify-warning .samin-notify-text a, .samin-notify-card.samin-notify-warning .samin-notify-more { color: #000; } .samin-notify-card.samin-notify-warning .samin-notify-fade { background: linear-gradient(180deg, rgba(250, 204, 21, 0), #facc15); } } @media (prefers-reduced-motion: reduce) { .samin-notify-card { animation: none; transition: transform .4s ease-out, visibility 0s; } .samin-notify-card.samin-notify-hide { transition: transform .3s ease-in, visibility 0s .3s; } .samin-notify-dot::after { animation: none; } }