Vivaldi UI Customisations
-
My version works even with refresh
div.tab-header span.progressing + span.favicon { background-image: url(/resources_my/loading.gif) !important } div.tab-header span.progressing + span.favicon svg { display: none }
See also: "Show progressbar on open url with no delay" https://vivaldi.net/en-US/forum/all/8453-bundle-js-modding
If one prefers, one can instead spin the favicon of the site itself (if that's loaded β otherwise the generic globe spins):
@keyframes spin { from {transform:rotate(0deg);} to {transform:rotate(360deg);} } div.tab-header span.progressing + span.favicon { animation-name: spin; animation-duration: 1000ms; animation-iteration-count: infinite; animation-timing-function: linear; }
-
If one prefers, one can instead spin the favicon of the site itself
@keyframes spin { from {transform:rotate(0deg);} to {transform:rotate(360deg);} } div.tab-header span.progressing + span.favicon { animation-name: spin; animation-duration: 1000ms; animation-iteration-count: infinite; animation-timing-function: linear; }
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
-
I managed to get it done, took me a few hours though and the code is nasty, I'll fix it tomorrow (wasn't specific enough with certain parts so it's messed up some random buttons in bookmarks page etc, and the min/max/close buttons disappear if you drop out of maximised lol
FIXED
All perfect now.
Sean.
-
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
-
Is there a way to have it on the right side instead?
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?
-
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 youYou'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.
-
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 -
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.
-
-