Skip to content

Commit a4fe403

Browse files
kudo-sync-botkudo-sync-bot
committed
Abstracted appScheme in update.appStyle() ↞ [auto-sync from https://github.com/adamlui/ai-web-extensions/tree/main/amazongpt]
1 parent 7d4991d commit a4fe403

1 file changed

Lines changed: 46 additions & 48 deletions

File tree

‎chatgpt/amazongpt/amazongpt.user.js‎

Lines changed: 46 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
// @description Add AI chat & product/category summaries to Amazon shopping, powered by the latest LLMs like GPT-4o!
44
// @author KudoAI
55
// @namespace https://kudoai.com
6-
// @version 2025.10.14.1
6+
// @version 2025.10.14.2
77
// @license MIT
88
// @icon https://amazongpt.kudoai.com/assets/images/icons/app/black-gold-teal/icon48.png?v=8e8ed1c
99
// @icon64 https://amazongpt.kudoai.com/assets/images/icons/app/black-gold-teal/icon64.png?v=8e8ed1c
@@ -279,7 +279,8 @@
279279
appBottomPos() { app.div.style.bottom = `${ config.minimized ? 55 - app.div.offsetHeight : -7 }px` },
280280

281281
appStyle() { // used in toggle.animations() + update.scheme() + main's app init
282-
const isParticlizedDS = env.ui.app.scheme == 'dark' && !config.bgAnimationsDisabled
282+
const { scheme: appScheme } = env.ui.app,
283+
isParticlizedDS = appScheme == 'dark' && !config.bgAnimationsDisabled
283284
modals.stylize() // update modal styles
284285
if (!app.styles?.isConnected) document.head.append(app.styles ||= dom.create.style())
285286
app.styles.textContent = (
@@ -295,10 +296,10 @@
295296
--chatbar-btn-hover-color-light-scheme: #638ed4 ; --chatbar-btn-hover-color-dark-scheme: #fff ;
296297
--font-color-light-scheme: #4e4e4e ; --font-color-dark-scheme: #e3e3e3 ;
297298
--app-border: ${ isParticlizedDS ? 'none'
298-
: `1px solid #${ env.ui.app.scheme == 'light' ? 'dadce0' : '3b3b3b' }`};
299+
: `1px solid #${ appScheme == 'light' ? 'dadce0' : '3b3b3b' }`};
299300
--app-gradient-bg: linear-gradient(180deg, ${
300-
env.ui.app.scheme == 'dark' ? '#99a8a6 -245px, black 185px' : '#b6ebff -163px, white 65px' }) ;
301-
--app-anchored-shadow: 0 15px 52px rgb(0,0,${ env.ui.app.scheme == 'light' ? '7,0.06' : '11,0.22' }) ;
301+
appScheme == 'dark' ? '#99a8a6 -245px, black 185px' : '#b6ebff -163px, white 65px' }) ;
302+
--app-anchored-shadow: 0 15px 52px rgb(0,0,${ appScheme == 'light' ? '7,0.06' : '11,0.22' }) ;
302303
--app-transition: opacity 0.5s ease, transform 0.5s ease, /* for 1st fade-in */
303304
bottom 0.1s cubic-bezier(0,0,0.2,1), /* smoothen Anchor Y min/restore */
304305
width 0.167s cubic-bezier(0,0,0.2,1) ; /* smoothen Anchor X expand/shrink */
@@ -345,14 +346,14 @@
345346
position: fixed ; top: 0 ; left: 0 ; width: 100% ; height: 100% ;
346347
z-index: 9999 ; cursor: ew-resize }
347348
#${app.slug} { /* main app div */
348-
color: var(--font-color-${env.ui.app.scheme}-scheme) ;
349-
background: var(--app-bg-color-${env.ui.app.scheme}-scheme) ;
349+
color: var(--font-color-${appScheme}-scheme) ;
350+
background: var(--app-bg-color-${appScheme}-scheme) ;
350351
z-index: 5555 ; padding: 17px 26px 16px ; border-radius: 15px ;
351352
word-wrap: break-word ; white-space: pre-wrap ;
352353
transition: var(--app-transition) ;
353354
-webkit-transition: var(--app-transition) ; -moz-transition: var(--app-transition) ;
354355
-o-transition: var(--app-transition) ; -ms-transition: var(--app-transition) ;
355-
${ config.bgAnimationsDisabled ? `background: var(--app-bg-color-${env.ui.app.scheme}-scheme)`
356+
${ config.bgAnimationsDisabled ? `background: var(--app-bg-color-${appScheme}-scheme)`
356357
: 'background-image: var(--app-gradient-bg)' }}
357358
#${app.slug} .app-hover-only { /* hide app-hover-only elems */
358359
position: absolute ; left: -9999px ; opacity: 0 ; /* using position to support transitions */
@@ -363,40 +364,38 @@
363364
position: relative ; left: auto ; width: auto ; opacity: 1 }
364365
#${app.slug} p { margin: 0 }
365366
#${app.slug} .alert-link {
366-
color: ${ env.ui.app.scheme == 'light' ? '#190cb0' : 'white ; text-decoration: underline' }}
367+
color: ${ appScheme == 'light' ? '#190cb0' : 'white ; text-decoration: underline' }}
367368
.${app.slug}-name, .${app.slug}-name:hover {
368369
font-size: 1.5rem ; font-weight: 700 ; text-decoration: none ;
369-
color: ${ env.ui.app.scheme == 'dark' ? 'white' : 'black' }}
370+
color: ${ appScheme == 'dark' ? 'white' : 'black' }}
370371
.byline { /* header byline */
371372
position: relative ; bottom: -1px ; margin-left: 8px ; color: #aaa ;
372373
--byline-transition: 0.15s ease-in-out ; transition: var(--byline-transition) ;
373374
-webkit-transition: var(--byline-transition) ; -moz-transition: var(--byline-transition) ;
374375
-o-transition: var(--byline-transition) ; -ms-transition: var(--byline-transition) }
375376
.byline a, .byline a:visited { color: #aaa ; text-decoration: none !important }
376377
.byline a:hover {
377-
color: ${ env.ui.app.scheme == 'dark' ? 'white' : 'black' };
378+
color: ${ appScheme == 'dark' ? 'white' : 'black' };
378379
transition: var(--byline-transition) ;
379380
-webkit-transition: var(--byline-transition) ; -moz-transition: var(--byline-transition) ;
380381
-o-transition: var(--byline-transition) ; -ms-transition: var(--byline-transition) }
381382
#${app.slug}-header-btns { display: flex ; direction: rtl ; gap: 2px ; float: right ; margin-top: -2px }
382383
.${app.slug}-header-btn {
383384
float: right ; cursor: pointer ; position: relative ; top: 4px ;
384-
${ env.ui.app.scheme == 'dark' ? 'fill: white ; stroke: white'
385-
: 'fill: #adadad ; stroke: #adadad' }}
385+
${ appScheme == 'dark' ? 'fill: white ; stroke: white' : 'fill: #adadad ; stroke: #adadad' }}
386386
.${app.slug}-header-btn:hover svg { /* highlight/zoom header button on hover */
387-
${ env.ui.app.scheme == 'dark' ? 'fill: #d9d9d9 ; stroke: #d9d9d9'
388-
: 'fill: black ; stroke: black' };
387+
${ appScheme == 'dark' ? 'fill: #d9d9d9 ; stroke: #d9d9d9' : 'fill: black ; stroke: black' };
389388
${ env.browser.isMobile ? '' : 'transform: scale(1.285)' }}
390389
${ config.fgAnimationsDisabled ? '' :
391390
`.${app.slug}-header-btn, .${app.slug}-header-btn svg { /* smooth header button fade-in + hover-zoom */
392391
transition: var(--btn-transition) ;
393392
-webkit-transition: var(--btn-transition) ; -moz-transition: var(--btn-transition) ;
394393
-o-transition: var(--btn-transition) ; -ms-transition: var(--btn-transition) }`}
395394
.${app.slug}-header-btn:active {
396-
${ env.ui.app.scheme == 'dark' ? 'fill: #999999 ; stroke: #999999'
397-
: 'fill: #638ed4 ; stroke: #638ed4' }}
395+
${ appScheme == 'dark' ? 'fill: #999999 ; stroke: #999999'
396+
: 'fill: #638ed4 ; stroke: #638ed4' }}
398397
#${app.slug}-logo, .${app.slug}-header-btn svg {
399-
filter: drop-shadow(${ env.ui.app.scheme == 'dark' ? '#7171714d 10px' : '#aaaaaa21 7px' } 7px 3px) }
398+
filter: drop-shadow(${ appScheme == 'dark' ? '#7171714d 10px' : '#aaaaaa21 7px' } 7px 3px) }
400399
#${app.slug} .loading {
401400
color: #b6b8ba ; fill: #b6b8ba ; animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite }
402401
#${app.slug} section.loading { padding-left: 5px } /* left-pad loading status when sending replies */
@@ -414,7 +413,7 @@
414413
#${app.slug}-font-size-slider-thumb {
415414
z-index: 2 ; width: 7px ; height: 25px ; border-radius: 30% ; position: relative ;
416415
top: -7.65px ; cursor: ew-resize ;
417-
background-color: ${ env.ui.app.scheme == 'dark' ? 'white' : '#4a4a4a' };
416+
background-color: ${ appScheme == 'dark' ? 'white' : '#4a4a4a' };
418417
--shadow: rgba(0,0,0,0.21) 1px 1px 9px 0 ;
419418
box-shadow: var(--shadow) ; -webkit-box-shadow: var(--shadow) ; -moz-box-shadow: var(--shadow) ;
420419
${ config.fgAnimationsDisabled ? '' : `transition: var(--font-size-slider-thumb-transition)
@@ -430,28 +429,28 @@
430429
float: left ; left: 7px ; margin: 3px -14px -23px -2px ; /* positioning */
431430
border-bottom-style: solid ; border-bottom-width: 20px ; border-top: 0 ; border-bottom-color:
432431
${ // hide reply tip for terminal aesthetic
433-
isParticlizedDS ? '#0000' : `var(--reply-header-bg-color-${env.ui.app.scheme}-scheme)` }}
432+
isParticlizedDS ? '#0000' : `var(--reply-header-bg-color-${appScheme}-scheme)` }}
434433
#${app.slug} .reply-header {
435434
display: flex ; align-items: center ; position: relative ; width: 100% ;
436435
top: 14px ; padding: 16px 14px ; height: 18px ; border-radius: 12px 12px 0 0 ;
437-
${ env.ui.app.scheme == 'light' ? 'border-bottom: 1px solid white'
438-
: isParticlizedDS ? 'border: 1px solid ; border-bottom-color: transparent' : '' };
439-
background: var(--reply-header-bg-color-${env.ui.app.scheme}-scheme) ;
440-
color: var(--reply-header-fg-color-${env.ui.app.scheme}-scheme) ;
441-
fill: var(--reply-header-fg-color-${env.ui.app.scheme}-scheme) ;
442-
stroke: var(--reply-header-fg-color-${env.ui.app.scheme}-scheme) }
436+
${ appScheme == 'light' ? 'border-bottom: 1px solid white'
437+
: isParticlizedDS ? 'border: 1px solid ; border-bottom-color: transparent' : '' };
438+
background: var(--reply-header-bg-color-${appScheme}-scheme) ;
439+
color: var(--reply-header-fg-color-${appScheme}-scheme) ;
440+
fill: var(--reply-header-fg-color-${appScheme}-scheme) ;
441+
stroke: var(--reply-header-fg-color-${appScheme}-scheme) }
443442
#${app.slug} .reply-header-txt { flex-grow: 1 ; font-size: 12px ; font-family: monospace }
444443
#${app.slug} .reply-header-btns { margin: 7.5px -5px 0 }
445444
#${app.slug} .reply-pre {
446445
font-size: ${config.fontSize}px ; white-space: pre-wrap ; min-width: 0 ;
447446
line-height: ${ config.fontSize * config.lineHeightRatio }px ; overscroll-behavior: contain ;
448447
position: relative ; z-index: 1 ; /* allow top-margin to overlap header in light scheme */
449-
margin: ${ env.ui.app.scheme == 'light' ? 11 : 13 }px 0 7px 0 ; padding: 1.25em 1.25em 0 1.25em ;
448+
margin: ${ appScheme == 'light' ? 11 : 13 }px 0 7px 0 ; padding: 1.25em 1.25em 0 1.25em ;
450449
border-radius: 0 0 12px 12px ; overflow: auto ;
451450
${ config.bgAnimationsDisabled ? // classic opaque bg
452-
`background: var(--pre-bg-color-${env.ui.app.scheme}-scheme) ;
453-
color: var(--font-color-${env.ui.app.scheme}-scheme)`
454-
: env.ui.app.scheme == 'dark' ? // slightly tranluscent bg
451+
`background: var(--pre-bg-color-${appScheme}-scheme) ;
452+
color: var(--font-color-${appScheme}-scheme)`
453+
: appScheme == 'dark' ? // slightly tranluscent bg
455454
'background: #2b3a40cf ; color: var(--font-color-dark-scheme) ; border: 1px solid white'
456455
: /* light scheme */ `background: var(--pre-bg-color-light-scheme) ;
457456
color: var(--font-color-light-scheme) ; border: none` };
@@ -462,7 +461,7 @@
462461
-o-transition: var(--reply-pre-transition) ;
463462
-ms-transition: var(--reply-pre-transition)` }}
464463
#${app.slug} .reply-pre a, #${app.slug} .reply-pre a:visited { color: #4495d4 }
465-
#${app.slug} .reply-pre a:hover { color: ${ env.ui.app.scheme == 'dark' ? 'white' : '#ea7a28' }}
464+
#${app.slug} .reply-pre a:hover { color: ${ appScheme == 'dark' ? 'white' : '#ea7a28' }}
466465
#${app.slug} .code-header {
467466
display: flex ; direction: rtl ; gap: 9px ; align-items: center ;
468467
height: 11px ; margin: 3px -2px 0 }
@@ -476,12 +475,12 @@
476475
#${app.slug} .reply-pre h1, #${app.slug} .reply-pre h2, #${app.slug} .reply-pre h3 {
477476
margin-bottom: -15px } /* reduce gap after headings */
478477
#${app.slug} .reply-pre ol { /* override ol styles */
479-
color: var(--font-color-${env.ui.app.scheme}-scheme) ; margin: -5px 0 -6px 7px }
478+
color: var(--font-color-${appScheme}-scheme) ; margin: -5px 0 -6px 7px }
480479
#${app.slug} .reply-pre ol > li { /* reduce v-padding, show number markers */
481480
margin: -10px 0 -6px 1.6em ; list-style: decimal }
482481
#${app.slug} .reply-pre ol > li::marker { font-size: 0.9em } /* shrink number markers */
483482
#${app.slug} .reply-pre ul { /* override ul styles */
484-
color: var(--font-color-${env.ui.app.scheme}-scheme) ; margin-bottom: -21px }
483+
color: var(--font-color-${appScheme}-scheme) ; margin-bottom: -21px }
485484
#${app.slug} .reply-pre ul > li { list-style: circle } /* show hollow bullets */
486485
#${app.slug} .reply-pre ul ul > li { list-style: disc } /* fill sub-bullets */`
487486

@@ -497,13 +496,13 @@
497496

498497
// Chatbar styles
499498
+ `#${app.slug}-chatbar {
500-
border: solid 1px ${ isParticlizedDS ? '#aaa' : env.ui.app.scheme == 'dark' ? '#777' : '#555' };
499+
border: solid 1px ${ isParticlizedDS ? '#aaa' : appScheme == 'dark' ? '#777' : '#555' };
501500
border-radius: 12px 13px 12px 0 ; margin: 3px 0 15px 0 ; padding: 13px 57px 9px 10px ;
502501
font-size: 14.5px ; height: 46px ; width: 100% ; max-height: 200px ; resize: none ;
503-
position: relative ; z-index: 555 ; color: #${ env.ui.app.scheme == 'dark' ? 'eee' : '222' };
504-
background: ${ env.ui.app.scheme == 'light' ? '#eeeeee9e'
502+
position: relative ; z-index: 555 ; color: #${ appScheme == 'dark' ? 'eee' : '222' };
503+
background: ${ appScheme == 'light' ? '#eeeeee9e'
505504
: `#515151${ config.bgAnimationsDisabled ? '' : '9e' }`};
506-
${ env.ui.app.scheme == 'dark' ? '' :
505+
${ appScheme == 'dark' ? '' :
507506
`--chatbar-inset-shadow: 0 1px 2px rgba(15,17,17,0.1) inset ;
508507
box-shadow: var(--chatbar-inset-shadow) ; -webkit-box-shadow: var(--chatbar-inset-shadow) ;
509508
-moz-box-shadow: var(--chatbar-inset-shadow) ;` }
@@ -512,9 +511,9 @@
512511
-o-transition: box-shadow 0.15s ease ; -ms-transition: box-shadow 0.15s ease }
513512
${ isParticlizedDS ? '' : // add inset shadow to chatbar on hover
514513
`#${app.slug}-chatbar:hover:not(:focus) {
515-
outline: ${ env.ui.app.scheme == 'light' ? 'black' : 'white' } auto 5px ;
514+
outline: ${ appScheme == 'light' ? 'black' : 'white' } auto 5px ;
516515
--chatbar-hover-inset-shadow: 0 ${
517-
env.ui.app.scheme == 'dark' ? '3px 2px' : '1px 7px' } rgba(15,17,17,0.15) inset ;
516+
appScheme == 'dark' ? '3px 2px' : '1px 7px' } rgba(15,17,17,0.15) inset ;
518517
box-shadow: var(--chatbar-hover-inset-shadow) ;
519518
-webkit-box-shadow: var(--chatbar-hover-inset-shadow) ;
520519
-moz-box-shadow: var(--chatbar-hover-inset-shadow) ;
@@ -524,28 +523,27 @@
524523
#${app.slug}-chatbar:focus-visible { /* fallback outline chatbar + reduce inset shadow on focus */
525524
outline: -webkit-focus-ring-color auto 1px ;
526525
${ isParticlizedDS ? '' :
527-
`--inset-shadow: 0 ${
528-
env.ui.app.scheme == 'dark' ? '3px -1px' : '1px 2px' } rgba(0,0,0,0.3) inset ;
526+
`--inset-shadow: 0 ${ appScheme == 'dark' ? '3px -1px' : '1px 2px' } rgba(0,0,0,0.3) inset ;
529527
box-shadow: var(--inset-shadow) ;
530528
-webkit-box-shadow: var(--inset-shadow) ; -moz-box-shadow: var(--inset-shadow)` }
531529
}
532530
.${app.slug}-chatbar-btn {
533531
z-index: 560 ; border: none ; float: right ; position: relative ;
534532
bottom: 50px ; background: none ; cursor: pointer ;
535533
transform: scale(1.05) ; /* zoom 'em a bit */
536-
color: var(--chatbar-btn-color-${env.ui.app.scheme}-scheme) ;
537-
fill: var(--chatbar-btn-color-${env.ui.app.scheme}-scheme) ;
538-
stroke: var(--chatbar-btn-color-${env.ui.app.scheme}-scheme)
534+
color: var(--chatbar-btn-color-${appScheme}-scheme) ;
535+
fill: var(--chatbar-btn-color-${appScheme}-scheme) ;
536+
stroke: var(--chatbar-btn-color-${appScheme}-scheme)
539537
}
540538
.${app.slug}-chatbar-btn:hover {
541-
color: var(--chatbar-btn-hover-color-${env.ui.app.scheme}-scheme) ;
542-
fill: var(--chatbar-btn-hover-color-${env.ui.app.scheme}-scheme) ;
543-
stroke: var(--chatbar-btn-hover-color-${env.ui.app.scheme}-scheme)
539+
color: var(--chatbar-btn-hover-color-${appScheme}-scheme) ;
540+
fill: var(--chatbar-btn-hover-color-${appScheme}-scheme) ;
541+
stroke: var(--chatbar-btn-hover-color-${appScheme}-scheme)
544542
}`
545543

546544
// Footer styles
547545
+ `#${app.slug} + footer { margin: 2px 0 25px ; position: relative }
548-
#${app.slug} + footer * { color: ${ env.ui.app.scheme == 'dark' ? '#ccc' : '#666' } !important }`
546+
#${app.slug} + footer * { color: ${ appScheme == 'dark' ? '#ccc' : '#666' } !important }`
549547

550548
// Notif styles
551549
+ `.chatgpt-notif {

0 commit comments

Comments
 (0)