-Test- Overlay PIP/Audio upon tab favicon (Windows)



  • What it does:

    • Change background to follow v-theme background color;
    • Bigger icon (to accomodate the overlay).
    • Recenter the icon with transform.
    • Remove the transition (icon is always big);

    On linux - tested on Mint - this mod seems to be not necessary. I think the same is for Osx, but can't test there.
    Icon is not always perfectly centered according UI scaling. Play with transform values may fix it.


    /* Bigger Audio/PIP icon */
    #app #browser .tab-audio {
    	background-color: var(--colorBgDarker);
    	transform: scale(1.34);
    	transform-origin: 6px 6px;
    	transition: none;
    }
    

    0_1558260648042_19-05-2019.png



  • This post is deleted!


  • Code updated for 2.5/2.6 branch


  • Moderator

    I did something similar, but instead of it being over the favicon, I made it like it is on pinned tabs - small and to the corner.

    0_1558266264047_2019-05-19_12-44-05.png

    #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
    }
    


  • @LonM Nice, how you got the marquee effect? ^^


  • Moderator

    @Hadden89 Oh, that's a separate mod I made: js css

    It's still a WIP



  • @Hadden89

    0_1558460446570_000.gif

    I hope you do not mind, I have played around with size and added a hover effect and icon colour to the code you provided:

    /* Bigger Audio/PIP icon by Hadden89@vivaldi forum */
    #app #browser .tab-audio {
    	background-color: var(--colorBg);
    	color:#800080;
    	transform: scale(1.34);
    	transform-origin: 4px 4px;
    	transition: none;
    }
    
    #app #browser .tab-audio:hover {
    	background-color: var(--colorBg);
    	color:#800080;
    	transform: scale(1.7);
    	transform-origin: 4px 4px;
    	transition: none;
    }
    }
    

    change colour attribute of above code to your liking, you can also play around with the icon size by changing the numeric value of transform-origin: attribute.

    I do not know how to change the marquee text colour in the js code, perhaps @LonM could add a line to adjust the font colour.

    To change marquee font colour, you need to add the following line:

        color: #0000ff;
    
    

    under

    .tab-header .lonm-mediaMarqueeOuter {
    

    in @LonM css code from here.

    (Edit colour value to your liking).


 

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