Skip to content

Commit

Permalink
Added -<webkit|moz>-box-shadow fallbacks to support older browsers …
Browse files Browse the repository at this point in the history 
…↞ [auto-sync from https://github.com/adamlui/ai-web-extensions/tree/main/googlegpt]
  • Loading branch information
@kudo-sync-bot
kudo-sync-bot committed Feb 4, 2025
1 parent c2884aa commit 206e6e5
Showing 1 changed file with 45 additions and 36 deletions.
81 changes: 45 additions & 36 deletions greasemonkey/googlegpt.user.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -149,7 +149,7 @@
// @description:zu Yengeza izimpendulo ze-AI ku-Google Search (inikwa amandla yi-Google Gemma + GPT-4o!)
// @author KudoAI
// @namespace https://kudoai.com
// @version 2025.2.4.2
// @version 2025.2.4.3
// @license MIT
// @icon https://assets.googlegpt.io/images/icons/googlegpt/black/icon48.png?v=59409b2
// @icon64 https://assets.googlegpt.io/images/icons/googlegpt/black/icon64.png?v=59409b2
Expand Down Expand Up @@ -1058,11 +1058,10 @@

// Glowing modal btns
+ ':root { --glow-color: hsl(186 100% 69%) }'
+ '.glowing-btn {'
+ 'perspective: 2em ; font-weight: 900 ; animation: border-flicker 2s linear infinite ;'
+ '-webkit-box-shadow: inset 0 0 0.5em 0 var(--glow-color), 0 0 0.5em 0 var(--glow-color) ;'
+ 'box-shadow: inset 0 0 0.5em 0 var(--glow-color), 0 0 0.5em 0 var(--glow-color) ;'
+ '-moz-box-shadow: inset 0 0 0.5em 0 var(--glow-color), 0 0 0.5em 0 var(--glow-color) }'
+ `.glowing-btn {
perspective: 2em ; font-weight: 900 ; animation: border-flicker 2s linear infinite ;
--shadow: inset 0 0 0.5em 0 var(--glow-color), 0 0 0.5em 0 var(--glow-color) ;
box-shadow: var(--shadow) ; -webkit-box-shadow: var(--shadow) ; -moz-box-shadow: var(--shadow) }`
+ '.glowing-txt {'
+ 'animation: text-flicker 3s linear infinite ;'
+ '-webkit-text-shadow: 0 0 0.125em hsl(0 0% 100% / 0.3), 0 0 0.45em var(--glow-color) ;'
Expand Down Expand Up @@ -1090,11 +1089,12 @@
+ '70% { opacity: 0.7 } 100% { opacity: 1 }}'

// Settings modal
+ `#${app.slug}-settings {`
+ `min-width: ${ env.browser.isPortrait ? 288 : 698 }px ;`
+ 'max-width: 75vw ; word-wrap: break-word ;'
+ 'margin: 12px 23px ; border-radius: 15px ; box-shadow: 0 30px 60px rgba(0,0,0,0.12) ;'
+ `${ env.ui.app.scheme == 'dark' ? 'stroke: white ; fill: white' : 'stroke: black ; fill: black' }}` // icon color
+ `#${app.slug}-settings {
min-width: ${ env.browser.isPortrait ? 288 : 698 }px ; max-width: 75vw ; word-wrap: break-word ;
margin: 12px 23px ; border-radius: 15px ;
${ env.ui.app.scheme == 'dark' ? 'stroke: white ; fill: white' : 'stroke: black ; fill: black' };
--shadow: 0 30px 60px rgba(0,0,0,0.12) ;
box-shadow: var(--shadow) ; -webkit-box-shadow: var(--shadow) ; -moz-box-shadow: var(--shadow) }`
+ `#${app.slug}-settings-title {`
+ 'font-weight: bold ; line-height: 19px ; text-align: center ;'
+ `margin: 0 -6px ${ env.browser.isPortrait ? 2 : -15 }px 0 }`
Expand Down Expand Up @@ -2235,28 +2235,31 @@
+ `border: ${ env.ui.app.scheme == 'dark' ? 'none' : '1px solid #dadce0' } ; border-radius: 8px ;`
+ `width: ${ env.browser.isMobile ? 'auto' : '319px' } ;` // hard-width to prevent Google's flex-wrap moving app to bottom
+ ( env.browser.isMobile ? 'margin: 8px 0 8px' : 'margin-bottom: 30px' ) + ';' // add vertical margins
+ 'flex-grow: 1 ; word-wrap: break-word ; white-space: pre-wrap ; box-shadow: var(--app-shadow) ;'
+ 'flex-grow: 1 ; word-wrap: break-word ; white-space: pre-wrap ;'
+ ( config.bgAnimationsDisabled ? // classic flat bg
`background: var(--app-bg-color-${env.ui.app.scheme}-scheme) ;`
+ `color: var(--font-color-${env.ui.app.scheme}-scheme) ;`
: `background-image: linear-gradient(180deg, ${ // gradient bg to match rising particles
env.ui.app.scheme == 'dark' ? '#99a8a6 -245px, black 185px'
: '#b6ebff -163px, white 65px' }) ;` )
+ 'transition: var(--app-transition) ;'
+ '-webkit-transition: var(--app-transition) ; -moz-transition: var(--app-transition) ;'
+ '-o-transition: var(--app-transition) ; -ms-transition: var(--app-transition) }'
+ `transition: var(--app-transition) ;
-webkit-transition: var(--app-transition) ; -moz-transition: var(--app-transition) ;
-o-transition: var(--app-transition) ; -ms-transition: var(--app-transition) ;
box-shadow: var(--app-shadow) ;
-webkit-box-shadow: var(--app-shadow) ; -moz-box-shadow: var(--app-shadow) }`
+ `#${app.slug} .app-hover-only {` // hide app-hover-only elems
+ 'position: absolute ; left: -9999px ; opacity: 0 ;' // using position to support transitions
+ 'width: 0 }' // to support width calcs
+ `#${app.slug}:hover .app-hover-only, #${app.slug}:active .app-hover-only {
position: relative ; left: auto ; width: auto ; opacity: 1 }` // show app-hover-only elems on hover
+ `#${app.slug}:hover, #${app.slug}:active {` // show app shadow on hover
+ 'box-shadow: var(--app-hover-shadow) ;'
+ 'transition: var(--app-transition), var(--app-shadow-transition) ;'
+ '-webkit-transition: var(--app-transition), var(--app-shadow-transition) ;'
+ '-moz-transition: var(--app-transition), var(--app-shadow-transition) ;'
+ '-o-transition: var(--app-transition), var(--app-shadow-transition) ;'
+ '-ms-transition: var(--app-transition), var(--app-shadow-transition) }'
+ `box-shadow: var(--app-hover-shadow) ;
-webkit-box-shadow: var(--app-hover-shadow) ; -moz-box-shadow: var(--app-hover-shadow) ;
transition: var(--app-transition), var(--app-shadow-transition) ;
-webkit-transition: var(--app-transition), var(--app-shadow-transition) ;
-moz-transition: var(--app-transition), var(--app-shadow-transition) ;
-o-transition: var(--app-transition), var(--app-shadow-transition) ;
-ms-transition: var(--app-transition), var(--app-shadow-transition) }`
+ `#${app.slug} p { margin: 0 ; ${ env.ui.app.scheme == 'dark' ? 'color: #ccc' : '' }}`
+ `#${app.slug} .alert-link {`
+ `color: ${ env.ui.app.scheme == 'light' ? '#190cb0' : 'white ; text-decoration: underline' }}`
Expand Down Expand Up @@ -2304,16 +2307,17 @@
+ 'z-index: 1 ; position: absolute ; bottom: 20px ;'
+ 'border-left: 4.5px solid transparent ; border-right: 4.5px solid transparent ;'
+ 'border-bottom: 16px solid #ccc }'
+ `#${app.slug}-font-size-slider-thumb {`
+ 'z-index: 2 ; width: 10px ; height: 26px ; border-radius: 30% ; position: relative ;'
+ 'top: -8.25px ; cursor: ew-resize ;'
+ `background-color: ${ env.ui.app.scheme == 'dark' ? 'white' : '#4a4a4a' } ;`
+ 'box-shadow: rgba(0,0,0,0.21) 1px 1px 9px 0 ;'
+ 'transition: var(--font-size-slider-thumb-transition) ;'
+ '-webkit-transition: var(--font-size-slider-thumb-transition) ;'
+ '-moz-transition: var(--font-size-slider-thumb-transition) ;'
+ '-o-transition: var(--font-size-slider-thumb-transition) ;'
+ '-ms-transition: var(--font-size-slider-thumb-transition) }'
+ `#${app.slug}-font-size-slider-thumb {
z-index: 2 ; width: 10px ; height: 26px ; border-radius: 30% ; position: relative ;
top: -8.25px ; cursor: ew-resize ;
background-color: ${ env.ui.app.scheme == 'dark' ? 'white' : '#4a4a4a' } ;
--shadow: rgba(0,0,0,0.21) 1px 1px 9px 0 ;
box-shadow: var(--shadow) ; -webkit-box-shadow: var(--shadow) ; -moz-box-shadow: var(--shadow) ;
transition: var(--font-size-slider-thumb-transition) ;
-webkit-transition: var(--font-size-slider-thumb-transition) ;
-moz-transition: var(--font-size-slider-thumb-transition) ;
-o-transition: var(--font-size-slider-thumb-transition) ;
-ms-transition: var(--font-size-slider-thumb-transition) }`
+ ( config.fgAnimationsDisabled || env.browser.isMobile ?
'' : `#${app.slug}-font-size-slider-thumb:hover { transform: scale(1.125) }` )
+ `.${app.slug}-standby-btn {`
Expand Down Expand Up @@ -2371,9 +2375,12 @@
+ 'height: 16px ; max-height: 200px ; resize: none ;'
+ `background: ${ env.ui.app.scheme == 'light' ? '#eeeeee9e'
: `#515151${ config.bgAnimationsDisabled ? '' : '9e' }` } ;`
+ `${ env.ui.app.scheme == 'light' ? 'box-shadow: 0 1px 2px rgba(15,17,17,0.1) inset' : '' }}`
+ `${ env.ui.app.scheme == 'dark' ? '' :
`--shadow: 0 1px 2px rgba(15,17,17,0.1) inset ; box-shadow: var(--shadow) ;
-webkit-box-shadow: var(--shadow) ; -moz-box-shadow: var(--shadow)` }}`
+ `#${app.slug}-chatbar:focus-visible {
outline: -webkit-focus-ring-color auto 1px ; box-shadow: 0 1px 2px rgba(0,0,0,0.3) inset }`
outline: -webkit-focus-ring-color auto 1px ; --shadow: 0 1px 2px rgba(0,0,0,0.3) inset ;
box-shadow: var(--shadow) ; -webkit-box-shadow: var(--shadow) ; -moz-box-shadow: var(--shadow) }`
+ `.${app.slug}-related-queries {`
+ 'display: flex ; flex-wrap: wrap ; width: 100% ; margin-bottom: 19px }'
+ `.${app.slug}-related-query {`
Expand All @@ -2388,9 +2395,10 @@
+ `border: 1px solid ${ env.ui.app.scheme == 'dark' ? (
config.bgAnimationsDisabled ? '#5f5f5f' : '#777' ) : '#e1e1e1' } ;`
+ 'border-radius: 0 13px 12px 13px ; flex: 0 0 auto ;'
+ `box-shadow: 1px 4px ${ env.ui.app.scheme == 'dark' ?
+ `--shadow: 1px 4px ${ env.ui.app.scheme == 'dark' ?
`${ config.bgAnimationsDisabled ? 10 : 18 }px -8px lightgray`
: '8px -6px rgba(169,169,169,0.75)' };`
: '8px -6px rgba(169,169,169,0.75)' };
box-shadow: var(--shadow) ; -webkit-box-shadow: var(--shadow) ; -moz-box-shadow: var(--shadow) ;`
+ `${ config.fgAnimationsDisabled ? '' : // smoothen hover-zoom
'transition: var(--rq-transition) ;'
+ '-webkit-transition: var(--rq-transition) ; -moz-transition: var(--rq-transition) ;'
Expand Down Expand Up @@ -4174,7 +4182,8 @@
+ 'background-color: rgba(0,0,0,0.64) ; padding: 6px ; border-radius: 6px ; border: 1px solid #d9d9e3 ;' // bubble style
+ 'font-size: 0.75rem ; color: white ; fill: white ; stroke: white ;' // font/icon style
+ 'position: absolute ;' // for update.tooltip() calcs
+ 'box-shadow: 3px 5px 16px 0 rgb(0,0,0,0.21) ;' // drop shadow
+ `--shadow: 3px 5px 16px 0 rgb(0,0,0,0.21) ;
box-shadow: var(--shadow) ; -webkit-box-shadow: var(--shadow) ; -moz-box-shadow: var(--shadow)`
+ 'opacity: 0 ; height: fit-content ; z-index: 1250 ;' // visibility
+ 'transition: opacity 0.1s ; -webkit-transition: opacity 0.1s ; -moz-transition: opacity 0.1s ;'
+ '-o-transition: opacity 0.1s ; -ms-transition: opacity 0.1s }'
Expand Down

0 comments on commit 206e6e5

Please sign in to comment.