Vivaldi UI Customisations



  • Animated stripes for your url field progress bars:

    ! /[Loading colour and stripes in address bar]/
    ! .addressfield .pageload-indicator {
    background-color: #607d8b !important;
    max-height: 21px;
    display: inline-block;
    height: 21px;
    transition: width .4s ease-in-out;
    background-size: 31px 31px;
    background-image: linear-gradient(135deg, rgba(255, 255, 255, .15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .15) 50%, rgba(255, 255, 255, .15) 75%, transparent 75%, transparent);
    animation: animate-stripes 3s linear infinite;
    ! }
    ! /[Stripes animation progress bar]/
    ! @keyframes animate-stripes {
    0% {background-position: 0 0;} 100% {background-position: 60px 0;}
    ! }

    You can change the background colour and you will probably have to adjust sizes.

    Sean



  • @photo29:

    Is there a way to have it on the right side instead?

    @hekel:

    @Hobbes:

    Thank you for your answer.
    Not bad, it is less buggy than what I did, but I don't want that the adressbar and panels resize the web page when they appear.
    Your future suggestions will be welcome.

    Hows this?

    #panels-container {
    	position: fixed;
    	height: 100%;
    	max-width: 0vw;
    	opacity: 0;
    	z-index: 1;
    	transition: max-width .5s cubic-bezier(0.18, 0.89, 0.32, 1.28), opacity .2s linear .2s;
    }
    #panels-container:hover {
    	max-width: 99vw;
    	opacity: 1;
    	transition-delay: 0s;
    }
    
    .toolbar-addressbar {
    	visibility: hidden;
    	position: fixed;
    	width: 100%;
    	opacity: 0;
    	z-index: 2;
    	transition: opacity .3s linear .7s, visibility 0s linear 1s;
    }
    #header:hover ~ #main .toolbar-addressbar, .toolbar-addressbar:hover {
    	visibility: visible;
    	opacity: 1;
    	transition-delay: 0s;
    }
    
    ```![](https://i.imgur.com/tcBtOMU.gif)
    

    I've updated to 1.4.589.2. I use vertical tabs on the left, and the quickbar on the left too. Before, the quickbar would only show when I went to the very edge of the screen, and it would be overlayed on top of the tabs (perfect!) but now, whenever I mouse over where the quickbar extends to (which is further out than the tab bar), it pops up between the background of the tab bar, including the buttons, and the tabs listed. What do I need to do to get back the previous behaviour?



  • @brook:

    Wow, what a nice idea!
    A spinning favicon looks cool and it's a distinctive indicator of a loading tab. It's even better then using a customized gif
    Thank you

    You're quite welcome. πŸ™‚



  • Maybe you could add the way to inspect with dev tools on osx to the OP.

    open /Applications/Vivaldi.app --args --debug-packed-apps --silent-debugger-extension-api
    

    is the way to go about it if Vivaldi is in your applications folder. I didn't know the open command had an args flag and searching such a big thread is neigh impossible on these forums.



  • @luetage:

    Maybe you could add the way to inspect with dev tools on osx to the OP.

    open /Applications/Vivaldi.app --args --debug-packed-apps --silent-debugger-extension-api
    

    is the way to go about it if Vivaldi is in your applications folder. I didn't know the open command had an args flag and searching such a big thread is neigh impossible on these forums.

    I always wondered about the "–flag-switches-begin " and "--flag-switches-end" which I see you omit. Apparently they don't actually do anything and aren't needed?



  • Can anyone muster up some css to make tabs go into multiple rows? (Ala Tab Mix Plus for Firefox)

    Someone posted some css earlier in this thread but that no longer works due to changes in Vivaldi.
    This is the only feature that is keeping me from dumping Chromium in favor of VIvaldi πŸ˜•


  • Moderator

    Guys, we have an entire forum for modifications now. I'm going to lock this thread so it doesn't grow any further. It's a huge collection of totally unrelated things that no user will ever be able to search for. Please start new threads for each modification from now on. πŸ˜‰


Locked
 

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