diff --git a/greasemonkey/autoclear-chatgpt-history.user.js b/greasemonkey/autoclear-chatgpt-history.user.js index 32cea25..a417a02 100644 --- a/greasemonkey/autoclear-chatgpt-history.user.js +++ b/greasemonkey/autoclear-chatgpt-history.user.js @@ -225,7 +225,7 @@ // @description:zu Ziba itshala lokucabanga okuzoshintshwa ngokuzenzakalelayo uma ukubuka chatgpt.com // @author Adam Lui // @namespace https://github.com/adamlui -// @version 2024.12.19 +// @version 2024.12.19.1 // @license MIT // @icon https://media.autoclearchatgpt.com/images/icons/openai/black/icon48.png?a8868ef // @icon64 https://media.autoclearchatgpt.com/images/icons/openai/black/icon64.png?a8868ef @@ -268,12 +268,13 @@ // Init ENV context const env = { - browser: { language: chatgpt.getUserLanguage() }, + browser: { language: chatgpt.getUserLanguage(), isMobile: chatgpt.browser.isMobile() }, scriptManager: { name: (() => { try { return GM_info.scriptHandler } catch (err) { return 'unknown' }})(), version: (() => { try { return GM_info.version } catch (err) { return 'unknown' }})() } } + env.browser.isPortrait = env.browser.isMobile && (window.innerWidth < window.innerHeight) const xhr = typeof GM != 'undefined' && GM.xmlHttpRequest || GM_xmlhttpRequest // Init APP data @@ -515,8 +516,11 @@ } this.styles.innerText = ( `.${this.class} {` + + 'padding: 20px 25px 24px 25px !important ; font-size: 20px ;' + 'position: absolute ;' // to be click-draggable + `border: 1px solid ${ chatgpt.isDarkMode() ? 'white' : '#b5b5b5' } !important ;` + + `background-image: linear-gradient(180deg, ${ + chatgpt.isDarkMode() ? '#99a8a6 -200px, black 200px' : '#b6ebff -296px, white 171px' }) ;` + 'opacity: 0 ;' // to fade-in + 'transform: translateX(-4px) translateY(7px) !important ;' // offset to move-in from + 'transition: opacity 0.65s cubic-bezier(.165,.84,.44,1),' // for fade-ins @@ -524,16 +528,28 @@ + `.${this.class}-bg { transition: background-color .25s ease }` // speed to show dim bg + `.${this.class}-bg.animated > div {` // modal fade/translate-in + 'z-index: 13456 ; opacity: 0.98 ; transform: translate(0,0) !important }' + + `.${this.class} [class*="modal-close-btn"] {` + + 'position: absolute !important ; float: right ; top: 14px !important ; right: 16px !important ;' + + 'cursor: pointer ; width: 33px ; height: 33px ; border-radius: 20px }' + + `.${this.class} [class*="modal-close-btn"] path {` + + `${ chatgpt.isDarkMode() ? 'stroke: white ; fill: white' : 'stroke: #9f9f9f ; fill: #9f9f9f' }}` + + ( chatgpt.isDarkMode() ? // invert dark mode hover paths + `.${this.class} [class*="modal-close-btn"]:hover path { stroke: black ; fill: black }` : '' ) + + `.${this.class} [class*="modal-close-btn"]:hover { background-color: #f2f2f2 }` // hover underlay + + `.${this.class} [class*="modal-close-btn"] svg { margin: 11.5px }` // center SVG for hover underlay + + `.${this.class} a { color: #${ chatgpt.isDarkMode() ? '00cfff' : '1e9ebb' } !important }` + `.${this.class} button {` - + 'font-size: 0.77rem ; text-transform: uppercase ;' // shrink/uppercase labels + + 'font-size: 14px ; text-transform: uppercase ;' // shrink/uppercase labels + 'border-radius: 0 !important ;' // square borders + 'transition: transform 0.1s ease-in-out, box-shadow 0.1s ease-in-out ;' // smoothen hover fx + 'cursor: pointer !important ;' // add finger cursor - + 'padding: 5px !important ; min-width: 102px }' // resize + + `border: 1px solid ${ chatgpt.isDarkMode() ? 'white' : 'black' } !important ;` + + 'padding: 8px !important ; min-width: 102px }' // resize + `.${this.class} button:hover {` // add zoom, re-scheme + 'transform: scale(1.055) ; color: black !important ;' + `background-color: #${ chatgpt.isDarkMode() ? '00cfff' : '9cdaff' } !important }` + ( !env.browser.isMobile ? `.${this.class} .modal-buttons { margin-left: -13px !important }` : '' ) + + `.about-em { color: ${ chatgpt.isDarkMode() ? 'white' : 'green' } !important }` ) }, @@ -585,38 +601,34 @@ about() { - // Init styles - const headingStyle = 'font-size: 1.15rem', - pStyle = 'position: relative ; left: 3px', - pBrStyle = 'position: relative ; left: 4px ', - aStyle = 'color: ' + ( chatgpt.isDarkMode() ? '#c67afb' : '#8325c4' ) // purple - // Show modal const aboutModal = modals.alert( `${app.symbol} ${app.msgs.appName}`, // title - `🏷️ ${app.msgs.about_version}: ` - + `${app.version}\n` - + `${app.msgs.about_poweredBy}: ` - + `` - + `` - + `chatgpt.js v${app.chatgptJSver}\n` - + `📜 ${app.msgs.about_sourceCode}:\n` - + `` - + app.urls.gitHub + '', + `🏷️ ${app.msgs.about_version}: ${app.version}\n` + + `⚡ ${app.msgs.about_poweredBy}: ` + + `chatgpt.js` + + ` v${app.chatgptJSver}\n` + + `📜 ${app.msgs.about_sourceCode}: ` + + `` + + app.urls.gitHub + '', [ // buttons function checkForUpdates() { updateCheck() }, function getSupport(){}, function rateUs() {}, function moreAIextensions(){} - ], '', 546 // set width + ], '', 656 // set width ) // Format text - aboutModal.querySelector('h2').style.cssText = 'text-align: center ; font-size: 37px ; padding: 9px' - aboutModal.querySelector('p').style.cssText = 'text-align: center' + aboutModal.querySelector('h2').style.cssText = ( + 'text-align: center ; font-size: 51px ; line-height: 46px ; padding: 15px 0' ) + aboutModal.querySelector('p').style.cssText = ( + 'text-align: center ; overflow-wrap: anywhere ;' + + `margin: ${ env.browser.isPortrait ? '6px 0 -16px' : '3px 0 0' }` ) // Hack buttons aboutModal.querySelectorAll('button').forEach(btn => { + btn.style.cssText = 'height: 58px ; min-width: 136px ; text-align: center' // Replace link buttons w/ clones that don't dismiss modal if (/support|rate|extensions/i.test(btn.textContent)) { @@ -911,8 +923,6 @@ menu.register() // create browser toolbar menu - modals.open('about') - // Init UI props await Promise.race([chatgpt.isLoaded(), new Promise(resolve => setTimeout(resolve, 5000))]) // initial UI loaded await chatgpt.sidebar.isLoaded() @@ -933,8 +943,8 @@ toggles.sidebar.status = 'missing' ; toggles.sidebar.insert() } }).observe(document.body, { attributes: true, subtree: true }) - // Monitor SCHEME CHANGES to update sidebar toggle color - new MutationObserver(() => toggles.sidebar.updateColor()) + // Monitor SCHEME CHANGES to update sidebar toggle + modal colors + new MutationObserver(() => { toggles.sidebar.updateColor() ; modals.stylize() }) .observe(document.documentElement, { attributes: true, attributeFilter: ['class'] }) // Disable distracting SIDEBAR CLICK-ZOOM effect