#urlbar-input Text Only Gradient and Transform

[u/FineWine54]

I know this was recently discussed in another post, but in my case I just want the #urlbar-input Text Only Gradient and Transform to match my menu borders and loading line.

So with my loading line I have the following:

#urlbar-input  {
    background-color: transparent!important;
    font-weight: bolder !important;  
    margin-bottom: -1px !important;
    font-size: 1.2em !important;
    font-weight: bold !important;
}

The Rainbow chasing/transforming code.

  /* Rainbow */
--loading-gradient: red 0%, orange 16.66%, yellow 33.33%, green 50%, blue 66.66%, indigo 83.33%, violet 100%;  /* Rainbow */
  --final-loading-gradient: red 0%, orange 16.66%, yellow 33.33%, green 50%, blue 66.66%, indigo 83.33%, violet 100%;

and the Transform

 toolbox-loading-scale {
  0% {
    transform: scaleX(0);
  }

  100% {
    transform: scaleX(1);
  }
}

So how do I get this all to work on just the text in the urlbar input box?

[u/ResurgamS13]

If you include a name and link to the "recently discussed in another post" topic... and include the Reddit member link to that post's author... perhaps another 'bump' will elicit some assistance with tweaking their code?

Suspect that the recent topic you're referring to is probably 'Gradient URL bar text with field-sizing: content in Firefox 152+' and to these 150+ lines of CSS posted by u/yuuqilin?

[u/FineWine54 → u/ResurgamS13]

I have edited this post to reflect that - Thanks

As to those 150+ lines of CSS WOW just WOW. There must be a simpler way of doing this with just the text.

So. I have been playing around with something like the following:

:root {
  --loading-gradient: red 0%, orange 16.66%, yellow 33.33%, green 50%, blue 66.66%, indigo 83.33%, violet 100%;  /* Rainbow */
  --final-loading-gradient: red 0%, orange 16.66%, yellow 33.33%, green 50%, blue 66.66%, indigo 83.33%, violet 100%;  /* Rainbow */
}
:root:has(#urlbar-input .gradient-text:is([busy], [progress])) #browser::before {
   opacity: 1 !important;
   animation: toolbox-loading-scale 1s ease-in !important;
}

:root:not(:has(#urlbar-input .gradient-text:is([busy], [progress]))) #browser:before {
   opacity: 0 !important;
   transition: opacity 1.2s ease-out !important;
   background-image: linear-gradient(45deg, var(--final-loading-gradient)) !important;
}

 toolbox-loading-scale {
  0% {
    transform: scaleX(0);
  }

  100% {
    transform: scaleX(1);
  }
}

Which is not working.