Skip to content

Commit 4eaabd5

Browse files
adamluiadamlui
committed
Changed reply header/pre separator style, converted string concatenations to template literals for easier maintenance
1 parent cd5d95f commit 4eaabd5

File tree

4 files changed

+126
-128
lines changed

4 files changed

+126
-128
lines changed

‎amazongpt/greasemonkey/amazongpt.user.js‎

Lines changed: 31 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
// @description Adds the magic of AI to Amazon shopping
44
// @author KudoAI
55
// @namespace https://kudoai.com
6-
// @version 2025.3.29.3
6+
// @version 2025.3.30
77
// @license MIT
88
// @icon https://cdn.jsdelivr.net/gh/KudoAI/amazongpt@0fddfc7/assets/images/icons/amazongpt/black-gold-teal/icon48.png
99
// @icon64 https://cdn.jsdelivr.net/gh/KudoAI/amazongpt@0fddfc7/assets/images/icons/amazongpt/black-gold-teal/icon64.png
@@ -1862,13 +1862,13 @@
18621862
'' : `#${app.slug}-font-size-slider-thumb:hover { transform: scale(1.125) }` )
18631863

18641864
// AI reply elem styles
1865-
+ `#${app.slug} .reply-tip {`
1866-
+ 'content: "" ; position: relative ; border: 7px solid transparent ;'
1867-
+ 'float: left ; left: 7px ; margin: 1.89em -14px 0 0 ;' // positioning
1868-
+ 'border-bottom-style: solid ; border-bottom-width: 16px ; border-top: 0 ; border-bottom-color:'
1869-
+ `${ // hide reply tip for terminal aesthetic
1870-
isParticlizedDS ? '#0000' : `var(--reply-header-bg-color-${env.ui.app.scheme}-scheme)` }}`
1871-
+ `#${app.slug} .reply-header {
1865+
+ `#${app.slug} .reply-tip {
1866+
content: "" ; position: relative ; border: 7px solid transparent ;
1867+
float: left ; left: 7px ; margin: 1.89em -14px 0 0 ; /* positioning */
1868+
border-bottom-style: solid ; border-bottom-width: 16px ; border-top: 0 ; border-bottom-color:
1869+
${ // hide reply tip for terminal aesthetic
1870+
isParticlizedDS ? '#0000' : `var(--reply-header-bg-color-${env.ui.app.scheme}-scheme)` }}
1871+
#${app.slug} .reply-header {
18721872
display: flex ; align-items: center ; position: relative ;
18731873
top: 14px ; padding: 16px 14px ; height: 18px ; border-radius: 12px 12px 0 0 ;
18741874
${ env.ui.app.scheme == 'light' ? 'border-bottom: 1px solid white'
@@ -1878,31 +1878,30 @@
18781878
fill: var(--reply-header-fg-color-${env.ui.app.scheme}-scheme) ;
18791879
stroke: var(--reply-header-fg-color-${env.ui.app.scheme}-scheme) }
18801880
#${app.slug} .reply-header-text { flex-grow: 1 ; font-size: 12px ; font-family: monospace }
1881-
#${app.slug} .reply-header-btns { margin: 7.5px -5px 0 }`
1882-
+ `#${app.slug} .reply-pre {`
1883-
+ `font-size: ${config.fontSize}px ; white-space: pre-wrap ; min-width: 0 ;`
1884-
+ `line-height: ${ config.fontSize * config.lineHeightRatio }px ; overscroll-behavior: contain ;`
1885-
+ 'margin: 13px 0 7px 0 ; padding: 1.25em 1.25em 0 1.25em ;'
1886-
+ 'border-radius: 0 0 12px 12px ; overflow: auto ;'
1887-
+ ( config.bgAnimationsDisabled ? // classic opaque bg
1888-
`background: var(--pre-bg-color-${env.ui.app.scheme}-scheme) ;`
1889-
+ `color: var(--font-color-${env.ui.app.scheme}-scheme)`
1890-
: `${ env.ui.app.scheme == 'dark' ? // slightly tranluscent bg
1881+
#${app.slug} .reply-header-btns { margin: 7.5px -5px 0 }
1882+
#${app.slug} .reply-pre {
1883+
font-size: ${config.fontSize}px ; white-space: pre-wrap ; min-width: 0 ;
1884+
line-height: ${ config.fontSize * config.lineHeightRatio }px ; overscroll-behavior: contain ;
1885+
position: relative ; z-index: 1 ; /* allow top-margin to overlap header in light scheme */
1886+
margin: ${ env.ui.app.scheme == 'light' ? 11 : 13 }px 0 7px 0 ; padding: 1.25em 1.25em 0 1.25em ;
1887+
border-radius: 0 0 12px 12px ; overflow: auto ;
1888+
${ config.bgAnimationsDisabled ? // classic opaque bg
1889+
`background: var(--pre-bg-color-${env.ui.app.scheme}-scheme) ;
1890+
color: var(--font-color-${env.ui.app.scheme}-scheme)`
1891+
: env.ui.app.scheme == 'dark' ? // slightly tranluscent bg
18911892
'background: #2b3a40cf ; color: var(--font-color-dark-scheme) ; border: 1px solid white'
1892-
: 'background: var(--pre-bg-color-light-scheme) ;'
1893-
+ 'color: var(--font-color-light-scheme) ; border: none' };` )
1894-
+ `${ config.fgAnimationsDisabled ? '' : // smoothen Anchor mode expand/shrink
1895-
'transition: var(--answer-pre-transition) ;'
1896-
+ '-webkit-transition: var(--answer-pre-transition) ;'
1897-
+ '-moz-transition: var(--answer-pre-transition) ;'
1898-
+ '-o-transition: var(--answer-pre-transition) ;'
1899-
+ '-ms-transition: var(--answer-pre-transition)' }}`
1900-
+ `#${app.slug} .reply-pre a, #${app.slug} .reply-pre a:visited { color: #4495d4 }`
1901-
+ `#${app.slug} .reply-pre a:hover { color: ${ env.ui.app.scheme == 'dark' ? 'white' : '#ea7a28' }}`
1902-
+ `code #${app.slug}-copy-btn { position: relative ; top: -6px ; right: -9px }`
1903-
+ `code #${app.slug}-copy-btn > svg { height: 13px ; width: 13px ; fill: white }`
1904-
1905-
// Rendered AI reply styles
1893+
: /* light scheme */ `background: var(--pre-bg-color-light-scheme) ;
1894+
color: var(--font-color-light-scheme) ; border: none` };
1895+
${ config.fgAnimationsDisabled ? '' : // smoothen Anchor mode expand/shrink
1896+
`transition: var(--answer-pre-transition) ;
1897+
-webkit-transition: var(--answer-pre-transition) ; -moz-transition: var(--answer-pre-transition) ;
1898+
-o-transition: var(--answer-pre-transition) ; -ms-transition: var(--answer-pre-transition)` }}
1899+
#${app.slug} .reply-pre a, #${app.slug} .reply-pre a:visited { color: #4495d4 }
1900+
#${app.slug} .reply-pre a:hover { color: ${ env.ui.app.scheme == 'dark' ? 'white' : '#ea7a28' }}
1901+
code #${app.slug}-copy-btn { position: relative ; top: -6px ; right: -9px }
1902+
code #${app.slug}-copy-btn > svg { height: 13px ; width: 13px ; fill: white }`
1903+
1904+
// Rendered AI reply text styles
19061905
+ `#${app.slug} .reply-pre h1 { font-size: 1.8em }
19071906
#${app.slug} .reply-pre h2 { font-size: 1.65em }
19081907
#${app.slug} .reply-pre h3 { font-size: 1.4em }

‎bravegpt/greasemonkey/bravegpt.user.js‎

Lines changed: 32 additions & 32 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.3.29.4
151+
// @version 2025.3.30
152152
// @license MIT
153153
// @icon https://cdn.jsdelivr.net/gh/KudoAI/bravegpt@df624b0/assets/images/icons/bravegpt/icon48.png
154154
// @icon64 https://cdn.jsdelivr.net/gh/KudoAI/bravegpt@df624b0/assets/images/icons/bravegpt/icon64.png
@@ -2339,13 +2339,13 @@
23392339
width: 12.5px ; height: 12.5px ; margin-right: 6px ; top: 1px }`
23402340

23412341
// AI reply elem styles
2342-
+ `#${app.slug} .reply-tip {`
2343-
+ 'content: "" ; position: relative ; border: 7px solid transparent ;'
2344-
+ 'float: left ; left: 7px ; margin: 29px -13px 0 0 ;' // positioning
2345-
+ 'border-bottom-style: solid ; border-bottom-width: 16px ; border-top: 0 ; border-bottom-color:'
2346-
+ `${ // hide reply tip for terminal aesthetic
2347-
isParticlizedDS ? '#0000' : `var(--reply-header-bg-color-${env.ui.app.scheme}-scheme)` }}`
2348-
+ `#${app.slug} .reply-header {
2342+
+ `#${app.slug} .reply-tip {
2343+
content: "" ; position: relative ; border: 7px solid transparent ;
2344+
float: left ; left: 7px ; margin: 29px -13px 0 0 ; /* positioning */
2345+
border-bottom-style: solid ; border-bottom-width: 16px ; border-top: 0 ; border-bottom-color:
2346+
${ // hide reply tip for terminal aesthetic
2347+
isParticlizedDS ? '#0000' : `var(--reply-header-bg-color-${env.ui.app.scheme}-scheme)` }}
2348+
#${app.slug} .reply-header {
23492349
display: flex ; align-items: center ; position: relative ;
23502350
top: 12px ; padding: 16px 14px ; height: 18px ; border-radius: 12px 12px 0 0 ;
23512351
${ env.ui.app.scheme == 'light' ? 'border-bottom: 1px solid white'
@@ -2355,31 +2355,31 @@
23552355
fill: var(--reply-header-fg-color-${env.ui.app.scheme}-scheme) ;
23562356
stroke: var(--reply-header-fg-color-${env.ui.app.scheme}-scheme) }
23572357
#${app.slug} .reply-header-text { flex-grow: 1 ; font-size: 12px ; font-family: monospace }
2358-
#${app.slug} .reply-header-btns { margin: 10.5px -5px 0 }`
2359-
+ `#${app.slug} .reply-pre {`
2360-
+ `font-size: ${config.fontSize}px ; white-space: pre-wrap ;`
2361-
+ 'font-family: Consolas, Menlo, Monaco, monospace ;'
2362-
+ `line-height: ${ config.fontSize * config.lineHeightRatio }px ; overscroll-behavior: contain ;`
2363-
+ 'margin-top: 12px ; padding: 1.2em 1.2em 0 1.2em ; border-radius: 0 0 12px 12px ; overflow: auto ;'
2364-
+ ( config.bgAnimationsDisabled ? // classic opaque bg
2365-
`background: var(--pre-bg-color-${env.ui.app.scheme}-scheme) ;`
2366-
+ `color: var(--font-color-${env.ui.app.scheme}-scheme)`
2367-
: `${ env.ui.app.scheme == 'dark' ? // slightly tranluscent bg
2358+
#${app.slug} .reply-header-btns { margin: 10.5px -5px 0 }
2359+
#${app.slug} .reply-pre {
2360+
font-size: ${config.fontSize}px ; white-space: pre-wrap ;
2361+
font-family: Consolas, Menlo, Monaco, monospace ;
2362+
line-height: ${ config.fontSize * config.lineHeightRatio }px ; overscroll-behavior: contain ;
2363+
position: relative ; z-index: 1 ; /* allow top-margin to overlap header in light scheme */
2364+
margin-top: ${ env.ui.app.scheme == 'light' ? 10 : 12 }px ; padding: 1.2em 1.2em 0 1.2em ;
2365+
border-radius: 0 0 12px 12px ; overflow: auto ;
2366+
${ config.bgAnimationsDisabled ? // classic opaque bg
2367+
`background: var(--pre-bg-color-${env.ui.app.scheme}-scheme) ;
2368+
color: var(--font-color-${env.ui.app.scheme}-scheme)`
2369+
: env.ui.app.scheme == 'dark' ? // slightly tranluscent bg
23682370
'background: #2b3a40cf ; color: var(--font-color-dark-scheme) ; border: 1px solid white'
2369-
: 'background: var(--pre-bg-color-light-scheme) ;'
2370-
+ 'color: var(--font-color-light-scheme) ; border: none' };` )
2371-
+ `${ config.fgAnimationsDisabled ? '' : // smoothen Anchor mode expand/shrink
2372-
'transition: var(--answer-pre-transition) ;'
2373-
+ '-webkit-transition: var(--answer-pre-transition) ;'
2374-
+ '-moz-transition: var(--answer-pre-transition) ;'
2375-
+ '-o-transition: var(--answer-pre-transition) ;'
2376-
+ '-ms-transition: var(--answer-pre-transition)' }}`
2377-
+ `#${app.slug} .reply-pre a, #${app.slug} .reply-pre a:visited { color: #4495d4 }`
2378-
+ `#${app.slug} .reply-pre a:hover { color: ${ env.ui.app.scheme == 'dark' ? 'white' : '#ea7a28' }}`
2379-
+ `code #${app.slug}-copy-btn { position: relative ; top: -6px ; right: -9px }`
2380-
+ `code #${app.slug}-copy-btn > svg { height: 13px ; width: 13px ; fill: white }`
2381-
2382-
// Rendered AI reply styles
2371+
: /* light scheme */ `background: var(--pre-bg-color-light-scheme) ;
2372+
color: var(--font-color-light-scheme) ; border: none` };
2373+
${ config.fgAnimationsDisabled ? '' : // smoothen Anchor mode expand/shrink
2374+
`transition: var(--answer-pre-transition) ;
2375+
-webkit-transition: var(--answer-pre-transition) ; -moz-transition: var(--answer-pre-transition) ;
2376+
-o-transition: var(--answer-pre-transition) ; -ms-transition: var(--answer-pre-transition)` }}
2377+
#${app.slug} .reply-pre a, #${app.slug} .reply-pre a:visited { color: #4495d4 }
2378+
#${app.slug} .reply-pre a:hover { color: ${ env.ui.app.scheme == 'dark' ? 'white' : '#ea7a28' }}
2379+
code #${app.slug}-copy-btn { position: relative ; top: -6px ; right: -9px }
2380+
code #${app.slug}-copy-btn > svg { height: 13px ; width: 13px ; fill: white }`
2381+
2382+
// Rendered AI reply text styles
23832383
+ `#${app.slug} .reply-pre h1 { font-size: 1.25em }
23842384
#${app.slug} .reply-pre h2 { font-size: 1.1em }
23852385
#${app.slug} .reply-pre ul { margin: -10px 0 -6px } /* reduce v-spacing */

‎duckduckgpt/greasemonkey/duckduckgpt.user.js‎

Lines changed: 31 additions & 32 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.3.29.4
151+
// @version 2025.3.30
152152
// @license MIT
153153
// @icon https://cdn.jsdelivr.net/gh/KudoAI/duckduckgpt@06af076/assets/images/icons/duckduckgpt/icon48.png
154154
// @icon64 https://cdn.jsdelivr.net/gh/KudoAI/duckduckgpt@06af076/assets/images/icons/duckduckgpt/icon64.png
@@ -2333,13 +2333,13 @@
23332333
width: 12.5px ; height: 12.5px ; margin-right: 6px ; top: 1px }`
23342334

23352335
// AI reply elem styles
2336-
+ `#${app.slug} .reply-tip {`
2337-
+ 'content: "" ; position: relative ; border: 7px solid transparent ;'
2338-
+ 'float: left ; left: 9px ; margin: 33px -14px 0 0 ;' // positioning
2339-
+ 'border-bottom-style: solid ; border-bottom-width: 18px ; border-top: 0 ; border-bottom-color:'
2340-
+ `${ // hide reply tip for terminal aesthetic
2341-
isParticlizedDS ? '#0000' : `var(--reply-header-bg-color-${env.ui.app.scheme}-scheme)` }}`
2342-
+ `#${app.slug} .reply-header {
2336+
+ `#${app.slug} .reply-tip {
2337+
content: "" ; position: relative ; border: 7px solid transparent ;
2338+
float: left ; left: 9px ; margin: 33px -14px 0 0 ; /* positioning */
2339+
border-bottom-style: solid ; border-bottom-width: 18px ; border-top: 0 ; border-bottom-color:
2340+
${ // hide reply tip for terminal aesthetic
2341+
isParticlizedDS ? '#0000' : `var(--reply-header-bg-color-${env.ui.app.scheme}-scheme)` }}
2342+
#${app.slug} .reply-header {
23432343
display: flex ; align-items: center ; position: relative ;
23442344
top: 14px ; padding: 7px 14px ; height: 18px ; border-radius: 12px 12px 0 0 ;
23452345
${ env.ui.app.scheme == 'light' ? 'border-bottom: 1px solid white'
@@ -2349,31 +2349,30 @@
23492349
fill: var(--reply-header-fg-color-${env.ui.app.scheme}-scheme) ;
23502350
stroke: var(--reply-header-fg-color-${env.ui.app.scheme}-scheme) }
23512351
#${app.slug} .reply-header-text { flex-grow: 1 ; font-size: 12px ; font-family: monospace }
2352-
#${app.slug} .reply-header-btns { margin: 7.5px -5px 0 }`
2353-
+ `#${app.slug} .reply-pre {`
2354-
+ `font-size: ${config.fontSize}px ; white-space: pre-wrap ; min-width: 0 ;`
2355-
+ `line-height: ${ config.fontSize * config.lineHeightRatio }px ; overscroll-behavior: contain ;`
2356-
+ 'margin: 13px 0 7px 0 ; padding: 1.25em 1.25em 0 1.25em ;'
2357-
+ 'border-radius: 0 0 12px 12px ; overflow: auto ;'
2358-
+ ( config.bgAnimationsDisabled ? // classic opaque bg
2359-
`background: var(--pre-bg-color-${env.ui.app.scheme}-scheme) ;`
2360-
+ `color: var(--font-color-${env.ui.app.scheme}-scheme)`
2361-
: `${ env.ui.app.scheme == 'dark' ? // slightly tranluscent bg
2352+
#${app.slug} .reply-header-btns { margin: 7.5px -5px 0 }
2353+
#${app.slug} .reply-pre {
2354+
font-size: ${config.fontSize}px ; white-space: pre-wrap ; min-width: 0 ;
2355+
line-height: ${ config.fontSize * config.lineHeightRatio }px ; overscroll-behavior: contain ;
2356+
position: relative ; z-index: 1 ; /* allow top-margin to overlap header in light scheme */
2357+
margin: ${ env.ui.app.scheme == 'light' ? 11 : 13 }px 0 7px 0 ; padding: 1.25em 1.25em 0 1.25em ;
2358+
border-radius: 0 0 12px 12px ; overflow: auto ;
2359+
${ config.bgAnimationsDisabled ? // classic opaque bg
2360+
`background: var(--pre-bg-color-${env.ui.app.scheme}-scheme) ;
2361+
color: var(--font-color-${env.ui.app.scheme}-scheme)`
2362+
: env.ui.app.scheme == 'dark' ? // slightly tranluscent bg
23622363
'background: #2b3a40cf ; color: var(--font-color-dark-scheme) ; border: 1px solid white'
2363-
: 'background: var(--pre-bg-color-light-scheme) ;'
2364-
+ 'color: var(--font-color-light-scheme) ; border: none' };` )
2365-
+ `${ config.fgAnimationsDisabled ? '' : // smoothen Anchor mode expand/shrink
2366-
'transition: var(--reply-pre-transition) ;'
2367-
+ '-webkit-transition: var(--reply-pre-transition) ;'
2368-
+ '-moz-transition: var(--reply-pre-transition) ;'
2369-
+ '-o-transition: var(--reply-pre-transition) ;'
2370-
+ '-ms-transition: var(--reply-pre-transition)' }}`
2371-
+ `#${app.slug} .reply-pre a, #${app.slug} .reply-pre a:visited { color: #4495d4 }`
2372-
+ `#${app.slug} .reply-pre a:hover { color: ${ env.ui.app.scheme == 'dark' ? 'white' : '#ea7a28' }}`
2373-
+ `code #${app.slug}-copy-btn { position: relative ; top: -6px ; right: -9px }`
2374-
+ `code #${app.slug}-copy-btn > svg { height: 13px ; width: 13px ; fill: white }`
2375-
2376-
// Rendered AI reply styles
2364+
: /* light scheme */ `background: var(--pre-bg-color-light-scheme) ;
2365+
color: var(--font-color-light-scheme) ; border: none` };
2366+
${ config.fgAnimationsDisabled ? '' : // smoothen Anchor mode expand/shrink
2367+
`transition: var(--reply-pre-transition) ;
2368+
-webkit-transition: var(--reply-pre-transition) ; -moz-transition: var(--reply-pre-transition) ;
2369+
-o-transition: var(--reply-pre-transition) ; -ms-transition: var(--reply-pre-transition)` }}
2370+
#${app.slug} .reply-pre a, #${app.slug} .reply-pre a:visited { color: #4495d4 }
2371+
#${app.slug} .reply-pre a:hover { color: ${ env.ui.app.scheme == 'dark' ? 'white' : '#ea7a28' }}
2372+
code #${app.slug}-copy-btn { position: relative ; top: -6px ; right: -9px }
2373+
code #${app.slug}-copy-btn > svg { height: 13px ; width: 13px ; fill: white }`
2374+
2375+
// Rendered AI reply text styles
23772376
+ `#${app.slug} .reply-pre h1 { font-size: 1.8em }
23782377
#${app.slug} .reply-pre h2 { font-size: 1.65em }
23792378
#${app.slug} .reply-pre h3 { font-size: 1.4em ; line-height: 1.25 }

0 commit comments

Comments
 (0)