Skip to content

Commit 172db1b

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/duckduckgpt]
1 parent 72152bb commit 172db1b

1 file changed

Lines changed: 25 additions & 26 deletions

File tree

‎chatgpt/duckduckgpt/duckduckgpt.user.js‎

Lines changed: 25 additions & 26 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.16
151+
// @version 2025.10.16.1
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
@@ -1986,7 +1986,7 @@
19861986
// Re-style button cluster
19871987
const btnsDiv = feedbackModal.querySelector('.modal-buttons')
19881988
btnsDiv.style.cssText = `margin-top: 12px !important ; ${ env.browser.isPhone ? ''
1989-
: 'flex-wrap: wrap ; justify-content: center ; gap: 9px' }` // gridify desktop btns
1989+
: 'flex-wrap: wrap ; justify-content: center ; gap: 9px' }` // gridify wide view btns
19901990

19911991
// Hack buttons
19921992
btns = btnsDiv.querySelectorAll('button')
@@ -2072,7 +2072,6 @@
20722072
document.removeEventListener(eventType, modals.handlers.drag[eventType]))
20732073
modals.draggingModal = null
20742074
}
2075-
20762075
}
20772076
},
20782077

@@ -2503,6 +2502,7 @@
25032502
},
25042503

25052504
stylize() {
2505+
const { scheme: appScheme } = env.ui.app
25062506
if (!this.styles?.isConnected) document.head.append(this.styles ||= dom.create.style())
25072507
this.styles.textContent = (
25082508

@@ -2524,21 +2524,21 @@
25242524
padding: 20px 25px 24px 31px !important /* increase alert padding */
25252525
}
25262526
.chatgpt-modal p { margin: -8px 0 -14px 4px ; font-size: 1.55rem } /* pos/size modal msg */
2527-
.chatgpt-modal a { color: #${ env.ui.app.scheme == 'dark' ? '00cfff' : '1e9ebb' } !important }
2527+
.chatgpt-modal a { color: #${ appScheme == 'dark' ? '00cfff' : '1e9ebb' } !important }
25282528
.modal-buttons {
25292529
margin: 24px -5px -3px ${ env.browser.isMobile ? -5 : -11 }px !important ; width: 100% }
25302530
.chatgpt-modal button { /* this.alert() buttons */
25312531
min-width: 121px ; padding: ${ env.browser.isMobile ? '7px' : '4px 15px' } !important ;
25322532
cursor: pointer ; border-radius: 0 !important ; height: 39px ;
2533-
border: 1px solid ${ env.ui.app.scheme == 'dark' ? 'white' : 'black' }!important ;
2534-
${ env.ui.app.scheme == 'dark' ? 'background: none ; color: white' : '' }}
2533+
border: 1px solid ${ appScheme == 'dark' ? 'white' : 'black' }!important ;
2534+
${ appScheme == 'dark' ? 'background: none ; color: white' : '' }}
25352535
.primary-modal-btn { background: black !important ; color: white !important }
25362536
.chatgpt-modal button:hover {
2537-
${ env.ui.app.scheme == 'light' ? // reduce intensity of light scheme hover glow
2537+
${ appScheme == 'light' ? // reduce intensity of light scheme hover glow
25382538
'--btn-shadow: 2px 1px 43px #00cfff70 ;' : '' }
25392539
color: inherit !important ; background-color: inherit !important /* remove color hacks */
25402540
}
2541-
${ env.ui.app.scheme == 'dark' ? // darkmode chatgpt.alert() styles
2541+
${ appScheme == 'dark' ? // darkmode chatgpt.alert() styles
25422542
`.chatgpt-modal > div, .chatgpt-modal button:not(.primary-modal-btn) {
25432543
color: white !important }
25442544
.primary-modal-btn { background: #00cfff !important ; color: black !important }
@@ -2549,9 +2549,9 @@
25492549
position: absolute !important ; float: right ; top: 14px !important ; right: 16px !important ;
25502550
cursor: pointer ; width: 33px ; height: 33px ; border-radius: 20px
25512551
}
2552-
[class*=modal-close-btn] path {${ env.ui.app.scheme == 'dark' ? 'stroke: white ; fill: white'
2553-
: 'stroke: #9f9f9f ; fill: #9f9f9f' }}
2554-
${ env.ui.app.scheme == 'dark' ? // invert dark mode hover paths
2552+
[class*=modal-close-btn] path {${ appScheme == 'dark' ? 'stroke: white ; fill: white'
2553+
: 'stroke: #9f9f9f ; fill: #9f9f9f' }}
2554+
${ appScheme == 'dark' ? // invert dark mode hover paths
25552555
'[class*=modal-close-btn]:hover path { stroke: black ; fill: black }' : '' }
25562556
[class*=modal-close-btn]:hover { background-color: #f2f2f2 } /* hover underlay */
25572557
[class*=modal-close-btn] svg { margin: 11.5px } /* center SVG for hover underlay */
@@ -2574,10 +2574,9 @@
25742574
position: absolute ; /* to be click-draggable */
25752575
opacity: 0 ; /* to fade-in */
25762576
background-image: linear-gradient(180deg, ${
2577-
env.ui.app.scheme == 'dark' ? '#99a8a6 -200px, black 200px'
2578-
: '#b6ebff -296px, white 171px' }) ;
2579-
border: 1px solid ${ env.ui.app.scheme == 'dark' ? 'white' : '#b5b5b5' } !important ;
2580-
color: ${ env.ui.app.scheme == 'dark' ? 'white' : 'black' };
2577+
appScheme == 'dark' ? '#99a8a6 -200px, black 200px' : '#b6ebff -296px, white 171px' }) ;
2578+
border: 1px solid ${ appScheme == 'dark' ? 'white' : '#b5b5b5' } !important ;
2579+
color: ${ appScheme == 'dark' ? 'white' : 'black' };
25812580
transform: translateX(-3px) translateY(7px) ; /* offset to move-in from */
25822581
transition: var(--fg-transition) ; /* fade-in + move-in */
25832582
-webkit-transition: var(--fg-transition) ; -moz-transition: var(--fg-transition) ;
@@ -2595,7 +2594,7 @@
25952594
+ `#${app.slug}-settings {
25962595
min-width: ${ env.browser.isPortrait ? 288 : 698 }px ; max-width: 75vw ;
25972596
word-wrap: break-word ; border-radius: 15px ;
2598-
${ env.ui.app.scheme == 'dark' ? 'stroke: white ; fill: white' : 'stroke: black ; fill: black' };
2597+
${ appScheme == 'dark' ? 'stroke: white ; fill: white' : 'stroke: black ; fill: black' };
25992598
--shadow: 0 30px 60px rgba(0,0,0,0.12) ;
26002599
box-shadow: var(--shadow) ; -webkit-box-shadow: var(--shadow) ; -moz-box-shadow: var(--shadow) }
26012600
#${app.slug}-settings-title {
@@ -2606,13 +2605,13 @@
26062605
list-style: none ; padding: 0 ; margin-bottom: 2px ; /* hide bullets, close bottom gap */
26072606
width: ${ env.browser.isPortrait ? 100 : 50 }% } /* set width based on column cnt */
26082607
${ env.browser.isPhone ? '' : `#${app.slug}-settings ul:first-of-type { /* color desktop middle sep */
2609-
border-right: 1px dotted ${ env.ui.app.scheme == 'dark' ? 'white' : 'black' }}`}
2608+
border-right: 1px dotted ${ appScheme == 'dark' ? 'white' : 'black' }}`}
26102609
#${app.slug}-settings li {
2611-
color: ${ env.ui.app.scheme == 'dark' ? 'rgb(255,255,255,0.65)' : 'rgba(0,0,0,0.45)' };
2612-
fill: ${ env.ui.app.scheme == 'dark' ? 'rgb(255,255,255,0.65)' : 'rgba(0,0,0,0.45)' };
2613-
stroke: ${ env.ui.app.scheme == 'dark' ? 'rgb(255,255,255,0.65)' : 'rgba(0,0,0,0.45)' };
2610+
color: ${ appScheme == 'dark' ? 'rgb(255,255,255,0.65)' : 'rgba(0,0,0,0.45)' };
2611+
fill: ${ appScheme == 'dark' ? 'rgb(255,255,255,0.65)' : 'rgba(0,0,0,0.45)' };
2612+
stroke: ${ appScheme == 'dark' ? 'rgb(255,255,255,0.65)' : 'rgba(0,0,0,0.45)' };
26142613
height: 25px ; padding: 4px 10px ; font-size: 14.5px ;
2615-
border-bottom: 1px dotted ${ env.ui.app.scheme == 'dark' ? 'white' : 'black' }; /* add separator */
2614+
border-bottom: 1px dotted ${ appScheme == 'dark' ? 'white' : 'black' }; /* add separator */
26162615
border-radius: 3px ; /* slightly round highlight strip */
26172616
${ config.fgAnimationsDisabled || env.browser.isMobile ? '' :
26182617
`transition: var(--settings-li-transition) ;
@@ -2621,9 +2620,9 @@
26212620
-o-transition: var(--settings-li-transition) ;
26222621
-ms-transition: var(--settings-li-transition)` }}
26232622
#${app.slug}-settings li.active {
2624-
color: ${ env.ui.app.scheme == 'dark' ? 'rgb(255,255,255)' : 'rgba(0,0,0)' };
2625-
fill: ${ env.ui.app.scheme == 'dark' ? 'rgb(255,255,255)' : 'rgba(0,0,0)' };
2626-
stroke: ${ env.ui.app.scheme == 'dark' ? 'rgb(255,255,255)' : 'rgba(0,0,0)' }}
2623+
color: ${ appScheme == 'dark' ? 'rgb(255,255,255)' : 'rgba(0,0,0)' };
2624+
fill: ${ appScheme == 'dark' ? 'rgb(255,255,255)' : 'rgba(0,0,0)' };
2625+
stroke: ${ appScheme == 'dark' ? 'rgb(255,255,255)' : 'rgba(0,0,0)' }}
26272626
#${app.slug}-settings li label { padding-right: 20px } /* right-pad labels so toggles don't hug */
26282627
#${app.slug}-settings li:last-of-type { border-bottom: none } /* remove last bottom-border */
26292628
#${app.slug}-settings li, #${app.slug}-settings li label { cursor: pointer } /* add finger on hover */
@@ -2649,7 +2648,7 @@
26492648
${ config.fgAnimationsDisabled ? '' // spin cycle arrows icon when scheme is Auto
26502649
: `#scheme-settings-entry svg[class*=arrowsCyclic],
26512650
.chatgpt-notif svg[class*=arrowsCyclic] { animation: rotate 5s linear infinite }`}
2652-
#about-settings-entry span { color: ${ env.ui.app.scheme == 'dark' ? '#28ee28' : 'green' }}
2651+
#about-settings-entry span { color: ${ appScheme == 'dark' ? '#28ee28' : 'green' }}
26532652
#about-settings-entry > span { /* outer About status span */
26542653
width: ${ env.browser.isPortrait ? '15vw' : '95px' }; height: 20px ; overflow: hidden ;
26552654
${ config.fgAnimationsDisabled ? '' : // fade edges
@@ -2661,7 +2660,7 @@
26612660
text-wrap: nowrap ; ${
26622661
config.fgAnimationsDisabled ? '' : 'animation: ticker linear 75s infinite' }}
26632662
@keyframes ticker { 0% { transform: translateX(100%) } 100% { transform: translateX(-2000%) }}
2664-
.about-em { color: ${ env.ui.app.scheme == 'dark' ? 'white' : 'green' } !important }`
2663+
.about-em { color: ${ appScheme == 'dark' ? 'white' : 'green' } !important }`
26652664
)
26662665
},
26672666

0 commit comments

Comments
 (0)