锘?toast-title { font-weight: bold; } .toast-message { -ms-word-wrap: break-word; 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; -webkit-text-shadow: 0 1px 0 #ffffff; text-shadow: 0 1px 0 #ffffff; opacity: 0.8; -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); filter: alpha(opacity=80); } .toast-close-button:hover, .toast-close-button:focus { color: #000000; text-decoration: none; cursor: pointer; opacity: 0.4; -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40); filter: alpha(opacity=40); } /*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; -webkit-appearance: none; } .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-top-middle { top: 12px; left: 50%; transform: translate(-50%, 0); } .toast-bottom-right { right: 12px; bottom: 12px; } .toast-bottom-left { bottom: 12px; left: 12px; } #toast-container { position: fixed; z-index: 999999; /*overrides*/ } #toast-container * { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; } #toast-container > div { margin: 0 0 6px; padding: 12px 12px 12px 40px; max-width: 900px; text-align: center; -moz-border-radius: 3px 3px 3px 3px; -webkit-border-radius: 3px 3px 3px 3px; border-radius: 3px 3px 3px 3px; background-position: 15px center; background-repeat: no-repeat; -moz-box-shadow: 0 0 12px #999999; -webkit-box-shadow: 0 0 12px #999999; box-shadow: 0 0 12px #999999; /* color: #ffffff; */ color: rgba(0, 0, 0, 0.5); opacity: 1; -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); filter: alpha(opacity=80); } #toast-container > :hover { -moz-box-shadow: 0 0 12px #000000; -webkit-box-shadow: 0 0 12px #000000; box-shadow: 0 0 12px #000000; opacity: 1; -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); filter: alpha(opacity=100); cursor: pointer; } #toast-container > .toast-info { background-size: 16px 16px; background-position-y: 12px; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAcJJREFUWEfNl01uwjAQhW2jol6iqEs4BeFkhZORngKWFb1ERUUG2cSJ49jjN0DUZgMI2/PNmx9PtPrjR0vsH95fK325fHR7tK7cd6LafWj9qYypV18/7jfyQACdYW8QOJmU2q1O521pKQtwj+HYYAkkC3BYzLdaqV7ukivM/xxEEuCZxj1XDmIEMIVxDmIAMKXxDsKYTVglA4DjYk4PhBrbSlQvv383fnEHUPKejNmopqlKieljzZ1nz/IqdACc92ECsQdHtZ89M1DBAbh6b5p9VsNIthREnOWIolaFGwBS8wyE1Lhv3zYXHMDx7WWvkDabgLD7w5YLOdPeH3KAYGMqXLDxEYC0/CIl4DBG1MvTWd9CIARItVWR9y1ID4DmgL3zmWtWBNGqKErCZLYTrcPOBkNIAdhSA/pEbk6AGhFU50II3477VszkQdi7WYkDiFJ3tQloVekvI64dtwdD8SWq7XCqida55hYqOryOBdWA3b3pVd77gQLQpfSI1XZvnE//ayTzDkKxFqoBD6VTQIjH8qdB2IqYzXbcqxr2aoYMLGFIAMOjoRQJqW0ubjC1Ne5qaPhy6q75gsexHUgBBO7eNVe7g2ow/1IOLQAAAABJRU5ErkJggg==") !important; } #toast-container > .toast-error { background-size: 16px 16px; background-position-y: 12px; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAcJJREFUWEfNl01uwjAQhW2jol6iqEs4BeFkhZORngKWFb1ERUUG2cSJ49jjN0DUZgMI2/PNmx9PtPrjR0vsH95fK325fHR7tK7cd6LafWj9qYypV18/7jfyQACdYW8QOJmU2q1O521pKQtwj+HYYAkkC3BYzLdaqV7ukivM/xxEEuCZxj1XDmIEMIVxDmIAMKXxDsKYTVglA4DjYk4PhBrbSlQvv383fnEHUPKejNmopqlKieljzZ1nz/IqdACc92ECsQdHtZ89M1DBAbh6b5p9VsNIthREnOWIolaFGwBS8wyE1Lhv3zYXHMDx7WWvkDabgLD7w5YLOdPeH3KAYGMqXLDxEYC0/CIl4DBG1MvTWd9CIARItVWR9y1ID4DmgL3zmWtWBNGqKErCZLYTrcPOBkNIAdhSA/pEbk6AGhFU50II3477VszkQdi7WYkDiFJ3tQloVekvI64dtwdD8SWq7XCqida55hYqOryOBdWA3b3pVd77gQLQpfSI1XZvnE//ayTzDkKxFqoBD6VTQIjH8qdB2IqYzXbcqxr2aoYMLGFIAMOjoRQJqW0ubjC1Ne5qaPhy6q75gsexHUgBBO7eNVe7g2ow/1IOLQAAAABJRU5ErkJggg==") !important; } #toast-container > .toast-success { background-size: 16px 16px; background-position-y: 12px; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAYlJREFUWEfNV0G2wiAMhFvpynofPMPXM8h9rCu9Ff8lkr6AhQSkPruplpaZTIYQrGm4rg83WWv+2CdT/D3DPQRzh/tp78/aaa30IgMlMOkTHA/BXDREqgSuD3fOIlaB85ckIkUC/uluxpimqCvsZrfzx7XxNwJRcgAffoVgjqe9R7/Q9UbAP10YjswmdDufYCZ/BsteiiNJx0JghOG0ynFjLgS2lj4nR35AAt+MnhHBVCCBjaIntxeXMhjSbhE9z3HN2JCG4QTyyiesrNmOXHo5uEJdmQAVDmmyDnCwHxKoVj5euUokOsFxQYgEpMmlcak4qTxQAvkUnFKg2nZXwCa+s0keKSghm1DTXHSCY9cEdQD6PPX+P0D2JSYk0FOK4UPM36tB7e6asBRHAiofSI5uGSclaTdsSkMLUOldqi+/05B8MRXrLRlJJZXmT+WvNqWxO9rMD6q2nCkxcmXoDyZc4t4Kp6mexYPJWo47icxxrScnoXx+8XScK4J7uDWH+Dw5nsMzDSif8x/Whw/z4iuP2AAAAABJRU5ErkJggg==") !important; } #toast-container > .toast-warning { background-size: 16px 16px; background-position-y: 12px; background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAAXNSR0IArs4c6QAAAcJJREFUWEfNl01uwjAQhW2jol6iqEs4BeFkhZORngKWFb1ERUUG2cSJ49jjN0DUZgMI2/PNmx9PtPrjR0vsH95fK325fHR7tK7cd6LafWj9qYypV18/7jfyQACdYW8QOJmU2q1O521pKQtwj+HYYAkkC3BYzLdaqV7ukivM/xxEEuCZxj1XDmIEMIVxDmIAMKXxDsKYTVglA4DjYk4PhBrbSlQvv383fnEHUPKejNmopqlKieljzZ1nz/IqdACc92ECsQdHtZ89M1DBAbh6b5p9VsNIthREnOWIolaFGwBS8wyE1Lhv3zYXHMDx7WWvkDabgLD7w5YLOdPeH3KAYGMqXLDxEYC0/CIl4DBG1MvTWd9CIARItVWR9y1ID4DmgL3zmWtWBNGqKErCZLYTrcPOBkNIAdhSA/pEbk6AGhFU50II3477VszkQdi7WYkDiFJ3tQloVekvI64dtwdD8SWq7XCqida55hYqOryOBdWA3b3pVd77gQLQpfSI1XZvnE//ayTzDkKxFqoBD6VTQIjH8qdB2IqYzXbcqxr2aoYMLGFIAMOjoRQJqW0ubjC1Ne5qaPhy6q75gsexHUgBBO7eNVe7g2ow/1IOLQAAAABJRU5ErkJggg==") !important; } #toast-container.toast-top-full-width > div, #toast-container.toast-bottom-full-width > div { width: 96%; margin: auto; } .toast { background-color: #030303; } .toast-success { /* background-color: #51a351; */ background-color: rgba(255, 255, 255, 1); } .toast-error { background-color: rgba(255, 255, 255, 1); } .toast-info { background-color: rgba(255, 255, 255, 1); } .toast-warning { background-color: rgba(255, 255, 255, 1); } /*Responsive Design*/ @media all and (max-width: 240px) { #toast-container > 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 > 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 > div { padding: 15px 15px 15px 50px; width: 25em; } }