/* based on angular-toastr css https://github.com/Foxandxss/angular-toastr/blob/cb508fe6801d6b288d3afc525bb40fee1b101650/dist/angular-toastr.css */ /* position */ .toast-center-center { top: 50%; left: 50%; transform: translate(-50%, -50%); } .toast-top-center { top: 0; right: 0; width: 100%; } .toast-bottom-center { bottom: 0; right: 0; width: 100%; } .toast-top-full-width { top: 0; right: 0; width: 100%; } .toast-bottom-full-width { bottom: 0; right: 0; width: 100%; } .toast-top-left { top: 12px; left: 12px; } .toast-top-right { top: 12px; right: 12px; } .toast-bottom-right { right: 12px; bottom: 12px; } .toast-bottom-left { bottom: 12px; left: 12px; } /* toast styles */ .toast-title { font-weight: bold; } .toast-message { word-wrap: break-word; } .toast-message a, .toast-message label { color: #FFFFFF; } .toast-message a:hover { color: #CCCCCC; text-decoration: none; } .toast-close-button { position: relative; right: -0.3em; top: -0.3em; float: right; font-size: 20px; font-weight: bold; color: #FFFFFF; text-shadow: 0 1px 0 #ffffff; /* opacity: 0.8; */ } .toast-close-button:hover, .toast-close-button:focus { color: #000000; text-decoration: none; cursor: pointer; opacity: 0.4; } /*Additional properties for button version iOS requires the button element instead of an anchor tag. If you want the anchor version, it requires `href="#"`.*/ button.toast-close-button { padding: 0; cursor: pointer; background: transparent; border: 0; } .toast-container { pointer-events: none; position: fixed; z-index: 999999; } .toast-container * { box-sizing: border-box; } .toast-container .toast { position: relative; overflow: hidden; margin: 0 0 6px; padding: 15px 15px 15px 50px; width: 300px; border-radius: 3px 3px 3px 3px; background-position: 15px center; background-repeat: no-repeat; background-size: 24px; box-shadow: 0 0 12px #999999; color: #FFFFFF; } .toast-container .toast:hover { box-shadow: 0 0 12px #000000; opacity: 1; cursor: pointer; } /* https://github.com/FortAwesome/Font-Awesome-Pro/blob/master/advanced-options/raw-svg/regular/info-circle.svg */ .toast-info { background-image: url('data:image/svg+xml;utf8,'); } /* https://github.com/FortAwesome/Font-Awesome-Pro/blob/master/advanced-options/raw-svg/regular/times-circle.svg */ .toast-error { background-image: url('data:image/svg+xml;utf8,'); } /* https://github.com/FortAwesome/Font-Awesome-Pro/blob/master/advanced-options/raw-svg/regular/check.svg */ .toast-success { background-image: url('data:image/svg+xml;utf8,'); } /* https://github.com/FortAwesome/Font-Awesome-Pro/blob/master/advanced-options/raw-svg/regular/exclamation-triangle.svg */ .toast-warning { background-image: url('data:image/svg+xml;utf8,'); } .toast-container.toast-top-center .toast, .toast-container.toast-bottom-center .toast { width: 300px; margin-left: auto; margin-right: auto; } .toast-container.toast-top-full-width .toast, .toast-container.toast-bottom-full-width .toast { width: 96%; margin-left: auto; margin-right: auto; } .toast { background-color: #030303; pointer-events: auto; } .toast-success { background-color: #51A351; } .toast-error { background-color: #BD362F; } .toast-info { background-color: #2F96B4; } .toast-warning { background-color: #F89406; } .toast-progress { position: absolute; left: 0; bottom: 0; height: 4px; background-color: #000000; opacity: 0.4; } /* Responsive Design */ @media all and (max-width: 240px) { .toast-container .toast.div { padding: 8px 8px 8px 50px; width: 11em; } .toast-container .toast-close-button { right: -0.2em; top: -0.2em; } } @media all and (min-width: 241px) and (max-width: 480px) { .toast-container .toast.div { padding: 8px 8px 8px 50px; width: 18em; } .toast-container .toast-close-button { right: -0.2em; top: -0.2em; } } @media all and (min-width: 481px) and (max-width: 768px) { .toast-container .toast.div { padding: 15px 15px 15px 50px; width: 25em; } }