Skip to content

Commit 08b7c46

Browse files
adamluiadamlui
committed
Tweaked modal styles (fixes #247, fixes KudoAI/amazongpt#84)
1 parent 50a3491 commit 08b7c46

File tree

4 files changed

+40
-28
lines changed

4 files changed

+40
-28
lines changed

‎amazongpt/greasemonkey/amazongpt.user.js‎

Lines changed: 8 additions & 6 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.15.2
6+
// @version 2025.10.16
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
@@ -1327,8 +1327,8 @@
13271327
// Re-style elems
13281328
apiModal.querySelector('h2').style.justifySelf = 'center' // center title
13291329
const btnsDiv = apiModal.querySelector('.modal-buttons')
1330-
btnsDiv.style.cssText = ` /* y-pad, gridify */
1331-
margin: 18px 0px 14px !important ; display: grid ; grid-template-columns: repeat(3, 1fr) ; gap: 10px`
1330+
btnsDiv.style.cssText = `margin: 0 !important ; ${ env.browser.isPhone ? ''
1331+
: 'flex-wrap: wrap ; justify-content: center ; gap: 9px' }` // gridify desktop btns
13321332
btnsDiv.querySelectorAll('button').forEach((btn, idx) => {
13331333
if (idx == 0) btn.style.display = 'none' // hide Dismiss button
13341334
else btn.classList.toggle('primary-modal-btn', // emphasize preferred API
@@ -1829,10 +1829,12 @@
18291829
// Main modal styles
18301830
+ `@keyframes modal-zoom-fade-out {
18311831
0% { opacity: 1 } 50% { opacity: 0.25 ; transform: scale(1.05) }
1832-
100% { opacity: 0 ; transform: scale(1.35) }}
1832+
100% { opacity: 0 ; transform: scale(1.35) }
1833+
}
18331834
.chatgpt-modal > div {
1834-
padding: 20px 30px 24px 17px !important ; /* increase alert padding */
1835-
background-color: white !important ; color: black }
1835+
background-color: white !important ; color: black ;
1836+
padding: ${ env.browser.isPhone ? '22px' : '20px 30px 24px 17px' }!important
1837+
}
18361838
.chatgpt-modal p { margin: -8px 0 -14px 4px ; font-size: 22px ; line-height: 31px }
18371839
.chatgpt-modal a { color: #${ env.ui.app.scheme == 'dark' ? '00cfff' : '1e9ebb' } !important }
18381840
.modal-buttons {

‎bravegpt/greasemonkey/bravegpt.user.js‎

Lines changed: 12 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -148,7 +148,7 @@
148148
// @description:zu Yengeza izimpendulo ze-AI ku-Brave Search (inikwa amandla yi-GPT-4o!)
149149
// @author KudoAI
150150
// @namespace https://kudoai.com
151-
// @version 2025.10.15.2
151+
// @version 2025.10.16
152152
// @license MIT
153153
// @icon https://assets.bravegpt.com/images/icons/app/icon48.png?v=e8ca7c2
154154
// @icon64 https://assets.bravegpt.com/images/icons/app/icon64.png?v=e8ca7c2
@@ -1956,8 +1956,8 @@
19561956
// Re-style elems
19571957
apiModal.querySelector('h2').style.justifySelf = 'center' // center title
19581958
const btnsDiv = apiModal.querySelector('.modal-buttons')
1959-
btnsDiv.style.cssText = ` /* y-pad, gridify */
1960-
margin: 18px 0px 14px !important ; display: grid ; grid-template-columns: repeat(3, 1fr) ; gap: 10px`
1959+
btnsDiv.style.cssText = `margin-top: 23px !important ; ${ env.browser.isPhone ? ''
1960+
: 'flex-wrap: wrap ; justify-content: center ; gap: 9px' }` // gridify desktop btns
19611961
btnsDiv.querySelectorAll('button').forEach((btn, idx) => {
19621962
if (idx == 0) btn.style.display = 'none' // hide Dismiss button
19631963
else btn.classList.toggle('primary-modal-btn', // emphasize preferred API
@@ -1983,8 +1983,9 @@
19831983

19841984
// Re-style button cluster
19851985
const btnsDiv = feedbackModal.querySelector('.modal-buttons')
1986-
btnsDiv.style.cssText += `display: flex ; flex-wrap: wrap ; justify-content: center ;
1987-
margin: 18px 0 6px !important` // close gap between title/btns
1986+
if (!env.browser.isPhone) // gridify wide view btns
1987+
btnsDiv.style.cssText = 'flex-wrap: wrap ; justify-content: center ; gap: 3px'
1988+
19881989
// Hack buttons
19891990
btns = btnsDiv.querySelectorAll('button')
19901991
btns.forEach((btn, idx) => {
@@ -2513,8 +2514,12 @@
25132514
// Main modal styles
25142515
+ `@keyframes modal-zoom-fade-out {
25152516
0% { opacity: 1 } 50% { opacity: 0.25 ; transform: scale(1.05) }
2516-
100% { opacity: 0 ; transform: scale(1.35) }}
2517-
.chatgpt-modal > div { background-color: white !important ; color: #202124 }
2517+
100% { opacity: 0 ; transform: scale(1.35) }
2518+
}
2519+
.chatgpt-modal > div {
2520+
background-color: white !important ; color: #202124 ;
2521+
${ env.browser.isPhone ? 'padding: 25px 31px !important' : '' }
2522+
}
25182523
.chatgpt-modal p { margin: 14px 0 -20px 4px ; font-size: 18px } /* pos/size modal msg */
25192524
.chatgpt-modal a { color: #${ env.ui.app.scheme == 'dark' ? '00cfff' : '1e9ebb' } !important }
25202525
.modal-buttons {

‎duckduckgpt/greasemonkey/duckduckgpt.user.js‎

Lines changed: 12 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -148,7 +148,7 @@
148148
// @description:zu Yengeza izimpendulo ze-AI ku-DuckDuckGo (inikwa amandla yi-GPT-4o!)
149149
// @author KudoAI
150150
// @namespace https://kudoai.com
151-
// @version 2025.10.15.2
151+
// @version 2025.10.16
152152
// @license MIT
153153
// @icon https://assets.ddgpt.com/images/icons/app/icon48.png?v=533ce0f
154154
// @icon64 https://assets.ddgpt.com/images/icons/app/icon64.png?v=533ce0f
@@ -1958,8 +1958,8 @@
19581958
// Re-style elems
19591959
apiModal.querySelector('h2').style.justifySelf = 'center' // center title
19601960
const btnsDiv = apiModal.querySelector('.modal-buttons')
1961-
btnsDiv.style.cssText = ` /* y-pad, gridify */
1962-
margin: 18px 0px 14px !important ; display: grid ; grid-template-columns: repeat(3, 1fr) ; gap: 10px`
1961+
btnsDiv.style.cssText = `margin: 18px 0px 6px !important ; ${ env.browser.isPhone ? ''
1962+
: 'flex-wrap: wrap ; justify-content: center ; gap: 9px' }` // gridify desktop btns
19631963
btnsDiv.querySelectorAll('button').forEach((btn, idx) => {
19641964
if (idx == 0) btn.style.display = 'none' // hide Dismiss button
19651965
else btn.classList.toggle('primary-modal-btn', // emphasize preferred API
@@ -1985,8 +1985,9 @@
19851985

19861986
// Re-style button cluster
19871987
const btnsDiv = feedbackModal.querySelector('.modal-buttons')
1988-
btnsDiv.style.cssText += `display: flex ; flex-wrap: wrap ; justify-content: center ;
1989-
margin-top: -2px !important` // close gap between title/btns
1988+
btnsDiv.style.cssText = `margin-top: 12px !important ; ${ env.browser.isPhone ? ''
1989+
: 'flex-wrap: wrap ; justify-content: center ; gap: 9px' }` // gridify desktop btns
1990+
19901991
// Hack buttons
19911992
btns = btnsDiv.querySelectorAll('button')
19921993
btns.forEach((btn, idx) => {
@@ -2516,14 +2517,16 @@
25162517
// Main modal styles
25172518
+ `@keyframes modal-zoom-fade-out {
25182519
0% { opacity: 1 } 50% { opacity: 0.25 ; transform: scale(1.05) }
2519-
100% { opacity: 0 ; transform: scale(1.35) }}
2520+
100% { opacity: 0 ; transform: scale(1.35) }
2521+
}
25202522
.chatgpt-modal > div {
2521-
padding: 20px 25px 24px 31px !important ; /* increase alert padding */
2522-
background-color: white !important ; color: black }
2523+
background-color: white !important ; color: black ;
2524+
padding: 20px 25px 24px 31px !important /* increase alert padding */
2525+
}
25232526
.chatgpt-modal p { margin: -8px 0 -14px 4px ; font-size: 1.55rem } /* pos/size modal msg */
25242527
.chatgpt-modal a { color: #${ env.ui.app.scheme == 'dark' ? '00cfff' : '1e9ebb' } !important }
25252528
.modal-buttons {
2526-
margin: 24px -5px -3px ${ env.browser.isMobile ? -5 : -15 }px !important ; width: 100% }
2529+
margin: 24px -5px -3px ${ env.browser.isMobile ? -5 : -11 }px !important ; width: 100% }
25272530
.chatgpt-modal button { /* this.alert() buttons */
25282531
min-width: 121px ; padding: ${ env.browser.isMobile ? '7px' : '4px 15px' } !important ;
25292532
cursor: pointer ; border-radius: 0 !important ; height: 39px ;

‎googlegpt/greasemonkey/googlegpt.user.js‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -149,7 +149,7 @@
149149
// @description:zu Yengeza izimpendulo ze-AI ku-Google Search (inikwa amandla yi-Google Gemma + GPT-4o!)
150150
// @author KudoAI
151151
// @namespace https://kudoai.com
152-
// @version 2025.10.15.3
152+
// @version 2025.10.16
153153
// @license MIT
154154
// @icon data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22170.667%22%20height=%22170.667%22%3E%3Cstyle%3E:root%7B--fill:%23000%7D@media%20(prefers-color-scheme:dark)%7B:root%7B--fill:%23fff%7D%7D%3C/style%3E%3Cpath%20fill=%22var(--fill)%22%20d=%22M82.346%20159.79c-18.113-1.815-31.78-9.013-45.921-24.184C23.197%20121.416%2017.333%20106.18%2017.333%2086c0-21.982%205.984-36.245%2021.87-52.131C55.33%2017.74%2069.27%2011.867%2091.416%2011.867c17.574%200%2029.679%203.924%2044.309%2014.363l8.57%206.116-8.705%208.705-8.704%208.704-4.288-3.608c-13.91-11.704-35.932-14.167-53.085-5.939-3.4%201.631-9.833%206.601-14.297%2011.045C44.669%2061.753%2040.95%2070.811%2040.95%2086c0%2014.342%203.594%2023.555%2013.26%2033.995%2019.088%2020.618%2048.46%2022.539%2070.457%204.608l5.333-4.348%2011.333%203.844c6.234%202.114%2011.54%203.857%2011.791%203.873.252.015-2.037%203.008-5.087%206.65-6.343%207.577-20.148%2017.217-30.493%2021.295-8.764%203.454-23.358%205.06-35.198%203.873zM92%2086.333V74.667h60.648l-11.41%2011.41-11.411%2011.41-18.914.257L92%2098z%22/%3E%3C/svg%3E
155155
// @icon64 data:image/svg+xml,%3Csvg%20xmlns=%22http://www.w3.org/2000/svg%22%20width=%22170.667%22%20height=%22170.667%22%3E%3Cstyle%3E:root%7B--fill:%23000%7D@media%20(prefers-color-scheme:dark)%7B:root%7B--fill:%23fff%7D%7D%3C/style%3E%3Cpath%20fill=%22var(--fill)%22%20d=%22M82.346%20159.79c-18.113-1.815-31.78-9.013-45.921-24.184C23.197%20121.416%2017.333%20106.18%2017.333%2086c0-21.982%205.984-36.245%2021.87-52.131C55.33%2017.74%2069.27%2011.867%2091.416%2011.867c17.574%200%2029.679%203.924%2044.309%2014.363l8.57%206.116-8.705%208.705-8.704%208.704-4.288-3.608c-13.91-11.704-35.932-14.167-53.085-5.939-3.4%201.631-9.833%206.601-14.297%2011.045C44.669%2061.753%2040.95%2070.811%2040.95%2086c0%2014.342%203.594%2023.555%2013.26%2033.995%2019.088%2020.618%2048.46%2022.539%2070.457%204.608l5.333-4.348%2011.333%203.844c6.234%202.114%2011.54%203.857%2011.791%203.873.252.015-2.037%203.008-5.087%206.65-6.343%207.577-20.148%2017.217-30.493%2021.295-8.764%203.454-23.358%205.06-35.198%203.873zM92%2086.333V74.667h60.648l-11.41%2011.41-11.411%2011.41-18.914.257L92%2098z%22/%3E%3C/svg%3E
@@ -2170,8 +2170,8 @@
21702170
// Re-style elems
21712171
apiModal.querySelector('h2').style.justifySelf = 'center' // center title
21722172
const btnsDiv = apiModal.querySelector('.modal-buttons')
2173-
btnsDiv.style.cssText = ` /* y-pad, gridify */
2174-
margin: 18px 0px 14px !important ; display: grid ; grid-template-columns: repeat(3, 1fr) ; gap: 10px`
2173+
btnsDiv.style.cssText = `margin: 18px 0px 4px !important ; ${ env.browser.isPhone ? ''
2174+
: 'flex-wrap: wrap ; justify-content: center ; gap: 9px' }` // gridify desktop btns
21752175
btnsDiv.querySelectorAll('button').forEach((btn, idx) => {
21762176
if (idx == 0) btn.style.display = 'none' // hide Dismiss button
21772177
else btn.classList.toggle('primary-modal-btn', // emphasize preferred API
@@ -2689,10 +2689,12 @@
26892689
// Main modal styles
26902690
+ `@keyframes modal-zoom-fade-out {
26912691
0% { opacity: 1 } 50% { opacity: 0.25 ; transform: scale(1.05) }
2692-
100% { opacity: 0 ; transform: scale(1.35) }}
2692+
100% { opacity: 0 ; transform: scale(1.35) }
2693+
}
26932694
.chatgpt-modal > div {
2694-
padding: 17px 20px 24px 20px !important ; /* increase alert padding */
2695-
background-color: white ; color: #202124 }
2695+
background-color: white ; color: #202124 ;
2696+
padding: ${ env.browser.isPhone ? '31px' : '25px 31px' }!important
2697+
}
26962698
.chatgpt-modal p { margin: 14px 0 -29px 4px ; font-size: 1.28em ; line-height: 1.57 }
26972699
.modal-buttons {
26982700
margin: 42px 4px ${ env.browser.isMobile ? '2px 4px' : '-3px -4px' } !important ; width: 100% }

0 commit comments

Comments
 (0)