{"html":"

\n
\n
\n \n
\n
Everything went perfectly!
\n
\n
\n \n
\n
\n
\n
\n
\n \n
\n
Some information for you.
\n
\n
\n \n
\n
\n
\n
\n
\n \n
\n
Proceed with caution.
\n
\n
\n \n
\n
\n
\n
\n
\n \n
\n
An issue occurred.
\n
\n
\n \n
\n
\n
\n
\n
\n \n
\n
A notification for you.
\n
\n
\n \n
\n
\n

\n","css":"/* Notification container */\n\n.notification-container {\n /* Position top left */\n\n /* position: fixed;\n top: 2%;\n left: 2%;\n z-index: 1000;\n max-width: 80%; */\n\n --content-color: black;\n --background-color: #f3f3f3;\n --font-size-content: 0.75em;\n --icon-size: 1em;\n\n max-width: 80%;\n display: flex;\n flex-direction: column;\n gap: 0.5em;\n list-style-type: none;\n font-family: sans-serif;\n color: var(--content-color);\n}\n\n/* Notification Item */\n\n.notification-item {\n position: relative;\n display: flex;\n justify-content: space-between;\n align-items: center;\n flex-direction: row;\n gap: 1em;\n overflow: hidden;\n padding: 10px 15px;\n border-radius: 6px;\n box-shadow: rgba(111, 111, 111, 0.2) 0px 8px 24px;\n background-color: var(--background-color);\n transition: all 250ms ease;\n\n /* Background Pattern */\n\n --grid-color: rgba(225, 225, 225, 0.7);\n background-image: linear-gradient(\n 0deg,\n transparent 23%,\n var(--grid-color) 24%,\n var(--grid-color) 25%,\n transparent 26%,\n transparent 73%,\n var(--grid-color) 74%,\n var(--grid-color) 75%,\n transparent 76%,\n transparent\n ),\n linear-gradient(\n 90deg,\n transparent 23%,\n var(--grid-color) 24%,\n var(--grid-color) 25%,\n transparent 26%,\n transparent 73%,\n var(--grid-color) 74%,\n var(--grid-color) 75%,\n transparent 76%,\n transparent\n );\n background-size: 55px 55px;\n}\n\n.notification-item svg {\n transition: 250ms ease;\n}\n\n.notification-item:hover {\n transform: scale(1.01);\n}\n\n.notification-item:active {\n transform: scale(1.05);\n}\n\n.notification-item .notification-close:hover {\n background-color: rgba(204, 204, 204, 0.45);\n}\n\n.notification-item .notification-close:hover svg {\n color: rgb(0, 0, 0);\n}\n\n.notification-item .notification-close:active svg {\n transform: scale(1.1);\n}\n\n/* Notification Icons */\n\n.notification-item .notification-close {\n padding: 2px;\n border-radius: 5px;\n transition: all 250ms;\n}\n\n.notification-container svg {\n width: var(--icon-size);\n height: var(--icon-size);\n color: var(--content-color);\n}\n\n.notification-icon {\n display: flex;\n align-items: center;\n}\n\n/* Success */\n\n.success {\n color: #047857;\n background-color: #7dffbc;\n --grid-color: rgba(16, 185, 129, 0.25);\n background-image: linear-gradient(\n 0deg,\n transparent 23%,\n var(--grid-color) 24%,\n var(--grid-color) 25%,\n transparent 26%,\n transparent 73%,\n var(--grid-color) 74%,\n var(--grid-color) 75%,\n transparent 76%,\n transparent\n ),\n linear-gradient(\n 90deg,\n transparent 23%,\n var(--grid-color) 24%,\n var(--grid-color) 25%,\n transparent 26%,\n transparent 73%,\n var(--grid-color) 74%,\n var(--grid-color) 75%,\n transparent 76%,\n transparent\n );\n}\n\n.success svg {\n color: #047857;\n}\n\n.success .notification-progress-bar {\n background-color: #047857;\n}\n\n.success:hover {\n background-color: #5bffaa;\n}\n\n/* Info */\n\n.info {\n color: #1e3a8a;\n background-color: #7eb8ff;\n --grid-color: rgba(59, 131, 246, 0.25);\n background-image: linear-gradient(\n 0deg,\n transparent 23%,\n var(--grid-color) 24%,\n var(--grid-color) 25%,\n transparent 26%,\n transparent 73%,\n var(--grid-color) 74%,\n var(--grid-color) 75%,\n transparent 76%,\n transparent\n ),\n linear-gradient(\n 90deg,\n transparent 23%,\n var(--grid-color) 24%,\n var(--grid-color) 25%,\n transparent 26%,\n transparent 73%,\n var(--grid-color) 74%,\n var(--grid-color) 75%,\n transparent 76%,\n transparent\n );\n}\n\n.info svg {\n color: #1e3a8a;\n}\n\n.info .notification-progress-bar {\n background-color: #1e3a8a;\n}\n\n.info:hover {\n background-color: #5ba5ff;\n}\n\n/* Warning */\n\n.warning {\n color: #78350f;\n background-color: #ffe57e;\n --grid-color: rgba(245, 159, 11, 0.25);\n background-image: linear-gradient(\n 0deg,\n transparent 23%,\n var(--grid-color) 24%,\n var(--grid-color) 25%,\n transparent 26%,\n transparent 73%,\n var(--grid-color) 74%,\n var(--grid-color) 75%,\n transparent 76%,\n transparent\n ),\n linear-gradient(\n 90deg,\n transparent 23%,\n var(--grid-color) 24%,\n var(--grid-color) 25%,\n transparent 26%,\n transparent 73%,\n var(--grid-color) 74%,\n var(--grid-color) 75%,\n transparent 76%,\n transparent\n );\n}\n\n.warning svg {\n color: #78350f;\n}\n\n.warning .notification-progress-bar {\n background-color: #78350f;\n}\n\n.warning:hover {\n background-color: #ffde59;\n}\n\n/* Error */\n\n.error {\n color: #7f1d1d;\n background-color: #ff7e7e;\n --grid-color: rgba(239, 68, 68, 0.25);\n background-image: linear-gradient(\n 0deg,\n transparent 23%,\n var(--grid-color) 24%,\n var(--grid-color) 25%,\n transparent 26%,\n transparent 73%,\n var(--grid-color) 74%,\n var(--grid-color) 75%,\n transparent 76%,\n transparent\n ),\n linear-gradient(\n 90deg,\n transparent 23%,\n var(--grid-color) 24%,\n var(--grid-color) 25%,\n transparent 26%,\n transparent 73%,\n var(--grid-color) 74%,\n var(--grid-color) 75%,\n transparent 76%,\n transparent\n );\n}\n\n.error svg {\n color: #7f1d1d;\n}\n\n.error .notification-progress-bar {\n background-color: #7f1d1d;\n}\n\n.error:hover {\n background-color: #ff5f5f;\n}\n\n/* Notification content */\n\n.notification-content {\n display: flex;\n justify-content: flex-start;\n align-items: center;\n gap: 0.5em;\n}\n\n.notification-text {\n font-size: var(--font-size-content);\n user-select: none;\n}\n\n.notification-close {\n cursor: pointer;\n}\n\n/* Notification progress bar */\n\n.notification-progress-bar {\n position: absolute;\n bottom: 0;\n left: 0;\n height: 1px;\n background: var(--content-color);\n width: 100%;\n transform: translateX(100%);\n\n /* Remove the infinite property for your website */\n\n animation: progressBar 5s linear forwards infinite;\n}\n\n/* progressBar Animation */\n\n@keyframes progressBar {\n 0% {\n transform: translateX(0);\n }\n\n 100% {\n transform: translateX(-100%);\n }\n}\n"}

stupid-panther-7

👁 实时预览

📝 源代码