[ASK]Website with audio in Vivaldi web tab, why hide the web icon?

nearbaskara

I watched youtube videos and reading blogs with music frequently. What bothers me is that I don't know if my tab is a youtube video or a blog sometimes. The main problem is that Vivaldi just hide the web icon with the audio icon.
vivaldi web tabs icon
How about just make the audio icon and website icons both visible? like Opera and other web browsers did?
Opera example: opera web tab icon

At least let me know that the tab is a Youtube website.

LonM

You can fix this with a custom css mod. As for "why", I have no idea. It doesn't make much sense to me either. It doesn't do this with pinned tabs, so I'm guessing that the devs thought the page title would be enough. Kind of breaks when the tabs get too small to display titles in full though.

#tabs-container .tab:not(.pinned):not(.tab-small).audio-on .tab-audio, #tabs-container .tab:not(.pinned):not(.tab-small).audio-muted .tab-audio{
    position: absolute;
    left: 15px;
    top: 15px;
    transform: scale(0.8) !important;
    background: none
}

#tabs-container .tab:not(.pinned):not(.tab-small).audio-on .tab-audio:hover, #tabs-container .tab:not(.pinned):not(.tab-small).audio-muted .tab-audio:hover {
    transform: scale(1.2) !important
}
#tabs-container .tab:not(.pinned):not(.tab-small).audio-on .favicon, #tabs-container .tab:not(.pinned):not(.tab-small).audio-muted .favicon{
    transform: scale(1) !important
}

0_1513352874469_36bbb9f0-e687-46fa-83c4-593ed35b0aa7-image.png

retoree

Try this.

Read this guides, they will help you to apply the code:
https://forum.vivaldi.net/topic/10549/modding-vivaldi/
https://forum.vivaldi.net/topic/10592/windows-batch-file-for-patching-your-mods-into-vivaldi/

#browser.win #tabs-container .tab:not(.pinned):not(.tab-small).audio-on .favicon,
#browser.win #tabs-container .tab:not(.pinned):not(.tab-small).audio-muted .favicon,
#browser.win #tabs-container .tab:not(.pinned):not(.tab-small).tab-captured .favicon {
    transform: scale(1);
}
#browser.win #tabs-container .tab.tab-small.audio-on .tab-audio,
#browser.win #tabs-container .tab.pinned.audio-on .tab-audio,
#browser.win #tabs-container .tab.tab-small.audio-muted .tab-audio,
#browser.win #tabs-container .tab.pinned.audio-muted .tab-audio,
#browser.win #tabs-container .tab.tab-small.tab-captured .tab-audio,
#browser.win #tabs-container .tab.pinned.tab-captured .tab-audio {
    left: 12px;
    top: -2px;
    margin-right: 0;
}
#browser.win #tabs-container .tab.tab-small.audio-on .tab-audio:hover,
#browser.win #tabs-container .tab.pinned.audio-on .tab-audio:hover,
#browser.win #tabs-container .tab.tab-small.audio-muted .tab-audio:hover,
#browser.win #tabs-container .tab.pinned.audio-muted .tab-audio:hover,
#browser.win #tabs-container .tab.tab-small.tab-captured .tab-audio:hover,
#browser.win #tabs-container .tab.pinned.tab-captured .tab-audio:hover {
    transform: scale(0.625);
}
#browser.win .tab-position .tab .tab-header span.tab-audio {
    right: 0;
}
#browser.win .tab-position .tab:not(.button-off):hover .tab-header span.tab-audio {
    right: 20px;
}
#browser.win .tab-position .tab:not(.button-off):not(.tab-small):not(.pinned).audio-on .tab-header .title,
#browser.win .tab-position .tab:not(.button-off):not(.tab-small):not(.pinned).active.audio-on .tab-header .title,
#browser.win .tab-position .tab:not(.button-off):not(.tab-small):not(.pinned).audio-muted .tab-header .title,
#browser.win .tab-position .tab:not(.button-off):not(.tab-small):not(.pinned).active.audio-muted .tab-header .title,
#browser.win .tab-position .tab:not(.button-off):not(.tab-small):not(.pinned).audio-on:hover .tab-header .title,
#browser.win .tab-position .tab:not(.button-off):not(.tab-small):not(.pinned).audio-muted:hover .tab-header .title {
    -webkit-mask-image: -webkit-linear-gradient(180deg, transparent 20px, #fff 30px);
}
#browser.win .tab-position .tab:not(.tab-small):not(.pinned).audio-on .tab-header .title,
#browser.win .tab-position .tab:not(.tab-small):not(.pinned).active.audio-on .tab-header .title,
#browser.win .tab-position .tab:not(.tab-small):not(.pinned).audio-muted .tab-header .title,
#browser.win .tab-position .tab:not(.tab-small):not(.pinned).active.audio-muted .tab-header .title,
#browser.win .tab-position .tab:not(.tab-small):not(.pinned).audio-on:hover .tab-header .title,
#browser.win .tab-position .tab:not(.tab-small):not(.pinned).audio-muted:hover .tab-header .title {
    -webkit-mask-image: -webkit-linear-gradient(180deg, transparent 20px, #fff 15px);
}
#browser.win .tab-audio .audioicon {
    transform: scale(0.48);
}
#browser.win .tab-audio {
    height: 18px;
    width: 18px;
    padding: 1px 2px 0;
    border-radius: var(--radiusRounded);
    opacity: 0.8;
    margin-top: auto;
    margin-bottom: auto;
    margin-right: 6px;
}
#app #browser.win .tab:not(.tab-small):not(.pinned) .tab-audio:hover {
    opacity: 1;
    transform: scale(1);
    background-color: rgba(0, 0, 0, 0.2);
}

nearbaskara

@retoree @LonM
thanks guys, I will try to do that.

nearbaskara

@retoree so I have new problem. It didn't show my page is still loading or not. There's no animation of showing it.

well nevermind, just got culture shock because of opera loading animation was inside the tab not below the tab. Do you know how to change it to a cycle loading animation instead of line?

luetage

@nearbaskara Try one of these --
https://forum.vivaldi.net/topic/10629/vivaldi-ui-customisations/526
Check the last 2 pages overall, there is even an animation for the address field which I used to run.

You can also animate the X in the address bar. I completely forgot where I fetched/stole that code though, so if someone could enlighten me it would be helpful... anyway, I'm posting it here now since I'm still using it:

@keyframes fade {
    from {opacity: 1}
    to {opacity: 0.4}
}
.button-toolbar.reload.loading svg {
    animation-name: fade;
    animation-duration: 857ms !important;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-direction: alternate;
}

iAN CooG

@luetage
most probably from Isildur's post
https://forum.vivaldi.net/topic/6289/tab-loading-indicator/24?page=2

retoree

I just noticed .progress-indicator is not appear on active tab anymore since 1.14. Devs gotta be kidding...

luetage

@ian-coog Thanks, I had a hunch that @Isildur wrote this, just couldn't find it. That this is hidden in "All Platforms" is a shame.

iAN CooG

@luetage I lost it myself and just found it thanks to you and a bit of google-fu
It's actually useful, at least there's something more evident the site it's still loading.

nearbaskara

@luetage the x animation that you gave to me is not working. Did I make a mistake?

I found a cool mod for knowing my page is still loading in the link that you gave to me.

it makes the favicon spinning when still loading. Too bad tho since I just want to have cycle animation loading screen. But well at least I found an alternative to it, which is not bad at all.

@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;
}

luetage

@nearbaskara A mod for a spinning circle is featured just a few posts before the one you used. And Isildur's mod should work out just fine. I'm using it myself at this very moment. Make sure you copy/pasted the whole thing and no punctuation is missing. You should always use a capable text editor, which understands the language and points out mistakes. If it's still not working, you should delete everything else and just try this mod alone. And yeah, please be aware that you need to restart the browser in between, or at least open a new window.