Animated Accent Switch Web-Buttons



  • This is an aesthetics CSS for #switch webview buttons (button image to be exact). Doesn't adds anything functional-wise. It's more of an accompaniment.
    Designed to go along with dark themes, with "Accent Colors from Active Page" checked under Theme settings.

    While theming the browser, the web-buttons felt like it could use some accented colors touch to go along with the default-looking buttons.

    This is what it ended up looking like when running with other themes / mods / extensions
    S1U1nUGYI6.gif
    It kinda has a 3d feel to it because of the drop-shadow filter.
    Here it is with all other mods / css extensions off.
    (I didn't disable Chrome Web Store extensions, so the Links Panel is still visible)
    mVlhhe42RN.gif


    Edit:
    Revised version (it's in javascript now for the css to run more consistently).
    Thanks to @nomadic's for fixing the initial ui-loading issue!

    // Add a style element to the body of the browser's UI
    function appendStyle() {
      let style = document.createElement("style");
      style.innerHTML = `
        /* Gives web button a color-accented base, and calls animation */
        #browser #switch button.webviewbtn img
        {
          background-color: var(--colorAccentBgAlpha);
          animation-name: scanning;
          animation-duration: 2000ms;
          animation-iteration-count: infinite;
          animation-timing-function: linear;
        }
    
        /* Kinda reminds me of the old file-scanning circling motion */
        @keyframes scanning {
          0% { 	filter: drop-shadow(1px 3px 0px var(--colorAccentBgFaded)); }
          25% {	filter: drop-shadow(-1px 3px 0px var(--colorAccentBgFaded)); }
          50% {	filter: drop-shadow(-1px -3px 0px var(--colorAccentBgFaded)); }
          75% {	filter: drop-shadow(1px -3px 0px var(--colorAccentBgFaded)); }
          100% {	filter: drop-shadow(1px 3px 0px var(--colorAccentBgFaded)); }
        }
    
        /* Bring to front the button's notification thumb, due to filter being used */
        .button-badge {
          z-index: 1
        }
      `;
      document.body.appendChild(style);
    }
    
    // Wait for the browser's UI to load before adding the CSS
    const LUETAGE_NUMBER = 300;
    let intervalID = setInterval(() => {
      let browser = document.getElementById("browser");
      if (browser) {
        clearInterval(intervalID);
        appendStyle();
      }
    }, LUETAGE_NUMBER);
    

    Other notes:

    • You can tweak animation-duration to change the speed of the animation.
    • If you're thinking what to name the file, I named mine accentSwitchButtonAnim.js
    • Fixing a style intention conflict with OperaGXTheme:

    Opera GX Theme's css has this

    #browser.theme-dark #switch button.webviewbtn img {
    background-color: transparent;
    }

    which hides the background, resulting in what looks like the right-side comparison:
    3fb5baa9-3f43-444e-ac4d-e4896001f1f9-image.png
    No tweaks needed if that's what you want. To retain the background-color like on the left, add an !important to the back of this mod's background-color css, like so

    /* Gives web button a color-accented base, and calls animation */
    #browser #switch button.webviewbtn img
    {
    background-color: var(--colorAccentBgAlpha) !important;


    Archives (probably irrelevant details):

    5/8/2020 ~2:39 pm:
    Revised version from css to javascript. Tagged javascript. If for some reason anyone still wish to view the initial css version, it's wholesale (with comments) in the javascript code. The chunk in between the '`' s (backticks / grave accents)

    style.innerHTML=`css-code`

    4/8/2020 ~4:36 pm:
    After further testing, I reckon this isn't required for the animations to run. Another error/bug/conflict seemed to have confused me on this.

    The Initial test that ran without all other mods/extensions failed. So I sought for the accompanying mod that my CSS depended on and found that it relied on this 1 style from Accents transitions mod.

    /* Adds transition to the tab stack indicators */
    .stacks-on .tab-strip .tab .tab-group-indicator .tab-indicator.active {
    transition: background-color 0.4s;
    }

    4/8/2020 5:52 am:
    Resolved with Opera GX Theme tweak

    Also, I can't remember how to reproduce this, but I remembered wanting to do this because I had a Link Panel Extension web button that was blending into the dark theme interface.
    (Replicated what I saw on the switch back then on the left, I saturated the image on the right.)

    552b398d-68b9-4f83-9d75-f8136d7998ea-image.png



  • Known bug:

    Also, I can't remember how to reproduce this, but I remembered wanting to do this because I had a Link Panel Extension web button that was blending into the dark theme interface.

    (Replicated what I saw on the switch back then on the left, I saturated the image on the right.)
    552b398d-68b9-4f83-9d75-f8136d7998ea-image.png

    Ahh spoke way too soon. I just got it again.
    86a4968f-4837-47db-88aa-63d887cfce64-image.png

    Bad cases displayed in image:

    1. Using with the rest of the mods like usual
    2. Only with the CSS disabled, with the rest still running. You can the icon blending into the background.
    3. I disabled everything else but this CSS

    A way to fix this is still kind of roundabout... and still undesirable:

    • Open a tab and enter vivaldi://inspect/#apps
    • Click the first "Inspect" on the page
    • From here there are 2 ways to have the (background?) / animation run:
    1. Refresh way: Focus on the console window and refresh it
    2. Update way (Slightly harder)
      In Element tab, find #browser #switch button.webviewbtn img and click that element.
      In Styles, scroll all the way down to @keyframes scanning, check and uncheck any of the filter

    This seems to happen at random when I try restarting my browser multiple times. Sometimes it functions how I want it, and others it remains a still. I don't know why it's happening yet.

    Right now, these things are on my mind 🤔 :

    • Can it be due different CSS / elements loading up in parallel or in the wrong order? As long as it is sits still, or doesn't display the background-color base, its wrong. Perhaps I have to look into the Network tab to see the timeline or what loads?... but it might fix itself the moment I refresh Vivaldi App...

    • I also have a couple of errors.
      2fc8c276-e4d5-47f1-af89-71a5b0bab621-image.png
      Some looks like its from missing bookmark thumbnail paths... I'm actually not sure about the webview and browser 1s...

    • Could it be Import/Export Theme? Nope, I disabled it from windows.html. Still happens.

    I'll post back when I figure something else out... Any help will be appreciated too! It's always a learning experience.



  • @azureraver Welcome to modding Vivaldi! Happy to have you here and thank you for sharing your mods!

    Not sure about the errors in your console. If everything else is working, then it is probably not an issue to worry about. Going to some URLs can cause errors to be thrown with certain mods.

    I gave your mod a try, and I was able to reproduce the problem. I figured, like you, that the infinitely looping animation might be having some trouble starting up because other elements of the UI were not fully loaded yet.

    It seems that adding the CSS with a JavaScript mod solves the problem. With the JavaScript, the mod can wait for the UI to load, which makes your mod work on each startup (in my limited testing).

    Here is the code I used to get it working:

    // Add a style element to the body of the browser's UI
    function appendStyle() {
      let style = document.createElement("style");
      style.innerHTML = `
        /* Gives web button a color-accented base, and calls animation */
        #browser #switch button.webviewbtn img
        {
          background-color: var(--colorAccentBgAlpha);
          animation-name: scanning;
          animation-duration: 2000ms;
          animation-iteration-count: infinite;
          animation-timing-function: linear;
        }
    
        /* Kinda reminds me of the old file-scanning circling motion */
        @keyframes scanning {
          0% { 	filter: drop-shadow(1px 3px 0px var(--colorAccentBgFaded)); }
          25% {	filter: drop-shadow(-1px 3px 0px var(--colorAccentBgFaded)); }
          50% {	filter: drop-shadow(-1px -3px 0px var(--colorAccentBgFaded)); }
          75% {	filter: drop-shadow(1px -3px 0px var(--colorAccentBgFaded)); }
          100% {	filter: drop-shadow(1px 3px 0px var(--colorAccentBgFaded)); }
        }
    
        /* Bring to front the button's notification thumb, due to filter being used */
        .button-badge {
          z-index: 1
        }
      `;
      document.body.appendChild(style);
    }
    
    // Wait for the browser's UI to load before adding the CSS
    const LUETAGE_NUMBER = 300;
    let intervalID = setInterval(() => {
      let browser = document.getElementById("browser");
      if (browser) {
        clearInterval(intervalID);
        appendStyle();
      }
    }, LUETAGE_NUMBER);
    

    Hopefully that works on your install.



  • @nomadic Thanks for the fix! Yup I think that resolved the issue.

    I was hoping I wouldn't have to resort to JS, but it's probably best this way given the ui-load circumstance.
    (not sure if I should tag it with javascript now lol)

    Yeah I think the bulk of console errors doesn't affects this
    (that's for a different topic), which is a relief.

    Btw, that's a nice 300ms snippet w/ an interesting backstory 🙂



  • Updated "Other notes" section to include a tweak for running this with Opera GX Theme.


Log in to reply
 

Looks like your connection to Vivaldi Forum was lost, please wait while we try to reconnect.