Styles for Tab List

  • I prefer to access the tab list using CTRL+SHIFT+TAB; although what are the CSS styles to make the tab window larger, but also the image of the page seen to the left ?

  • Moderator

    @Sparrows It can be a bit difficult to inspect it, but I managed to grab a copy of the HTML that makes up the tab switcher, if people want to suggest styles:

    <div id="modal-bg" class="modal-tabswitcher">
    	<span tabindex="0" class="focus_modal"></span>
    		<div class="tabswitcher list">
    			<img class="visual-list-preview" src="data:image/jpeg;base64" title="Selection page URL" alt="">
    			<ul class="listed-tabs">
    				<li class="visual-list active-page">
    					<img class="visual-tab-list-favicon" src="data:image/png;base64," alt="">active tab
    				<li class="visual-list">
    					<img class="visual-tab-list-favicon" src="data:image/png;base64," alt="">background tab
    				<li class="visual-list selected">
    					<img class="visual-tab-list-favicon" src="data:image/png;base64," alt="">Active selection
    	<span tabindex="0" class="focus_modal"></span>

    The easiest might be to use a transform to just make it bigger:

    #modal-bg.modal-tabswitcher {
    transform: scale(2) translate(-25%, -25%) !important;

    Unfortunately, the little screenshot to the left will end up being blurry, as there's only so much you can resize an image.

  • @LonM The style worked, except; I want to make the tab window larger, excluding the favorite icons & the text of each tab, do you know what style property I would need for this ?

    When adjusting the translate(y) style property, I'm fighting trying to get it to be relative to the vivialdi window, although it always seem to way to remain near the bottom, not sure whether I should attempt the position style property, aka position:relative ?

Log in to reply

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