Skip to content

Commit 99eeb52

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/googlegpt]
1 parent 9662c21 commit 99eeb52

1 file changed

Lines changed: 94 additions & 77 deletions

File tree

‎chatgpt/googlegpt/googlegpt.user.js‎

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

25692569
show() {
2570+
modals.settings.stylize()
25702571
const settingsContainer = modals.settings.get()?.parentNode || modals.settings.createAppend()
25712572
settingsContainer.style.display = '' // show modal
25722573
if (env.browser.isMobile) { // scale 93% to viewport sides
@@ -2577,6 +2578,98 @@
25772578
return settingsContainer.firstChild
25782579
},
25792580

2581+
stylize() {
2582+
const { scheme: appScheme } = env.ui.app
2583+
if (!this.styles?.isConnected) document.head.append(this.styles ||= dom.create.style())
2584+
this.styles.textContent = `
2585+
#${app.slug}-settings {
2586+
min-width: ${ env.browser.isPortrait ? 288 : 698 }px ; max-width: 75vw ; word-wrap: break-word ;
2587+
margin: 12px 23px ; border-radius: 15px ;
2588+
${ appScheme == 'dark' ? 'stroke: white ; fill: white' : 'stroke: black ; fill: black' };
2589+
--shadow: 0 30px 60px rgba(0,0,0,0.12) ; box-shadow: var(--shadow) ;
2590+
-webkit-box-shadow: var(--shadow) ; -moz-box-shadow: var(--shadow)
2591+
}
2592+
#${app.slug}-settings-title {
2593+
font-weight: bold ; line-height: 19px ; text-align: center ;
2594+
margin: 0 -6px ${ env.browser.isPortrait ? 2 : -15 }px 0
2595+
}
2596+
#${app.slug}-settings-title h4 {
2597+
font-size: ${ env.browser.isPortrait ? 22 : 29 }px ; font-weight: bold ;
2598+
margin: 0 0 ${ env.browser.isPortrait ? 9 : 27 }px
2599+
}
2600+
#${app.slug}-settings ul {
2601+
align-content: center ; /* for symmetrized gaps when odd num of entries */
2602+
list-style: none ; padding: 0 ; margin-bottom: 2px ; /* hide bullets, close bottom gap */
2603+
width: ${ env.browser.isPortrait ? 100 : 50 }% /* set width based on column cnt */
2604+
}
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: 24px ; padding: 6px 10px ; font-size: 13.5px ;
2612+
border-bottom: 1px dotted ${ appScheme == 'dark' ? 'white' : 'black' }; /* add separators */
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+
}
2621+
#${app.slug}-settings li.active {
2622+
color: ${ appScheme == 'dark' ? 'rgb(255,255,255)' : 'rgba(0,0,0)' };
2623+
fill: ${ appScheme == 'dark' ? 'rgb(255,255,255)' : 'rgba(0,0,0)' };
2624+
stroke: ${ appScheme == 'dark' ? 'rgb(255,255,255)' : 'rgba(0,0,0)' }
2625+
}
2626+
#${app.slug}-settings li label { padding-right: 20px } /* right-pad labels so toggles don't hug */
2627+
#${app.slug}-settings li:last-of-type { border-bottom: none } /* remove last bottom-border */
2628+
#${app.slug}-settings li, #${app.slug}-settings li label { cursor: pointer } /* add finger on hover */
2629+
#${app.slug}-settings li:hover {
2630+
background: rgba(100,149,237,0.88) ; color: white ; fill: white ; stroke: white ;
2631+
${ env.browser.isMobile ? '' : 'transform: scale(1.15)' }
2632+
}
2633+
#${app.slug}-settings li > input { float: right } /* pos toggles */
2634+
#${app.slug}-settings li > .track {
2635+
position: relative ; left: -1px ; bottom: -5.5px ; float: right ;
2636+
background-color: #ccc ; width: 26px ; height: 13px ; border-radius: 28px ;
2637+
${ config.fgAnimationsDisabled ? '' :
2638+
`transition: 0.4s ; -webkit-transition: 0.4s ; -moz-transition: 0.4s ;
2639+
-o-transition: 0.4s ; -ms-transition: 0.4s` }
2640+
}
2641+
#${app.slug}-settings li .knob {
2642+
position: absolute ; left: 1px ; bottom: 1px ; content: "" ;
2643+
background-color: white ; width: 11px ; height: 11px ; border-radius: 28px ;
2644+
${ config.fgAnimationsDisabled ? '' :
2645+
`transition: 0.2s ; -webkit-transition: 0.2s ; -moz-transition: 0.2s ;
2646+
-o-transition: 0.2s ; -ms-transition: 0.2s` }
2647+
}
2648+
#scheme-settings-entry > span { margin: 3px -2px 0 } /* align Scheme status */
2649+
#scheme-settings-entry > span > svg { /* v-align/left-pad Scheme status icon */
2650+
position: relative ; top: 2px ; margin-left: 4px }
2651+
${ config.fgAnimationsDisabled ? '' // spin cycle arrows icon when scheme is Auto
2652+
: `#scheme-settings-entry svg[class*=arrowsCyclic],
2653+
.chatgpt-notif svg[class*=arrowsCyclic] { animation: rotate 5s linear infinite }`
2654+
}
2655+
#about-settings-entry span { color: ${ appScheme == 'dark' ? '#28ee28' : 'green' }}
2656+
#about-settings-entry > span { /* outer About status span */
2657+
width: ${ env.browser.isPortrait ? '15vw' : '95px' }; height: 20px ; overflow: hidden ;
2658+
${ env.browser.isPortrait ? 'position: relative ; bottom: 3px ;' : '' } /* v-align */
2659+
${ config.fgAnimationsDisabled ? '' : // fade edges
2660+
`mask-image: linear-gradient(
2661+
to right, transparent, black 20%, black 89%, transparent) ;
2662+
-webkit-mask-image: linear-gradient(
2663+
to right, transparent, black 20%, black 89%, transparent) ;`}
2664+
}
2665+
#about-settings-entry > span > div {
2666+
text-wrap: nowrap ;
2667+
${ config.fgAnimationsDisabled ? '' : 'animation: ticker linear 75s infinite' }
2668+
}
2669+
@keyframes ticker { 0% { transform: translateX(100%) } 100% { transform: translateX(-2000%) }}
2670+
.about-em { color: ${ appScheme == 'dark' ? 'white' : 'green' } !important }`
2671+
},
2672+
25802673
toggle: {
25812674
switch(settingToggle) {
25822675
settingToggle.checked = !settingToggle.checked
@@ -2757,82 +2850,6 @@
27572850
-moz-transition: var(--modal-btn-transition) ;
27582851
-o-transition: var(--modal-btn-transition) ;
27592852
-ms-transition: var(--modal-btn-transition) }`}`
2760-
2761-
// Settings modal
2762-
+ `#${app.slug}-settings {
2763-
min-width: ${ env.browser.isPortrait ? 288 : 698 }px ; max-width: 75vw ; word-wrap: break-word ;
2764-
margin: 12px 23px ; border-radius: 15px ;
2765-
${ appScheme == 'dark' ? 'stroke: white ; fill: white' : 'stroke: black ; fill: black' };
2766-
--shadow: 0 30px 60px rgba(0,0,0,0.12) ;
2767-
box-shadow: var(--shadow) ; -webkit-box-shadow: var(--shadow) ; -moz-box-shadow: var(--shadow) }
2768-
#${app.slug}-settings-title {
2769-
font-weight: bold ; line-height: 19px ; text-align: center ;
2770-
margin: 0 -6px ${ env.browser.isPortrait ? 2 : -15 }px 0 }
2771-
#${app.slug}-settings-title h4 {
2772-
font-size: ${ env.browser.isPortrait ? 22 : 29 }px ; font-weight: bold ;
2773-
margin: 0 0 ${ env.browser.isPortrait ? 9 : 27 }px }
2774-
#${app.slug}-settings ul {
2775-
align-content: center ; /* for symmetrized gaps when odd num of entries */
2776-
list-style: none ; padding: 0 ; margin-bottom: 2px ; /* hide bullets, close bottom gap */
2777-
width: ${ env.browser.isPortrait ? 100 : 50 }% } /* set width based on column cnt */
2778-
${ env.browser.isCompact ? '' : `#${app.slug}-settings ul:first-of-type { /* color desktop middle sep */
2779-
border-right: 1px dotted ${ appScheme == 'dark' ? 'white' : 'black' }}`}
2780-
#${app.slug}-settings li {
2781-
color: ${ appScheme == 'dark' ? 'rgb(255,255,255,0.65)' : 'rgba(0,0,0,0.45)' };
2782-
fill: ${ appScheme == 'dark' ? 'rgb(255,255,255,0.65)' : 'rgba(0,0,0,0.45)' };
2783-
stroke: ${ appScheme == 'dark' ? 'rgb(255,255,255,0.65)' : 'rgba(0,0,0,0.45)' };
2784-
height: 24px ; padding: 6px 10px ; font-size: 13.5px ;
2785-
border-bottom: 1px dotted ${ appScheme == 'dark' ? 'white' : 'black' }; /* add separators */
2786-
border-radius: 3px ; /* slightly round highlight strip */
2787-
${ config.fgAnimationsDisabled || env.browser.isMobile ? '' :
2788-
`transition: var(--settings-li-transition) ;
2789-
-webkit-transition: var(--settings-li-transition) ;
2790-
-moz-transition: var(--settings-li-transition) ;
2791-
-o-transition: var(--settings-li-transition) ;
2792-
-ms-transition: var(--settings-li-transition)` }}
2793-
#${app.slug}-settings li.active {
2794-
color: ${ appScheme == 'dark' ? 'rgb(255,255,255)' : 'rgba(0,0,0)' };
2795-
fill: ${ appScheme == 'dark' ? 'rgb(255,255,255)' : 'rgba(0,0,0)' };
2796-
stroke: ${ appScheme == 'dark' ? 'rgb(255,255,255)' : 'rgba(0,0,0)' }}
2797-
#${app.slug}-settings li label { padding-right: 20px } /* right-pad labels so toggles don't hug */
2798-
#${app.slug}-settings li:last-of-type { border-bottom: none } /* remove last bottom-border */
2799-
#${app.slug}-settings li, #${app.slug}-settings li label { cursor: pointer } /* add finger on hover */
2800-
#${app.slug}-settings li:hover {
2801-
background: rgba(100,149,237,0.88) ; color: white ; fill: white ; stroke: white ;
2802-
${ env.browser.isMobile ? '' : 'transform: scale(1.15)' }}
2803-
#${app.slug}-settings li > input { float: right } /* pos toggles */
2804-
#${app.slug}-settings li > .track {
2805-
position: relative ; left: -1px ; bottom: -5.5px ; float: right ;
2806-
background-color: #ccc ; width: 26px ; height: 13px ; border-radius: 28px ;
2807-
${ config.fgAnimationsDisabled ? '' :
2808-
`transition: 0.4s ; -webkit-transition: 0.4s ; -moz-transition: 0.4s ;
2809-
-o-transition: 0.4s ; -ms-transition: 0.4s` }}
2810-
#${app.slug}-settings li .knob {
2811-
position: absolute ; left: 1px ; bottom: 1px ; content: "" ;
2812-
background-color: white ; width: 11px ; height: 11px ; border-radius: 28px ;
2813-
${ config.fgAnimationsDisabled ? '' :
2814-
`transition: 0.2s ; -webkit-transition: 0.2s ; -moz-transition: 0.2s ;
2815-
-o-transition: 0.2s ; -ms-transition: 0.2s` }}
2816-
#scheme-settings-entry > span { margin: 3px -2px 0 } /* align Scheme status */
2817-
#scheme-settings-entry > span > svg { /* v-align/left-pad Scheme status icon */
2818-
position: relative ; top: 2px ; margin-left: 4px }
2819-
${ config.fgAnimationsDisabled ? '' // spin cycle arrows icon when scheme is Auto
2820-
: `#scheme-settings-entry svg[class*=arrowsCyclic],
2821-
.chatgpt-notif svg[class*=arrowsCyclic] { animation: rotate 5s linear infinite }` }
2822-
#about-settings-entry span { color: ${ appScheme == 'dark' ? '#28ee28' : 'green' }}
2823-
#about-settings-entry > span { /* outer About status span */
2824-
width: ${ env.browser.isPortrait ? '15vw' : '95px' }; height: 20px ; overflow: hidden ;
2825-
${ env.browser.isPortrait ? 'position: relative ; bottom: 3px ;' : '' } /* v-align */
2826-
${ config.fgAnimationsDisabled ? '' : // fade edges
2827-
`mask-image: linear-gradient(
2828-
to right, transparent, black 20%, black 89%, transparent) ;
2829-
-webkit-mask-image: linear-gradient(
2830-
to right, transparent, black 20%, black 89%, transparent) ;`}}
2831-
#about-settings-entry > span > div {
2832-
text-wrap: nowrap ; ${
2833-
config.fgAnimationsDisabled ? '' : 'animation: ticker linear 75s infinite' }}
2834-
@keyframes ticker { 0% { transform: translateX(100%) } 100% { transform: translateX(-2000%) }}
2835-
.about-em { color: ${ appScheme == 'dark' ? 'white' : 'green' } !important }`
28362853
)
28372854
},
28382855

0 commit comments

Comments
 (0)