Skip to content

Commit

Permalink
Applied classic styling when BG animations disabled ↞ [auto-sync from…
Browse files Browse the repository at this point in the history 
… `adamlui/chatgpt-apps`]
  • Loading branch information
@adamlui @kudo-sync-bot
adamlui authored and kudo-sync-bot committed Sep 19, 2024
1 parent 0ad11f0 commit dc640bb
Showing 1 changed file with 52 additions and 27 deletions.
79 changes: 52 additions & 27 deletions greasemonkey/bravegpt.user.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -148,7 +148,7 @@
// @description:zu Yengeza izimpendulo ze-AI ku-Brave Search (inikwa amandla yi-GPT-4o!)
// @author KudoAI
// @namespace https://kudoai.com
// @version 2024.9.18.4
// @version 2024.9.18.5
// @license MIT
// @icon https://media.bravegpt.com/images/icons/bravegpt/icon48.png?0a9e287
// @icon64 https://media.bravegpt.com/images/icons/bravegpt/icon64.png?0a9e287
Expand Down Expand Up @@ -1870,6 +1870,15 @@
}
},

replyPrefix() {
const firstP = appDiv.querySelector('pre p')
if (!firstP) return
const prefixNeeded = ui.app.scheme == 'dark' && !config.bgAnimationsDisabled,
prefixExists = firstP.textContent.startsWith('>> ')
if (prefixNeeded && !prefixExists) firstP.prepend('>> ')
else if (!prefixNeeded && prefixExists) firstP.textContent = firstP.textContent.replace(/^>> /, '')
},

rqVisibility() {
const relatedQueriesDiv = appDiv.querySelector('.related-queries')
if (relatedQueriesDiv) // update visibility based on latest setting
Expand All @@ -1879,8 +1888,8 @@
scheme(newScheme) {
log.caller = `update.scheme('${newScheme}')`
log.debug(`Updating ${app.name} scheme to ${log.toTitleCase(newScheme)}...`)
ui.app.scheme = newScheme ; logos.braveGPT.update()
update.style.app() ; update.stars() ; toggle.btnGlow() ; modals.settings.updateSchemeStatus()
ui.app.scheme = newScheme ; logos.braveGPT.update() ; update.style.app()
update.stars() ; update.replyPrefix() ; toggle.btnGlow() ; modals.settings.updateSchemeStatus()
log.debug(`Success! ${app.name} updated to ${log.toTitleCase(newScheme)} scheme`)
},

Expand All @@ -1895,7 +1904,11 @@
style: {
app() {
appStyle.innerText = (
'@keyframes modal-zoom-fade-out { 0% { opacity: 1 } 50% { opacity: 0.25 ; transform: scale(1.05) }'
':root {' // color vars
+ '--app-bg-color-light-scheme: #ffffff ; --app-bg-color-dark-scheme: #282828 ;'
+ '--pre-bg-color-light-scheme: #e7e7e7cf ; --pre-bg-color-dark-scheme: #3a3a3a ;'
+ '--font-color-light-scheme: #282828 ; --font-color-dark-scheme: #f2f2f2 }'
+ '@keyframes modal-zoom-fade-out { 0% { opacity: 1 } 50% { opacity: 0.25 ; transform: scale(1.05) }'
+ '100% { opacity: 0 ; transform: scale(1.35) }}'
+ '@keyframes btn-zoom-fade-out { 0% { opacity: 1 } 50% { opacity: 0.65 ; transform: scale(1.85) }'
+ '75% { opacity: 0.05 ; transform: scale(3.15) } 100% { opacity: 0 ; transform: scale(5.85) }}'
Expand All @@ -1909,16 +1922,19 @@
+ '#bravegpt * { scrollbar-width: thin }' // make scrollbars thin in Firefox
+ '.cursor-overlay {' // for fontSizeSlider.createAppend() drag listeners to show resize cursor everywhere
+ 'position: fixed ; top: 0 ; left: 0 ; width: 100% ; height: 100% ; z-index: 9999 ; cursor: ew-resize }'
+ '#bravegpt { z-index: 5555 ; word-wrap: break-word ; white-space: pre-wrap ;'
+ '#bravegpt {'
+ 'z-index: 5555 ; word-wrap: break-word ; white-space: pre-wrap ;'
+ 'border: 1px solid var(--color-divider-subtle) ; border-radius: 18px ;'
+ `margin: ${ env.browser.isMobile ? '0 8px 16px' : '0 0 20px' } ; padding: 24px 23px 45px 23px ;`
+ `background-image: linear-gradient(180deg, ${
ui.app.scheme == 'dark' ? '#99a8a6 -215px, black 185px'
: `${ config.bgAnimationsDisabled ? 'white' : '#b6ebff' } -193px, white 65px` }) ;`
+ ( config.bgAnimationsDisabled ? // classic flat bg
`background: var(--app-bg-color-${ui.app.scheme}-scheme) ; color: var(--font-color-${ui.app.scheme}-scheme) ;`
: `background-image: linear-gradient(180deg, ${ // gradient bg to match stars
ui.app.scheme == 'dark' ? '#99a8a6 -215px, black 185px' : '#b6ebff -193px, white 65px' }) ;`
+ ( ui.app.scheme == 'dark' ? 'border: none ;' : '' ))
+ ( !config.fgAnimationsDisabled ?
'transition: bottom 0.1s cubic-bezier(0, 0, 0.2, 1),' // smoothen Anchor vertical minimize/restore
+ 'width 0.167s cubic-bezier(0, 0, 0.2, 1),' // smoothen Anchor horizontal expand/shrink
+ 'opacity 0.5s ease, transform 0.5s ease ;' : '' ) // smoothen 1st app fade-in
+ `border: ${ ui.app.scheme == 'dark' ? 'none' : '1px solid var(--color-divider-subtle)' } ; border-radius: 18px }`
+ 'opacity 0.5s ease, transform 0.5s ease ;' : '' ) + '}' // smoothen 1st app fade-in
+ '#bravegpt:hover { box-shadow: 0 9px 28px rgba(0, 0, 0, 0.09) }'
+ `#bravegpt p { margin: 0 ${ ui.app.scheme == 'dark' ? '; color: #ccc' : '' }}`
+ `#bravegpt .alert-link { color: ${ ui.app.scheme == 'light' ? '#190cb0' : 'white ; text-decoration: underline' }}`
Expand Down Expand Up @@ -1959,14 +1975,24 @@
+ '.standby-btn:hover { border-radius: 4px ;'
+ `${ ui.app.scheme == 'dark' ? 'background: white ; color: black' : 'background: black ; color: white' };`
+ `${ config.fgAnimationsDisabled || env.browser.isMobile ? '' : 'transform: scaleX(1.015) scaleY(1.03)' }}`
+ '.balloon-tip {'
+ 'content: "" ; position: relative ; border: 7px solid transparent ;'
+ 'float: left ; left: 7px ; margin: 36px -13px 0 0 ;' // positioning
+ 'border-bottom-style: solid ; border-bottom-width: 16px ; border-top: 0 ; border-bottom-color:'
+ ( ui.app.scheme == 'dark' && !config.bgAnimationsDisabled ? '#0000' // hide it for terminal aesthetic
: `var(--pre-bg-color-${ui.app.scheme}-scheme)` ) + '}'
+ '#bravegpt > pre {'
+ `font-size: ${config.fontSize}px ; font-family: Consolas, Menlo, Monaco, monospace ; white-space: pre-wrap ;`
+ `line-height: ${ config.fontSize * config.lineHeightRatio }px ; overscroll-behavior: contain ;`
+ 'margin-top: 12px ; padding: 1.2em 1.2em 0 1.2em ; border-radius: 13px ; overflow: auto ;'
+ ( config.bgAnimationsDisabled ? // classic opaque bg
`background: var(--pre-bg-color-${ui.app.scheme}-scheme) ; color: var(--font-color-${ui.app.scheme}-scheme)`
: `${ // slightly tranluscent bg
ui.app.scheme == 'dark' ? 'background: #2b3a40cf ; color: var(--font-color-dark-scheme) ; border: 1px solid white'
: 'background: var(--pre-bg-color-light-scheme) ;'
+ 'color: var(--font-color-light-scheme) ; border: none' } ;` )
+ ( !config.fgAnimationsDisabled ? // smoothen Anchor mode vertical expand/shrink
'transition: max-height 0.167s cubic-bezier(0, 0, 0.2, 1) ;' : '' )
+ `${ ui.app.scheme == 'dark' ? 'background: #2b3a40cf ; color: #f2f2f2 ; border: 1px solid white'
: 'background: #eaeaeacf ; color: #282828 ; border: none' }}`
'transition: max-height 0.167s cubic-bezier(0, 0, 0.2, 1) ;' : '' ) + '}'
+ `#bravegpt footer { margin: ${ env.browser.isFF ? 32 : 27 }px 18px -26px 0 ; border-top: none !important }`
+ '#bravegpt .feedback {'
+ 'float: right ; font-family: var(--brand-font) ; font-size: .55rem; color: #aaa ;'
Expand All @@ -1975,10 +2001,6 @@
+ ' fill: currentColor ; color: currentColor ; --size: 12px ; position: relative ; top: 0.19em ; right: 2px }'
+ `#bravegpt footer a:hover { color: ${ ui.app.scheme == 'dark' ? 'white' : 'black' } ; text-decoration: none }`
+ '@keyframes pulse { 0%, to { opacity: 1 } 50% { opacity: .5 }}'
+ '.balloon-tip { content: "" ; position: relative ; border: 7px solid transparent ;'
+ 'float: left ; left: 7px ; margin: 36px -13px 0 0 ;' // positioning
+ 'border-bottom-style: solid ; border-bottom-width: 16px ; border-top: 0 ; border-bottom-color:'
+ ( ui.app.scheme == 'dark' ? '#0000' : '#eaeaeacf' ) + '}'
+ '.chatgpt-js { font-family: var(--brand-font) ; font-size: .65rem ; position: relative ; right: .9rem }'
+ '.chatgpt-js > a { color: inherit ; top: .054rem }'
+ '.chatgpt-js > svg { top: 3px ; position: relative ; margin-right: 1px }'
Expand All @@ -1987,11 +2009,12 @@
+ 'code #copy-btn { position: relative ; top: -6px ; right: -9px }'
+ 'code #copy-btn > svg { height: 13px ; width: 13px ; fill: white }'
+ '#app-chatbar {'
+ `border: solid 1px ${ ui.app.scheme == 'dark' ? '#aaa' : '#638ed4' } ; border-radius: 12px 15px 12px 0 ;`
+ `border: solid 1px ${ ui.app.scheme == 'dark' ? ( config.bgAnimationsDisabled ? '#777' : '#aaa' ) : '#638ed4' } ;`
+ 'border-radius: 12px 13px 12px 0 ;'
+ 'border-radius: 15px 16px 15px 0 ; margin: -6px 0 -7px 0 ; padding: 12px 51px 12px 10px ;'
+ `position: relative ; z-index: 555 ; color: ${ ui.app.scheme == 'dark' ? '#eee' : '#222' } ;`
+ 'height: 43px ; line-height: 17px ; width: 100% ; max-height: 200px ; resize: none ;'
+ `background: ${ ui.app.scheme == 'dark' ? '#5151519e' : '#eeeeee9e' };`
+ `position: relative ; z-index: 555 ; color: ${ ui.app.scheme == 'dark' ? '#eee' : '#222' }}`
+ `background: ${ ui.app.scheme == 'dark' ? `#515151${ config.bgAnimationsDisabled ? '' : '9e' }` : '#eeeeee9e' }}`
+ '.related-queries {'
+ 'display: flex ; flex-wrap: wrap ; width: 100% ; margin-bottom: -28px ;'
+ 'position: relative ; top: -3px ;' // scooch up to hug feedback gap
Expand All @@ -2000,11 +2023,14 @@
+ 'font-size: 0.77em ; cursor: pointer ;'
+ 'box-sizing: border-box ; width: fit-content ; max-width: 100% ;' // confine to .related-queries bounds
+ 'margin: 4px 4px 7px 0 ; padding: 8px 13px 7px 14px ;'
+ `color: ${ ui.app.scheme == 'dark' ? '#f2f2f2' : '#767676' } ;`
+ `background: ${ ui.app.scheme == 'dark' ? '#595858d6' : '#fbfbfbb0' } ;`
+ `border: 1px solid ${ ui.app.scheme == 'dark' ? '#777' : '#e1e1e1' } ;`
+ `color: ${ ui.app.scheme == 'dark' ? ( config.bgAnimationsDisabled ? '#ccc' : '#f2f2f2' ) : '#767676' } ;`
+ `background: ${
config.bgAnimationsDisabled ? ( ui.app.scheme == 'dark' ? '#404040' : '#dadada12' )
: ( ui.app.scheme == 'dark' ? '#595858d6' : '#fbfbfbb0' )} ;`
+ `border: 1px solid ${ ui.app.scheme == 'dark' ? ( config.bgAnimationsDisabled ? '#5f5f5f' : '#777' ) : '#e1e1e1' } ;`
+ 'border-radius: 0 13px 12px 13px ; flex: 0 0 auto ;'
+ `box-shadow: 1px 4px ${ ui.app.scheme == 'dark' ? '22px -8px lightgray' : '8px -6px rgba(169, 169, 169, 0.75)' };`
+ `box-shadow: 1px 4px ${ ui.app.scheme == 'dark' ? `${ config.bgAnimationsDisabled ? 10 : 18 }px -8px lightgray`
: '8px -6px rgba(169, 169, 169, 0.75)' };`
+ `${ config.fgAnimationsDisabled ? '' : 'transition: transform 0.1s ease !important' }}`
+ '.related-query:hover, .related-query:focus {'
+ ( config.fgAnimationsDisabled || env.browser.isMobile ? '' : 'transform: scale(1.055) !important ;' )
Expand Down Expand Up @@ -2538,7 +2564,7 @@
const configKey = layer + 'AnimationsDisabled'
log.debug(`Toggling ${layer.toUpperCase()} animations ${ config[configKey] ? 'ON' : 'OFF' }...`)
settings.save(configKey, !config[configKey])
update.style.app() ; if (layer == 'bg') update.stars()
update.style.app() ; if (layer == 'bg') { update.stars() ; update.replyPrefix() }
if (layer == 'fg' && modals.settings.get()) {

// Toggle ticker-scroll of About status label
Expand Down Expand Up @@ -3438,8 +3464,7 @@
try { // to render markdown
answerPre.innerHTML = marked.parse(answer) } catch (err) { log.error(err.message) }
hljs.highlightAll() // highlight code
if (ui.app.scheme == 'dark' && answerPre.firstChild?.tagName == 'P')
answerPre.firstChild.prepend('>> ') // since speech balloon tip missing
update.replyPrefix() // prepend '>> ' if dark scheme w/ bg animations to emulate terminal

// Typeset math
answerPre.querySelectorAll('code').forEach(codeBlock => { // add linebreaks after semicolons
Expand Down

0 comments on commit dc640bb

Please sign in to comment.