Webside icon get replaced by speaker icon



  • Why gets the website icon replaced by the speaker icon if im watching or listening a video like on youtube?

    Is there an option to add the speaker icon next to the website icon or after the website text like in firefox? If you have many tabs open, you will not find the YT tab quickly - you have to search the speaker icon instead of the website icon. I find that really stupid and annoying.

    alt text





  • @iAN-CooG

    Thank you 🙂

    I tried to add the css from this post https://forum.vivaldi.net/topic/23119/ask-website-with-audio-in-vivaldi-web-tab-why-hide-the-web-icon/3

    But it dont work..

    I added <link rel="stylesheet" href="style/speaker_icon.css" /> into the browser.html

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8" />
        <title>Vivaldi</title>
        <link rel="stylesheet" href="style/common.css" />
    	<link rel="stylesheet" href="style/speaker_icon.css" />
      </head>
      <body style="
        background-color: #d4d4d4;
        background-image: url('resources/vivaldi-splash-icon.svg');
        background-size: 16%;
        background-position: center;
        background-repeat: no-repeat;">
        <div id="app" />
        <script src="background-common-bundle.js"></script>
        <script src="vendor-bundle.js"></script>
        <script src="settings-bundle.js"></script>
        <script src="urlbar-bundle.js"></script>
        <script src="components-bundle.js"></script>
        <script src="bundle.js"></script>
      </body>
    </html>
    
    

    Made a new file with Notepad++ with the following from the post

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

    saved it as speaker_icon.css - saved it to Vivaldi\Application\2.4.1488.35\resources\vivaldi\style - restarted the browser.

    Dis i miss something?

    EDIT:

    I should save the browser.html first before i make a post like this - shame on me.

    It works great xD



  • you should follow the instructions on how to apply correctly the custom mods from the pinned threads in the modifications forum
    https://forum.vivaldi.net/category/52/modifications


Log in to reply
 

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