diff --git a/autoclear-chatgpt-history/greasemonkey/autoclear-chatgpt-history.user.js b/autoclear-chatgpt-history/greasemonkey/autoclear-chatgpt-history.user.js
index 32cea25c9..a417a0221 100644
--- a/autoclear-chatgpt-history/greasemonkey/autoclear-chatgpt-history.user.js
+++ b/autoclear-chatgpt-history/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
diff --git a/chatgpt-auto-continue/chromium/extension/components/modals.js b/chatgpt-auto-continue/chromium/extension/components/modals.js
index 5177d1695..390956d56 100644
--- a/chatgpt-auto-continue/chromium/extension/components/modals.js
+++ b/chatgpt-auto-continue/chromium/extension/components/modals.js
@@ -7,7 +7,7 @@ window.modals = {
dependencies: {
import(dependencies) {
// { app, env, browserLang: env.browser.language (userscript only), isMobile: env.browser.isMobile,
- // updateCheck (userscript only) }
+ // isPortrait: env.browser.isPortrait, updateCheck (userscript only) }
for (const name in dependencies) this[name] = dependencies[name]
}
},
@@ -43,8 +43,14 @@ window.modals = {
init(modal) {
if (!this.styles) this.stylize() // to init/append stylesheet
- modal.classList.add(this.class) ; modal.onmousedown = this.dragHandlers.mousedown // add class/listener
- dom.fillStarryBG(modal)
+ modal.classList.add(this.class) ; modal.parentNode.classList.add(`${this.class}-bg`) // add classes
+ modal.onmousedown = this.dragHandlers.mousedown // add drag handler
+ dom.fillStarryBG(modal) // add Rising Stars bg
+ setTimeout(() => {
+ modal.parentNode.style.backgroundColor = ( // dim bg
+ `rgba(67, 70, 72, ${ chatgpt.isDarkMode() ? 0.62 : 0.33 })` )
+ modal.parentNode.classList.add('animated') // to trigger modal fade/translate-in
+ }, 100) // delay for transition fx
},
stylize() {
@@ -53,18 +59,41 @@ window.modals = {
document.head.append(this.styles)
}
this.styles.innerText = (
- `.${this.class} { z-index: 13456 ; position: absolute }` // to be click-draggable
- + ( chatgpt.isDarkMode() ? '.chatgpt-modal > div { border: 1px solid white }' : '' )
+ `.${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
+ + 'transform 0.55s cubic-bezier(.165,.84,.44,1) !important }' // for move-ins
+ + `.${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 }`
+ ( !this.dependencies.isMobile ? `.${this.class} .modal-buttons { margin-left: -13px !important }` : '' )
+ + `.about-em { color: ${ chatgpt.isDarkMode() ? 'white' : 'green' } !important }`
)
},
@@ -116,12 +145,6 @@ window.modals = {
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
-
// Init buttons
const modalBtns = [
function getSupport(){},
@@ -134,28 +157,28 @@ window.modals = {
// Show modal
const aboutModal = modals.alert(
`${this.dependencies.app.symbol} ${this.getMsg('appName')}`, // title
- `🏷️ ${this.getMsg('about_version')}: `
- + `${this.dependencies.app.version}\n`
- + `⚡ ${this.getMsg('about_poweredBy')}: `
- + ``
- + `chatgpt.js v${this.dependencies.app.chatgptJSver}\n`
- + `📜 ${this.getMsg('about_sourceCode')}:\n`
- + `${this.dependencies.app.urls.gitHub}`,
- modalBtns, '',
- /Chromium|Firefox/.test(this.env.runtime) ? 529 : 546 // set width
+ `🏷️ ${this.getMsg('about_version')}: ${this.dependencies.app.version}\n`
+ + `⚡ ${this.getMsg('about_poweredBy')}: `
+ + `chatgpt.js`
+ + ` v${this.dependencies.app.chatgptJSver}\n`
+ + `📜 ${this.getMsg('about_sourceCode')}: `
+ + ``
+ + this.dependencies.app.urls.gitHub + '',
+ modalBtns, '', 656
)
// 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: ${ this.dependencies.isPortrait ? '6px 0 -16px' : '3px 0 0' }` )
// Hack buttons
aboutModal.querySelector('.modal-buttons').style.justifyContent = 'center'
aboutModal.querySelectorAll('button').forEach(btn => {
- btn.style.cssText = 'cursor: pointer !important ;'
- + `height: ${ this.env.runtime.includes('Greasemonkey') ? 50 : 43 }px`
+ btn.style.cssText = 'min-width: 136px ; text-align: center ;'
+ + `height: ${ this.env.runtime.includes('Greasemonkey') ? 58 : 55 }px`
// Replace link buttons w/ clones that don't dismiss modal
if (/support|rate|extensions/i.test(btn.textContent)) {
diff --git a/chatgpt-auto-continue/chromium/extension/content.js b/chatgpt-auto-continue/chromium/extension/content.js
index 4bef2676c..a14fc8cdd 100644
--- a/chatgpt-auto-continue/chromium/extension/content.js
+++ b/chatgpt-auto-continue/chromium/extension/content.js
@@ -12,10 +12,11 @@
// Init ENV context
const env = { browser: { isMobile: chatgpt.browser.isMobile() }}
+ env.browser.isPortrait = env.browser.isMobile && (window.innerWidth < window.innerHeight)
// Import APP data
const { app } = await chrome.storage.sync.get('app')
- modals.dependencies.import({ app, isMobile: env.browser.isMobile })
+ modals.dependencies.import({ app, isMobile: env.browser.isMobile, isPortrait: env.browser.isPortrait })
// Add CHROME MSG listener
chrome.runtime.onMessage.addListener(req => {
@@ -88,4 +89,8 @@
notify(`${chrome.i18n.getMessage('mode_autoContinue')}: ${ chrome.i18n.getMessage('state_on').toUpperCase()}`)
}
+ // Monitor SCHEME CHANGES to update modal colors
+ new MutationObserver(() => { modals.stylize() })
+ .observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })
+
})()
diff --git a/chatgpt-auto-continue/firefox/extension/components/modals.js b/chatgpt-auto-continue/firefox/extension/components/modals.js
index 5177d1695..390956d56 100644
--- a/chatgpt-auto-continue/firefox/extension/components/modals.js
+++ b/chatgpt-auto-continue/firefox/extension/components/modals.js
@@ -7,7 +7,7 @@ window.modals = {
dependencies: {
import(dependencies) {
// { app, env, browserLang: env.browser.language (userscript only), isMobile: env.browser.isMobile,
- // updateCheck (userscript only) }
+ // isPortrait: env.browser.isPortrait, updateCheck (userscript only) }
for (const name in dependencies) this[name] = dependencies[name]
}
},
@@ -43,8 +43,14 @@ window.modals = {
init(modal) {
if (!this.styles) this.stylize() // to init/append stylesheet
- modal.classList.add(this.class) ; modal.onmousedown = this.dragHandlers.mousedown // add class/listener
- dom.fillStarryBG(modal)
+ modal.classList.add(this.class) ; modal.parentNode.classList.add(`${this.class}-bg`) // add classes
+ modal.onmousedown = this.dragHandlers.mousedown // add drag handler
+ dom.fillStarryBG(modal) // add Rising Stars bg
+ setTimeout(() => {
+ modal.parentNode.style.backgroundColor = ( // dim bg
+ `rgba(67, 70, 72, ${ chatgpt.isDarkMode() ? 0.62 : 0.33 })` )
+ modal.parentNode.classList.add('animated') // to trigger modal fade/translate-in
+ }, 100) // delay for transition fx
},
stylize() {
@@ -53,18 +59,41 @@ window.modals = {
document.head.append(this.styles)
}
this.styles.innerText = (
- `.${this.class} { z-index: 13456 ; position: absolute }` // to be click-draggable
- + ( chatgpt.isDarkMode() ? '.chatgpt-modal > div { border: 1px solid white }' : '' )
+ `.${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
+ + 'transform 0.55s cubic-bezier(.165,.84,.44,1) !important }' // for move-ins
+ + `.${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 }`
+ ( !this.dependencies.isMobile ? `.${this.class} .modal-buttons { margin-left: -13px !important }` : '' )
+ + `.about-em { color: ${ chatgpt.isDarkMode() ? 'white' : 'green' } !important }`
)
},
@@ -116,12 +145,6 @@ window.modals = {
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
-
// Init buttons
const modalBtns = [
function getSupport(){},
@@ -134,28 +157,28 @@ window.modals = {
// Show modal
const aboutModal = modals.alert(
`${this.dependencies.app.symbol} ${this.getMsg('appName')}`, // title
- `🏷️ ${this.getMsg('about_version')}: `
- + `${this.dependencies.app.version}\n`
- + `⚡ ${this.getMsg('about_poweredBy')}: `
- + ``
- + `chatgpt.js v${this.dependencies.app.chatgptJSver}\n`
- + `📜 ${this.getMsg('about_sourceCode')}:\n`
- + `${this.dependencies.app.urls.gitHub}`,
- modalBtns, '',
- /Chromium|Firefox/.test(this.env.runtime) ? 529 : 546 // set width
+ `🏷️ ${this.getMsg('about_version')}: ${this.dependencies.app.version}\n`
+ + `⚡ ${this.getMsg('about_poweredBy')}: `
+ + `chatgpt.js`
+ + ` v${this.dependencies.app.chatgptJSver}\n`
+ + `📜 ${this.getMsg('about_sourceCode')}: `
+ + ``
+ + this.dependencies.app.urls.gitHub + '',
+ modalBtns, '', 656
)
// 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: ${ this.dependencies.isPortrait ? '6px 0 -16px' : '3px 0 0' }` )
// Hack buttons
aboutModal.querySelector('.modal-buttons').style.justifyContent = 'center'
aboutModal.querySelectorAll('button').forEach(btn => {
- btn.style.cssText = 'cursor: pointer !important ;'
- + `height: ${ this.env.runtime.includes('Greasemonkey') ? 50 : 43 }px`
+ btn.style.cssText = 'min-width: 136px ; text-align: center ;'
+ + `height: ${ this.env.runtime.includes('Greasemonkey') ? 58 : 55 }px`
// Replace link buttons w/ clones that don't dismiss modal
if (/support|rate|extensions/i.test(btn.textContent)) {
diff --git a/chatgpt-auto-continue/firefox/extension/content.js b/chatgpt-auto-continue/firefox/extension/content.js
index 4bef2676c..a14fc8cdd 100644
--- a/chatgpt-auto-continue/firefox/extension/content.js
+++ b/chatgpt-auto-continue/firefox/extension/content.js
@@ -12,10 +12,11 @@
// Init ENV context
const env = { browser: { isMobile: chatgpt.browser.isMobile() }}
+ env.browser.isPortrait = env.browser.isMobile && (window.innerWidth < window.innerHeight)
// Import APP data
const { app } = await chrome.storage.sync.get('app')
- modals.dependencies.import({ app, isMobile: env.browser.isMobile })
+ modals.dependencies.import({ app, isMobile: env.browser.isMobile, isPortrait: env.browser.isPortrait })
// Add CHROME MSG listener
chrome.runtime.onMessage.addListener(req => {
@@ -88,4 +89,8 @@
notify(`${chrome.i18n.getMessage('mode_autoContinue')}: ${ chrome.i18n.getMessage('state_on').toUpperCase()}`)
}
+ // Monitor SCHEME CHANGES to update modal colors
+ new MutationObserver(() => { modals.stylize() })
+ .observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })
+
})()
diff --git a/chatgpt-auto-refresh/greasemonkey/chatgpt-auto-refresh.user.js b/chatgpt-auto-refresh/greasemonkey/chatgpt-auto-refresh.user.js
index 585eb4629..2f501dfe2 100644
--- a/chatgpt-auto-refresh/greasemonkey/chatgpt-auto-refresh.user.js
+++ b/chatgpt-auto-refresh/greasemonkey/chatgpt-auto-refresh.user.js
@@ -220,7 +220,7 @@
// @description:zu *NGOKUPHEPHA* susa ukusetha kabusha ingxoxo yemizuzu eyi-10 + amaphutha enethiwekhi ahlala njalo + Ukuhlolwa kwe-Cloudflare ku-ChatGPT.
// @author Adam Lui
// @namespace https://github.com/adamlui
-// @version 2024.12.17
+// @version 2024.12.19
// @license MIT
// @icon https://media.chatgptautorefresh.com/images/icons/openai/black/icon48.png?c56f963
// @icon64 https://media.chatgptautorefresh.com/images/icons/openai/black/icon64.png?c56f963
@@ -273,6 +273,7 @@
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
@@ -537,8 +538,14 @@
init(modal) {
if (!this.styles) this.stylize() // to init/append stylesheet
- modal.classList.add(this.class) ; modal.onmousedown = this.dragHandlers.mousedown // add class/listener
- fillStarryBG(modal)
+ modal.classList.add(this.class) ; modal.parentNode.classList.add(`${this.class}-bg`) // add classes
+ modal.onmousedown = this.dragHandlers.mousedown // add drag handler
+ fillStarryBG(modal) // add Rising Stars bg
+ setTimeout(() => {
+ modal.parentNode.style.backgroundColor = ( // dim bg
+ `rgba(67, 70, 72, ${ chatgpt.isDarkMode() ? 0.62 : 0.33 })` )
+ modal.parentNode.classList.add('animated') // to trigger modal fade/translate-in
+ }, 100) // delay for transition fx
},
stylize() {
@@ -547,18 +554,41 @@
document.head.append(this.styles)
}
this.styles.innerText = (
- `.${this.class} { z-index: 13456 ; position: absolute }` // to be click-draggable
- + ( chatgpt.isDarkMode() ? '.chatgpt-modal > div { border: 1px solid white }' : '' )
+ `.${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
+ + 'transform 0.55s cubic-bezier(.165,.84,.44,1) !important }' // for move-ins
+ + `.${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 }`
)
},
@@ -610,38 +640,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 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)) {
@@ -961,8 +987,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
diff --git a/chatgpt-auto-talk/greasemonkey/chatgpt-auto-talk.user.js b/chatgpt-auto-talk/greasemonkey/chatgpt-auto-talk.user.js
index 7a42adc3f..66240117e 100644
--- a/chatgpt-auto-talk/greasemonkey/chatgpt-auto-talk.user.js
+++ b/chatgpt-auto-talk/greasemonkey/chatgpt-auto-talk.user.js
@@ -225,7 +225,7 @@
// @description:zu Dlala izimpendulo ze-ChatGPT ngokuzenzakalela
// @author Adam Lui
// @namespace https://github.com/adamlui
-// @version 2024.12.17
+// @version 2024.12.19
// @license MIT
// @icon https://assets.chatgptautotalk.com/images/icons/openai/black/icon48.png?v=9f1ed3c
// @icon64 https://assets.chatgptautotalk.com/images/icons/openai/black/icon64.png?v=9f1ed3c
@@ -266,6 +266,7 @@
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
@@ -485,8 +486,14 @@
init(modal) {
if (!this.styles) this.stylize() // to init/append stylesheet
- modal.classList.add(this.class) ; modal.onmousedown = this.dragHandlers.mousedown // add class/listener
- fillStarryBG(modal)
+ modal.classList.add(this.class) ; modal.parentNode.classList.add(`${this.class}-bg`) // add classes
+ modal.onmousedown = this.dragHandlers.mousedown // add drag handler
+ fillStarryBG(modal) // add Rising Stars bg
+ setTimeout(() => {
+ modal.parentNode.style.backgroundColor = ( // dim bg
+ `rgba(67, 70, 72, ${ chatgpt.isDarkMode() ? 0.62 : 0.33 })` )
+ modal.parentNode.classList.add('animated') // to trigger modal fade/translate-in
+ }, 100) // delay for transition fx
},
stylize() {
@@ -495,18 +502,41 @@
document.head.append(this.styles)
}
this.styles.innerText = (
- `.${this.class} { z-index: 13456 ; position: absolute }` // to be click-draggable
- + ( chatgpt.isDarkMode() ? '.chatgpt-modal > div { border: 1px solid white }' : '' )
+ `.${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
+ + 'transform 0.55s cubic-bezier(.165,.84,.44,1) !important }' // for move-ins
+ + `.${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 }`
)
},
@@ -558,38 +588,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)) {
@@ -891,8 +917,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
diff --git a/chatgpt-infinity/chrome/extension/components/modals.js b/chatgpt-infinity/chrome/extension/components/modals.js
index 387cd3492..24bb53659 100644
--- a/chatgpt-infinity/chrome/extension/components/modals.js
+++ b/chatgpt-infinity/chrome/extension/components/modals.js
@@ -7,7 +7,7 @@ window.modals = {
dependencies: {
import(dependencies) {
// { app, env, browserLang: env.browser.language (userscript only), isMobile: env.browser.isMobile,
- // updateCheck (userscript only) }
+ // isPortrait: env.browser.isPortrait, updateCheck (userscript only) }
for (const name in dependencies) this[name] = dependencies[name]
}
},
@@ -43,8 +43,14 @@ window.modals = {
init(modal) {
if (!this.styles) this.stylize() // to init/append stylesheet
- modal.classList.add(this.class) ; modal.onmousedown = this.dragHandlers.mousedown // add class/listener
- dom.fillStarryBG(modal)
+ modal.classList.add(this.class) ; modal.parentNode.classList.add(`${this.class}-bg`) // add classes
+ modal.onmousedown = this.dragHandlers.mousedown // add drag handler
+ dom.fillStarryBG(modal) // add Rising Stars bg
+ setTimeout(() => {
+ modal.parentNode.style.backgroundColor = ( // dim bg
+ `rgba(67, 70, 72, ${ chatgpt.isDarkMode() ? 0.62 : 0.33 })` )
+ modal.parentNode.classList.add('animated') // to trigger modal fade/translate-in
+ }, 100) // delay for transition fx
},
stylize() {
@@ -53,18 +59,41 @@ window.modals = {
document.head.append(this.styles)
}
this.styles.innerText = (
- `.${this.class} { z-index: 13456 ; position: absolute }` // to be click-draggable
- + ( chatgpt.isDarkMode() ? '.chatgpt-modal > div { border: 1px solid white }' : '' )
+ `.${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
+ + 'transform 0.55s cubic-bezier(.165,.84,.44,1) !important }' // for move-ins
+ + `.${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 }`
+ ( !this.dependencies.isMobile ? `.${this.class} .modal-buttons { margin-left: -13px !important }` : '' )
+ + `.about-em { color: ${ chatgpt.isDarkMode() ? 'white' : 'green' } !important }`
)
},
@@ -116,12 +145,6 @@ window.modals = {
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
-
// Init buttons
const modalBtns = [
function getSupport(){},
@@ -134,28 +157,28 @@ window.modals = {
// Show modal
const aboutModal = modals.alert(
`${this.dependencies.app.symbol} ${this.getMsg('appName')}`, // title
- `🏷️ ${this.getMsg('about_version')}: `
- + `${this.dependencies.app.version}\n`
- + `⚡ ${this.getMsg('about_poweredBy')}: `
- + ``
- + `chatgpt.js v${this.dependencies.app.chatgptJSver}\n`
- + `📜 ${this.getMsg('about_sourceCode')}:\n`
- + `${this.dependencies.app.urls.gitHub}`,
- modalBtns, '',
- /Chromium|Firefox/.test(this.env.runtime) ? 434 : 546 // set width
+ `🏷️ ${this.getMsg('about_version')}: ${this.dependencies.app.version}\n`
+ + `⚡ ${this.getMsg('about_poweredBy')}: `
+ + `chatgpt.js`
+ + ` v${this.dependencies.app.chatgptJSver}\n`
+ + `📜 ${this.getMsg('about_sourceCode')}: `
+ + ``
+ + this.dependencies.app.urls.gitHub + '',
+ modalBtns, '', 656
)
// 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: ${ this.dependencies.isPortrait ? '6px 0 -16px' : '3px 0 0' }` )
// Hack buttons
aboutModal.querySelector('.modal-buttons').style.justifyContent = 'center'
aboutModal.querySelectorAll('button').forEach(btn => {
- btn.style.cssText = 'cursor: pointer !important ;'
- + `height: ${ this.env.runtime.includes('Greasemonkey') ? 50 : 43 }px`
+ btn.style.cssText = 'min-width: 136px ; text-align: center ;'
+ + `height: ${ this.env.runtime.includes('Greasemonkey') ? 58 : 55 }px`
// Replace link buttons w/ clones that don't dismiss modal
if (/support|extensions/i.test(btn.textContent)) {
diff --git a/chatgpt-infinity/chrome/extension/content.js b/chatgpt-infinity/chrome/extension/content.js
index 978e8ebf2..5c2efafaa 100644
--- a/chatgpt-infinity/chrome/extension/content.js
+++ b/chatgpt-infinity/chrome/extension/content.js
@@ -12,10 +12,11 @@
// Init ENV context
const env = { browser: { isMobile: chatgpt.browser.isMobile() }}
+ env.browser.isPortrait = env.browser.isMobile && (window.innerWidth < window.innerHeight)
// Import APP data
const { app } = await chrome.storage.sync.get('app')
- modals.dependencies.import({ app, isMobile: env.browser.isMobile })
+ modals.dependencies.import({ app, isMobile: env.browser.isMobile, isPortrait: env.browser.isPortrait })
// Add CHROME MSG listener
chrome.runtime.onMessage.addListener(req => {
@@ -163,8 +164,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
diff --git a/chatgpt-infinity/firefox/extension/components/modals.js b/chatgpt-infinity/firefox/extension/components/modals.js
index 387cd3492..24bb53659 100644
--- a/chatgpt-infinity/firefox/extension/components/modals.js
+++ b/chatgpt-infinity/firefox/extension/components/modals.js
@@ -7,7 +7,7 @@ window.modals = {
dependencies: {
import(dependencies) {
// { app, env, browserLang: env.browser.language (userscript only), isMobile: env.browser.isMobile,
- // updateCheck (userscript only) }
+ // isPortrait: env.browser.isPortrait, updateCheck (userscript only) }
for (const name in dependencies) this[name] = dependencies[name]
}
},
@@ -43,8 +43,14 @@ window.modals = {
init(modal) {
if (!this.styles) this.stylize() // to init/append stylesheet
- modal.classList.add(this.class) ; modal.onmousedown = this.dragHandlers.mousedown // add class/listener
- dom.fillStarryBG(modal)
+ modal.classList.add(this.class) ; modal.parentNode.classList.add(`${this.class}-bg`) // add classes
+ modal.onmousedown = this.dragHandlers.mousedown // add drag handler
+ dom.fillStarryBG(modal) // add Rising Stars bg
+ setTimeout(() => {
+ modal.parentNode.style.backgroundColor = ( // dim bg
+ `rgba(67, 70, 72, ${ chatgpt.isDarkMode() ? 0.62 : 0.33 })` )
+ modal.parentNode.classList.add('animated') // to trigger modal fade/translate-in
+ }, 100) // delay for transition fx
},
stylize() {
@@ -53,18 +59,41 @@ window.modals = {
document.head.append(this.styles)
}
this.styles.innerText = (
- `.${this.class} { z-index: 13456 ; position: absolute }` // to be click-draggable
- + ( chatgpt.isDarkMode() ? '.chatgpt-modal > div { border: 1px solid white }' : '' )
+ `.${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
+ + 'transform 0.55s cubic-bezier(.165,.84,.44,1) !important }' // for move-ins
+ + `.${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 }`
+ ( !this.dependencies.isMobile ? `.${this.class} .modal-buttons { margin-left: -13px !important }` : '' )
+ + `.about-em { color: ${ chatgpt.isDarkMode() ? 'white' : 'green' } !important }`
)
},
@@ -116,12 +145,6 @@ window.modals = {
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
-
// Init buttons
const modalBtns = [
function getSupport(){},
@@ -134,28 +157,28 @@ window.modals = {
// Show modal
const aboutModal = modals.alert(
`${this.dependencies.app.symbol} ${this.getMsg('appName')}`, // title
- `🏷️ ${this.getMsg('about_version')}: `
- + `${this.dependencies.app.version}\n`
- + `⚡ ${this.getMsg('about_poweredBy')}: `
- + ``
- + `chatgpt.js v${this.dependencies.app.chatgptJSver}\n`
- + `📜 ${this.getMsg('about_sourceCode')}:\n`
- + `${this.dependencies.app.urls.gitHub}`,
- modalBtns, '',
- /Chromium|Firefox/.test(this.env.runtime) ? 434 : 546 // set width
+ `🏷️ ${this.getMsg('about_version')}: ${this.dependencies.app.version}\n`
+ + `⚡ ${this.getMsg('about_poweredBy')}: `
+ + `chatgpt.js`
+ + ` v${this.dependencies.app.chatgptJSver}\n`
+ + `📜 ${this.getMsg('about_sourceCode')}: `
+ + ``
+ + this.dependencies.app.urls.gitHub + '',
+ modalBtns, '', 656
)
// 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: ${ this.dependencies.isPortrait ? '6px 0 -16px' : '3px 0 0' }` )
// Hack buttons
aboutModal.querySelector('.modal-buttons').style.justifyContent = 'center'
aboutModal.querySelectorAll('button').forEach(btn => {
- btn.style.cssText = 'cursor: pointer !important ;'
- + `height: ${ this.env.runtime.includes('Greasemonkey') ? 50 : 43 }px`
+ btn.style.cssText = 'min-width: 136px ; text-align: center ;'
+ + `height: ${ this.env.runtime.includes('Greasemonkey') ? 58 : 55 }px`
// Replace link buttons w/ clones that don't dismiss modal
if (/support|extensions/i.test(btn.textContent)) {
diff --git a/chatgpt-infinity/firefox/extension/content.js b/chatgpt-infinity/firefox/extension/content.js
index dd9a11657..8c851645b 100644
--- a/chatgpt-infinity/firefox/extension/content.js
+++ b/chatgpt-infinity/firefox/extension/content.js
@@ -12,10 +12,11 @@
// Init ENV context
const env = { browser: { isMobile: chatgpt.browser.isMobile() }}
+ env.browser.isPortrait = env.browser.isMobile && (window.innerWidth < window.innerHeight)
// Import APP data
const { app } = await chrome.storage.sync.get('app')
- modals.dependencies.import({ app, isMobile: env.browser.isMobile })
+ modals.dependencies.import({ app, isMobile: env.browser.isMobile, isPortrait: env.browser.isPortrait })
// Add CHROME MSG listener
chrome.runtime.onMessage.addListener((req, _, sendResp) => {
@@ -166,8 +167,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
diff --git a/chatgpt-widescreen/chrome/extension/components/modals.js b/chatgpt-widescreen/chrome/extension/components/modals.js
index b2a189dcb..d5497388b 100644
--- a/chatgpt-widescreen/chrome/extension/components/modals.js
+++ b/chatgpt-widescreen/chrome/extension/components/modals.js
@@ -7,7 +7,7 @@ window.modals = {
dependencies: {
import(dependencies) {
// { app, env, browserLang: env.browser.language (userscript only), isMobile: env.browser.isMobile,
- // updateCheck (userscript only) }
+ // isPortrait: env.browser.isPortrait, updateCheck (userscript only) }
for (const name in dependencies) this[name] = dependencies[name]
}
},
@@ -43,8 +43,14 @@ window.modals = {
init(modal) {
if (!this.styles) this.stylize() // to init/append stylesheet
- modal.classList.add(this.class) ; modal.onmousedown = this.dragHandlers.mousedown // add class/listener
- dom.fillStarryBG(modal)
+ modal.classList.add(this.class) ; modal.parentNode.classList.add(`${this.class}-bg`) // add classes
+ modal.onmousedown = this.dragHandlers.mousedown // add drag handler
+ dom.fillStarryBG(modal) // add Rising Stars bg
+ setTimeout(() => {
+ modal.parentNode.style.backgroundColor = ( // dim bg
+ `rgba(67, 70, 72, ${ chatgpt.isDarkMode() ? 0.62 : 0.33 })` )
+ modal.parentNode.classList.add('animated') // to trigger modal fade/translate-in
+ }, 100) // delay for transition fx
},
stylize() {
@@ -53,18 +59,41 @@ window.modals = {
document.head.append(this.styles)
}
this.styles.innerText = (
- `.${this.class} { z-index: 13456 ; position: absolute }` // to be click-draggable
- + ( chatgpt.isDarkMode() ? '.chatgpt-modal > div { border: 1px solid white }' : '' )
+ `.${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
+ + 'transform 0.55s cubic-bezier(.165,.84,.44,1) !important }' // for move-ins
+ + `.${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 }`
+ ( !this.dependencies.isMobile ? `.${this.class} .modal-buttons { margin-left: -13px !important }` : '' )
+ + `.about-em { color: ${ chatgpt.isDarkMode() ? 'white' : 'green' } !important }`
)
},
@@ -116,12 +145,6 @@ window.modals = {
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
-
// Init buttons
const modalBtns = [
function getSupport(){},
@@ -134,27 +157,28 @@ window.modals = {
// Show modal
const aboutModal = modals.alert(
`${this.dependencies.app.symbol} ${this.getMsg('appName')}`, // title
- `🏷️ ${this.getMsg('about_version')}: `
- + `${this.dependencies.app.version}\n`
- + `⚡ ${this.getMsg('about_poweredBy')}: `
- + ``
- + `chatgpt.js v${this.dependencies.app.chatgptJSver}\n`
- + `📜 ${this.getMsg('about_sourceCode')}:\n`
- + `${this.dependencies.app.urls.gitHub}`,
- modalBtns, '', 546
+ `🏷️ ${this.getMsg('about_version')}: ${this.dependencies.app.version}\n`
+ + `⚡ ${this.getMsg('about_poweredBy')}: `
+ + `chatgpt.js`
+ + ` v${this.dependencies.app.chatgptJSver}\n`
+ + `📜 ${this.getMsg('about_sourceCode')}: `
+ + ``
+ + this.dependencies.app.urls.gitHub + '',
+ modalBtns, '', 656
)
// 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: ${ this.dependencies.isPortrait ? '6px 0 -16px' : '3px 0 0' }` )
// Hack buttons
aboutModal.querySelector('.modal-buttons').style.justifyContent = 'center'
aboutModal.querySelectorAll('button').forEach(btn => {
- btn.style.cssText = 'cursor: pointer !important ;'
- + `height: ${ this.env.runtime.includes('Greasemonkey') ? 50 : 43 }px`
+ btn.style.cssText = 'min-width: 136px ; text-align: center ;'
+ + `height: ${ this.env.runtime.includes('Greasemonkey') ? 58 : 55 }px`
// Replace link buttons w/ clones that don't dismiss modal
if (/support|extensions/i.test(btn.textContent)) {
diff --git a/chatgpt-widescreen/chrome/extension/content.js b/chatgpt-widescreen/chrome/extension/content.js
index 46b157e6b..0b13da92a 100644
--- a/chatgpt-widescreen/chrome/extension/content.js
+++ b/chatgpt-widescreen/chrome/extension/content.js
@@ -12,12 +12,13 @@
// Init ENV context
const env = {
browser: { isMobile: chatgpt.browser.isMobile() }, site: /([^.]+)\.[^.]+$/.exec(location.hostname)[1] }
+ env.browser.isPortrait = env.browser.isMobile && (window.innerWidth < window.innerHeight)
settings.dependencies.import({ env }) // to load/save active tab's settings using env.site
// Import DATA
const { app } = await chrome.storage.sync.get('app'),
{ sites } = await chrome.storage.sync.get('sites')
- modals.dependencies.import({ app, isMobile: env.browser.isMobile })
+ modals.dependencies.import({ app, isMobile: env.browser.isMobile, isPortrait: env.browser.isPortrait })
// Init SETTINGS
await settings.load('extensionDisabled', ...sites[env.site].availFeatures)
@@ -555,9 +556,9 @@
}
}).observe(document[env.site == 'poe' ? 'head' : 'body'], { attributes: true, subtree: true })
- // Monitor SCHEME CHANGES on chatgpt.com to update button colors
+ // Monitor SCHEME CHANGES on chatgpt.com to update chatbar button + modal colors
if (env.site == 'chatgpt')
- new MutationObserver(() => { if (!config.extensionDisabled) btns.updateColor() })
+ new MutationObserver(() => { modals.stylize() ; if (!config.extensionDisabled) btns.updateColor() })
.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })
// Monitor SIDEBAR to update full-window setting for sites w/ native toggle
diff --git a/chatgpt-widescreen/firefox/extension/components/modals.js b/chatgpt-widescreen/firefox/extension/components/modals.js
index b2a189dcb..d5497388b 100644
--- a/chatgpt-widescreen/firefox/extension/components/modals.js
+++ b/chatgpt-widescreen/firefox/extension/components/modals.js
@@ -7,7 +7,7 @@ window.modals = {
dependencies: {
import(dependencies) {
// { app, env, browserLang: env.browser.language (userscript only), isMobile: env.browser.isMobile,
- // updateCheck (userscript only) }
+ // isPortrait: env.browser.isPortrait, updateCheck (userscript only) }
for (const name in dependencies) this[name] = dependencies[name]
}
},
@@ -43,8 +43,14 @@ window.modals = {
init(modal) {
if (!this.styles) this.stylize() // to init/append stylesheet
- modal.classList.add(this.class) ; modal.onmousedown = this.dragHandlers.mousedown // add class/listener
- dom.fillStarryBG(modal)
+ modal.classList.add(this.class) ; modal.parentNode.classList.add(`${this.class}-bg`) // add classes
+ modal.onmousedown = this.dragHandlers.mousedown // add drag handler
+ dom.fillStarryBG(modal) // add Rising Stars bg
+ setTimeout(() => {
+ modal.parentNode.style.backgroundColor = ( // dim bg
+ `rgba(67, 70, 72, ${ chatgpt.isDarkMode() ? 0.62 : 0.33 })` )
+ modal.parentNode.classList.add('animated') // to trigger modal fade/translate-in
+ }, 100) // delay for transition fx
},
stylize() {
@@ -53,18 +59,41 @@ window.modals = {
document.head.append(this.styles)
}
this.styles.innerText = (
- `.${this.class} { z-index: 13456 ; position: absolute }` // to be click-draggable
- + ( chatgpt.isDarkMode() ? '.chatgpt-modal > div { border: 1px solid white }' : '' )
+ `.${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
+ + 'transform 0.55s cubic-bezier(.165,.84,.44,1) !important }' // for move-ins
+ + `.${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 }`
+ ( !this.dependencies.isMobile ? `.${this.class} .modal-buttons { margin-left: -13px !important }` : '' )
+ + `.about-em { color: ${ chatgpt.isDarkMode() ? 'white' : 'green' } !important }`
)
},
@@ -116,12 +145,6 @@ window.modals = {
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
-
// Init buttons
const modalBtns = [
function getSupport(){},
@@ -134,27 +157,28 @@ window.modals = {
// Show modal
const aboutModal = modals.alert(
`${this.dependencies.app.symbol} ${this.getMsg('appName')}`, // title
- `🏷️ ${this.getMsg('about_version')}: `
- + `${this.dependencies.app.version}\n`
- + `⚡ ${this.getMsg('about_poweredBy')}: `
- + ``
- + `chatgpt.js v${this.dependencies.app.chatgptJSver}\n`
- + `📜 ${this.getMsg('about_sourceCode')}:\n`
- + `${this.dependencies.app.urls.gitHub}`,
- modalBtns, '', 546
+ `🏷️ ${this.getMsg('about_version')}: ${this.dependencies.app.version}\n`
+ + `⚡ ${this.getMsg('about_poweredBy')}: `
+ + `chatgpt.js`
+ + ` v${this.dependencies.app.chatgptJSver}\n`
+ + `📜 ${this.getMsg('about_sourceCode')}: `
+ + ``
+ + this.dependencies.app.urls.gitHub + '',
+ modalBtns, '', 656
)
// 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: ${ this.dependencies.isPortrait ? '6px 0 -16px' : '3px 0 0' }` )
// Hack buttons
aboutModal.querySelector('.modal-buttons').style.justifyContent = 'center'
aboutModal.querySelectorAll('button').forEach(btn => {
- btn.style.cssText = 'cursor: pointer !important ;'
- + `height: ${ this.env.runtime.includes('Greasemonkey') ? 50 : 43 }px`
+ btn.style.cssText = 'min-width: 136px ; text-align: center ;'
+ + `height: ${ this.env.runtime.includes('Greasemonkey') ? 58 : 55 }px`
// Replace link buttons w/ clones that don't dismiss modal
if (/support|extensions/i.test(btn.textContent)) {
diff --git a/chatgpt-widescreen/firefox/extension/content.js b/chatgpt-widescreen/firefox/extension/content.js
index 8ba130a0f..3107778c2 100644
--- a/chatgpt-widescreen/firefox/extension/content.js
+++ b/chatgpt-widescreen/firefox/extension/content.js
@@ -12,12 +12,13 @@
// Init ENV context
const env = {
browser: { isMobile: chatgpt.browser.isMobile() }, site: /([^.]+)\.[^.]+$/.exec(location.hostname)[1] }
+ env.browser.isPortrait = env.browser.isMobile && (window.innerWidth < window.innerHeight)
settings.dependencies.import({ env }) // to load/save active tab's settings using env.site
// Import DATA
const { app } = await chrome.storage.sync.get('app'),
{ sites } = await chrome.storage.sync.get('sites')
- modals.dependencies.import({ app, isMobile: env.browser.isMobile })
+ modals.dependencies.import({ app, isMobile: env.browser.isMobile, isPortrait: env.browser.isPortrait })
// Init SETTINGS
await settings.load('extensionDisabled', ...sites[env.site].availFeatures)
@@ -555,9 +556,9 @@
}
}).observe(document[env.site == 'poe' ? 'head' : 'body'], { attributes: true, subtree: true })
- // Monitor SCHEME CHANGES on chatgpt.com to update button colors
+ // Monitor SCHEME CHANGES on chatgpt.com to update chatbar button + modal colors
if (env.site == 'chatgpt')
- new MutationObserver(() => { if (!config.extensionDisabled) btns.updateColor() })
+ new MutationObserver(() => { modals.stylize() ; if (!config.extensionDisabled) btns.updateColor() })
.observe(document.documentElement, { attributes: true, attributeFilter: ['class'] })
// Monitor SIDEBAR to update full-window setting for sites w/ native toggle