/* Notification tokens - follow data-wm-theme on (see colors_and_type.css) */ :root, [data-wm-theme="dark"] { --wm-notify-error-bg: linear-gradient( 145deg, rgba(88, 16, 20, 0.96), rgba(127, 29, 29, 0.94) ); --wm-notify-error-bg-hover: linear-gradient( 145deg, rgba(100, 18, 22, 0.98), rgba(153, 27, 27, 0.96) ); --wm-notify-error-border: rgba(252, 165, 165, 0.42); --wm-notify-error-border-hover: rgba(252, 165, 165, 0.58); --wm-notify-error-text: #fff1f2; --wm-notify-error-glow: rgba(220, 38, 38, 0.35); --wm-notify-error-glow-hover: rgba(220, 38, 38, 0.45); --wm-notify-error-accent: #fca5a5; --wm-notify-success-bg: linear-gradient( 145deg, rgba(14, 58, 33, 0.96), rgba(20, 83, 45, 0.94) ); --wm-notify-success-bg-hover: linear-gradient( 145deg, rgba(16, 68, 38, 0.98), rgba(22, 101, 52, 0.96) ); --wm-notify-success-border: rgba(134, 239, 172, 0.42); --wm-notify-success-border-hover: rgba(134, 239, 172, 0.58); --wm-notify-success-text: #ecfdf5; --wm-notify-success-glow: rgba(34, 197, 94, 0.35); --wm-notify-success-glow-hover: rgba(34, 197, 94, 0.45); --wm-notify-success-accent: #86efac; --wm-notify-info-bg: linear-gradient( 145deg, rgba(23, 37, 84, 0.96), rgba(29, 78, 216, 0.92) ); --wm-notify-info-bg-hover: linear-gradient( 145deg, rgba(30, 48, 102, 0.98), rgba(37, 99, 235, 0.94) ); --wm-notify-info-border: rgba(147, 197, 253, 0.42); --wm-notify-info-border-hover: rgba(147, 197, 253, 0.58); --wm-notify-info-text: #f0f9ff; --wm-notify-info-glow: rgba(59, 130, 246, 0.35); --wm-notify-info-glow-hover: rgba(59, 130, 246, 0.45); --wm-notify-info-accent: #93c5fd; --wm-notify-shadow: 0 10px 36px rgba(0, 0, 0, 0.48); --wm-notify-shadow-hover: 0 14px 42px rgba(0, 0, 0, 0.56); --wm-notify-inset: inset 0 1px 0 rgba(255, 255, 255, 0.14); --wm-notify-inset-hover: inset 0 1px 0 rgba(255, 255, 255, 0.2); --wm-notify-overlay-bg: rgba(2, 6, 18, 0.6); } [data-wm-theme="light"] { --wm-notify-error-bg: linear-gradient( 145deg, rgba(254, 226, 226, 0.98), rgba(254, 202, 202, 0.96) ); --wm-notify-error-bg-hover: linear-gradient( 145deg, rgba(254, 202, 202, 0.99), rgba(252, 165, 165, 0.96) ); --wm-notify-error-border: rgba(185, 28, 28, 0.34); --wm-notify-error-border-hover: rgba(185, 28, 28, 0.5); --wm-notify-error-text: #7f1d1d; --wm-notify-error-glow: rgba(220, 38, 38, 0.14); --wm-notify-error-glow-hover: rgba(220, 38, 38, 0.2); --wm-notify-error-accent: #dc2626; --wm-notify-success-bg: linear-gradient( 145deg, rgba(220, 252, 231, 0.98), rgba(187, 247, 208, 0.96) ); --wm-notify-success-bg-hover: linear-gradient( 145deg, rgba(187, 247, 208, 0.99), rgba(134, 239, 172, 0.96) ); --wm-notify-success-border: rgba(21, 128, 61, 0.34); --wm-notify-success-border-hover: rgba(21, 128, 61, 0.5); --wm-notify-success-text: #14532d; --wm-notify-success-glow: rgba(22, 163, 74, 0.14); --wm-notify-success-glow-hover: rgba(22, 163, 74, 0.2); --wm-notify-success-accent: #16a34a; --wm-notify-info-bg: linear-gradient( 145deg, rgba(219, 234, 254, 0.98), rgba(191, 219, 254, 0.96) ); --wm-notify-info-bg-hover: linear-gradient( 145deg, rgba(191, 219, 254, 0.99), rgba(147, 197, 253, 0.96) ); --wm-notify-info-border: rgba(29, 78, 216, 0.34); --wm-notify-info-border-hover: rgba(29, 78, 216, 0.5); --wm-notify-info-text: #1e3a8a; --wm-notify-info-glow: rgba(37, 99, 235, 0.14); --wm-notify-info-glow-hover: rgba(37, 99, 235, 0.2); --wm-notify-info-accent: #2563eb; --wm-notify-shadow: 0 8px 30px rgba(15, 23, 42, 0.12); --wm-notify-shadow-hover: 0 12px 36px rgba(15, 23, 42, 0.16); --wm-notify-inset: inset 0 1px 0 rgba(255, 255, 255, 0.92); --wm-notify-inset-hover: inset 0 1px 0 rgba(255, 255, 255, 0.98); --wm-notify-overlay-bg: rgba(148, 163, 184, 0.38); } #app-notification-container { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 10000; pointer-events: none; } #app-notification-container > * { pointer-events: auto; } .app-notification { padding: 14px 20px; background: var(--wm-notify-error-bg); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border: 1px solid var(--wm-notify-error-border); color: var(--wm-notify-error-text); font-size: 14px; font-weight: 500; font-family: var(--font-ui, Montserrat, sans-serif); border-radius: 12px; text-align: center; cursor: pointer; transition: all 0.2s ease-in-out; opacity: 1; white-space: normal; max-width: 600px; line-height: 1.5; box-shadow: var(--wm-notify-shadow), 0 4px 16px var(--wm-notify-error-glow), var(--wm-notify-inset); } .app-notification:hover { background: var(--wm-notify-error-bg-hover); border-color: var(--wm-notify-error-border-hover); transform: translateY(-2px); box-shadow: var(--wm-notify-shadow-hover), 0 6px 20px var(--wm-notify-error-glow-hover), var(--wm-notify-inset-hover); } .app-notification.hidden { opacity: 0; transform: translateY(10px); pointer-events: none; } .app-notification__inner { display: flex; flex-direction: column; align-items: center; gap: 10px; } .app-notification__icon { width: 48px; height: 48px; object-fit: contain; flex-shrink: 0; display: block; pointer-events: none; } [data-wm-theme="dark"] .app-notification__icon { filter: brightness(1.12) saturate(1.05); } .app-notification__message { width: 100%; color: inherit; font-weight: 600; letter-spacing: -0.01em; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.08); } .app-notification--with-actions .app-notification__message { font-family: var(--font-display, Larken, Georgia, serif); font-size: 18px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.25; } [data-wm-theme="light"] .app-notification__message { text-shadow: none; } .app-notification__detail { width: 100%; font-size: 13px; font-weight: 500; line-height: 1.5; opacity: 0.88; color: inherit; } .app-notification--with-actions .app-notification__detail { max-width: 28ch; margin: 0 auto; opacity: 0.82; } .app-notification--exit { opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity 0.22s ease, transform 0.22s ease; } #app-notification-container .app-notification--exit:hover { transform: translateY(10px); } .app-notification--success { background: var(--wm-notify-success-bg); border-color: var(--wm-notify-success-border); color: var(--wm-notify-success-text); box-shadow: var(--wm-notify-shadow), 0 4px 16px var(--wm-notify-success-glow), var(--wm-notify-inset); } .app-notification--success:hover { background: var(--wm-notify-success-bg-hover); border-color: var(--wm-notify-success-border-hover); box-shadow: var(--wm-notify-shadow-hover), 0 6px 20px var(--wm-notify-success-glow-hover), var(--wm-notify-inset-hover); } .app-notification--info { background: var(--wm-notify-info-bg); border-color: var(--wm-notify-info-border); color: var(--wm-notify-info-text); box-shadow: var(--wm-notify-shadow), 0 4px 16px var(--wm-notify-info-glow), var(--wm-notify-inset); } .app-notification--info:hover { background: var(--wm-notify-info-bg-hover); border-color: var(--wm-notify-info-border-hover); box-shadow: var(--wm-notify-shadow-hover), 0 6px 20px var(--wm-notify-info-glow-hover), var(--wm-notify-inset-hover); } .app-notification--with-actions { cursor: default; } .app-notification--with-actions:hover { transform: none; } .app-notification__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 14px; width: 100%; } .app-notification__actions .lab-button.primary { --shiny-cta-bg: #000000; --shiny-cta-bg-subtle: #1a1818; --shiny-cta-fg: #ffffff; min-width: 148px; font-weight: 600; letter-spacing: 0.01em; } .app-notification--error .app-notification__actions .lab-button.primary { --shiny-cta-highlight: var(--wm-notify-error-accent); --shiny-cta-highlight-subtle: #fecaca; } .app-notification--success .app-notification__actions .lab-button.primary { --shiny-cta-highlight: var(--wm-notify-success-accent); --shiny-cta-highlight-subtle: #bbf7d0; } .app-notification--info .app-notification__actions .lab-button.primary { --shiny-cta-highlight: var(--wm-notify-info-accent); --shiny-cta-highlight-subtle: #bfdbfe; } .wm-notification-overlay { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 24px; background: var(--wm-notify-overlay-bg); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: opacity 0.22s ease; } .wm-notification-overlay--exit { opacity: 0; pointer-events: none; } .wm-notification-overlay .app-notification { max-width: 460px; width: 100%; cursor: default; animation: wm-notification-in 180ms ease-out; } .wm-notification-overlay .app-notification:hover { transform: none; } @keyframes wm-notification-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }