alert90s 1.0.11 → 1.0.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +3 -2
- package/dist/alert90s.min.js +1 -1
- package/package.json +1 -1
- package/src/index.js +100 -0
- package/src/styles.css +108 -0
package/README.md
CHANGED
|
@@ -192,6 +192,7 @@ If you'd like to collaborate or just say hi, visit my [Portfolio Website](https:
|
|
|
192
192
|
| inputValue | String | '' | Initial value or checked state (for boolean inputs). |
|
|
193
193
|
| inputOptions | Object | {} | Object mapping `{value: 'Label'}` for `select`/`radio`. |
|
|
194
194
|
| inputAttributes | Object | {} | Custom HTML attributes for the input element. |
|
|
195
|
+
| theme | String | 'light' | Native dark mode support (`'light'`, `'dark'`, or `'auto'`). |
|
|
195
196
|
| dir | String | 'auto' | Text direction. Set `rtl` for Arabic/Hebrew. |
|
|
196
197
|
| position | String | 'center' | `top`, `top-end`, `bottom-start`, etc. |
|
|
197
198
|
| timer | Number | null | Auto close timer in milliseconds. |
|
|
@@ -210,8 +211,8 @@ If you'd like to collaborate or just say hi, visit my [Portfolio Website](https:
|
|
|
210
211
|
- `Alert90s.showValidationMessage(message)` / `Alert90s.resetValidationMessage()`
|
|
211
212
|
- `Alert90s.getTimerLeft()`
|
|
212
213
|
- `Alert90s.getPopup()`
|
|
213
|
-
- `Alert90s.initTooltips()`
|
|
214
|
-
- `Alert90s.
|
|
214
|
+
- `Alert90s.initTooltips()` / `Alert90s.destroyTooltips()`
|
|
215
|
+
- `Alert90s.renderThemeToggle(selector, options)`
|
|
215
216
|
|
|
216
217
|
## License
|
|
217
218
|
|
package/dist/alert90s.min.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).Alert90s=t()}(this,function(){"use strict";!function(e,t){void 0===t&&(t={});var o=t.insertAt;if("undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.type="text/css","top"===o&&r.firstChild?r.insertBefore(n,r.firstChild):r.appendChild(n),n.styleSheet?n.styleSheet.cssText=e:n.appendChild(document.createTextNode(e))}}('.alert90s-overlay{animation:alert90s-fade-in .2s ease-out forwards;backdrop-filter:blur(4px);background-color:rgba(0,0,0,.6);box-sizing:border-box;display:flex;font-family:inherit;inset:0;padding:1rem;position:fixed;z-index:99999}.alert90s-overlay.alert90s-pos-center{align-items:center;justify-content:center}.alert90s-overlay.alert90s-pos-top{align-items:flex-start;justify-content:center}.alert90s-overlay.alert90s-pos-top-start{align-items:flex-start;justify-content:flex-start}.alert90s-overlay.alert90s-pos-top-end{align-items:flex-start;justify-content:flex-end}.alert90s-overlay.alert90s-pos-bottom{align-items:flex-end;justify-content:center}.alert90s-overlay.alert90s-pos-bottom-start{align-items:flex-end;justify-content:flex-start}.alert90s-overlay.alert90s-pos-bottom-end{align-items:flex-end;justify-content:flex-end}.alert90s-overlay.alert90s-pos-center-start{align-items:center;justify-content:flex-start}.alert90s-overlay.alert90s-pos-center-end{align-items:center;justify-content:flex-end}.alert90s-overlay *{box-sizing:border-box}.alert90s-box{align-items:center;animation:alert90s-pop-in .3s cubic-bezier(.175,.885,.32,1.275) forwards;background-color:#fff;border:4px solid #000;box-shadow:12px 12px 0 0 #000;display:flex;flex-direction:column;max-height:95vh;max-width:28rem;position:relative;text-align:center;width:100%}.alert90s-box[dir=rtl]{text-align:right}.alert90s-box.is-draggable{position:absolute}.alert90s-body{align-items:center;display:flex;flex-direction:column;overflow-y:auto;padding:3rem 2rem 2rem;scrollbar-width:none;width:100%}.alert90s-body::-webkit-scrollbar{display:none}.alert90s-header{align-items:center;background-color:#e2e8f0;border-bottom:4px solid #000;display:flex;height:2rem;justify-content:space-between;left:0;padding:0 .5rem;position:absolute;top:0;width:100%;z-index:10}.alert90s-header.draggable{cursor:grab}.alert90s-header.draggable:active{cursor:grabbing}.alert90s-header-left{display:flex;gap:.25rem}.alert90s-box[dir=rtl] .alert90s-header{flex-direction:row-reverse}.alert90s-header-dot{background-color:#fff;border:2px solid #000;height:.75rem;width:.75rem}.alert90s-header-right{align-items:center;display:flex;gap:.5rem;z-index:11}.alert90s-box[dir=rtl] .alert90s-header-right{flex-direction:row-reverse}.alert90s-header-title{font-size:10px;font-weight:700;letter-spacing:.1em;pointer-events:none;text-transform:uppercase}.alert90s-close-btn{align-items:center;background-color:#ef4444;border:2px solid #000;box-shadow:none;cursor:pointer;display:flex;height:1.25rem;justify-content:center;margin:0;padding:0;transition:transform .1s,background-color .1s;width:1.25rem}.alert90s-close-btn:hover{background-color:#f87171;transform:scale(1.1)}.alert90s-close-btn span{color:#000;font-size:14px;font-weight:700;line-height:1}.alert90s-image-container{align-items:center;background:#fff;border:4px solid #000;box-shadow:4px 4px 0 0 #000;display:flex;justify-content:center;margin-bottom:1rem;overflow:hidden;width:100%}.alert90s-image-container img{display:block;height:auto;max-width:100%}.alert90s-icon{align-items:center;border:4px solid #000;border-radius:9999px;box-shadow:4px 4px 0 0 #000;display:flex;flex-shrink:0;height:4rem;justify-content:center;margin-bottom:1rem;width:4rem}.alert90s-icon img,.alert90s-icon svg{height:2rem;width:2rem}.alert90s-icon-custom{font-size:2.25rem;font-weight:700;line-height:1}.alert90s-icon.warning{background-color:#facc15}.alert90s-icon.danger,.alert90s-icon.error{background-color:#ef4444;color:#fff}.alert90s-icon.info,.alert90s-icon.question{background-color:#60a5fa}.alert90s-icon.success{background-color:#4ade80}.alert90s-title{color:#1a1a1a;font-size:1.5rem;font-weight:900;letter-spacing:.1em;line-height:1.2;margin:0 0 .5rem;text-transform:uppercase}.alert90s-message{color:#475569;font-weight:700}.alert90s-html,.alert90s-message{font-size:.875rem;margin:0 0 1.5rem;max-width:100%}.alert90s-html{color:#1a1a1a;line-height:1.5}.alert90s-box[dir=rtl] .alert90s-html{text-align:right}.alert90s-html a{color:#2563eb;font-weight:700;text-decoration:underline;text-decoration-thickness:2px}.alert90s-html a:hover{background-color:#bfdbfe}.alert90s-html b,.alert90s-html strong{font-weight:900}.alert90s-input-container{margin-bottom:1.5rem;width:100%}.alert90s-input{background-color:#f8fafc;border:4px solid #000;box-shadow:inset 4px 4px 0 0 rgba(0,0,0,.05);font-family:inherit;font-size:1rem;font-weight:700;outline:none;padding:.75rem;transition:background-color .2s;width:100%}.alert90s-input:focus{background-color:#fff;border-color:#2563eb}textarea.alert90s-input{min-height:100px;resize:vertical}select.alert90s-select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#000 0),linear-gradient(135deg,#000 50%,transparent 0);background-position:calc(100% - 20px) calc(1em + 2px),calc(100% - 15px) calc(1em + 2px);background-repeat:no-repeat;background-size:5px 5px,5px 5px;cursor:pointer}.alert90s-radio-group{align-items:flex-start;display:flex;flex-direction:column;gap:.5rem;width:100%}.alert90s-radio-label{align-items:center;cursor:pointer;display:flex;font-size:1rem;font-weight:700;gap:.75rem}.alert90s-radio-label input[type=radio]{appearance:none;background-color:#f8fafc;border:4px solid #000;border-radius:50%;cursor:pointer;height:1.25rem;margin:0;position:relative;width:1.25rem}.alert90s-radio-label input[type=radio]:checked{background-color:#000;box-shadow:inset 0 0 0 4px #fff}.alert90s-checkbox-label{align-items:center;cursor:pointer;display:flex;font-size:1rem;font-weight:700;gap:.75rem}.alert90s-checkbox-label input[type=checkbox]{appearance:none;background-color:#f8fafc;border:4px solid #000;cursor:pointer;height:1.25rem;margin:0;position:relative;width:1.25rem}.alert90s-checkbox-label input[type=checkbox]:checked{background-color:#000}.alert90s-checkbox-label input[type=checkbox]:checked:after{color:#fff;content:"✔";font-size:.8rem;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.alert90s-toggle-label{align-items:center;cursor:pointer;display:flex;font-size:1rem;font-weight:700;gap:.75rem}.alert90s-toggle-label input[type=checkbox]{display:none}.alert90s-toggle-slider{background-color:#f87171;border:4px solid #000;box-shadow:inset 3px 3px 0 0 rgba(0,0,0,.1);height:1.5rem;position:relative;transition:background-color .2s;width:3rem}.alert90s-toggle-slider:before{background-color:#fff;border-right:4px solid #000;content:"";height:100%;left:0;position:absolute;top:0;transition:transform .2s;width:1rem}.alert90s-toggle-label input[type=checkbox]:checked+.alert90s-toggle-slider{background-color:#4ade80}.alert90s-toggle-label input[type=checkbox]:checked+.alert90s-toggle-slider:before{border-left:4px solid #000;transform:translateX(1.5rem)}.alert90s-validation-message{background-color:#fef2f2;border:4px solid #000;border-left:8px solid #ef4444;color:#ef4444;display:none;font-size:.875rem;font-weight:700;margin-bottom:1.5rem;padding:.75rem;text-align:left;width:100%}.alert90s-box[dir=rtl] .alert90s-validation-message{border-left-color:#000;border-left-width:4px;border-right-color:#ef4444;border-right-width:8px;text-align:right}.alert90s-actions{display:flex;flex-direction:column;gap:1rem;justify-content:center;width:100%}@media (min-width:640px){.alert90s-actions{flex-direction:row}}.alert90s-button{align-items:center;background-color:#fff;border:4px solid #000;box-shadow:4px 4px 0 0 #000;color:#000;cursor:pointer;display:flex;font-family:inherit;font-size:.875rem;font-weight:900;gap:.5rem;justify-content:center;letter-spacing:.1em;margin:0;padding:.75rem 1rem;text-transform:uppercase;transition:background-color .1s;width:100%}@media (min-width:640px){.alert90s-button{flex:1;min-width:100px;width:auto}}.alert90s-button:active{box-shadow:0 0 0 0 #000;transform:translate(4px,4px)}.alert90s-button:focus{outline:2px dashed #000;outline-offset:4px}.alert90s-button.cancel{background-color:#f87171}.alert90s-button.cancel:hover{background-color:#fca5a5}.alert90s-button.deny{background-color:#fb923c}.alert90s-button.deny:hover{background-color:#fdba74}.alert90s-button.confirm{background-color:#4ade80}.alert90s-button.confirm:hover{background-color:#86efac}.alert90s-footer{border-top:4px solid #000;color:#475569;font-size:.75rem;font-weight:700;margin-top:1.5rem;padding-top:1rem;width:100%}.alert90s-footer a{color:#2563eb;text-decoration:underline;text-decoration-thickness:2px}.alert90s-footer a:hover{background-color:#bfdbfe}.alert90s-progress-bar{animation:alert90s-progress linear forwards;background-color:#000;bottom:0;height:6px;left:0;position:absolute;width:100%}.alert90s-loader{display:flex;padding:1rem 0}.alert90s-loader,.alert90s-spinner{align-items:center;justify-content:center}.alert90s-spinner{display:inline-flex}.alert90s-spinner.hourglass{animation:alert90s-hourglass 2s ease-in-out infinite;font-size:2.5rem;line-height:1}.alert90s-spinner.ascii{font-family:monospace;font-size:2rem;font-weight:700}.alert90s-spinner.ascii:after{animation:alert90s-ascii .5s steps(4) infinite;content:"|"}.alert90s-spinner.blinking{font-family:monospace;font-size:1.5rem;font-weight:700;letter-spacing:.1em}.alert90s-spinner.blinking .cursor{animation:alert90s-blink 1s step-end infinite}.alert90s-spinner.progress{background-color:#cbd5e1;border:2px solid #000;box-shadow:inset 2px 2px 0 0 #64748b,inset -2px -2px 0 0 #f8fafc;height:24px;overflow:hidden;padding:2px;position:relative;width:200px}.alert90s-spinner.progress:before{animation:alert90s-marquee 1.5s linear infinite;background-color:#1d4ed8;background-image:repeating-linear-gradient(90deg,#1d4ed8,#1d4ed8 10px,transparent 0,transparent 12px);content:"";height:calc(100% - 4px);left:0;position:absolute;top:2px;width:40%}@keyframes alert90s-hourglass{0%{transform:rotate(0)}25%{transform:rotate(180deg)}50%{transform:rotate(180deg)}75%{transform:rotate(1turn)}to{transform:rotate(1turn)}}@keyframes alert90s-ascii{0%{content:"|"}25%{content:"/"}50%{content:"-"}75%{content:"\\\\"}to{content:"|"}}@keyframes alert90s-blink{50%{opacity:0}}@keyframes alert90s-marquee{0%{transform:translateX(-100%)}to{transform:translateX(250px)}}@keyframes alert90s-progress{0%{width:100%}to{width:0}}@keyframes alert90s-fade-in{0%{opacity:0}to{opacity:1}}@keyframes alert90s-pop-in{0%{opacity:0;transform:scale(.95) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes alert90s-fade-out{0%{opacity:1;transform:scale(1) translateY(0)}to{opacity:0;transform:scale(.95) translateY(10px)}}@keyframes alert90s-toast-slide-in{0%{opacity:0;transform:scale(.9) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}.alert90s-toast-container{display:flex;gap:10px;padding:10px;pointer-events:none;position:fixed;z-index:10000}.alert90s-toast-top-start{flex-direction:column;left:0;top:0}.alert90s-toast-top{flex-direction:column;left:50%;top:0;transform:translateX(-50%)}.alert90s-toast-top-end{flex-direction:column;right:0;top:0}.alert90s-toast-center-start{flex-direction:column;left:0;top:50%;transform:translateY(-50%)}.alert90s-toast-center{flex-direction:column;left:50%;top:50%;transform:translate(-50%,-50%)}.alert90s-toast-center-end{flex-direction:column;right:0;top:50%;transform:translateY(-50%)}.alert90s-toast-bottom-start{bottom:0;flex-direction:column-reverse;left:0}.alert90s-toast-bottom{bottom:0;flex-direction:column-reverse;left:50%;transform:translateX(-50%)}.alert90s-toast-bottom-end{bottom:0;flex-direction:column-reverse;right:0}.alert90s-box.alert90s-toast{align-items:stretch;bottom:auto!important;box-shadow:6px 6px 0 0 #000;flex-direction:row;left:auto!important;margin:0;max-width:100%;min-width:250px;padding:0;pointer-events:auto;position:relative!important;right:auto!important;top:auto!important;transform:none!important;width:auto}.alert90s-toast .alert90s-header{display:none}.alert90s-toast .alert90s-body{align-items:center;flex-direction:row;gap:1rem;padding:1rem 1.5rem}.alert90s-toast .alert90s-icon{height:2.5rem;margin-bottom:0;width:2.5rem}.alert90s-toast .alert90s-icon img,.alert90s-toast .alert90s-icon svg{height:1.25rem;width:1.25rem}.alert90s-content-wrapper{align-items:center;display:flex;flex-direction:column;width:100%}.alert90s-toast .alert90s-content-wrapper{align-items:flex-start;text-align:left}.alert90s-box.alert90s-toast[dir=rtl] .alert90s-content-wrapper{align-items:flex-end;text-align:right}.alert90s-toast .alert90s-title{font-size:1rem;margin-bottom:.25rem}.alert90s-toast .alert90s-html,.alert90s-toast .alert90s-message{font-size:.875rem;margin-bottom:0}.alert90s-toast-close{align-items:center;background-color:#ef4444;border:2px solid #000;box-shadow:none;cursor:pointer;display:flex;height:1.5rem;justify-content:center;margin:0;margin-inline-start:auto;padding:0;transition:transform .1s,background-color .1s;width:1.5rem}.alert90s-toast-close span{color:#000;display:block;font-size:10px;font-weight:700;line-height:1}.alert90s-toast-close:hover{background-color:#f87171;transform:scale(1.1)}.btn90s{align-items:center;background-color:#fff;border:4px solid #000;box-shadow:4px 4px 0 0 #000;color:#000;cursor:pointer;display:inline-flex;font-family:inherit;font-size:1rem;font-weight:900;justify-content:center;letter-spacing:.05em;margin:.25rem;padding:.75rem 1.5rem;text-decoration:none;text-transform:uppercase;transition:transform .1s,box-shadow .1s,background-color .1s}.btn90s:active{box-shadow:0 0 0 0 #000;transform:translate(4px,4px)}.btn90s:focus-visible{outline:2px dashed #000;outline-offset:4px}.btn90s.primary{background-color:#00f0ff}.btn90s.primary:hover{background-color:#66f6ff}.btn90s.success{background-color:#4ade80}.btn90s.success:hover{background-color:#86efac}.btn90s.warning{background-color:#ffc900}.btn90s.warning:hover{background-color:#ffe066}.btn90s.danger{background-color:#ff90e8}.btn90s.danger:hover{background-color:#ffbaf0}.btn90s.dark{background-color:#000;border-color:#000;color:#fff}.btn90s.dark:hover{background-color:#333}.btn90s.sm{border-width:3px;box-shadow:3px 3px 0 0 #000;font-size:.875rem;padding:.5rem 1rem}.btn90s.sm:active{transform:translate(3px,3px)}.btn90s.lg{border-width:5px;box-shadow:6px 6px 0 0 #000;font-size:1.25rem;padding:1rem 2rem}.btn90s.lg:active{transform:translate(6px,6px)}.alert90s-tooltip{animation:tooltip-pop .15s cubic-bezier(.175,.885,.32,1.275) forwards;background-color:#fff;border:3px solid #000;box-shadow:4px 4px 0 0 #000;color:#000;display:none;font-family:inherit;font-size:.875rem;font-weight:700;max-width:300px;padding:.5rem 1rem;pointer-events:none;position:absolute;white-space:pre-wrap;z-index:100000}.alert90s-tooltip.show{display:block}.alert90s-tooltip.c-yellow{background-color:#fef08a}.alert90s-tooltip.c-cyan{background-color:#00f0ff}.alert90s-tooltip.c-pink{background-color:#ff90e8}.alert90s-tooltip.c-base{background-color:#fff}.alert90s-tooltip.c-dark{background-color:#000;color:#fff}.alert90s-tooltip:after{border-style:solid;content:"";height:0;position:absolute;width:0}.alert90s-tooltip.pos-top:after{border-color:#000 transparent transparent;border-width:8px 8px 0;bottom:-8px;left:50%;margin-left:-8px}.alert90s-tooltip.pos-bottom:after{border-color:transparent transparent #000;border-width:0 8px 8px;left:50%;margin-left:-8px;top:-8px}.alert90s-tooltip.pos-left:after{border-color:transparent transparent transparent #000;border-width:8px 0 8px 8px;margin-top:-8px;right:-8px;top:50%}.alert90s-tooltip.pos-right:after{border-color:transparent #000 transparent transparent;border-width:8px 8px 8px 0;left:-8px;margin-top:-8px;top:50%}@keyframes tooltip-pop{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}');class e{static getOptions(){return this.currentOptions||{}}static getPopup(){return this.currentPopup||null}static getTimerLeft(){if(!this.timerEnd)return;const e=this.timerEnd-Date.now();return e>0?e:0}static isLoading(){const e=this.getPopup();if(!e)return!1;const t=e.querySelector(".alert90s-actions"),o=e.querySelector(".alert90s-loader");return t&&"none"===t.style.display||!!o}static showLoading(){const t=this.getPopup();if(t){const o=t.querySelector(".alert90s-actions");o&&(o.style.display="none");let r=t.querySelector(".alert90s-loader");if(!r){r=document.createElement("div"),r.className="alert90s-loader";const n=e.currentOptions&&e.currentOptions.loaderType||"hourglass";r.innerHTML="ascii"===n?'<div class="alert90s-spinner ascii"></div>':"blinking"===n?'<div class="alert90s-spinner blinking">LOADING<span class="cursor">_</span></div>':"progress"===n?'<div class="alert90s-spinner progress"></div>':'<div class="alert90s-spinner hourglass">⏳</div>',o&&o.parentNode?o.parentNode.insertBefore(r,o):t.querySelector(".alert90s-body").appendChild(r)}}}static hideLoading(){const e=this.getPopup();if(e){const t=e.querySelector(".alert90s-actions");t&&(t.style.display="");const o=e.querySelector(".alert90s-loader");o&&o.remove()}}static showValidationMessage(e){const t=this.getPopup();if(t){let o=t.querySelector(".alert90s-validation-message");if(!o){o=document.createElement("div"),o.className="alert90s-validation-message";const e=t.querySelector(".alert90s-actions");e&&e.parentNode?e.parentNode.insertBefore(o,e):t.querySelector(".alert90s-body").appendChild(o)}o.innerHTML=e,o.style.display="block"}}static resetValidationMessage(){const e=this.getPopup();if(e){const t=e.querySelector(".alert90s-validation-message");t&&(t.style.display="none")}}static getToastContainer(e){const t=`alert90s-toast-container alert90s-toast-${e}`;let o=document.querySelector(`.${t.replace(/ /g,".")}`);return o||(o=document.createElement("div"),o.className=t,document.body.appendChild(o)),o}static fire(e={}){return this.show(e)}static show(t={}){return new Promise(o=>{"string"==typeof t&&(t={title:t}),this.currentOptions=t;const r={title:void 0!==t.title?t.title:"",text:t.message||t.text||"",html:t.html||"",icon:t.type||t.icon||"",iconHtml:t.iconHtml||"",showConfirmButton:!1!==t.showConfirmButton,showCancelButton:t.showCancelButton||!1,showDenyButton:t.showDenyButton||!1,showCloseButton:void 0===t.showCloseButton||t.showCloseButton,loaderType:t.loaderType||"hourglass",confirmButtonText:t.confirmText||t.confirmButtonText||"OK",cancelButtonText:t.cancelText||t.cancelButtonText||"Cancel",denyButtonText:t.denyText||t.denyButtonText||"No",confirmButtonColor:t.confirmButtonColor||"",cancelButtonColor:t.cancelButtonColor||"",denyButtonColor:t.denyButtonColor||"",background:t.background||"",color:t.color||"",titleColor:t.titleColor||"",iconColor:t.iconColor||"",confirmButtonAriaLabel:t.confirmButtonAriaLabel||"",cancelButtonAriaLabel:t.cancelButtonAriaLabel||"",denyButtonAriaLabel:t.denyButtonAriaLabel||"",focusConfirm:!1!==t.focusConfirm,footer:t.footer||"",imageUrl:t.imageUrl||"",imageWidth:t.imageWidth||null,imageHeight:t.imageHeight||null,imageAlt:t.imageAlt||"",input:t.input||null,inputPlaceholder:t.inputPlaceholder||"",inputValue:t.inputValue||"",inputOptions:t.inputOptions||{},inputAttributes:t.inputAttributes||{},showLoaderOnConfirm:t.showLoaderOnConfirm||!1,preConfirm:t.preConfirm||null,toast:t.toast||!1,draggable:t.draggable||!1,position:t.position||(t.toast?"top-end":"center"),allowOutsideClick:void 0===t.allowOutsideClick||t.allowOutsideClick,dir:t.dir||"auto",showClass:t.showClass||{popup:"alert90s-pop-in"},hideClass:t.hideClass||{popup:"alert90s-fade-out"},timer:t.timer||null,timerProgressBar:t.timerProgressBar||!1,didOpen:t.didOpen||null,willClose:t.willClose||null};let n=null;r.toast||(n=document.createElement("div"),n.className=`alert90s-overlay alert90s-pos-${r.position}`,n.addEventListener("mousedown",e=>{if(e.target===n){("function"==typeof r.allowOutsideClick?r.allowOutsideClick():r.allowOutsideClick)&&h({isConfirmed:!1,isDenied:!1,isDismissed:!0,dismiss:"backdrop"})}}));const a=document.createElement("div");a.className="alert90s-box",r.toast&&a.classList.add("alert90s-toast"),"rtl"===document.dir||"rtl"===r.dir||r.position.includes("start")?a.setAttribute("dir","auto"===r.dir?document.dir||"ltr":r.dir):a.setAttribute("dir",r.dir),r.showClass.popup&&"alert90s-pop-in"!==r.showClass.popup&&(a.style.animation="none",a.className=`alert90s-box ${r.showClass.popup}`),r.background&&(a.style.backgroundColor=r.background),r.color&&(a.style.color=r.color),r.draggable&&a.classList.add("is-draggable"),r.toast||(this.currentPopup=a);const i=document.createElement("div");i.className="alert90s-body";const s=document.createElement("div");s.className="alert90s-header",r.draggable&&s.classList.add("draggable");let l="";if(r.showCloseButton&&(l='\n <button class="alert90s-close-btn" id="alert90s-close" aria-label="Close">\n <span>✕</span>\n </button>\n '),s.innerHTML=`\n <div class="alert90s-header-left">\n <div class="alert90s-header-dot"></div>\n <div class="alert90s-header-dot"></div>\n <div class="alert90s-header-dot"></div>\n </div>\n <div class="alert90s-header-right">\n <span class="alert90s-header-title">SYS.REQ</span>\n ${l}\n </div>\n `,r.draggable){let e,t,o,r,n=!1;s.addEventListener("mousedown",i=>{if(i.target.closest("#alert90s-close"))return;n=!0,e=i.clientX,t=i.clientY;const s=a.getBoundingClientRect();a.style.transform="none",a.style.animation="none",o=s.left,r=s.top,a.style.left=o+"px",a.style.top=r+"px",a.style.margin="0",document.body.style.userSelect="none"}),document.addEventListener("mousemove",i=>{n&&(a.style.left=o+(i.clientX-e)+"px",a.style.top=r+(i.clientY-t)+"px")}),document.addEventListener("mouseup",()=>{n&&(n=!1,document.body.style.userSelect="")})}let c=null;if(r.timer&&r.timerProgressBar&&(c=document.createElement("div"),c.className="alert90s-progress-bar",c.style.animationDuration=`${r.timer}ms`,a.appendChild(c)),r.imageUrl){const e=document.createElement("div");e.className="alert90s-image-container";const t=document.createElement("img");t.src=r.imageUrl,r.imageAlt&&(t.alt=r.imageAlt);let o="";r.imageWidth&&(o+=`width: ${r.imageWidth}px; max-width: 100%; `),r.imageHeight&&(o+=`height: ${r.imageHeight}px; `),o&&e.setAttribute("style",o),e.appendChild(t),i.appendChild(e)}if(r.icon){const e=document.createElement("div"),t="error"===r.icon?"danger":r.icon;e.className=`alert90s-icon ${t}`;let o="";if(r.iconHtml?o=`<div class="alert90s-icon-custom">${r.iconHtml}</div>`:"warning"===r.icon?o='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>':"danger"===r.icon||"error"===r.icon?o='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>':"info"===r.icon?o='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>':"success"===r.icon?o='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>':"question"===r.icon&&(o='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>'),e.innerHTML=o,r.iconColor&&(e.style.color=r.iconColor,e.style.borderColor=r.iconColor,!r.iconHtml)){const t=e.querySelector("svg");t&&(t.style.stroke=r.iconColor)}o&&i.appendChild(e)}const d=document.createElement("div");if(d.className="alert90s-content-wrapper",r.title){const e=document.createElement("h2");e.className="alert90s-title",e.innerHTML=r.title,r.titleColor&&(e.style.color=r.titleColor),d.appendChild(e)}if(r.html){const e=document.createElement("div");e.className="alert90s-html",e.innerHTML=r.html,r.color&&(e.style.color=r.color),d.appendChild(e)}else if(r.text){const e=document.createElement("p");e.className="alert90s-message",e.textContent=r.text,r.color&&(e.style.color=r.color),d.appendChild(e)}if((r.title||r.html||r.text)&&i.appendChild(d),r.toast&&r.showCloseButton){const e=document.createElement("button");e.className="alert90s-toast-close",e.innerHTML="<span>✕</span>",e.onclick=()=>h({isConfirmed:!1,isDenied:!1,isDismissed:!0,dismiss:"close"}),i.appendChild(e)}let p=null;if(r.input){const e=document.createElement("div");if(e.className="alert90s-input-container","select"===r.input){if(p=document.createElement("select"),p.className="alert90s-input alert90s-select",r.inputPlaceholder){const e=document.createElement("option");e.value="",e.textContent=r.inputPlaceholder,e.disabled=!0,e.selected=!0,p.appendChild(e)}for(const[e,t]of Object.entries(r.inputOptions)){const o=document.createElement("option");o.value=e,o.textContent=t,e===r.inputValue&&(o.selected=!0),p.appendChild(o)}e.appendChild(p)}else if("radio"===r.input){const t=document.createElement("div");t.className="alert90s-radio-group";for(const[e,o]of Object.entries(r.inputOptions)){const n=document.createElement("label");n.className="alert90s-radio-label";const a=document.createElement("input");a.type="radio",a.name="alert90s-radio",a.value=e,e===r.inputValue&&(a.checked=!0);const i=document.createElement("span");i.textContent=o,n.appendChild(a),n.appendChild(i),t.appendChild(n)}p=t,e.appendChild(t)}else if("checkbox"===r.input||"toggle"===r.input){const t=document.createElement("label");if(t.className="toggle"===r.input?"alert90s-toggle-label":"alert90s-checkbox-label",p=document.createElement("input"),p.type="checkbox",p.checked=!!r.inputValue,"toggle"===r.input){const e=document.createElement("div");if(e.className="alert90s-toggle-slider",t.appendChild(p),t.appendChild(e),r.inputPlaceholder){const e=document.createElement("span");e.textContent=r.inputPlaceholder,t.appendChild(e)}}else{const e=document.createElement("span");e.textContent=r.inputPlaceholder||"Check me",t.appendChild(p),t.appendChild(e)}e.appendChild(t)}else"textarea"===r.input?(p=document.createElement("textarea"),p.className="alert90s-input",r.inputPlaceholder&&(p.placeholder=r.inputPlaceholder),r.inputValue&&(p.value=r.inputValue),e.appendChild(p)):(p=document.createElement("input"),p.type=r.input,p.className="alert90s-input",r.inputPlaceholder&&(p.placeholder=r.inputPlaceholder),r.inputValue&&(p.value=r.inputValue),e.appendChild(p));if(r.inputAttributes&&p&&!["radio"].includes(r.input))for(const[e,t]of Object.entries(r.inputAttributes))p.setAttribute(e,t);i.appendChild(e)}const m=document.createElement("div");m.className="alert90s-actions";let u=null,f=null;const h=e=>{f&&clearTimeout(f),r.willClose&&r.willClose(),a.style.animation="none","alert90s-fade-out"===r.hideClass.popup?(a.style.animation="alert90s-fade-out 0.2s forwards",n&&(n.style.transition="opacity 0.2s",n.style.opacity="0")):a.className=`alert90s-box ${r.hideClass.popup}`,setTimeout(()=>{r.toast?a.parentNode&&a.parentNode.removeChild(a):n&&document.body.contains(n)&&document.body.removeChild(n),o(e)},200)},g=async()=>{let t=!0;if("radio"===r.input){const e=p.querySelector('input[type="radio"]:checked');t=e?e.value:null}else"checkbox"===r.input||"toggle"===r.input?t=p.checked:p&&(t=p.value);if(r.preConfirm){e.resetValidationMessage(),r.showLoaderOnConfirm&&e.showLoading();try{const o=await Promise.resolve(r.preConfirm(t));if(!1===o)return void e.hideLoading();void 0!==o&&o!==t&&(t=o);const n=a.querySelector(".alert90s-validation-message");if(n&&"block"===n.style.display)return void e.hideLoading()}catch(t){return e.showValidationMessage(`Request failed: ${t}`),void e.hideLoading()}}h({isConfirmed:!0,isDenied:!1,isDismissed:!1,value:t})};if(r.showCancelButton){const e=document.createElement("button");e.className="alert90s-button cancel",e.innerHTML=r.cancelButtonText,r.cancelButtonAriaLabel&&e.setAttribute("aria-label",r.cancelButtonAriaLabel),r.cancelButtonColor&&(e.style.backgroundColor=r.cancelButtonColor),e.onclick=()=>h({isConfirmed:!1,isDenied:!1,isDismissed:!0,dismiss:"cancel"}),m.appendChild(e)}if(r.showDenyButton){const e=document.createElement("button");e.className="alert90s-button deny",e.innerHTML=r.denyButtonText,r.denyButtonAriaLabel&&e.setAttribute("aria-label",r.denyButtonAriaLabel),r.denyButtonColor&&(e.style.backgroundColor=r.denyButtonColor),e.onclick=()=>h({isConfirmed:!1,isDenied:!0,isDismissed:!1}),m.appendChild(e)}if(r.showConfirmButton){const e=document.createElement("button");e.className="alert90s-button confirm",e.innerHTML=r.confirmButtonText,r.confirmButtonAriaLabel&&e.setAttribute("aria-label",r.confirmButtonAriaLabel),r.confirmButtonColor&&(e.style.backgroundColor=r.confirmButtonColor),e.onclick=g,m.appendChild(e),u=e}if((r.showCancelButton||r.showDenyButton||r.showConfirmButton)&&i.appendChild(m),r.footer){const e=document.createElement("div");e.className="alert90s-footer",e.innerHTML=r.footer,i.appendChild(e)}if(a.appendChild(s),a.appendChild(i),r.toast){const t=e.getToastContainer(r.position);a.style.animation="alert90s-toast-slide-in 0.3s ease-out",t.appendChild(a)}else n.appendChild(a);if(r.showCloseButton&&!r.toast){const e=s.querySelector("#alert90s-close");e&&(e.onclick=()=>h({isConfirmed:!1,isDenied:!1,isDismissed:!0,dismiss:"close"}))}r.toast||document.body.appendChild(n),r.focusConfirm&&u&&setTimeout(()=>{p?p.focus():u.focus()},50),r.didOpen&&setTimeout(()=>{r.didOpen()},0),r.timer&&(this.timerEnd=Date.now()+r.timer,f=setTimeout(()=>{h({isConfirmed:!1,isDenied:!1,isDismissed:!0,dismiss:"timer"})},r.timer))})}static initTooltips(){this._tooltipsInitialized||(this._tooltipsInitialized=!0,this._tooltipEl=document.createElement("div"),this._tooltipEl.className="alert90s-tooltip",document.body.appendChild(this._tooltipEl),document.addEventListener("mouseover",this._handleTooltipMouseOver.bind(this)),document.addEventListener("mouseout",this._handleTooltipMouseOut.bind(this)),document.addEventListener("focusin",this._handleTooltipMouseOver.bind(this)),document.addEventListener("focusout",this._handleTooltipMouseOut.bind(this)))}static _handleTooltipMouseOver(e){const t=e.target.closest("[data-alert90s-tooltip]");if(!t)return;const o=t.getAttribute("data-alert90s-tooltip");if(!o)return;const r=t.getAttribute("data-alert90s-position")||"top",n=t.getAttribute("data-alert90s-color")||"yellow";this._tooltipEl.innerHTML=o,this._tooltipEl.className=`alert90s-tooltip pos-${r} c-${n} show`;const a=t.getBoundingClientRect(),i=this._tooltipEl.getBoundingClientRect(),s=10;let l=0,c=0;switch(r){case"top":l=a.top-i.height-s,c=a.left+a.width/2-i.width/2;break;case"bottom":l=a.bottom+s,c=a.left+a.width/2-i.width/2;break;case"left":l=a.top+a.height/2-i.height/2,c=a.left-i.width-s;break;case"right":l=a.top+a.height/2-i.height/2,c=a.right+s}c<s&&(c=s),l<s&&(l=s),c+i.width>window.innerWidth-s&&(c=window.innerWidth-i.width-s),this._tooltipEl.style.top=`${l+window.scrollY}px`,this._tooltipEl.style.left=`${c+window.scrollX}px`}static _handleTooltipMouseOut(e){const t=e.target.closest("[data-alert90s-tooltip]");t&&setTimeout(()=>{this._tooltipEl.matches(":hover")||t.matches(":hover")||t.contains(document.activeElement)||this._tooltipEl.classList.remove("show")},10)}}return"undefined"!=typeof window&&(window.Alert90s=e,document.addEventListener("DOMContentLoaded",()=>{e.initTooltips()})),e});
|
|
1
|
+
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).Alert90s=t()}(this,function(){"use strict";!function(e,t){void 0===t&&(t={});var o=t.insertAt;if("undefined"!=typeof document){var r=document.head||document.getElementsByTagName("head")[0],a=document.createElement("style");a.type="text/css","top"===o&&r.firstChild?r.insertBefore(a,r.firstChild):r.appendChild(a),a.styleSheet?a.styleSheet.cssText=e:a.appendChild(document.createTextNode(e))}}('.alert90s-overlay{animation:alert90s-fade-in .2s ease-out forwards;backdrop-filter:blur(4px);background-color:rgba(0,0,0,.6);box-sizing:border-box;display:flex;font-family:inherit;inset:0;padding:1rem;position:fixed;z-index:99999}.alert90s-overlay.alert90s-pos-center{align-items:center;justify-content:center}.alert90s-overlay.alert90s-pos-top{align-items:flex-start;justify-content:center}.alert90s-overlay.alert90s-pos-top-start{align-items:flex-start;justify-content:flex-start}.alert90s-overlay.alert90s-pos-top-end{align-items:flex-start;justify-content:flex-end}.alert90s-overlay.alert90s-pos-bottom{align-items:flex-end;justify-content:center}.alert90s-overlay.alert90s-pos-bottom-start{align-items:flex-end;justify-content:flex-start}.alert90s-overlay.alert90s-pos-bottom-end{align-items:flex-end;justify-content:flex-end}.alert90s-overlay.alert90s-pos-center-start{align-items:center;justify-content:flex-start}.alert90s-overlay.alert90s-pos-center-end{align-items:center;justify-content:flex-end}.alert90s-overlay *{box-sizing:border-box}.alert90s-box{align-items:center;animation:alert90s-pop-in .3s cubic-bezier(.175,.885,.32,1.275) forwards;background-color:#fff;border:4px solid #000;box-shadow:12px 12px 0 0 #000;display:flex;flex-direction:column;max-height:95vh;max-width:28rem;position:relative;text-align:center;width:100%}.alert90s-box[dir=rtl]{text-align:right}.alert90s-box.is-draggable{position:absolute}.alert90s-body{align-items:center;display:flex;flex-direction:column;overflow-y:auto;padding:3rem 2rem 2rem;scrollbar-width:none;width:100%}.alert90s-body::-webkit-scrollbar{display:none}.alert90s-header{align-items:center;background-color:#e2e8f0;border-bottom:4px solid #000;display:flex;height:2rem;justify-content:space-between;left:0;padding:0 .5rem;position:absolute;top:0;width:100%;z-index:10}.alert90s-header.draggable{cursor:grab}.alert90s-header.draggable:active{cursor:grabbing}.alert90s-header-left{display:flex;gap:.25rem}.alert90s-box[dir=rtl] .alert90s-header{flex-direction:row-reverse}.alert90s-header-dot{background-color:#fff;border:2px solid #000;height:.75rem;width:.75rem}.alert90s-header-right{align-items:center;display:flex;gap:.5rem;z-index:11}.alert90s-box[dir=rtl] .alert90s-header-right{flex-direction:row-reverse}.alert90s-header-title{font-size:10px;font-weight:700;letter-spacing:.1em;pointer-events:none;text-transform:uppercase}.alert90s-close-btn{align-items:center;background-color:#ef4444;border:2px solid #000;box-shadow:none;cursor:pointer;display:flex;height:1.25rem;justify-content:center;margin:0;padding:0;transition:transform .1s,background-color .1s;width:1.25rem}.alert90s-close-btn:hover{background-color:#f87171;transform:scale(1.1)}.alert90s-close-btn span{color:#000;font-size:14px;font-weight:700;line-height:1}.alert90s-image-container{align-items:center;background:#fff;border:4px solid #000;box-shadow:4px 4px 0 0 #000;display:flex;justify-content:center;margin-bottom:1rem;overflow:hidden;width:100%}.alert90s-image-container img{display:block;height:auto;max-width:100%}.alert90s-icon{align-items:center;border:4px solid #000;border-radius:9999px;box-shadow:4px 4px 0 0 #000;display:flex;flex-shrink:0;height:4rem;justify-content:center;margin-bottom:1rem;width:4rem}.alert90s-icon img,.alert90s-icon svg{height:2rem;width:2rem}.alert90s-icon-custom{font-size:2.25rem;font-weight:700;line-height:1}.alert90s-icon.warning{background-color:#facc15}.alert90s-icon.danger,.alert90s-icon.error{background-color:#ef4444;color:#fff}.alert90s-icon.info,.alert90s-icon.question{background-color:#60a5fa}.alert90s-icon.success{background-color:#4ade80}.alert90s-title{color:#1a1a1a;font-size:1.5rem;font-weight:900;letter-spacing:.1em;line-height:1.2;margin:0 0 .5rem;text-transform:uppercase}.alert90s-message{color:#475569;font-weight:700}.alert90s-html,.alert90s-message{font-size:.875rem;margin:0 0 1.5rem;max-width:100%}.alert90s-html{color:#1a1a1a;line-height:1.5}.alert90s-box[dir=rtl] .alert90s-html{text-align:right}.alert90s-html a{color:#2563eb;font-weight:700;text-decoration:underline;text-decoration-thickness:2px}.alert90s-html a:hover{background-color:#bfdbfe}.alert90s-html b,.alert90s-html strong{font-weight:900}.alert90s-input-container{margin-bottom:1.5rem;width:100%}.alert90s-input{background-color:#f8fafc;border:4px solid #000;box-shadow:inset 4px 4px 0 0 rgba(0,0,0,.05);font-family:inherit;font-size:1rem;font-weight:700;outline:none;padding:.75rem;transition:background-color .2s;width:100%}.alert90s-input:focus{background-color:#fff;border-color:#2563eb}textarea.alert90s-input{min-height:100px;resize:vertical}select.alert90s-select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,#000 0),linear-gradient(135deg,#000 50%,transparent 0);background-position:calc(100% - 20px) calc(1em + 2px),calc(100% - 15px) calc(1em + 2px);background-repeat:no-repeat;background-size:5px 5px,5px 5px;cursor:pointer}.alert90s-radio-group{align-items:flex-start;display:flex;flex-direction:column;gap:.5rem;width:100%}.alert90s-radio-label{align-items:center;cursor:pointer;display:flex;font-size:1rem;font-weight:700;gap:.75rem}.alert90s-radio-label input[type=radio]{appearance:none;background-color:#f8fafc;border:4px solid #000;border-radius:50%;cursor:pointer;height:1.25rem;margin:0;position:relative;width:1.25rem}.alert90s-radio-label input[type=radio]:checked{background-color:#000;box-shadow:inset 0 0 0 4px #fff}.alert90s-checkbox-label{align-items:center;cursor:pointer;display:flex;font-size:1rem;font-weight:700;gap:.75rem}.alert90s-checkbox-label input[type=checkbox]{appearance:none;background-color:#f8fafc;border:4px solid #000;cursor:pointer;height:1.25rem;margin:0;position:relative;width:1.25rem}.alert90s-checkbox-label input[type=checkbox]:checked{background-color:#000}.alert90s-checkbox-label input[type=checkbox]:checked:after{color:#fff;content:"✔";font-size:.8rem;left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.alert90s-toggle-label{align-items:center;cursor:pointer;display:flex;font-size:1rem;font-weight:700;gap:.75rem}.alert90s-toggle-label input[type=checkbox]{display:none}.alert90s-toggle-slider{background-color:#f87171;border:4px solid #000;box-shadow:inset 3px 3px 0 0 rgba(0,0,0,.1);height:1.5rem;position:relative;transition:background-color .2s;width:3rem}.alert90s-toggle-slider:before{background-color:#fff;border-right:4px solid #000;content:"";height:100%;left:0;position:absolute;top:0;transition:transform .2s;width:1rem}.alert90s-toggle-label input[type=checkbox]:checked+.alert90s-toggle-slider{background-color:#4ade80}.alert90s-toggle-label input[type=checkbox]:checked+.alert90s-toggle-slider:before{border-left:4px solid #000;transform:translateX(1.5rem)}.alert90s-validation-message{background-color:#fef2f2;border:4px solid #000;border-left:8px solid #ef4444;color:#ef4444;display:none;font-size:.875rem;font-weight:700;margin-bottom:1.5rem;padding:.75rem;text-align:left;width:100%}.alert90s-box[dir=rtl] .alert90s-validation-message{border-left-color:#000;border-left-width:4px;border-right-color:#ef4444;border-right-width:8px;text-align:right}.alert90s-actions{display:flex;flex-direction:column;gap:1rem;justify-content:center;width:100%}@media (min-width:640px){.alert90s-actions{flex-direction:row}}.alert90s-button{align-items:center;background-color:#fff;border:4px solid #000;box-shadow:4px 4px 0 0 #000;color:#000;cursor:pointer;display:flex;font-family:inherit;font-size:.875rem;font-weight:900;gap:.5rem;justify-content:center;letter-spacing:.1em;margin:0;padding:.75rem 1rem;text-transform:uppercase;transition:background-color .1s;width:100%}@media (min-width:640px){.alert90s-button{flex:1;min-width:100px;width:auto}}.alert90s-button:active{box-shadow:0 0 0 0 #000;transform:translate(4px,4px)}.alert90s-button:focus{outline:2px dashed #000;outline-offset:4px}.alert90s-button.cancel{background-color:#f87171}.alert90s-button.cancel:hover{background-color:#fca5a5}.alert90s-button.deny{background-color:#fb923c}.alert90s-button.deny:hover{background-color:#fdba74}.alert90s-button.confirm{background-color:#4ade80}.alert90s-button.confirm:hover{background-color:#86efac}.alert90s-footer{border-top:4px solid #000;color:#475569;font-size:.75rem;font-weight:700;margin-top:1.5rem;padding-top:1rem;width:100%}.alert90s-footer a{color:#2563eb;text-decoration:underline;text-decoration-thickness:2px}.alert90s-footer a:hover{background-color:#bfdbfe}.alert90s-progress-bar{animation:alert90s-progress linear forwards;background-color:#000;bottom:0;height:6px;left:0;position:absolute;width:100%}.alert90s-loader{display:flex;padding:1rem 0}.alert90s-loader,.alert90s-spinner{align-items:center;justify-content:center}.alert90s-spinner{display:inline-flex}.alert90s-spinner.hourglass{animation:alert90s-hourglass 2s ease-in-out infinite;font-size:2.5rem;line-height:1}.alert90s-spinner.ascii{font-family:monospace;font-size:2rem;font-weight:700}.alert90s-spinner.ascii:after{animation:alert90s-ascii .5s steps(4) infinite;content:"|"}.alert90s-spinner.blinking{font-family:monospace;font-size:1.5rem;font-weight:700;letter-spacing:.1em}.alert90s-spinner.blinking .cursor{animation:alert90s-blink 1s step-end infinite}.alert90s-spinner.progress{background-color:#cbd5e1;border:2px solid #000;box-shadow:inset 2px 2px 0 0 #64748b,inset -2px -2px 0 0 #f8fafc;height:24px;overflow:hidden;padding:2px;position:relative;width:200px}.alert90s-spinner.progress:before{animation:alert90s-marquee 1.5s linear infinite;background-color:#1d4ed8;background-image:repeating-linear-gradient(90deg,#1d4ed8,#1d4ed8 10px,transparent 0,transparent 12px);content:"";height:calc(100% - 4px);left:0;position:absolute;top:2px;width:40%}@keyframes alert90s-hourglass{0%{transform:rotate(0)}25%{transform:rotate(180deg)}50%{transform:rotate(180deg)}75%{transform:rotate(1turn)}to{transform:rotate(1turn)}}@keyframes alert90s-ascii{0%{content:"|"}25%{content:"/"}50%{content:"-"}75%{content:"\\\\"}to{content:"|"}}@keyframes alert90s-blink{50%{opacity:0}}@keyframes alert90s-marquee{0%{transform:translateX(-100%)}to{transform:translateX(250px)}}@keyframes alert90s-progress{0%{width:100%}to{width:0}}@keyframes alert90s-fade-in{0%{opacity:0}to{opacity:1}}@keyframes alert90s-pop-in{0%{opacity:0;transform:scale(.95) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes alert90s-fade-out{0%{opacity:1;transform:scale(1) translateY(0)}to{opacity:0;transform:scale(.95) translateY(10px)}}@keyframes alert90s-toast-slide-in{0%{opacity:0;transform:scale(.9) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}.alert90s-toast-container{display:flex;gap:10px;padding:10px;pointer-events:none;position:fixed;z-index:10000}.alert90s-toast-top-start{flex-direction:column;left:0;top:0}.alert90s-toast-top{flex-direction:column;left:50%;top:0;transform:translateX(-50%)}.alert90s-toast-top-end{flex-direction:column;right:0;top:0}.alert90s-toast-center-start{flex-direction:column;left:0;top:50%;transform:translateY(-50%)}.alert90s-toast-center{flex-direction:column;left:50%;top:50%;transform:translate(-50%,-50%)}.alert90s-toast-center-end{flex-direction:column;right:0;top:50%;transform:translateY(-50%)}.alert90s-toast-bottom-start{bottom:0;flex-direction:column-reverse;left:0}.alert90s-toast-bottom{bottom:0;flex-direction:column-reverse;left:50%;transform:translateX(-50%)}.alert90s-toast-bottom-end{bottom:0;flex-direction:column-reverse;right:0}.alert90s-box.alert90s-toast{align-items:stretch;bottom:auto!important;box-shadow:6px 6px 0 0 #000;flex-direction:row;left:auto!important;margin:0;max-width:100%;min-width:250px;padding:0;pointer-events:auto;position:relative!important;right:auto!important;top:auto!important;transform:none!important;width:auto}.alert90s-toast .alert90s-header{display:none}.alert90s-toast .alert90s-body{align-items:center;flex-direction:row;gap:1rem;padding:1rem 1.5rem}.alert90s-toast .alert90s-icon{height:2.5rem;margin-bottom:0;width:2.5rem}.alert90s-toast .alert90s-icon img,.alert90s-toast .alert90s-icon svg{height:1.25rem;width:1.25rem}.alert90s-content-wrapper{align-items:center;display:flex;flex-direction:column;width:100%}.alert90s-toast .alert90s-content-wrapper{align-items:flex-start;text-align:left}.alert90s-box.alert90s-toast[dir=rtl] .alert90s-content-wrapper{align-items:flex-end;text-align:right}.alert90s-toast .alert90s-title{font-size:1rem;margin-bottom:.25rem}.alert90s-toast .alert90s-html,.alert90s-toast .alert90s-message{font-size:.875rem;margin-bottom:0}.alert90s-toast-close{align-items:center;background-color:#ef4444;border:2px solid #000;box-shadow:none;cursor:pointer;display:flex;height:1.5rem;justify-content:center;margin:0;margin-inline-start:auto;padding:0;transition:transform .1s,background-color .1s;width:1.5rem}.alert90s-toast-close span{color:#000;display:block;font-size:10px;font-weight:700;line-height:1}.alert90s-toast-close:hover{background-color:#f87171;transform:scale(1.1)}.btn90s{align-items:center;background-color:#fff;border:4px solid #000;box-shadow:4px 4px 0 0 #000;color:#000;cursor:pointer;display:inline-flex;font-family:inherit;font-size:1rem;font-weight:900;justify-content:center;letter-spacing:.05em;margin:.25rem;padding:.75rem 1.5rem;text-decoration:none;text-transform:uppercase;transition:transform .1s,box-shadow .1s,background-color .1s}.btn90s:active{box-shadow:0 0 0 0 #000;transform:translate(4px,4px)}.btn90s:focus-visible{outline:2px dashed #000;outline-offset:4px}.btn90s.primary{background-color:#00f0ff}.btn90s.primary:hover{background-color:#66f6ff}.btn90s.success{background-color:#4ade80}.btn90s.success:hover{background-color:#86efac}.btn90s.warning{background-color:#ffc900}.btn90s.warning:hover{background-color:#ffe066}.btn90s.danger{background-color:#ff90e8}.btn90s.danger:hover{background-color:#ffbaf0}.btn90s.dark{background-color:#000;border-color:#000;color:#fff}.btn90s.dark:hover{background-color:#333}.btn90s.sm{border-width:3px;box-shadow:3px 3px 0 0 #000;font-size:.875rem;padding:.5rem 1rem}.btn90s.sm:active{transform:translate(3px,3px)}.btn90s.lg{border-width:5px;box-shadow:6px 6px 0 0 #000;font-size:1.25rem;padding:1rem 2rem}.btn90s.lg:active{transform:translate(6px,6px)}.alert90s-tooltip{animation:tooltip-pop .15s cubic-bezier(.175,.885,.32,1.275) forwards;background-color:#fff;border:3px solid #000;box-shadow:4px 4px 0 0 #000;color:#000;display:none;font-family:inherit;font-size:.875rem;font-weight:700;max-width:300px;padding:.5rem 1rem;pointer-events:none;position:absolute;white-space:pre-wrap;z-index:100000}.alert90s-tooltip.show{display:block}.alert90s-tooltip.c-yellow{background-color:#fef08a}.alert90s-tooltip.c-cyan{background-color:#00f0ff}.alert90s-tooltip.c-pink{background-color:#ff90e8}.alert90s-tooltip.c-base{background-color:#fff}.alert90s-tooltip.c-dark{background-color:#000;color:#fff}.alert90s-tooltip:after{border-style:solid;content:"";height:0;position:absolute;width:0}.alert90s-tooltip.pos-top:after{border-color:#000 transparent transparent;border-width:8px 8px 0;bottom:-8px;left:50%;margin-left:-8px}.alert90s-tooltip.pos-bottom:after{border-color:transparent transparent #000;border-width:0 8px 8px;left:50%;margin-left:-8px;top:-8px}.alert90s-tooltip.pos-left:after{border-color:transparent transparent transparent #000;border-width:8px 0 8px 8px;margin-top:-8px;right:-8px;top:50%}.alert90s-tooltip.pos-right:after{border-color:transparent #000 transparent transparent;border-width:8px 8px 8px 0;left:-8px;margin-top:-8px;top:50%}@keyframes tooltip-pop{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}.alert90s-dark.alert90s-box{background-color:#2a2a35;color:#eaeaea}.alert90s-dark .alert90s-title{color:#fff;text-shadow:2px 2px 0 #000}.alert90s-dark .alert90s-html,.alert90s-dark .alert90s-message{color:#d4d4d4}.alert90s-dark .alert90s-html a{color:#60a5fa}.alert90s-dark .alert90s-input,.alert90s-dark select.alert90s-select{background-color:#1a1a24;border-color:#000;box-shadow:inset 4px 4px 0 0 rgba(0,0,0,.5);color:#fff}.alert90s-dark .alert90s-input:focus{border-color:#0ff}.alert90s-dark .alert90s-button{background-color:#ececec;color:#000}.alert90s-dark .alert90s-button.cancel{background-color:#f87171}.alert90s-dark .alert90s-button.deny{background-color:#fb923c}.alert90s-dark .alert90s-button.confirm{background-color:#4ade80}.alert90s-dark .alert90s-checkbox-label input[type=checkbox]{background-color:#1a1a24}.alert90s-dark .alert90s-checkbox-label input[type=checkbox]:checked{background-color:#0ff}.alert90s-dark .alert90s-radio-label input[type=radio]{background-color:#1a1a24}.alert90s-dark .alert90s-radio-label input[type=radio]:checked{background-color:#0ff;box-shadow:inset 0 0 0 4px #000}.alert90s-theme-checkbox{display:none}.alert90s-theme-wrapper{cursor:pointer;display:inline-block;position:relative;transform:rotate(-1deg);transition:transform .1s}.alert90s-theme-wrapper:active{transform:rotate(0deg) scale(.98)}.alert90s-theme-track-shadow{fill:#000}.alert90s-theme-track-base{fill:#facc15;stroke:#000;stroke-width:6;stroke-linejoin:miter;transition:fill .5s cubic-bezier(.8,0,.2,1)}.alert90s-theme-wrapper:has(.alert90s-theme-checkbox:checked) .alert90s-theme-track-base{fill:#1e1e26}.alert90s-theme-thumb-group{transform:translateX(0);transition:transform .5s cubic-bezier(.68,-.55,.265,1.55)}.alert90s-theme-wrapper:has(.alert90s-theme-checkbox:checked) .alert90s-theme-thumb-group{transform:translateX(190px)}.alert90s-theme-thumb-shadow{fill:#000}.alert90s-theme-thumb-body{fill:#fff;stroke:#000;stroke-width:6;stroke-linejoin:miter;transition:fill .3s}.alert90s-theme-wrapper:has(.alert90s-theme-checkbox:checked) .alert90s-theme-thumb-body{fill:#eaeaea}.alert90s-theme-icon-sun{opacity:1;transition:opacity 0s .25s}.alert90s-theme-wrapper:has(.alert90s-theme-checkbox:checked) .alert90s-theme-icon-sun{opacity:0}.alert90s-theme-icon-moon{filter:drop-shadow(0 0 10px #00FFFF) drop-shadow(0 0 20px #00FFFF);opacity:0;transition:opacity 0s .25s}.alert90s-theme-wrapper:has(.alert90s-theme-checkbox:checked) .alert90s-theme-icon-moon{opacity:1}.alert90s-theme-text-label{font-family:Impact,Arial Black,sans-serif;font-size:38px;letter-spacing:2px;pointer-events:none;user-select:none}.alert90s-theme-text-day{fill:#000;opacity:1;transition:opacity .3s ease}.alert90s-theme-text-night{fill:#0ff;opacity:0;transition:opacity .3s ease}.alert90s-theme-wrapper:has(.alert90s-theme-checkbox:checked) .alert90s-theme-text-day{opacity:0}.alert90s-theme-wrapper:has(.alert90s-theme-checkbox:checked) .alert90s-theme-text-night{opacity:1}.alert90s-theme-deco-accent{fill:#ff90e8;transition:fill .4s}.alert90s-theme-wrapper:has(.alert90s-theme-checkbox:checked) .alert90s-theme-deco-accent{fill:#4ade80}');class e{static getOptions(){return this.currentOptions||{}}static getPopup(){return this.currentPopup||null}static getTimerLeft(){if(!this.timerEnd)return;const e=this.timerEnd-Date.now();return e>0?e:0}static isLoading(){const e=this.getPopup();if(!e)return!1;const t=e.querySelector(".alert90s-actions"),o=e.querySelector(".alert90s-loader");return t&&"none"===t.style.display||!!o}static showLoading(){const t=this.getPopup();if(t){const o=t.querySelector(".alert90s-actions");o&&(o.style.display="none");let r=t.querySelector(".alert90s-loader");if(!r){r=document.createElement("div"),r.className="alert90s-loader";const a=e.currentOptions&&e.currentOptions.loaderType||"hourglass";r.innerHTML="ascii"===a?'<div class="alert90s-spinner ascii"></div>':"blinking"===a?'<div class="alert90s-spinner blinking">LOADING<span class="cursor">_</span></div>':"progress"===a?'<div class="alert90s-spinner progress"></div>':'<div class="alert90s-spinner hourglass">⏳</div>',o&&o.parentNode?o.parentNode.insertBefore(r,o):t.querySelector(".alert90s-body").appendChild(r)}}}static hideLoading(){const e=this.getPopup();if(e){const t=e.querySelector(".alert90s-actions");t&&(t.style.display="");const o=e.querySelector(".alert90s-loader");o&&o.remove()}}static showValidationMessage(e){const t=this.getPopup();if(t){let o=t.querySelector(".alert90s-validation-message");if(!o){o=document.createElement("div"),o.className="alert90s-validation-message";const e=t.querySelector(".alert90s-actions");e&&e.parentNode?e.parentNode.insertBefore(o,e):t.querySelector(".alert90s-body").appendChild(o)}o.innerHTML=e,o.style.display="block"}}static resetValidationMessage(){const e=this.getPopup();if(e){const t=e.querySelector(".alert90s-validation-message");t&&(t.style.display="none")}}static getToastContainer(e){const t=`alert90s-toast-container alert90s-toast-${e}`;let o=document.querySelector(`.${t.replace(/ /g,".")}`);return o||(o=document.createElement("div"),o.className=t,document.body.appendChild(o)),o}static fire(e={}){return this.show(e)}static show(t={}){return new Promise(o=>{"string"==typeof t&&(t={title:t}),this.currentOptions=t;const r={title:void 0!==t.title?t.title:"",text:t.message||t.text||"",html:t.html||"",icon:t.type||t.icon||"",iconHtml:t.iconHtml||"",showConfirmButton:!1!==t.showConfirmButton,showCancelButton:t.showCancelButton||!1,showDenyButton:t.showDenyButton||!1,showCloseButton:void 0===t.showCloseButton||t.showCloseButton,loaderType:t.loaderType||"hourglass",confirmButtonText:t.confirmText||t.confirmButtonText||"OK",cancelButtonText:t.cancelText||t.cancelButtonText||"Cancel",denyButtonText:t.denyText||t.denyButtonText||"No",confirmButtonColor:t.confirmButtonColor||"",cancelButtonColor:t.cancelButtonColor||"",denyButtonColor:t.denyButtonColor||"",background:t.background||"",color:t.color||"",titleColor:t.titleColor||"",iconColor:t.iconColor||"",confirmButtonAriaLabel:t.confirmButtonAriaLabel||"",cancelButtonAriaLabel:t.cancelButtonAriaLabel||"",denyButtonAriaLabel:t.denyButtonAriaLabel||"",focusConfirm:!1!==t.focusConfirm,footer:t.footer||"",imageUrl:t.imageUrl||"",imageWidth:t.imageWidth||null,imageHeight:t.imageHeight||null,imageAlt:t.imageAlt||"",input:t.input||null,inputPlaceholder:t.inputPlaceholder||"",inputValue:t.inputValue||"",inputOptions:t.inputOptions||{},inputAttributes:t.inputAttributes||{},showLoaderOnConfirm:t.showLoaderOnConfirm||!1,preConfirm:t.preConfirm||null,toast:t.toast||!1,draggable:t.draggable||!1,position:t.position||(t.toast?"top-end":"center"),allowOutsideClick:void 0===t.allowOutsideClick||t.allowOutsideClick,dir:t.dir||"auto",theme:t.theme||"light",showClass:t.showClass||{popup:"alert90s-pop-in"},hideClass:t.hideClass||{popup:"alert90s-fade-out"},timer:t.timer||null,timerProgressBar:t.timerProgressBar||!1,didOpen:t.didOpen||null,willClose:t.willClose||null};let a=null;r.toast||(a=document.createElement("div"),a.className=`alert90s-overlay alert90s-pos-${r.position}`,a.addEventListener("mousedown",e=>{if(e.target===a){("function"==typeof r.allowOutsideClick?r.allowOutsideClick():r.allowOutsideClick)&&g({isConfirmed:!1,isDenied:!1,isDismissed:!0,dismiss:"backdrop"})}}));const n=document.createElement("div");n.className="alert90s-box",r.toast&&n.classList.add("alert90s-toast");let i=r.theme;"auto"===i&&(i=window.matchMedia&&window.matchMedia("(prefers-color-scheme: dark)").matches?"dark":"light"),"dark"===i&&n.classList.add("alert90s-dark"),"rtl"===document.dir||"rtl"===r.dir||r.position.includes("start")?n.setAttribute("dir","auto"===r.dir?document.dir||"ltr":r.dir):n.setAttribute("dir",r.dir),r.showClass.popup&&"alert90s-pop-in"!==r.showClass.popup&&(n.style.animation="none",n.className=`alert90s-box ${r.showClass.popup}`),r.background&&(n.style.backgroundColor=r.background),r.color&&(n.style.color=r.color),r.draggable&&n.classList.add("is-draggable"),r.toast||(this.currentPopup=n);const s=document.createElement("div");s.className="alert90s-body";const l=document.createElement("div");l.className="alert90s-header",r.draggable&&l.classList.add("draggable");let c="";if(r.showCloseButton&&(c='\n <button class="alert90s-close-btn" id="alert90s-close" aria-label="Close">\n <span>✕</span>\n </button>\n '),l.innerHTML=`\n <div class="alert90s-header-left">\n <div class="alert90s-header-dot"></div>\n <div class="alert90s-header-dot"></div>\n <div class="alert90s-header-dot"></div>\n </div>\n <div class="alert90s-header-right">\n <span class="alert90s-header-title">SYS.REQ</span>\n ${c}\n </div>\n `,r.draggable){let e,t,o,r,a=!1;l.addEventListener("mousedown",i=>{if(i.target.closest("#alert90s-close"))return;a=!0,e=i.clientX,t=i.clientY;const s=n.getBoundingClientRect();n.style.transform="none",n.style.animation="none",o=s.left,r=s.top,n.style.left=o+"px",n.style.top=r+"px",n.style.margin="0",document.body.style.userSelect="none"}),document.addEventListener("mousemove",i=>{a&&(n.style.left=o+(i.clientX-e)+"px",n.style.top=r+(i.clientY-t)+"px")}),document.addEventListener("mouseup",()=>{a&&(a=!1,document.body.style.userSelect="")})}let d=null;if(r.timer&&r.timerProgressBar&&(d=document.createElement("div"),d.className="alert90s-progress-bar",d.style.animationDuration=`${r.timer}ms`,n.appendChild(d)),r.imageUrl){const e=document.createElement("div");e.className="alert90s-image-container";const t=document.createElement("img");t.src=r.imageUrl,r.imageAlt&&(t.alt=r.imageAlt);let o="";r.imageWidth&&(o+=`width: ${r.imageWidth}px; max-width: 100%; `),r.imageHeight&&(o+=`height: ${r.imageHeight}px; `),o&&e.setAttribute("style",o),e.appendChild(t),s.appendChild(e)}if(r.icon){const e=document.createElement("div"),t="error"===r.icon?"danger":r.icon;e.className=`alert90s-icon ${t}`;let o="";if(r.iconHtml?o=`<div class="alert90s-icon-custom">${r.iconHtml}</div>`:"warning"===r.icon?o='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z"></path><line x1="12" y1="9" x2="12" y2="13"></line><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>':"danger"===r.icon||"error"===r.icon?o='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>':"info"===r.icon?o='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><line x1="12" y1="16" x2="12" y2="12"></line><line x1="12" y1="8" x2="12.01" y2="8"></line></svg>':"success"===r.icon?o='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>':"question"===r.icon&&(o='<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path><line x1="12" y1="17" x2="12.01" y2="17"></line></svg>'),e.innerHTML=o,r.iconColor&&(e.style.color=r.iconColor,e.style.borderColor=r.iconColor,!r.iconHtml)){const t=e.querySelector("svg");t&&(t.style.stroke=r.iconColor)}o&&s.appendChild(e)}const p=document.createElement("div");if(p.className="alert90s-content-wrapper",r.title){const e=document.createElement("h2");e.className="alert90s-title",e.innerHTML=r.title,r.titleColor&&(e.style.color=r.titleColor),p.appendChild(e)}if(r.html){const e=document.createElement("div");e.className="alert90s-html",e.innerHTML=r.html,r.color&&(e.style.color=r.color),p.appendChild(e)}else if(r.text){const e=document.createElement("p");e.className="alert90s-message",e.textContent=r.text,r.color&&(e.style.color=r.color),p.appendChild(e)}if((r.title||r.html||r.text)&&s.appendChild(p),r.toast&&r.showCloseButton){const e=document.createElement("button");e.className="alert90s-toast-close",e.innerHTML="<span>✕</span>",e.onclick=()=>g({isConfirmed:!1,isDenied:!1,isDismissed:!0,dismiss:"close"}),s.appendChild(e)}let h=null;if(r.input){const e=document.createElement("div");if(e.className="alert90s-input-container","select"===r.input){if(h=document.createElement("select"),h.className="alert90s-input alert90s-select",r.inputPlaceholder){const e=document.createElement("option");e.value="",e.textContent=r.inputPlaceholder,e.disabled=!0,e.selected=!0,h.appendChild(e)}for(const[e,t]of Object.entries(r.inputOptions)){const o=document.createElement("option");o.value=e,o.textContent=t,e===r.inputValue&&(o.selected=!0),h.appendChild(o)}e.appendChild(h)}else if("radio"===r.input){const t=document.createElement("div");t.className="alert90s-radio-group";for(const[e,o]of Object.entries(r.inputOptions)){const a=document.createElement("label");a.className="alert90s-radio-label";const n=document.createElement("input");n.type="radio",n.name="alert90s-radio",n.value=e,e===r.inputValue&&(n.checked=!0);const i=document.createElement("span");i.textContent=o,a.appendChild(n),a.appendChild(i),t.appendChild(a)}h=t,e.appendChild(t)}else if("checkbox"===r.input||"toggle"===r.input){const t=document.createElement("label");if(t.className="toggle"===r.input?"alert90s-toggle-label":"alert90s-checkbox-label",h=document.createElement("input"),h.type="checkbox",h.checked=!!r.inputValue,"toggle"===r.input){const e=document.createElement("div");if(e.className="alert90s-toggle-slider",t.appendChild(h),t.appendChild(e),r.inputPlaceholder){const e=document.createElement("span");e.textContent=r.inputPlaceholder,t.appendChild(e)}}else{const e=document.createElement("span");e.textContent=r.inputPlaceholder||"Check me",t.appendChild(h),t.appendChild(e)}e.appendChild(t)}else"textarea"===r.input?(h=document.createElement("textarea"),h.className="alert90s-input",r.inputPlaceholder&&(h.placeholder=r.inputPlaceholder),r.inputValue&&(h.value=r.inputValue),e.appendChild(h)):(h=document.createElement("input"),h.type=r.input,h.className="alert90s-input",r.inputPlaceholder&&(h.placeholder=r.inputPlaceholder),r.inputValue&&(h.value=r.inputValue),e.appendChild(h));if(r.inputAttributes&&h&&!["radio"].includes(r.input))for(const[e,t]of Object.entries(r.inputAttributes))h.setAttribute(e,t);s.appendChild(e)}const m=document.createElement("div");m.className="alert90s-actions";let u=null,f=null;const g=e=>{f&&clearTimeout(f),r.willClose&&r.willClose(),n.style.animation="none","alert90s-fade-out"===r.hideClass.popup?(n.style.animation="alert90s-fade-out 0.2s forwards",a&&(a.style.transition="opacity 0.2s",a.style.opacity="0")):n.className=`alert90s-box ${r.hideClass.popup}`,setTimeout(()=>{r.toast?n.parentNode&&n.parentNode.removeChild(n):a&&document.body.contains(a)&&document.body.removeChild(a),o(e)},200)},b=async()=>{let t=!0;if("radio"===r.input){const e=h.querySelector('input[type="radio"]:checked');t=e?e.value:null}else"checkbox"===r.input||"toggle"===r.input?t=h.checked:h&&(t=h.value);if(r.preConfirm){e.resetValidationMessage(),r.showLoaderOnConfirm&&e.showLoading();try{const o=await Promise.resolve(r.preConfirm(t));if(!1===o)return void e.hideLoading();void 0!==o&&o!==t&&(t=o);const a=n.querySelector(".alert90s-validation-message");if(a&&"block"===a.style.display)return void e.hideLoading()}catch(t){return e.showValidationMessage(`Request failed: ${t}`),void e.hideLoading()}}g({isConfirmed:!0,isDenied:!1,isDismissed:!1,value:t})};if(r.showCancelButton){const e=document.createElement("button");e.className="alert90s-button cancel",e.innerHTML=r.cancelButtonText,r.cancelButtonAriaLabel&&e.setAttribute("aria-label",r.cancelButtonAriaLabel),r.cancelButtonColor&&(e.style.backgroundColor=r.cancelButtonColor),e.onclick=()=>g({isConfirmed:!1,isDenied:!1,isDismissed:!0,dismiss:"cancel"}),m.appendChild(e)}if(r.showDenyButton){const e=document.createElement("button");e.className="alert90s-button deny",e.innerHTML=r.denyButtonText,r.denyButtonAriaLabel&&e.setAttribute("aria-label",r.denyButtonAriaLabel),r.denyButtonColor&&(e.style.backgroundColor=r.denyButtonColor),e.onclick=()=>g({isConfirmed:!1,isDenied:!0,isDismissed:!1}),m.appendChild(e)}if(r.showConfirmButton){const e=document.createElement("button");e.className="alert90s-button confirm",e.innerHTML=r.confirmButtonText,r.confirmButtonAriaLabel&&e.setAttribute("aria-label",r.confirmButtonAriaLabel),r.confirmButtonColor&&(e.style.backgroundColor=r.confirmButtonColor),e.onclick=b,m.appendChild(e),u=e}if((r.showCancelButton||r.showDenyButton||r.showConfirmButton)&&s.appendChild(m),r.footer){const e=document.createElement("div");e.className="alert90s-footer",e.innerHTML=r.footer,s.appendChild(e)}if(n.appendChild(l),n.appendChild(s),r.toast){const t=e.getToastContainer(r.position);n.style.animation="alert90s-toast-slide-in 0.3s ease-out",t.appendChild(n)}else a.appendChild(n);if(r.showCloseButton&&!r.toast){const e=l.querySelector("#alert90s-close");e&&(e.onclick=()=>g({isConfirmed:!1,isDenied:!1,isDismissed:!0,dismiss:"close"}))}r.toast||document.body.appendChild(a),r.focusConfirm&&u&&setTimeout(()=>{h?h.focus():u.focus()},50),r.didOpen&&setTimeout(()=>{r.didOpen()},0),r.timer&&(this.timerEnd=Date.now()+r.timer,f=setTimeout(()=>{g({isConfirmed:!1,isDenied:!1,isDismissed:!0,dismiss:"timer"})},r.timer))})}static initTooltips(){this._tooltipsInitialized||(this._tooltipsInitialized=!0,this._tooltipEl=document.createElement("div"),this._tooltipEl.className="alert90s-tooltip",document.body.appendChild(this._tooltipEl),document.addEventListener("mouseover",this._handleTooltipMouseOver.bind(this)),document.addEventListener("mouseout",this._handleTooltipMouseOut.bind(this)),document.addEventListener("focusin",this._handleTooltipMouseOver.bind(this)),document.addEventListener("focusout",this._handleTooltipMouseOut.bind(this)))}static _handleTooltipMouseOver(e){const t=e.target.closest("[data-alert90s-tooltip]");if(!t)return;const o=t.getAttribute("data-alert90s-tooltip");if(!o)return;const r=t.getAttribute("data-alert90s-position")||"top",a=t.getAttribute("data-alert90s-color")||"yellow";this._tooltipEl.innerHTML=o,this._tooltipEl.className=`alert90s-tooltip pos-${r} c-${a} show`;const n=t.getBoundingClientRect(),i=this._tooltipEl.getBoundingClientRect(),s=10;let l=0,c=0;switch(r){case"top":l=n.top-i.height-s,c=n.left+n.width/2-i.width/2;break;case"bottom":l=n.bottom+s,c=n.left+n.width/2-i.width/2;break;case"left":l=n.top+n.height/2-i.height/2,c=n.left-i.width-s;break;case"right":l=n.top+n.height/2-i.height/2,c=n.right+s}c<s&&(c=s),l<s&&(l=s),c+i.width>window.innerWidth-s&&(c=window.innerWidth-i.width-s),this._tooltipEl.style.top=`${l+window.scrollY}px`,this._tooltipEl.style.left=`${c+window.scrollX}px`}static _handleTooltipMouseOut(e){const t=e.target.closest("[data-alert90s-tooltip]");t&&setTimeout(()=>{this._tooltipEl.matches(":hover")||t.matches(":hover")||t.contains(document.activeElement)||this._tooltipEl.classList.remove("show")},10)}static renderThemeToggle(e,t={}){const o=document.querySelector(e);if(!o)return null;const r=`\n <label class="alert90s-theme-wrapper" aria-label="Neo Brutalist Theme Switcher" style="width: ${t.width||"100%"}; height: auto; aspect-ratio: 5 / 2;">\n <input type="checkbox" class="alert90s-theme-checkbox" ${t.isDark||!1?"checked":""} />\n \n <svg viewBox="0 0 300 120" style="width: 100%; height: 100%; overflow: visible;">\n \x3c!-- HARD OFFSET SHADOW --\x3e\n <rect class="alert90s-theme-track-shadow" x="18" y="18" width="280" height="100" />\n \x3c!-- MAIN TRACK --\x3e\n <rect class="alert90s-theme-track-base" x="10" y="10" width="280" height="100" />\n\n \x3c!-- DECORATIVE 90S UI ELEMENTS --\x3e\n <g class="alert90s-theme-deco-elements" stroke="#000" stroke-width="2">\n <circle cx="25" cy="25" r="4" fill="#FFF" />\n <line x1="23" y1="23" x2="27" y2="27" />\n <circle cx="275" cy="25" r="4" fill="#FFF" />\n <line x1="273" y1="27" x2="277" y2="23" />\n <circle cx="25" cy="95" r="4" fill="#FFF" />\n <line x1="23" y1="95" x2="27" y2="95" />\n <circle cx="275" cy="95" r="4" fill="#FFF" />\n <line x1="275" y1="93" x2="275" y2="97" />\n \n <line x1="120" y1="20" x2="120" y2="35" stroke-width="3" />\n <line x1="128" y1="20" x2="128" y2="35" stroke-width="5" />\n <line x1="138" y1="20" x2="138" y2="35" stroke-width="2" />\n <line x1="145" y1="20" x2="145" y2="35" stroke-width="6" />\n </g>\n\n \x3c!-- DAY / NIGHT TEXT --\x3e\n <text class="alert90s-theme-text-label alert90s-theme-text-night" x="40" y="75">NIGHT</text>\n <text class="alert90s-theme-text-label alert90s-theme-text-day" x="190" y="75">DAY</text>\n\n \x3c!-- NEON DECORATIVE STICKER --\x3e\n <rect class="alert90s-theme-deco-accent" x="120" y="85" width="60" height="15" stroke="#000" stroke-width="3" />\n <text x="125" y="96" font-size="10" font-weight="bold" fill="#000" font-family="sans-serif">SYS.UI</text>\n\n \x3c!-- SLIDING THUMB GROUP --\x3e\n <g class="alert90s-theme-thumb-group">\n \x3c!-- Thumb Shadow --\x3e\n <rect class="alert90s-theme-thumb-shadow" x="23" y="23" width="80" height="80" />\n \x3c!-- Thumb Body --\x3e\n <rect class="alert90s-theme-thumb-body" x="15" y="15" width="80" height="80" />\n \n \x3c!-- SUN ICON --\x3e\n <g class="alert90s-theme-icon-sun">\n <rect x="40" y="40" width="30" height="30" fill="#facc15" stroke="#000" stroke-width="4" />\n <rect x="48" y="48" width="14" height="14" fill="#ef4444" stroke="#000" stroke-width="2" />\n <rect x="50" y="20" width="10" height="10" fill="#ef4444" stroke="#000" stroke-width="4" />\n <rect x="50" y="80" width="10" height="10" fill="#ef4444" stroke="#000" stroke-width="4" />\n <rect x="20" y="50" width="10" height="10" fill="#ef4444" stroke="#000" stroke-width="4" />\n <rect x="80" y="50" width="10" height="10" fill="#ef4444" stroke="#000" stroke-width="4" />\n <rect x="25" y="25" width="10" height="10" fill="#facc15" stroke="#000" stroke-width="4" />\n <rect x="75" y="25" width="10" height="10" fill="#facc15" stroke="#000" stroke-width="4" />\n <rect x="25" y="75" width="10" height="10" fill="#facc15" stroke="#000" stroke-width="4" />\n <rect x="75" y="75" width="10" height="10" fill="#facc15" stroke="#000" stroke-width="4" />\n </g>\n\n \x3c!-- MOON ICON --\x3e\n <g class="alert90s-theme-icon-moon">\n <path fill="#000" transform="translate(3, 3)" d="M 60 30 v -5 h 10 v 5 h 5 v 10 h 5 v 30 h -5 v 10 h -5 v 5 h -10 v -5 h -5 v -5 h 5 v -5 h 5 v -20 h -5 v -5 h -5 v -10 h 5 v -5 Z" />\n <path fill="#00FFFF" stroke="#000" stroke-width="3" stroke-linejoin="miter" d="M 60 30 v -5 h 10 v 5 h 5 v 10 h 5 v 30 h -5 v 10 h -5 v 5 h -10 v -5 h -5 v -5 h 5 v -5 h 5 v -20 h -5 v -5 h -5 v -10 h 5 v -5 Z" />\n <rect x="70" y="40" width="5" height="5" fill="#FFFFFF" opacity="0.8" />\n <rect x="65" y="70" width="5" height="5" fill="#FFFFFF" opacity="0.8" />\n </g>\n </g>\n </svg>\n </label>\n `;o.innerHTML=r;return o.querySelector(".alert90s-theme-checkbox").addEventListener("change",e=>{"function"==typeof t.onChange&&t.onChange(e.target.checked)}),o}}return"undefined"!=typeof window&&(window.Alert90s=e,document.addEventListener("DOMContentLoaded",()=>{e.initTooltips()})),e});
|
package/package.json
CHANGED
package/src/index.js
CHANGED
|
@@ -168,6 +168,7 @@ class Alert90s {
|
|
|
168
168
|
|
|
169
169
|
// Display options
|
|
170
170
|
dir: options.dir || 'auto', // 'rtl', 'ltr', 'auto'
|
|
171
|
+
theme: options.theme || 'light', // 'light', 'dark', 'auto'
|
|
171
172
|
|
|
172
173
|
// Animations
|
|
173
174
|
showClass: options.showClass || { popup: 'alert90s-pop-in' },
|
|
@@ -204,6 +205,14 @@ class Alert90s {
|
|
|
204
205
|
box.className = 'alert90s-box';
|
|
205
206
|
if (config.toast) box.classList.add('alert90s-toast');
|
|
206
207
|
|
|
208
|
+
let resolvedTheme = config.theme;
|
|
209
|
+
if (resolvedTheme === 'auto') {
|
|
210
|
+
resolvedTheme = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
|
|
211
|
+
}
|
|
212
|
+
if (resolvedTheme === 'dark') {
|
|
213
|
+
box.classList.add('alert90s-dark');
|
|
214
|
+
}
|
|
215
|
+
|
|
207
216
|
// RTL support
|
|
208
217
|
if (document.dir === 'rtl' || config.dir === 'rtl' || config.position.includes('start')) {
|
|
209
218
|
box.setAttribute('dir', config.dir === 'auto' ? (document.dir || 'ltr') : config.dir);
|
|
@@ -746,6 +755,97 @@ class Alert90s {
|
|
|
746
755
|
}
|
|
747
756
|
}, 10);
|
|
748
757
|
}
|
|
758
|
+
|
|
759
|
+
/**
|
|
760
|
+
* Renders a Neo-Brutalist Theme Switcher into a target container.
|
|
761
|
+
* Useful for documentations or retro-styled portfolios.
|
|
762
|
+
*/
|
|
763
|
+
static renderThemeToggle(selector, options = {}) {
|
|
764
|
+
const el = document.querySelector(selector);
|
|
765
|
+
if (!el) return null;
|
|
766
|
+
|
|
767
|
+
const width = options.width || "100%";
|
|
768
|
+
const isDark = options.isDark || false;
|
|
769
|
+
|
|
770
|
+
const svgHtml = `
|
|
771
|
+
<label class="alert90s-theme-wrapper" aria-label="Neo Brutalist Theme Switcher" style="width: ${width}; height: auto; aspect-ratio: 5 / 2;">
|
|
772
|
+
<input type="checkbox" class="alert90s-theme-checkbox" ${isDark ? 'checked' : ''} />
|
|
773
|
+
|
|
774
|
+
<svg viewBox="0 0 300 120" style="width: 100%; height: 100%; overflow: visible;">
|
|
775
|
+
<!-- HARD OFFSET SHADOW -->
|
|
776
|
+
<rect class="alert90s-theme-track-shadow" x="18" y="18" width="280" height="100" />
|
|
777
|
+
<!-- MAIN TRACK -->
|
|
778
|
+
<rect class="alert90s-theme-track-base" x="10" y="10" width="280" height="100" />
|
|
779
|
+
|
|
780
|
+
<!-- DECORATIVE 90S UI ELEMENTS -->
|
|
781
|
+
<g class="alert90s-theme-deco-elements" stroke="#000" stroke-width="2">
|
|
782
|
+
<circle cx="25" cy="25" r="4" fill="#FFF" />
|
|
783
|
+
<line x1="23" y1="23" x2="27" y2="27" />
|
|
784
|
+
<circle cx="275" cy="25" r="4" fill="#FFF" />
|
|
785
|
+
<line x1="273" y1="27" x2="277" y2="23" />
|
|
786
|
+
<circle cx="25" cy="95" r="4" fill="#FFF" />
|
|
787
|
+
<line x1="23" y1="95" x2="27" y2="95" />
|
|
788
|
+
<circle cx="275" cy="95" r="4" fill="#FFF" />
|
|
789
|
+
<line x1="275" y1="93" x2="275" y2="97" />
|
|
790
|
+
|
|
791
|
+
<line x1="120" y1="20" x2="120" y2="35" stroke-width="3" />
|
|
792
|
+
<line x1="128" y1="20" x2="128" y2="35" stroke-width="5" />
|
|
793
|
+
<line x1="138" y1="20" x2="138" y2="35" stroke-width="2" />
|
|
794
|
+
<line x1="145" y1="20" x2="145" y2="35" stroke-width="6" />
|
|
795
|
+
</g>
|
|
796
|
+
|
|
797
|
+
<!-- DAY / NIGHT TEXT -->
|
|
798
|
+
<text class="alert90s-theme-text-label alert90s-theme-text-night" x="40" y="75">NIGHT</text>
|
|
799
|
+
<text class="alert90s-theme-text-label alert90s-theme-text-day" x="190" y="75">DAY</text>
|
|
800
|
+
|
|
801
|
+
<!-- NEON DECORATIVE STICKER -->
|
|
802
|
+
<rect class="alert90s-theme-deco-accent" x="120" y="85" width="60" height="15" stroke="#000" stroke-width="3" />
|
|
803
|
+
<text x="125" y="96" font-size="10" font-weight="bold" fill="#000" font-family="sans-serif">SYS.UI</text>
|
|
804
|
+
|
|
805
|
+
<!-- SLIDING THUMB GROUP -->
|
|
806
|
+
<g class="alert90s-theme-thumb-group">
|
|
807
|
+
<!-- Thumb Shadow -->
|
|
808
|
+
<rect class="alert90s-theme-thumb-shadow" x="23" y="23" width="80" height="80" />
|
|
809
|
+
<!-- Thumb Body -->
|
|
810
|
+
<rect class="alert90s-theme-thumb-body" x="15" y="15" width="80" height="80" />
|
|
811
|
+
|
|
812
|
+
<!-- SUN ICON -->
|
|
813
|
+
<g class="alert90s-theme-icon-sun">
|
|
814
|
+
<rect x="40" y="40" width="30" height="30" fill="#facc15" stroke="#000" stroke-width="4" />
|
|
815
|
+
<rect x="48" y="48" width="14" height="14" fill="#ef4444" stroke="#000" stroke-width="2" />
|
|
816
|
+
<rect x="50" y="20" width="10" height="10" fill="#ef4444" stroke="#000" stroke-width="4" />
|
|
817
|
+
<rect x="50" y="80" width="10" height="10" fill="#ef4444" stroke="#000" stroke-width="4" />
|
|
818
|
+
<rect x="20" y="50" width="10" height="10" fill="#ef4444" stroke="#000" stroke-width="4" />
|
|
819
|
+
<rect x="80" y="50" width="10" height="10" fill="#ef4444" stroke="#000" stroke-width="4" />
|
|
820
|
+
<rect x="25" y="25" width="10" height="10" fill="#facc15" stroke="#000" stroke-width="4" />
|
|
821
|
+
<rect x="75" y="25" width="10" height="10" fill="#facc15" stroke="#000" stroke-width="4" />
|
|
822
|
+
<rect x="25" y="75" width="10" height="10" fill="#facc15" stroke="#000" stroke-width="4" />
|
|
823
|
+
<rect x="75" y="75" width="10" height="10" fill="#facc15" stroke="#000" stroke-width="4" />
|
|
824
|
+
</g>
|
|
825
|
+
|
|
826
|
+
<!-- MOON ICON -->
|
|
827
|
+
<g class="alert90s-theme-icon-moon">
|
|
828
|
+
<path fill="#000" transform="translate(3, 3)" d="M 60 30 v -5 h 10 v 5 h 5 v 10 h 5 v 30 h -5 v 10 h -5 v 5 h -10 v -5 h -5 v -5 h 5 v -5 h 5 v -20 h -5 v -5 h -5 v -10 h 5 v -5 Z" />
|
|
829
|
+
<path fill="#00FFFF" stroke="#000" stroke-width="3" stroke-linejoin="miter" d="M 60 30 v -5 h 10 v 5 h 5 v 10 h 5 v 30 h -5 v 10 h -5 v 5 h -10 v -5 h -5 v -5 h 5 v -5 h 5 v -20 h -5 v -5 h -5 v -10 h 5 v -5 Z" />
|
|
830
|
+
<rect x="70" y="40" width="5" height="5" fill="#FFFFFF" opacity="0.8" />
|
|
831
|
+
<rect x="65" y="70" width="5" height="5" fill="#FFFFFF" opacity="0.8" />
|
|
832
|
+
</g>
|
|
833
|
+
</g>
|
|
834
|
+
</svg>
|
|
835
|
+
</label>
|
|
836
|
+
`;
|
|
837
|
+
|
|
838
|
+
el.innerHTML = svgHtml;
|
|
839
|
+
const checkbox = el.querySelector('.alert90s-theme-checkbox');
|
|
840
|
+
|
|
841
|
+
checkbox.addEventListener('change', (e) => {
|
|
842
|
+
if (typeof options.onChange === 'function') {
|
|
843
|
+
options.onChange(e.target.checked);
|
|
844
|
+
}
|
|
845
|
+
});
|
|
846
|
+
|
|
847
|
+
return el;
|
|
848
|
+
}
|
|
749
849
|
}
|
|
750
850
|
|
|
751
851
|
export default Alert90s;
|
package/src/styles.css
CHANGED
|
@@ -777,3 +777,111 @@ select.alert90s-select {
|
|
|
777
777
|
0% { opacity: 0; transform: scale(0.9); }
|
|
778
778
|
100% { opacity: 1; transform: scale(1); }
|
|
779
779
|
}
|
|
780
|
+
|
|
781
|
+
/* =======================================
|
|
782
|
+
DARK MODE OVERRIDES
|
|
783
|
+
======================================= */
|
|
784
|
+
.alert90s-dark.alert90s-box {
|
|
785
|
+
background-color: #2a2a35;
|
|
786
|
+
color: #eaeaea;
|
|
787
|
+
}
|
|
788
|
+
.alert90s-dark .alert90s-title {
|
|
789
|
+
color: #fff;
|
|
790
|
+
text-shadow: 2px 2px 0 #000;
|
|
791
|
+
}
|
|
792
|
+
.alert90s-dark .alert90s-message, .alert90s-dark .alert90s-html {
|
|
793
|
+
color: #d4d4d4;
|
|
794
|
+
}
|
|
795
|
+
.alert90s-dark .alert90s-html a {
|
|
796
|
+
color: #60a5fa;
|
|
797
|
+
}
|
|
798
|
+
.alert90s-dark .alert90s-input, .alert90s-dark select.alert90s-select {
|
|
799
|
+
background-color: #1a1a24;
|
|
800
|
+
color: #fff;
|
|
801
|
+
border-color: #000;
|
|
802
|
+
box-shadow: inset 4px 4px 0 0 rgba(0,0,0,0.5);
|
|
803
|
+
}
|
|
804
|
+
.alert90s-dark .alert90s-input:focus {
|
|
805
|
+
border-color: #00FFFF;
|
|
806
|
+
}
|
|
807
|
+
.alert90s-dark .alert90s-button {
|
|
808
|
+
background-color: #ececec;
|
|
809
|
+
color: #000;
|
|
810
|
+
}
|
|
811
|
+
.alert90s-dark .alert90s-button.cancel { background-color: #f87171; }
|
|
812
|
+
.alert90s-dark .alert90s-button.deny { background-color: #fb923c; }
|
|
813
|
+
.alert90s-dark .alert90s-button.confirm { background-color: #4ade80; }
|
|
814
|
+
.alert90s-dark .alert90s-checkbox-label input[type="checkbox"] { background-color: #1a1a24; }
|
|
815
|
+
.alert90s-dark .alert90s-checkbox-label input[type="checkbox"]:checked { background-color: #00FFFF; }
|
|
816
|
+
.alert90s-dark .alert90s-radio-label input[type="radio"] { background-color: #1a1a24; }
|
|
817
|
+
.alert90s-dark .alert90s-radio-label input[type="radio"]:checked { background-color: #00FFFF; box-shadow: inset 0 0 0 4px #000; }
|
|
818
|
+
|
|
819
|
+
/* =======================================
|
|
820
|
+
THEME TOGGLE COMPONENT (.alert90s-theme-wrapper)
|
|
821
|
+
======================================= */
|
|
822
|
+
.alert90s-theme-checkbox { display: none; }
|
|
823
|
+
|
|
824
|
+
.alert90s-theme-wrapper {
|
|
825
|
+
position: relative;
|
|
826
|
+
cursor: pointer;
|
|
827
|
+
transform: rotate(-1deg);
|
|
828
|
+
transition: transform 0.1s;
|
|
829
|
+
display: inline-block;
|
|
830
|
+
}
|
|
831
|
+
.alert90s-theme-wrapper:active { transform: rotate(0deg) scale(0.98); }
|
|
832
|
+
|
|
833
|
+
.alert90s-theme-track-shadow { fill: #000; }
|
|
834
|
+
.alert90s-theme-track-base {
|
|
835
|
+
fill: #facc15;
|
|
836
|
+
stroke: #000;
|
|
837
|
+
stroke-width: 6;
|
|
838
|
+
stroke-linejoin: miter;
|
|
839
|
+
transition: fill 0.5s cubic-bezier(0.8, 0, 0.2, 1);
|
|
840
|
+
}
|
|
841
|
+
.alert90s-theme-wrapper:has(.alert90s-theme-checkbox:checked) .alert90s-theme-track-base {
|
|
842
|
+
fill: #1e1e26;
|
|
843
|
+
}
|
|
844
|
+
|
|
845
|
+
.alert90s-theme-thumb-group {
|
|
846
|
+
transform: translateX(0);
|
|
847
|
+
transition: transform 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
|
848
|
+
}
|
|
849
|
+
.alert90s-theme-wrapper:has(.alert90s-theme-checkbox:checked) .alert90s-theme-thumb-group {
|
|
850
|
+
transform: translateX(190px);
|
|
851
|
+
}
|
|
852
|
+
.alert90s-theme-thumb-shadow { fill: #000; }
|
|
853
|
+
.alert90s-theme-thumb-body {
|
|
854
|
+
fill: #FFFFFF;
|
|
855
|
+
stroke: #000;
|
|
856
|
+
stroke-width: 6;
|
|
857
|
+
stroke-linejoin: miter;
|
|
858
|
+
transition: fill 0.3s;
|
|
859
|
+
}
|
|
860
|
+
.alert90s-theme-wrapper:has(.alert90s-theme-checkbox:checked) .alert90s-theme-thumb-body {
|
|
861
|
+
fill: #EAEAEA;
|
|
862
|
+
}
|
|
863
|
+
|
|
864
|
+
.alert90s-theme-icon-sun { opacity: 1; transition: opacity 0s 0.25s; }
|
|
865
|
+
.alert90s-theme-wrapper:has(.alert90s-theme-checkbox:checked) .alert90s-theme-icon-sun { opacity: 0; }
|
|
866
|
+
|
|
867
|
+
.alert90s-theme-icon-moon {
|
|
868
|
+
opacity: 0;
|
|
869
|
+
transition: opacity 0s 0.25s;
|
|
870
|
+
filter: drop-shadow(0 0 10px #00FFFF) drop-shadow(0 0 20px #00FFFF);
|
|
871
|
+
}
|
|
872
|
+
.alert90s-theme-wrapper:has(.alert90s-theme-checkbox:checked) .alert90s-theme-icon-moon { opacity: 1; }
|
|
873
|
+
|
|
874
|
+
.alert90s-theme-text-label {
|
|
875
|
+
font-family: Impact, 'Arial Black', sans-serif;
|
|
876
|
+
font-size: 38px;
|
|
877
|
+
letter-spacing: 2px;
|
|
878
|
+
pointer-events: none;
|
|
879
|
+
user-select: none;
|
|
880
|
+
}
|
|
881
|
+
.alert90s-theme-text-day { fill: #000; opacity: 1; transition: opacity 0.3s ease; }
|
|
882
|
+
.alert90s-theme-text-night { fill: #00FFFF; opacity: 0; transition: opacity 0.3s ease; }
|
|
883
|
+
.alert90s-theme-wrapper:has(.alert90s-theme-checkbox:checked) .alert90s-theme-text-day { opacity: 0; }
|
|
884
|
+
.alert90s-theme-wrapper:has(.alert90s-theme-checkbox:checked) .alert90s-theme-text-night { opacity: 1; }
|
|
885
|
+
|
|
886
|
+
.alert90s-theme-deco-accent { fill: #ff90e8; transition: fill 0.4s; }
|
|
887
|
+
.alert90s-theme-wrapper:has(.alert90s-theme-checkbox:checked) .alert90s-theme-deco-accent { fill: #4ade80; }
|