-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).



  • This is a very slightly modified version based on @LonM code which displays both the website icon and the audio icon.

    0_1559072590427_Webp.net-gifmaker.gif

    .css code:

    /*************Audio + Site Icon On Tab*******/
    
    #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;
       right: 0px;
        transform: scale(1.4) !important;
        background: none;
    color:black;	
    }
    
    #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.7) !important;
    color:black;	
    }
    
    #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;
    }
    
    
    /******************Scrolling Audio Text on Tab*******/
    
    @keyframes lonm-mediaMarqueeScroll {
        0% {
            transform: translateX(5px);
        }
        5% {
            transform: translateX(5px);
        }
        100% {
            transform: translateX(-100%);
        }
    }
    
    .tab-header img {
        order:  1;
    }
    
    .tab-header .lonm-mediaMarqueeOuter {
        order:  2;
    }
    
    .tab-header .title {
        order: 3;
    }
    
    .tab-header .close {
        order: 4;
    }
    
    .tab-header .tab-audio {
        order: 5;
    }
    
    
    .tab-header .lonm-mediaMarqueeOuter {
        pointer-events: none;
        display: flex;
        align-items: center;
        padding-right: calc(var(--padding) * 0.5);
        padding-left: var(--padding);
        overflow: hidden;
        white-space: nowrap;
        line-height: var(--fontSize);
        -webkit-mask-image: -webkit-linear-gradient(0deg, transparent 0%, #fff 12px, #fff calc(96% - 12px), transparent 0%);
    }
    
    .tab-header .lonm-mediaMarqueeInner {
        animation-name: lonm-mediaMarqueeScroll;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
    }
    
    .tab:not(.audio-on) .tab-header .lonm-mediaMarqueeOuter,
    .tab.pinned .tab-header .lonm-mediaMarqueeOuter {
        display: none;
    }
    
    

    This .css code is to be used with @LonM .js code from here.

    I have attempted to optimize my modifications to the code to the best of my abilities, any further optimizations greatly appreciated.



  • 0_1559079467494_001.png

    If you wish to have the audio icon facing the other way, simply add a - (minus sign) to the numeric values at:

    transform: scale(-1.4) !important;
    

    and

    transform: scale(-1.7) !important;
    


  • 0_1559134353897_Webp.net-gifmaker.gif

    To make the animation scroll in from the right instead of starting from the center, replace:

    @keyframes lonm-mediaMarqueeScroll {
        0% {
            transform: translateX(5px);
        }
        5% {
            transform: translateX(5px);
        }
        100% {
            transform: translateX(-100%);
        }
    }
    

    with:

    @keyframes lonm-mediaMarqueeScroll {
        0% {
            transform: translateX(125px);
        }
        5% {
            transform: translateX(125px);
        }
        100% {
            transform: translateX(-100%);
        }
    }
    

    and set the marquee speed in the .js file to 0.45:

    const MARQUEE_SPEED = 0.45;
    
    


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