Skip to content

Commit 51b956d

Browse files
kudo-sync-botkudo-sync-bot
committed
Abstracted scheme var in modals.stylize() ↞ [auto-sync from https://github.com/adamlui/ai-web-extensions/tree/main/amazongpt]
1 parent 169837c commit 51b956d

1 file changed

Lines changed: 24 additions & 24 deletions

File tree

‎chatgpt/amazongpt/amazongpt.user.js‎

Lines changed: 24 additions & 24 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.16
6+
// @version 2025.10.16.1
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
@@ -1815,6 +1815,7 @@
18151815
},
18161816

18171817
stylize() {
1818+
const { scheme: appScheme } = env.ui.app
18181819
if (!this.styles?.isConnected) document.head.append(this.styles ||= dom.create.style())
18191820
this.styles.textContent = (
18201821

@@ -1836,21 +1837,21 @@
18361837
padding: ${ env.browser.isPhone ? '22px' : '20px 30px 24px 17px' }!important
18371838
}
18381839
.chatgpt-modal p { margin: -8px 0 -14px 4px ; font-size: 22px ; line-height: 31px }
1839-
.chatgpt-modal a { color: #${ env.ui.app.scheme == 'dark' ? '00cfff' : '1e9ebb' } !important }
1840+
.chatgpt-modal a { color: #${ appScheme == 'dark' ? '00cfff' : '1e9ebb' } !important }
18401841
.modal-buttons {
18411842
margin: 35px -5px 2px ; ${ env.browser.isMobile ? -5 : -15 }px !important ; width: 100% }
18421843
.chatgpt-modal button { /* this.alert() buttons */
18431844
min-width: 121px ; padding: ${ env.browser.isMobile ? '7px' : '4px 15px' } !important ;
18441845
border-radius: 0 !important ; height: 39px ;
1845-
border: 1px solid ${ env.ui.app.scheme == 'dark' ? 'white' : 'black' }!important ;
1846-
${ env.ui.app.scheme == 'dark' ? 'background: none ; color: white' : '' }}
1846+
border: 1px solid ${ appScheme == 'dark' ? 'white' : 'black' }!important ;
1847+
${ appScheme == 'dark' ? 'background: none ; color: white' : '' }}
18471848
.primary-modal-btn { background: black !important ; color: white !important }
18481849
.chatgpt-modal button:hover {
1849-
${ env.ui.app.scheme == 'light' ? // reduce intensity of light scheme hover glow
1850+
${ appScheme == 'light' ? // reduce intensity of light scheme hover glow
18501851
'--btn-shadow: 2px 1px 43px #00cfff70 ;' : '' }
18511852
color: inherit !important ; background-color: inherit !important /* remove color hacks */
18521853
}
1853-
${ env.ui.app.scheme == 'dark' ? // darkmode chatgpt.alert() styles
1854+
${ appScheme == 'dark' ? // darkmode chatgpt.alert() styles
18541855
`.chatgpt-modal > div, .chatgpt-modal button:not(.primary-modal-btn) {
18551856
color: white !important }
18561857
.primary-modal-btn { background: #00cfff !important ; color: black !important }
@@ -1861,9 +1862,9 @@
18611862
position: absolute !important ; float: right ; top: 14px !important ; right: 16px !important ;
18621863
cursor: pointer ; width: 33px ; height: 33px ; border-radius: 20px
18631864
}
1864-
[class*=modal-close-btn] path {${ env.ui.app.scheme == 'dark' ? 'stroke: white ; fill: white'
1865-
: 'stroke: #9f9f9f ; fill: #9f9f9f' }}
1866-
${ env.ui.app.scheme == 'dark' ? // invert dark mode hover paths
1865+
[class*=modal-close-btn] path {${ appScheme == 'dark' ? 'stroke: white ; fill: white'
1866+
: 'stroke: #9f9f9f ; fill: #9f9f9f' }}
1867+
${ appScheme == 'dark' ? // invert dark mode hover paths
18671868
'[class*=modal-close-btn]:hover path { stroke: black ; fill: black }' : '' }
18681869
[class*=modal-close-btn]:hover { background-color: #f2f2f2 } /* hover underlay */
18691870
[class*=modal-close-btn] svg { margin: 11.5px } /* center SVG for hover underlay */
@@ -1887,10 +1888,9 @@
18871888
position: absolute ; /* to be click-draggable */
18881889
opacity: 0 ; /* to fade-in */
18891890
background-image: linear-gradient(180deg, ${
1890-
env.ui.app.scheme == 'dark' ? '#99a8a6 -200px, black 200px'
1891-
: '#b6ebff -296px, white 171px' }) ;
1892-
border: 1px solid ${ env.ui.app.scheme == 'dark' ? 'white' : '#b5b5b5' } !important ;
1893-
color: ${ env.ui.app.scheme == 'dark' ? 'white' : 'black' };
1891+
appScheme == 'dark' ? '#99a8a6 -200px, black 200px' : '#b6ebff -296px, white 171px' }) ;
1892+
border: 1px solid ${ appScheme == 'dark' ? 'white' : '#b5b5b5' } !important ;
1893+
color: ${ appScheme == 'dark' ? 'white' : 'black' };
18941894
transform: translateX(-3px) translateY(7px) ; /* offset to move-in from */
18951895
transition: var(--fg-transition) ; /* fade-in + move-in */
18961896
-webkit-transition: var(--fg-transition) ; -moz-transition: var(--fg-transition) ;
@@ -1908,7 +1908,7 @@
19081908
+ `#${app.slug}-settings {
19091909
min-width: ${ env.browser.isPortrait ? 288 : 755 }px ; max-width: 75vw ; margin: 12px 23px ;
19101910
word-wrap: break-word ; border-radius: 15px ;
1911-
${ env.ui.app.scheme == 'dark' ? 'stroke: white ; fill: white' : 'stroke: black ; fill: black' };
1911+
${ appScheme == 'dark' ? 'stroke: white ; fill: white' : 'stroke: black ; fill: black' };
19121912
--shadow: 0 30px 60px rgba(0,0,0,0.12) ;
19131913
box-shadow: var(--shadow) ; -webkit-box-shadow: var(--shadow) ; -moz-box-shadow: var(--shadow) }
19141914
#a${app.slug}-settings-title {
@@ -1920,13 +1920,13 @@
19201920
list-style: none ; padding: 0 ; margin: 0 0 2px -3px ; /* hide bullets, close bottom gap */
19211921
width: ${ env.browser.isPortrait ? 100 : 50 }% } /* set width based on column cnt */
19221922
${ env.browser.isPhone ? '' : `#${app.slug}-settings ul:first-of-type { /* color desktop middle sep */
1923-
border-right: 1px dotted ${ env.ui.app.scheme == 'dark' ? 'white' : 'black' }}`}
1923+
border-right: 1px dotted ${ appScheme == 'dark' ? 'white' : 'black' }}`}
19241924
#${app.slug}-settings li {
1925-
color: ${ env.ui.app.scheme == 'dark' ? 'rgb(255,255,255,0.65)' : 'rgba(0,0,0,0.45)' };
1926-
fill: ${ env.ui.app.scheme == 'dark' ? 'rgb(255,255,255,0.65)' : 'rgba(0,0,0,0.45)' };
1927-
stroke: ${ env.ui.app.scheme == 'dark' ? 'rgb(255,255,255,0.65)' : 'rgba(0,0,0,0.45)' };
1925+
color: ${ appScheme == 'dark' ? 'rgb(255,255,255,0.65)' : 'rgba(0,0,0,0.45)' };
1926+
fill: ${ appScheme == 'dark' ? 'rgb(255,255,255,0.65)' : 'rgba(0,0,0,0.45)' };
1927+
stroke: ${ appScheme == 'dark' ? 'rgb(255,255,255,0.65)' : 'rgba(0,0,0,0.45)' };
19281928
height: 37px ; padding: 6px 10px 4px ; font-size: 15.5px ; list-style: none ;
1929-
border-bottom: 1px dotted ${ env.ui.app.scheme == 'dark' ? 'white' : 'black' }; /* add separators */
1929+
border-bottom: 1px dotted ${ appScheme == 'dark' ? 'white' : 'black' }; /* add separators */
19301930
border-radius: 3px ; /* slightly round highlight strip */
19311931
${ config.fgAnimationsDisabled || env.browser.isMobile ? '' :
19321932
`transition: var(--settings-li-transition) ;
@@ -1935,9 +1935,9 @@
19351935
-o-transition: var(--settings-li-transition) ;
19361936
-ms-transition: var(--settings-li-transition)` }}
19371937
#${app.slug}-settings li.active {
1938-
color: ${ env.ui.app.scheme == 'dark' ? 'rgb(255,255,255)' : 'rgba(0,0,0)' }; /* for text */
1939-
fill: ${ env.ui.app.scheme == 'dark' ? 'rgb(255,255,255)' : 'rgba(0,0,0)' }; /* for icons */
1940-
stroke: ${ env.ui.app.scheme == 'dark' ? 'rgb(255,255,255)' : 'rgba(0,0,0)' }} /* for icons */
1938+
color: ${ appScheme == 'dark' ? 'rgb(255,255,255)' : 'rgba(0,0,0)' }; /* for text */
1939+
fill: ${ appScheme == 'dark' ? 'rgb(255,255,255)' : 'rgba(0,0,0)' }; /* for icons */
1940+
stroke: ${ appScheme == 'dark' ? 'rgb(255,255,255)' : 'rgba(0,0,0)' }} /* for icons */
19411941
#${app.slug}-settings li label {
19421942
display: contents ; padding-right: 20px ; /* right-pad labels so toggles don't hug */
19431943
font-weight: normal } /* override Amazon boldening */
@@ -1965,7 +1965,7 @@
19651965
${ config.fgAnimationsDisabled ? '' // spin cycle arrows icon when scheme is Auto
19661966
: `#scheme-settings-entry svg[class*=arrowsCyclic],
19671967
.chatgpt-notif svg[class*=arrowsCyclic] { animation: rotate 5s linear infinite }` }
1968-
#about-settings-entry span { color: ${ env.ui.app.scheme == 'dark' ? '#28ee28' : 'green' }}
1968+
#about-settings-entry span { color: ${ appScheme == 'dark' ? '#28ee28' : 'green' }}
19691969
#about-settings-entry > span { /* outer About status span */
19701970
width: ${ env.browser.isPortrait ? '15vw' : '95px' }; height: 20px ; overflow: hidden ;
19711971
${ config.fgAnimationsDisabled ? '' : // fade edges
@@ -1977,7 +1977,7 @@
19771977
text-wrap: nowrap ; ${
19781978
config.fgAnimationsDisabled ? '' : 'animation: ticker linear 75s infinite' }}
19791979
@keyframes ticker { 0% { transform: translateX(100%) } 100% { transform: translateX(-2000%) }}
1980-
.about-em { color: ${ env.ui.app.scheme == 'dark' ? 'white' : 'green' } !important }`
1980+
.about-em { color: ${ appScheme == 'dark' ? 'white' : 'green' } !important }`
19811981
)
19821982
},
19831983

0 commit comments

Comments
 (0)