Skip to content

Commit c65e1fa

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/duckduckgpt]
1 parent db21b08 commit c65e1fa

1 file changed

Lines changed: 89 additions & 74 deletions

File tree

‎chatgpt/duckduckgpt/duckduckgpt.user.js‎

Lines changed: 89 additions & 74 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.21.3
151+
// @version 2025.10.22
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
@@ -2395,6 +2395,7 @@
23952395
get() { return document.getElementById(`${app.slug}-settings`) },
23962396

23972397
show() {
2398+
modals.settings.stylize()
23982399
const settingsContainer = modals.settings.get()?.parentNode || modals.settings.createAppend()
23992400
settingsContainer.style.display = '' // show modal
24002401
if (env.browser.isMobile) { // scale 93% to viewport sides
@@ -2405,6 +2406,93 @@
24052406
return settingsContainer.firstChild
24062407
},
24072408

2409+
stylize() {
2410+
const { scheme: appScheme } = env.ui.app
2411+
if (!this.styles?.isConnected) document.head.append(this.styles ||= dom.create.style())
2412+
this.styles.textContent = `
2413+
#${app.slug}-settings {
2414+
min-width: ${ env.browser.isPortrait ? 288 : 698 }px ; max-width: 75vw ;
2415+
word-wrap: break-word ; border-radius: 15px ;
2416+
${ appScheme == 'dark' ? 'stroke: white ; fill: white' : 'stroke: black ; fill: black' };
2417+
--shadow: 0 30px 60px rgba(0,0,0,0.12) ; box-shadow: var(--shadow) ;
2418+
-webkit-box-shadow: var(--shadow) ; -moz-box-shadow: var(--shadow)
2419+
}
2420+
#${app.slug}-settings-title {
2421+
font-weight: bold ; line-height: 19px ; text-align: center ; margin: 0 3px -3px 0 }
2422+
#${app.slug}-settings-title h4 {
2423+
font-size: ${ env.browser.isPortrait ? 26 : 31 }px ; font-weight: bold ; margin-top: -39px }
2424+
#${app.slug}-settings ul {
2425+
align-content: center ; /* for symmetrized gaps when odd num of entries */
2426+
list-style: none ; padding: 0 ; margin-bottom: 2px ; /* hide bullets, close bottom gap */
2427+
width: ${ env.browser.isPortrait ? 100 : 50 }% /* set width based on column cnt */
2428+
}
2429+
${ env.browser.isCompact ? '' : `#${app.slug}-settings ul:first-of-type { /* color desktop middle sep */
2430+
border-right: 1px dotted ${ appScheme == 'dark' ? 'white' : 'black' }}`}
2431+
#${app.slug}-settings li {
2432+
color: ${ appScheme == 'dark' ? 'rgb(255,255,255,0.65)' : 'rgba(0,0,0,0.45)' };
2433+
fill: ${ appScheme == 'dark' ? 'rgb(255,255,255,0.65)' : 'rgba(0,0,0,0.45)' };
2434+
stroke: ${ appScheme == 'dark' ? 'rgb(255,255,255,0.65)' : 'rgba(0,0,0,0.45)' };
2435+
height: 25px ; padding: 4px 10px ; font-size: 14.5px ;
2436+
border-bottom: 1px dotted ${ appScheme == 'dark' ? 'white' : 'black' }; /* add separator */
2437+
border-radius: 3px ; /* slightly round highlight strip */
2438+
${ config.fgAnimationsDisabled || env.browser.isMobile ? '' :
2439+
`transition: var(--settings-li-transition) ;
2440+
-webkit-transition: var(--settings-li-transition) ;
2441+
-moz-transition: var(--settings-li-transition) ;
2442+
-o-transition: var(--settings-li-transition) ;
2443+
-ms-transition: var(--settings-li-transition)` }
2444+
}
2445+
#${app.slug}-settings li.active {
2446+
color: ${ appScheme == 'dark' ? 'rgb(255,255,255)' : 'rgba(0,0,0)' };
2447+
fill: ${ appScheme == 'dark' ? 'rgb(255,255,255)' : 'rgba(0,0,0)' };
2448+
stroke: ${ appScheme == 'dark' ? 'rgb(255,255,255)' : 'rgba(0,0,0)' }
2449+
}
2450+
#${app.slug}-settings li label { padding-right: 20px } /* right-pad labels so toggles don't hug */
2451+
#${app.slug}-settings li:last-of-type { border-bottom: none } /* remove last bottom-border */
2452+
#${app.slug}-settings li, #${app.slug}-settings li label { cursor: pointer } /* add finger on hover */
2453+
#${app.slug}-settings li:hover {
2454+
background: rgba(100,149,237,0.88) ; color: white ; fill: white ; stroke: white ;
2455+
${ env.browser.isMobile ? '' : 'transform: scale(1.15)' }
2456+
}
2457+
#${app.slug}-settings li > input { float: right } /* pos toggles */
2458+
#${app.slug}-settings li > .track {
2459+
position: relative ; left: -1px ; bottom: -5.5px ; float: right ;
2460+
background-color: #ccc ; width: 26px ; height: 13px ; border-radius: 28px ;
2461+
${ config.fgAnimationsDisabled ? '' :
2462+
`transition: 0.4s ; -webkit-transition: 0.4s ; -moz-transition: 0.4s ;
2463+
-o-transition: 0.4s ; -ms-transition: 0.4s` }
2464+
}
2465+
#${app.slug}-settings li .knob {
2466+
position: absolute ; left: 1px ; bottom: 1px ; content: "" ;
2467+
background-color: white ; width: 11px ; height: 11px ; border-radius: 28px ;
2468+
${ config.fgAnimationsDisabled ? '' :
2469+
`transition: 0.2s ; -webkit-transition: 0.2s ; -moz-transition: 0.2s ;
2470+
-o-transition: 0.2s ; -ms-transition: 0.2s` }
2471+
}
2472+
#scheme-settings-entry > span { margin: 3px -2px 0 } /* align Scheme status */
2473+
#scheme-settings-entry > span > svg { /* v-align/left-pad Scheme status icon */
2474+
position: relative ; top: 2px ; margin-left: 4px }
2475+
${ config.fgAnimationsDisabled ? '' // spin cycle arrows icon when scheme is Auto
2476+
: `#scheme-settings-entry svg[class*=arrowsCyclic],
2477+
.chatgpt-notif svg[class*=arrowsCyclic] { animation: rotate 5s linear infinite }`
2478+
}
2479+
#about-settings-entry span { color: ${ appScheme == 'dark' ? '#28ee28' : 'green' }}
2480+
#about-settings-entry > span { /* outer About status span */
2481+
width: ${ env.browser.isPortrait ? '15vw' : '95px' }; height: 20px ; overflow: hidden ;
2482+
${ config.fgAnimationsDisabled ? '' : // fade edges
2483+
`mask-image: linear-gradient(
2484+
to right, transparent, black 20%, black 89%, transparent) ;
2485+
-webkit-mask-image: linear-gradient(
2486+
to right, transparent, black 20%, black 89%, transparent) ;`}
2487+
}
2488+
#about-settings-entry > span > div {
2489+
text-wrap: nowrap ;
2490+
${ config.fgAnimationsDisabled ? '' : 'animation: ticker linear 75s infinite' }
2491+
}
2492+
@keyframes ticker { 0% { transform: translateX(100%) } 100% { transform: translateX(-2000%) }}
2493+
.about-em { color: ${ appScheme == 'dark' ? 'white' : 'green' } !important }`
2494+
},
2495+
24082496
toggle: {
24092497
switch(settingToggle) {
24102498
settingToggle.checked = !settingToggle.checked
@@ -2586,79 +2674,6 @@
25862674
-moz-transition: var(--modal-btn-transition) ;
25872675
-o-transition: var(--modal-btn-transition) ;
25882676
-ms-transition: var(--modal-btn-transition) }`}`
2589-
2590-
// Settings modal
2591-
+ `#${app.slug}-settings {
2592-
min-width: ${ env.browser.isPortrait ? 288 : 698 }px ; max-width: 75vw ;
2593-
word-wrap: break-word ; border-radius: 15px ;
2594-
${ appScheme == 'dark' ? 'stroke: white ; fill: white' : 'stroke: black ; fill: black' };
2595-
--shadow: 0 30px 60px rgba(0,0,0,0.12) ;
2596-
box-shadow: var(--shadow) ; -webkit-box-shadow: var(--shadow) ; -moz-box-shadow: var(--shadow) }
2597-
#${app.slug}-settings-title {
2598-
font-weight: bold ; line-height: 19px ; text-align: center ; margin: 0 3px -3px 0 }
2599-
#${app.slug}-settings-title h4 {
2600-
font-size: ${ env.browser.isPortrait ? 26 : 31 }px ; font-weight: bold ; margin-top: -39px }
2601-
#${app.slug}-settings ul {
2602-
align-content: center ; /* for symmetrized gaps when odd num of entries */
2603-
list-style: none ; padding: 0 ; margin-bottom: 2px ; /* hide bullets, close bottom gap */
2604-
width: ${ env.browser.isPortrait ? 100 : 50 }% } /* set width based on column cnt */
2605-
${ env.browser.isCompact ? '' : `#${app.slug}-settings ul:first-of-type { /* color desktop middle sep */
2606-
border-right: 1px dotted ${ appScheme == 'dark' ? 'white' : 'black' }}`}
2607-
#${app.slug}-settings li {
2608-
color: ${ appScheme == 'dark' ? 'rgb(255,255,255,0.65)' : 'rgba(0,0,0,0.45)' };
2609-
fill: ${ appScheme == 'dark' ? 'rgb(255,255,255,0.65)' : 'rgba(0,0,0,0.45)' };
2610-
stroke: ${ appScheme == 'dark' ? 'rgb(255,255,255,0.65)' : 'rgba(0,0,0,0.45)' };
2611-
height: 25px ; padding: 4px 10px ; font-size: 14.5px ;
2612-
border-bottom: 1px dotted ${ appScheme == 'dark' ? 'white' : 'black' }; /* add separator */
2613-
border-radius: 3px ; /* slightly round highlight strip */
2614-
${ config.fgAnimationsDisabled || env.browser.isMobile ? '' :
2615-
`transition: var(--settings-li-transition) ;
2616-
-webkit-transition: var(--settings-li-transition) ;
2617-
-moz-transition: var(--settings-li-transition) ;
2618-
-o-transition: var(--settings-li-transition) ;
2619-
-ms-transition: var(--settings-li-transition)` }}
2620-
#${app.slug}-settings li.active {
2621-
color: ${ appScheme == 'dark' ? 'rgb(255,255,255)' : 'rgba(0,0,0)' };
2622-
fill: ${ appScheme == 'dark' ? 'rgb(255,255,255)' : 'rgba(0,0,0)' };
2623-
stroke: ${ appScheme == 'dark' ? 'rgb(255,255,255)' : 'rgba(0,0,0)' }}
2624-
#${app.slug}-settings li label { padding-right: 20px } /* right-pad labels so toggles don't hug */
2625-
#${app.slug}-settings li:last-of-type { border-bottom: none } /* remove last bottom-border */
2626-
#${app.slug}-settings li, #${app.slug}-settings li label { cursor: pointer } /* add finger on hover */
2627-
#${app.slug}-settings li:hover {
2628-
background: rgba(100,149,237,0.88) ; color: white ; fill: white ; stroke: white ;
2629-
${ env.browser.isMobile ? '' : 'transform: scale(1.15)' }}
2630-
#${app.slug}-settings li > input { float: right } /* pos toggles */
2631-
#${app.slug}-settings li > .track {
2632-
position: relative ; left: -1px ; bottom: -5.5px ; float: right ;
2633-
background-color: #ccc ; width: 26px ; height: 13px ; border-radius: 28px ;
2634-
${ config.fgAnimationsDisabled ? '' :
2635-
`transition: 0.4s ; -webkit-transition: 0.4s ; -moz-transition: 0.4s ;
2636-
-o-transition: 0.4s ; -ms-transition: 0.4s` }}
2637-
#${app.slug}-settings li .knob {
2638-
position: absolute ; left: 1px ; bottom: 1px ; content: "" ;
2639-
background-color: white ; width: 11px ; height: 11px ; border-radius: 28px ;
2640-
${ config.fgAnimationsDisabled ? '' :
2641-
`transition: 0.2s ; -webkit-transition: 0.2s ; -moz-transition: 0.2s ;
2642-
-o-transition: 0.2s ; -ms-transition: 0.2s` }}
2643-
#scheme-settings-entry > span { margin: 3px -2px 0 } /* align Scheme status */
2644-
#scheme-settings-entry > span > svg { /* v-align/left-pad Scheme status icon */
2645-
position: relative ; top: 2px ; margin-left: 4px }
2646-
${ config.fgAnimationsDisabled ? '' // spin cycle arrows icon when scheme is Auto
2647-
: `#scheme-settings-entry svg[class*=arrowsCyclic],
2648-
.chatgpt-notif svg[class*=arrowsCyclic] { animation: rotate 5s linear infinite }`}
2649-
#about-settings-entry span { color: ${ appScheme == 'dark' ? '#28ee28' : 'green' }}
2650-
#about-settings-entry > span { /* outer About status span */
2651-
width: ${ env.browser.isPortrait ? '15vw' : '95px' }; height: 20px ; overflow: hidden ;
2652-
${ config.fgAnimationsDisabled ? '' : // fade edges
2653-
`mask-image: linear-gradient(
2654-
to right, transparent, black 20%, black 89%, transparent) ;
2655-
-webkit-mask-image: linear-gradient(
2656-
to right, transparent, black 20%, black 89%, transparent) ;`}}
2657-
#about-settings-entry > span > div {
2658-
text-wrap: nowrap ; ${
2659-
config.fgAnimationsDisabled ? '' : 'animation: ticker linear 75s infinite' }}
2660-
@keyframes ticker { 0% { transform: translateX(100%) } 100% { transform: translateX(-2000%) }}
2661-
.about-em { color: ${ appScheme == 'dark' ? 'white' : 'green' } !important }`
26622677
)
26632678
},
26642679

0 commit comments

Comments
 (0)