Skip to content

Commit db21b08

Browse files
kudo-sync-botkudo-sync-bot
committed
Moved settings modal styles to modals.settings.stylize() ↞ [auto-sync from https://github.com/adamlui/ai-web-extensions/tree/main/amazongpt]
1 parent 99eeb52 commit db21b08

1 file changed

Lines changed: 94 additions & 77 deletions

File tree

‎chatgpt/amazongpt/amazongpt.user.js‎

Lines changed: 94 additions & 77 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.21.2
6+
// @version 2025.10.22
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
@@ -1721,6 +1721,7 @@
17211721
get() { return document.getElementById(`${app.slug}-settings`) },
17221722

17231723
show() {
1724+
modals.settings.stylize()
17241725
const settingsContainer = modals.settings.get()?.parentNode || modals.settings.createAppend()
17251726
settingsContainer.style.display = '' // show modal
17261727
if (env.browser.isMobile) { // scale 93% to viewport sides
@@ -1731,6 +1732,98 @@
17311732
return settingsContainer.firstChild
17321733
},
17331734

1735+
stylize() {
1736+
const { scheme: appScheme } = env.ui.app
1737+
if (!this.styles?.isConnected) document.head.append(this.styles ||= dom.create.style())
1738+
this.styles.textContent = `
1739+
#${app.slug}-settings {
1740+
min-width: ${ env.browser.isPortrait ? 288 : 755 }px ; max-width: 75vw ; margin: 12px 23px ;
1741+
word-wrap: break-word ; border-radius: 15px ;
1742+
${ appScheme == 'dark' ? 'stroke: white ; fill: white' : 'stroke: black ; fill: black' };
1743+
--shadow: 0 30px 60px rgba(0,0,0,0.12) ; box-shadow: var(--shadow) ;
1744+
-webkit-box-shadow: var(--shadow) ; -moz-box-shadow: var(--shadow)
1745+
}
1746+
#a${app.slug}-settings-title {
1747+
font-weight: bold ; line-height: 19px ; text-align: center ;
1748+
margin: 0 ${ env.browser.isMobile ? 6 : 24 }px 8px 0
1749+
}
1750+
#${app.slug}-settings-title h4 {
1751+
font-size: ${ env.browser.isPortrait ? 26 : 31 }px ; font-weight: bold ; margin-top: -25px }
1752+
#${app.slug}-settings ul {
1753+
align-content: center ; /* for symmetrized gaps when odd num of entries */
1754+
list-style: none ; padding: 0 ; margin: 0 0 2px -3px ; /* hide bullets, close bottom gap */
1755+
width: ${ env.browser.isPortrait ? 100 : 50 }% /* set width based on column cnt */
1756+
}
1757+
${ env.browser.isCompact ? '' : `#${app.slug}-settings ul:first-of-type { /* color desktop middle sep */
1758+
border-right: 1px dotted ${ appScheme == 'dark' ? 'white' : 'black' }}`}
1759+
#${app.slug}-settings li {
1760+
color: ${ appScheme == 'dark' ? 'rgb(255,255,255,0.65)' : 'rgba(0,0,0,0.45)' };
1761+
fill: ${ appScheme == 'dark' ? 'rgb(255,255,255,0.65)' : 'rgba(0,0,0,0.45)' };
1762+
stroke: ${ appScheme == 'dark' ? 'rgb(255,255,255,0.65)' : 'rgba(0,0,0,0.45)' };
1763+
height: 37px ; padding: 6px 10px 4px ; font-size: 15.5px ; list-style: none ;
1764+
border-bottom: 1px dotted ${ appScheme == 'dark' ? 'white' : 'black' }; /* add separators */
1765+
border-radius: 3px ; /* slightly round highlight strip */
1766+
${ config.fgAnimationsDisabled || env.browser.isMobile ? '' :
1767+
`transition: var(--settings-li-transition) ;
1768+
-webkit-transition: var(--settings-li-transition) ;
1769+
-moz-transition: var(--settings-li-transition) ;
1770+
-o-transition: var(--settings-li-transition) ;
1771+
-ms-transition: var(--settings-li-transition)` }
1772+
}
1773+
#${app.slug}-settings li.active {
1774+
color: ${ appScheme == 'dark' ? 'rgb(255,255,255)' : 'rgba(0,0,0)' }; /* for text */
1775+
fill: ${ appScheme == 'dark' ? 'rgb(255,255,255)' : 'rgba(0,0,0)' }; /* for icons */
1776+
stroke: ${ appScheme == 'dark' ? 'rgb(255,255,255)' : 'rgba(0,0,0)' } /* for icons */
1777+
}
1778+
#${app.slug}-settings li label {
1779+
display: contents ; padding-right: 20px ; /* right-pad labels so toggles don't hug */
1780+
font-weight: normal /* override Amazon boldening */
1781+
}
1782+
#${app.slug}-settings li:last-of-type { border-bottom: none } /* remove last bottom-border */
1783+
#${app.slug}-settings li, #${app.slug}-settings li label { cursor: pointer } /* add finger on hover */
1784+
#${app.slug}-settings li:hover {
1785+
background: rgba(100,149,237,0.88) ; color: white ; fill: white ; stroke: white ;
1786+
${ env.browser.isMobile ? '' : 'transform: scale(1.15)' }
1787+
}
1788+
#${app.slug}-settings li > input { float: right } /* pos toggles */
1789+
#${app.slug}-settings li > .track {
1790+
position: relative ; left: -1px ; bottom: -5.5px ; float: right ;
1791+
background-color: #ccc ; width: 26px ; height: 13px ; border-radius: 28px ;
1792+
${ config.fgAnimationsDisabled ? '' :
1793+
`transition: 0.4s ; -webkit-transition: 0.4s ; -moz-transition: 0.4s ;
1794+
-o-transition: 0.4s ; -ms-transition: 0.4s` }
1795+
}
1796+
#${app.slug}-settings li .knob {
1797+
position: absolute ; left: 1px ; bottom: 1px ; content: "" ;
1798+
background-color: white ; width: 11px ; height: 11px ; border-radius: 28px ;
1799+
${ config.fgAnimationsDisabled ? '' :
1800+
`transition: 0.2s ; -webkit-transition: 0.2s ; -moz-transition: 0.2s ;
1801+
-o-transition: 0.2s ; -ms-transition: 0.2s` }
1802+
}
1803+
#scheme-settings-entry > span { margin: 3px -2px 0 } /* align Scheme status */
1804+
#scheme-settings-entry > span > svg { /* v-align/left-pad Scheme status icon */
1805+
position: relative ; top: 2px ; margin-left: 4px }
1806+
${ config.fgAnimationsDisabled ? '' // spin cycle arrows icon when scheme is Auto
1807+
: `#scheme-settings-entry svg[class*=arrowsCyclic],
1808+
.chatgpt-notif svg[class*=arrowsCyclic] { animation: rotate 5s linear infinite }`
1809+
}
1810+
#about-settings-entry span { color: ${ appScheme == 'dark' ? '#28ee28' : 'green' }}
1811+
#about-settings-entry > span { /* outer About status span */
1812+
width: ${ env.browser.isPortrait ? '15vw' : '95px' }; height: 20px ; overflow: hidden ;
1813+
${ config.fgAnimationsDisabled ? '' : // fade edges
1814+
`mask-image: linear-gradient(
1815+
to right, transparent, black 20%, black 89%, transparent) ;
1816+
-webkit-mask-image: linear-gradient(
1817+
to right, transparent, black 20%, black 89%, transparent) ;`}
1818+
}
1819+
#about-settings-entry > span > div {
1820+
text-wrap: nowrap ;
1821+
${ config.fgAnimationsDisabled ? '' : 'animation: ticker linear 75s infinite' }
1822+
}
1823+
@keyframes ticker { 0% { transform: translateX(100%) } 100% { transform: translateX(-2000%) }}
1824+
.about-em { color: ${ appScheme == 'dark' ? 'white' : 'green' } !important }`
1825+
},
1826+
17341827
toggle: {
17351828
switch(settingToggle) {
17361829
settingToggle.checked = !settingToggle.checked
@@ -1913,82 +2006,6 @@
19132006
-moz-transition: var(--modal-btn-transition) ;
19142007
-o-transition: var(--modal-btn-transition) ;
19152008
-ms-transition: var(--modal-btn-transition) }`}`
1916-
1917-
// Settings modal
1918-
+ `#${app.slug}-settings {
1919-
min-width: ${ env.browser.isPortrait ? 288 : 755 }px ; max-width: 75vw ; margin: 12px 23px ;
1920-
word-wrap: break-word ; border-radius: 15px ;
1921-
${ appScheme == 'dark' ? 'stroke: white ; fill: white' : 'stroke: black ; fill: black' };
1922-
--shadow: 0 30px 60px rgba(0,0,0,0.12) ;
1923-
box-shadow: var(--shadow) ; -webkit-box-shadow: var(--shadow) ; -moz-box-shadow: var(--shadow) }
1924-
#a${app.slug}-settings-title {
1925-
font-weight: bold ; line-height: 19px ; text-align: center ;
1926-
margin: 0 ${ env.browser.isMobile ? 6 : 24 }px 8px 0 }
1927-
#${app.slug}-settings-title h4 {
1928-
font-size: ${ env.browser.isPortrait ? 26 : 31 }px ; font-weight: bold ; margin-top: -25px }
1929-
#${app.slug}-settings ul {
1930-
align-content: center ; /* for symmetrized gaps when odd num of entries */
1931-
list-style: none ; padding: 0 ; margin: 0 0 2px -3px ; /* hide bullets, close bottom gap */
1932-
width: ${ env.browser.isPortrait ? 100 : 50 }% } /* set width based on column cnt */
1933-
${ env.browser.isCompact ? '' : `#${app.slug}-settings ul:first-of-type { /* color desktop middle sep */
1934-
border-right: 1px dotted ${ appScheme == 'dark' ? 'white' : 'black' }}`}
1935-
#${app.slug}-settings li {
1936-
color: ${ appScheme == 'dark' ? 'rgb(255,255,255,0.65)' : 'rgba(0,0,0,0.45)' };
1937-
fill: ${ appScheme == 'dark' ? 'rgb(255,255,255,0.65)' : 'rgba(0,0,0,0.45)' };
1938-
stroke: ${ appScheme == 'dark' ? 'rgb(255,255,255,0.65)' : 'rgba(0,0,0,0.45)' };
1939-
height: 37px ; padding: 6px 10px 4px ; font-size: 15.5px ; list-style: none ;
1940-
border-bottom: 1px dotted ${ appScheme == 'dark' ? 'white' : 'black' }; /* add separators */
1941-
border-radius: 3px ; /* slightly round highlight strip */
1942-
${ config.fgAnimationsDisabled || env.browser.isMobile ? '' :
1943-
`transition: var(--settings-li-transition) ;
1944-
-webkit-transition: var(--settings-li-transition) ;
1945-
-moz-transition: var(--settings-li-transition) ;
1946-
-o-transition: var(--settings-li-transition) ;
1947-
-ms-transition: var(--settings-li-transition)` }}
1948-
#${app.slug}-settings li.active {
1949-
color: ${ appScheme == 'dark' ? 'rgb(255,255,255)' : 'rgba(0,0,0)' }; /* for text */
1950-
fill: ${ appScheme == 'dark' ? 'rgb(255,255,255)' : 'rgba(0,0,0)' }; /* for icons */
1951-
stroke: ${ appScheme == 'dark' ? 'rgb(255,255,255)' : 'rgba(0,0,0)' }} /* for icons */
1952-
#${app.slug}-settings li label {
1953-
display: contents ; padding-right: 20px ; /* right-pad labels so toggles don't hug */
1954-
font-weight: normal } /* override Amazon boldening */
1955-
#${app.slug}-settings li:last-of-type { border-bottom: none } /* remove last bottom-border */
1956-
#${app.slug}-settings li, #${app.slug}-settings li label { cursor: pointer } /* add finger on hover */
1957-
#${app.slug}-settings li:hover {
1958-
background: rgba(100,149,237,0.88) ; color: white ; fill: white ; stroke: white ;
1959-
${ env.browser.isMobile ? '' : 'transform: scale(1.15)' }}
1960-
#${app.slug}-settings li > input { float: right } /* pos toggles */
1961-
#${app.slug}-settings li > .track {
1962-
position: relative ; left: -1px ; bottom: -5.5px ; float: right ;
1963-
background-color: #ccc ; width: 26px ; height: 13px ; border-radius: 28px ;
1964-
${ config.fgAnimationsDisabled ? '' :
1965-
`transition: 0.4s ; -webkit-transition: 0.4s ; -moz-transition: 0.4s ;
1966-
-o-transition: 0.4s ; -ms-transition: 0.4s` }}
1967-
#${app.slug}-settings li .knob {
1968-
position: absolute ; left: 1px ; bottom: 1px ; content: "" ;
1969-
background-color: white ; width: 11px ; height: 11px ; border-radius: 28px ;
1970-
${ config.fgAnimationsDisabled ? '' :
1971-
`transition: 0.2s ; -webkit-transition: 0.2s ; -moz-transition: 0.2s ;
1972-
-o-transition: 0.2s ; -ms-transition: 0.2s` }}
1973-
#scheme-settings-entry > span { margin: 3px -2px 0 } /* align Scheme status */
1974-
#scheme-settings-entry > span > svg { /* v-align/left-pad Scheme status icon */
1975-
position: relative ; top: 2px ; margin-left: 4px }
1976-
${ config.fgAnimationsDisabled ? '' // spin cycle arrows icon when scheme is Auto
1977-
: `#scheme-settings-entry svg[class*=arrowsCyclic],
1978-
.chatgpt-notif svg[class*=arrowsCyclic] { animation: rotate 5s linear infinite }` }
1979-
#about-settings-entry span { color: ${ appScheme == 'dark' ? '#28ee28' : 'green' }}
1980-
#about-settings-entry > span { /* outer About status span */
1981-
width: ${ env.browser.isPortrait ? '15vw' : '95px' }; height: 20px ; overflow: hidden ;
1982-
${ config.fgAnimationsDisabled ? '' : // fade edges
1983-
`mask-image: linear-gradient(
1984-
to right, transparent, black 20%, black 89%, transparent) ;
1985-
-webkit-mask-image: linear-gradient(
1986-
to right, transparent, black 20%, black 89%, transparent) ;`}}
1987-
#about-settings-entry > span > div {
1988-
text-wrap: nowrap ; ${
1989-
config.fgAnimationsDisabled ? '' : 'animation: ticker linear 75s infinite' }}
1990-
@keyframes ticker { 0% { transform: translateX(100%) } 100% { transform: translateX(-2000%) }}
1991-
.about-em { color: ${ appScheme == 'dark' ? 'white' : 'green' } !important }`
19922009
)
19932010
},
19942011

0 commit comments

Comments
 (0)