Skip to content

Commit ab8e9ee

Browse files
adamluiadamlui
committed
Renamed/consolidated transition vars, added fallbacks
1 parent 2a57b29 commit ab8e9ee

File tree

4 files changed

+270
-178
lines changed

4 files changed

+270
-178
lines changed

‎amazongpt/greasemonkey/amazongpt.user.js‎

Lines changed: 57 additions & 40 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
// @description Adds the magic of AI to Amazon shopping
44
// @author KudoAI
55
// @namespace https://kudoai.com
6-
// @version 2025.3.30.3
6+
// @version 2025.3.30.5
77
// @license MIT
88
// @icon https://cdn.jsdelivr.net/gh/KudoAI/amazongpt@0fddfc7/assets/images/icons/amazongpt/black-gold-teal/icon48.png
99
// @icon64 https://cdn.jsdelivr.net/gh/KudoAI/amazongpt@0fddfc7/assets/images/icons/amazongpt/black-gold-teal/icon64.png
@@ -680,7 +680,10 @@
680680
modals.draggingModal = event.currentTarget
681681
event.preventDefault() // prevent sub-elems like icons being draggable
682682
Object.assign(modals.draggingModal.style, { // update styles
683-
transition: '0.1s', willChange: 'transform', transform: 'scale(1.05)' })
683+
transform: 'scale(1.05)', willChange: 'transform',
684+
transition: '0.1s', '-webkit-transition': '0.1s', '-moz-transition': '0.1s',
685+
'-o-transition': '0.1s', '-ms-transition': '0.1s'
686+
})
684687
document.body.style.cursor = 'grabbing'; // update cursor
685688
[...modals.draggingModal.children] // prevent hover FX if drag lags behind cursor
686689
.forEach(child => child.style.pointerEvents = 'none');
@@ -701,7 +704,10 @@
701704

702705
mouseup() { // restore styles/pointer events, remove listeners, reset modals.draggingModal
703706
Object.assign(modals.draggingModal.style, { // restore styles
704-
cursor: 'inherit', transition: 'inherit', willChange: 'auto', transform: 'scale(1)' })
707+
cursor: 'inherit', transform: 'scale(1)', willChange: 'auto',
708+
transition: 'inherit', '-webkit-transition': 'inherit', '-moz-transition': 'inherit',
709+
'-o-transition': 'inherit', '-ms-transition': 'inherit'
710+
})
705711
document.body.style.cursor = ''; // restore cursor
706712
[...modals.draggingModal.children] // restore pointer events
707713
.forEach(child => child.style.pointerEvents = '');
@@ -1163,12 +1169,12 @@
11631169
document.head.append(this.styles)
11641170
}
11651171
this.styles.innerText = (
1166-
':root {' // vars
1167-
+ '--transition: opacity 0.65s cubic-bezier(0.165,0.84,0.44,1),' // for modal fade-in
1168-
+ 'transform 0.55s cubic-bezier(0.165,0.84,0.44,1) !important ;' // for modal move-in
1169-
+ '--bg-transition: background-color 0.25s ease !important ;' // for modal bg dim
1170-
+ '--btn-transition: transform 0.15s ease ;' // for modal button hover-zoom
1171-
+ '--settings-transition: transform 0.1s ease }' // for Settings entry hover-zoom
1172+
1173+
// Vars
1174+
`:root {
1175+
--fg-transition: opacity 0.65s cubic-bezier(0.165,0.84,0.44,1), /* fade-in */
1176+
transform 0.55s cubic-bezier(0.165,0.84,0.44,1) !important ; /* move-in */
1177+
--bg-transition: background-color 0.25s ease !important } /* dim */`
11721178

11731179
// Main modal styles
11741180
+ '@keyframes modal-zoom-fade-out {'
@@ -1216,9 +1222,9 @@
12161222
+ 'pointer-events: auto ;' // override any disabling from site modals
12171223
+ 'position: fixed ; top: 0 ; left: 0 ; width: 100% ; height: 100% ;' // expand to full view-port
12181224
+ 'display: flex ; justify-content: center ; align-items: center ; z-index: 9999 ;' // align
1219-
+ 'transition: var(--bg-transition) ;' // for bg dim
1220-
+ '-webkit-transition: var(--bg-transition) ; -moz-transition: var(--bg-transition) ;'
1221-
+ '-o-transition: var(--bg-transition) ; -ms-transition: var(--bg-transition) }'
1225+
+ `transition: var(--bg-transition) ; /* dim */
1226+
-webkit-transition: var(--bg-transition) ; -moz-transition: var(--bg-transition) ;
1227+
-o-transition: var(--bg-transition) ; -ms-transition: var(--bg-transition) }`
12221228
+ '[class*=-modal-bg].animated > div {'
12231229
+ 'z-index: 13456 ; opacity: 0.98 ; transform: translateX(0) translateY(0) }'
12241230
+ '[class$=-modal] {' // native modals + chatgpt.alert()s
@@ -1229,14 +1235,14 @@
12291235
+ `border: 1px solid ${ env.ui.app.scheme == 'dark' ? 'white' : '#b5b5b5' } !important ;`
12301236
+ `color: ${ env.ui.app.scheme == 'dark' ? 'white' : 'black' } ;`
12311237
+ 'transform: translateX(-3px) translateY(7px) ;' // offset to move-in from
1232-
+ 'transition: var(--transition) ;' // for fade-in + move-in
1233-
+ '-webkit-transition: var(--transition) ; -moz-transition: var(--transition) ;'
1234-
+ '-o-transition: var(--transition) ; -ms-transition: var(--transition) }'
1235-
+ ( config.fgAnimationsDisabled || env.browser.isMobile ? '' : (
1236-
'[class$=-modal] button:hover { transform: scale(1.055) }'
1237-
+ '[class$=-modal] button { transition: var(--btn-transition) ;'
1238-
+ '-webkit-transition: var(--btn-transition) ; -moz-transition: var(--btn-transition) ;'
1239-
+ '-o-transition: var(--btn-transition) ; -ms-transition: var(--btn-transition) }' ))
1238+
+ `transition: var(--fg-transition) ; /* fade-in + move-in */
1239+
-webkit-transition: var(--fg-transition) ; -moz-transition: var(--fg-transition) ;
1240+
-o-transition: var(--fg-transition) ; -ms-transition: var(--fg-transition) }`
1241+
+ ( config.fgAnimationsDisabled || env.browser.isMobile ? '' : `
1242+
[class$=-modal] button:hover { transform: scale(1.055) }
1243+
[class$=-modal] button { transition: var(--zoom-transition-more) ;
1244+
-webkit-transition: var(--zoom-transition-more) ; -moz-transition: var(--zoom-transition-more) ;
1245+
-o-transition: var(--zoom-transition-more) ; -ms-transition: var(--zoom-transition-more) }` )
12401246

12411247
// Glowing modal btns
12421248
+ ':root { --glow-color: hsl(186 100% 69%) }'
@@ -1294,9 +1300,9 @@
12941300
+ 'height: 37px ; padding: 6px 10px 4px ; font-size: 15.5px ; list-style: none ;'
12951301
+ `border-bottom: 1px dotted ${ env.ui.app.scheme == 'dark' ? 'white' : 'black' } ;` // add separators
12961302
+ 'border-radius: 3px ;' // slightly round highlight strip
1297-
+ 'transition: var(--settings-transition) ;' // for hover-zoom
1298-
+ '-webkit-transition: var(--settings-transition) ; -moz-transition: var(--settings-transition) ;'
1299-
+ '-o-transition: var(--settings-transition) ; -ms-transition: var(--settings-transition) }'
1303+
+ `transition: var(--zoom-transition-less) ;
1304+
-webkit-transition: var(--zoom-transition-less) ; -moz-transition: var(--zoom-transition-less) ;
1305+
-o-transition: var(--zoom-transition-less) ; -ms-transition: var(--zoom-transition-less) }`
13001306
+ `#${app.slug}-settings li.active {`
13011307
+ `color: ${ env.ui.app.scheme == 'dark' ? 'rgb(255,255,255)' : 'rgba(0,0,0)' } ;` // for text
13021308
+ `fill: ${ env.ui.app.scheme == 'dark' ? 'rgb(255,255,255)' : 'rgba(0,0,0)' } ;` // for icons
@@ -1750,20 +1756,22 @@
17501756
+ '--app-transition: opacity 0.5s ease, transform 0.5s ease,' // for 1st fade-in
17511757
+ 'bottom 0.1s cubic-bezier(0,0,0.2,1),' // smoothen Anchor Y min/restore
17521758
+ 'width 0.167s cubic-bezier(0,0,0.2,1) ;' // smoothen Anchor X expand/shrink
1753-
+ '--btn-transition: transform 0.15s ease,' // for hover-zoom
1759+
+ '--zoom-transition-more: transform 0.15s ease ;' // for button hover-zoom
1760+
+ '--zoom-transition-less: transform 0.1s ease ;' // for Settings entry hover-zoom
1761+
+ '--btn-transition: var(--zoom-transition-more),' // for hover-zoom
17541762
+ 'opacity 0.25s ease-in-out ;' // + btn-zoom-fade-out + .app-hover-only shows
17551763
+ '--font-size-slider-thumb-transition: transform 0.05s ease ;' // for hover-zoom
17561764
+ '--reply-pre-transition: max-height 0.167s cubic-bezier(0, 0, 0.2, 1) ;' // for Anchor changes
17571765
+ '--fade-in-less-transition: opacity 0.2s ease }' // used by Font Size slider
17581766

17591767
// Animations
17601768
+ '.fade-in { opacity: 0 ; transform: translateY(10px) }'
1761-
+ '.fade-in-less { opacity: 0 ;'
1762-
+ 'transition: var(--fade-in-less-transition) ;'
1763-
+ '-webkit-transition: var(--fade-in-less-transition) ;'
1764-
+ '-moz-transition: var(--fade-in-less-transition) ;'
1765-
+ '-o-transition: var(--fade-in-less-transition) ;'
1766-
+ '-ms-transition: var(--fade-in-less-transition) }'
1769+
+ `.fade-in-less { opacity: 0 ;
1770+
transition: var(--fade-in-less-transition) ;
1771+
-webkit-transition: var(--fade-in-less-transition) ;
1772+
-moz-transition: var(--fade-in-less-transition) ;
1773+
-o-transition: var(--fade-in-less-transition) ;
1774+
-ms-transition: var(--fade-in-less-transition) }`
17671775
+ '.fade-in.active, .fade-in-less.active { opacity: 1 ; transform: translateY(0) }'
17681776
+ '@keyframes btn-zoom-fade-out {'
17691777
+ '0% { opacity: 1 } 55% { opacity: 0.25 ; transform: scale(1.85) }'
@@ -1808,12 +1816,15 @@
18081816
+ `color: ${ env.ui.app.scheme == 'dark' ? 'white' : 'black' }}`
18091817
+ '.kudoai {' // header byline
18101818
+ `position: relative ; bottom: -1px ; margin-left: 8px ; color: #aaa ;
1811-
--transition: 0.15s ease-in-out ; transition: var(--transition) ;
1812-
-webkit-transition: var(--transition) ; -moz-transition: var(--transition) ;
1813-
-o-transition: var(--transition) ; -ms-transition: var(--transition) }`
1819+
--kudoai-transition: 0.15s ease-in-out ; transition: var(--kudoai-transition) ;
1820+
-webkit-transition: var(--kudoai-transition) ; -moz-transition: var(--kudoai-transition) ;
1821+
-o-transition: var(--kudoai-transition) ; -ms-transition: var(--kudoai-transition) }`
18141822
+ '.kudoai a, .kudoai a:visited { color: #aaa ; text-decoration: none !important } '
18151823
+ `.kudoai a:hover {
1816-
transition: 0.15s ease-in ; color: ${ env.ui.app.scheme == 'dark' ? 'white' : 'black' }}`
1824+
color: ${ env.ui.app.scheme == 'dark' ? 'white' : 'black' };
1825+
transition: var(--kudoai-transition) ;
1826+
-webkit-transition: var(--kudoai-transition) ; -moz-transition: var(--kudoai-transition) ;
1827+
-o-transition: var(--kudoai-transition) ; -ms-transition: var(--kudoai-transition) }`
18171828
+ `#${app.slug}-header-btns { float: right ; margin-top: -2px }`
18181829
+ `.${app.slug}-header-btn {`
18191830
+ 'float: right ; cursor: pointer ; position: relative ; top: 4px ;'
@@ -1895,8 +1906,10 @@
18951906
color: var(--font-color-light-scheme) ; border: none` };
18961907
${ config.fgAnimationsDisabled ? '' : // smoothen Anchor mode expand/shrink
18971908
`transition: var(--reply-pre-transition) ;
1898-
-webkit-transition: var(--reply-pre-transition) ; -moz-transition: var(--reply-pre-transition) ;
1899-
-o-transition: var(--reply-pre-transition) ; -ms-transition: var(--reply-pre-transition)` }}
1909+
-webkit-transition: var(--reply-pre-transition) ;
1910+
-moz-transition: var(--reply-pre-transition) ;
1911+
-o-transition: var(--reply-pre-transition) ;
1912+
-ms-transition: var(--reply-pre-transition)` }}
19001913
#${app.slug} .reply-pre a, #${app.slug} .reply-pre a:visited { color: #4495d4 }
19011914
#${app.slug} .reply-pre a:hover { color: ${ env.ui.app.scheme == 'dark' ? 'white' : '#ea7a28' }}
19021915
code #${app.slug}-copy-btn { position: relative ; top: -6px ; right: -9px }
@@ -1939,15 +1952,19 @@
19391952
`--chatbar-inset-shadow: 0 1px 2px rgba(15,17,17,0.1) inset ;
19401953
box-shadow: var(--chatbar-inset-shadow) ; -webkit-box-shadow: var(--chatbar-inset-shadow) ;
19411954
-moz-box-shadow: var(--chatbar-inset-shadow) ;` }
1942-
transition: box-shadow 0.15s ease }
1955+
transition: box-shadow 0.15s ease ;
1956+
-webkit-transition: box-shadow 0.15s ease ; -moz-transition: box-shadow 0.15s ease ;
1957+
-o-transition: box-shadow 0.15s ease ; -ms-transition: box-shadow 0.15s ease }
19431958
${ isParticlizedDS ? '' : // add inset shadow to chatbar on hover
19441959
`#${app.slug}-chatbar:hover:not(:focus) {
19451960
--chatbar-hover-inset-shadow: 0 ${
19461961
env.ui.app.scheme == 'dark' ? '3px 2px' : '1px 7px' } rgba(15,17,17,0.15) inset ;
19471962
box-shadow: var(--chatbar-hover-inset-shadow) ;
19481963
-webkit-box-shadow: var(--chatbar-hover-inset-shadow) ;
19491964
-moz-box-shadow: var(--chatbar-hover-inset-shadow) ;
1950-
transition: transform 0.15s ease, box-shadow 0.25s ease }` }
1965+
transition: box-shadow 0.25s ease ;
1966+
-webkit-transition: box-shadow 0.25s ease ; -moz-transition: box-shadow 0.25s ease ;
1967+
-o-transition: box-shadow 0.25s ease ; -ms-transition: box-shadow 0.25s ease }` }
19511968
#${app.slug}-chatbar:focus-visible { /* fallback outline chatbar + reduce inset shadow on focus */
19521969
outline: -webkit-focus-ring-color auto 1px ;
19531970
${ isParticlizedDS ? '' :
@@ -3402,8 +3419,8 @@
34023419
+ `--shadow: 3px 5px 16px 0 rgb(0,0,0,0.21) ;
34033420
box-shadow: var(--shadow) ; -webkit-box-shadow: var(--shadow) ; -moz-box-shadow: var(--shadow)`
34043421
+ 'opacity: 0 ; height: fit-content ; z-index: 1250 ;' // visibility
3405-
+ 'transition: opacity 0.1s ; -webkit-transition: opacity 0.1s ; -moz-transition: opacity 0.1s ;'
3406-
+ '-o-transition: opacity 0.1s ; -ms-transition: opacity 0.1s }'
3422+
+ `transition: opacity 0.1s ; -webkit-transition: opacity 0.1s ; -moz-transition: opacity 0.1s ;
3423+
-o-transition: opacity 0.1s ; -ms-transition: opacity 0.1s }`
34073424
))
34083425

34093426
// APPEND AMAZONGPT to Amazon

0 commit comments

Comments
 (0)