.supernoti-notification { box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; font-size: 14px; line-height: 1.5; position: fixed; z-index: 999999; transition: all 0.3s ease; } body.supernoti-has-topbar { transition: padding-top 0.2s ease; } .supernoti-notification * { box-sizing: border-box; } .supernoti-notification.supernoti-shadow { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); } .supernoti-content { display: flex; align-items: center; width: 100%; } .supernoti-icon { margin-right: 15px; font-size: 1.5em; } .supernoti-message { flex: 1; } .supernoti-message p { margin: 0 0 10px 0; } .supernoti-message p:last-child { margin-bottom: 0; } .supernoti-close { cursor: pointer; font-size: 20px; line-height: 1; margin-left: 15px; opacity: 0.7; transition: opacity 0.2s ease; } .supernoti-close:hover { opacity: 1; } .supernoti-button { display: inline-block; padding: 8px 16px; margin: 5px 10px 5px 0; text-decoration: none; border-radius: 4px; cursor: pointer; font-weight: 600; transition: all 0.2s ease; } .supernoti-button:hover { opacity: 0.9; } .supernoti-dismiss-button { background: transparent; text-decoration: underline; } .supernoti-top-bar { left: 0; width: 100%; } .supernoti-top-bar.supernoti-position-top { top: 0; } .supernoti-top-bar.supernoti-position-bottom { bottom: 0; } .supernoti-progress { position: absolute; bottom: 0; left: 0; height: 3px; width: 0; transition: width linear; } .supernoti-corner { max-width: 90%; } .supernoti-corner.supernoti-position-top-right { top: 20px; right: 20px; } .supernoti-corner.supernoti-position-top-left { top: 20px; left: 20px; } .supernoti-corner.supernoti-position-bottom-right { bottom: 20px; right: 20px; } .supernoti-corner.supernoti-position-bottom-left { bottom: 20px; left: 20px; } .supernoti-banner { left: 0; width: 100%; } .supernoti-banner.supernoti-position-top { top: 0; } .supernoti-banner.supernoti-position-bottom { bottom: 0; } .supernoti-banner .supernoti-content { flex-wrap: wrap; justify-content: space-between; } .supernoti-banner .supernoti-message { flex: 1 0 100%; margin-bottom: 10px; } .supernoti-banner .supernoti-buttons { display: flex; align-items: center; margin-top: 10px; } .supernoti-modal-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 999999; display: flex; align-items: center; justify-content: center; } .supernoti-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .supernoti-modal { position: relative; max-height: 90vh; overflow-y: auto; padding: 25px; } .supernoti-modal .supernoti-content { flex-direction: column; text-align: center; } .supernoti-modal .supernoti-icon { margin: 0 0 15px 0; font-size: 2.5em; } .supernoti-modal .supernoti-close { position: absolute; top: 10px; right: 10px; margin: 0; } .supernoti-modal .supernoti-buttons { margin-top: 20px; display: flex; justify-content: center; flex-wrap: wrap; } .supernoti-modal .supernoti-button { margin: 5px 10px; } .supernoti-slide-in { max-width: 90%; } .supernoti-slide-in.supernoti-position-top-right { top: 20px; right: -400px; } .supernoti-slide-in.supernoti-position-top-left { top: 20px; left: -400px; } .supernoti-slide-in.supernoti-position-bottom-right { bottom: 20px; right: -400px; } .supernoti-slide-in.supernoti-position-bottom-left { bottom: 20px; left: -400px; } .supernoti-slide-in.supernoti-active.supernoti-position-top-right, .supernoti-slide-in.supernoti-active.supernoti-position-bottom-right { right: 20px; } .supernoti-slide-in.supernoti-active.supernoti-position-top-left, .supernoti-slide-in.supernoti-active.supernoti-position-bottom-left { left: 20px; } .supernoti-slide-in .supernoti-buttons { margin-top: 15px; } .supernoti-animation-fade { opacity: 0; } .supernoti-animation-fade.supernoti-active { opacity: 1; } .supernoti-animation-slide.supernoti-top-bar.supernoti-position-top { transform: translateY(-100%); } .supernoti-animation-slide.supernoti-top-bar.supernoti-position-bottom { transform: translateY(100%); } .supernoti-animation-slide.supernoti-top-bar.supernoti-active { transform: translateY(0); } .supernoti-animation-slide.supernoti-banner.supernoti-position-top { transform: translateY(-100%); } .supernoti-animation-slide.supernoti-banner.supernoti-position-bottom { transform: translateY(100%); } .supernoti-animation-slide.supernoti-banner.supernoti-active { transform: translateY(0); } .supernoti-animation-bounce.supernoti-active { animation: supernoti-bounce 0.5s; } @keyframes supernoti-bounce { 0%, 20%, 50%, 80%, 100% {transform: translateY(0);} 40% {transform: translateY(-20px);} 60% {transform: translateY(-10px);} } @media screen and (max-width: 768px) { .supernoti-content { flex-direction: column; align-items: flex-start; } .supernoti-icon { margin: 0 0 10px 0; } .supernoti-close { position: absolute; top: 10px; right: 10px; margin: 0; } .supernoti-banner .supernoti-content, .supernoti-top-bar .supernoti-content { padding-right: 30px; } .supernoti-corner, .supernoti-slide-in { width: calc(100% - 40px) !important; } .supernoti-banner .supernoti-buttons { flex-direction: column; align-items: flex-start; } .supernoti-banner .supernoti-button { width: 100%; margin: 5px 0; text-align: center; } } .admin-bar .supernoti-top-bar.supernoti-position-top, .admin-bar .supernoti-banner.supernoti-position-top { top: 32px; } @media screen and (max-width: 782px) { .admin-bar .supernoti-top-bar.supernoti-position-top, .admin-bar .supernoti-banner.supernoti-position-top { top: 46px; } } html.supernoti-mobile-disabled .supernoti-notification, html.supernoti-mobile-disabled .supernoti-modal-container { display: none !important; }