Re-styled chatgpt.alert() border/transitions + hard-coded styles fo…

…r futureproofing
KudoAI · Dec 20, 2024 · 9045979 · 9045979
1 parent 6d3a1a8
commit 9045979
Showing 1 changed file with 21 additions and 17 deletions.
diff --git a/chatgpt.js b/chatgpt.js
@@ -76,7 +76,7 @@ const chatgpt = {
               modalMessage = document.createElement('p');
 
         // Create/append/update modal style (if missing or outdated)
-        const thisUpdated = 20231203; // datestamp of last edit for this file's `modalStyle`
+        const thisUpdated = 1734685032942; // timestamp of last edit for this file's `modalStyle`
         let modalStyle = document.querySelector('#chatgpt-modal-style'); // try to select existing style
         if (!modalStyle || parseInt(modalStyle.getAttribute('last-updated'), 10) < thisUpdated) { // if missing or outdated
             if (!modalStyle) { // outright missing, create/id/attr/append it first
@@ -89,25 +89,29 @@ const chatgpt = {
 
                 // Background styles
                 + '.chatgpt-modal {'
+                    + 'pointer-events: auto ;' // override any disabling from site modals (like guest login spam)
                     + 'position: fixed ; top: 0 ; left: 0 ; width: 100% ; height: 100% ;' // expand to full view-port
-                    + 'background-color: rgba(67, 70, 72, 0) ;' // init dim bg but no opacity
-                    + 'transition: background-color 0.05s ease ;' // speed to transition in show alert routine
+                    + 'transition: background-color 0.25s ease !important ;' // speed to show bg dim
                     + 'display: flex ; justify-content: center ; align-items: center ; z-index: 9999 }' // align
 
                 // Alert styles
                 + '.chatgpt-modal > div {'
-                    + 'opacity: 0 ; transform: translateX(-2px) translateY(5px) ; max-width: 75vw ; word-wrap: break-word ;'
-                    + 'transition: opacity 0.1s cubic-bezier(.165,.84,.44,1), transform 0.2s cubic-bezier(.165,.84,.44,1) ;'
-                    + `background-color: ${ scheme == 'dark' ? 'black' : 'white' } ;`
-                    + ( scheme != 'dark' ? 'border: 1px solid rgba(0, 0, 0, 0.3) ;' : '' )
+                    + 'opacity: 0 ;' // to fade-in
+                    + `border: 1px solid ${ scheme == 'dark' ? 'white' : '#b5b5b5' };`
+                    + `color: ${ scheme == 'dark' ? 'white' : 'black' };`
+                    + `background-color: ${ scheme == 'dark' ? 'black' : 'white' };`
+                    + 'transform: translateX(-3px) translateY(7px) ;' // offset to move-in from
+                    + 'transition: opacity 0.65s cubic-bezier(.165,.84,.44,1),' // for fade-ins
+                                + 'transform 0.55s cubic-bezier(.165,.84,.44,1) ;' // for move-ins
+                    + 'max-width: 75vw ; word-wrap: break-word ;'
                     + 'padding: 20px ; margin: 12px 23px ; border-radius: 15px ; box-shadow: 0 30px 60px rgba(0, 0, 0, .12) ;'
                     + ' -webkit-user-select: none ; -moz-user-select: none ; -ms-user-select: none ; user-select: none ; }'
                 + '.chatgpt-modal h2 { margin-bottom: 9px }'
                 + `.chatgpt-modal a { color: ${ scheme == 'dark' ? '#00cfff' : '#1e9ebb' }}`
-                + '.chatgpt-modal.animated > div { opacity: 1 ; transform: translateX(0) translateY(0) }'
-                + '@keyframes alert-zoom-fade-out { 0% { opacity: 1 ; transform: scale(1) }'
-                    + '50% { opacity: 0.25 ; transform: scale(1.05) }'
-                    + '100% { opacity: 0 ; transform: scale(1.35) }}'
+                + '.chatgpt-modal.animated > div { z-index: 13456 ; opacity: 0.98 ; transform: translateX(0) translateY(0) }'
+                + '@keyframes alert-zoom-fade-out {'
+                  + '0% { opacity: 1 } 50% { opacity: 0.25 ; transform: scale(1.05) }'
+                  + '100% { opacity: 0 ; transform: scale(1.35) }}'
 
                 // Button styles
                 + '.modal-buttons { display: flex ; justify-content: flex-end ; margin: 20px -5px -3px 0 ;'
@@ -221,10 +225,10 @@ const chatgpt = {
         modalContainer.style.display = 'none';
         if (alertQueue.length === 1) {
             modalContainer.style.display = '';
-            setTimeout(() => { // delay non-0 opacity's for transition fx
-                modalContainer.style.backgroundColor = (
-                    `rgba(67, 70, 72, ${ scheme === 'dark' ? 0.62 : 0.1 })`);
-                modalContainer.classList.add('animated'); }, 100);
+            setTimeout(() => { // dim bg
+                modal.parentNode.style.backgroundColor = `rgba(67, 70, 72, ${ scheme == 'dark' ? 0.62 : 0.33 })`
+                modal.parentNode.classList.add('animated')
+            }, 100) // delay for transition fx
         }
 
         // Define click/key handlers
@@ -251,7 +255,7 @@ const chatgpt = {
         // Define alert dismisser
         const dismissAlert = () => {
             modalContainer.style.backgroundColor = 'transparent';
-            modal.style.animation = 'alert-zoom-fade-out 0.075s ease-out';
+            modal.style.animation = 'alert-zoom-fade-out 0.135s ease-out';
             setTimeout(() => { // delay removal for fade-out
 
                 // Remove alert
@@ -270,7 +274,7 @@ const chatgpt = {
                     }, 500);
                 }
 
-            }, 50);
+            }, 135);
         };
 
         return modalContainer.id; // if assignment used