/* Vivaldi VH Version: 1.4.2 Target Vivaldi Browser version: 6.9 Vivaldi VH is a CSS modification for Vivaldi Browser that grants your webpages the entire vertical space of the browser window by moving the rest of the UI into a separate column. Copyright (c) 2023-2024 HKayn */ :root { /* Set a minimum width for the Pillar: */ --vvh-pillar-min-width: 0px; /* Set a custom width for toolbar components that are set to extend on focus (address field, search field): */ --vvh-extend-on-focus-width: 1200px; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser { --vvh-input-field-extend-on-focus-margin-offset: 35px; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser:has(#panels-container.switcher) { --vvh-input-field-extend-on-focus-margin-offset: 0px; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser:has(#panels-container.switcher #panel_switch) { --vvh-input-field-extend-on-focus-margin-offset: 10px; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser:has(#panel_switch) { --vvh-input-field-extend-on-focus-margin-offset: calc(10px + 35px); } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.tabs-left:has(#panels-container.left), :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.tabs-right:has(#panels-container.right), :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.tabs-off { --vvh-input-field-extend-on-focus-margin: calc( max(100% - var(--vvh-extend-on-focus-width), 100% - 100vw) + 9px ) !important; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.tabs-left:has(#panels-container.right), :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.tabs-right:has(#panels-container.left) { --vvh-input-field-extend-on-focus-margin: calc( max(100% - var(--vvh-extend-on-focus-width), 100% - 100vw) + calc(9px + var(--vvh-input-field-extend-on-focus-margin-offset)) ) !important; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.native { border-top: 1px solid var(--colorBorder); } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser #main .toolbar-mainbar, :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser #main .bookmark-bar, :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser footer:has(.toolbar-statusbar) { border: none; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.tabs-left #titlebar, :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.tabs-left #main .toolbar-mainbar, :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.tabs-left #main .bookmark-bar, :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.tabs-left footer:has(.toolbar-statusbar), :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.tabs-off:has(#panels-container.left) #titlebar, :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.tabs-off:has(#panels-container.left) #main .toolbar-mainbar, :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.tabs-off:has(#panels-container.left) #main .bookmark-bar, :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.tabs-off:has(#panels-container.left) footer:has(.toolbar-statusbar) { border-right: 1px solid var(--colorBorder); } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.tabs-right #titlebar, :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.tabs-right #main .toolbar-mainbar, :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.tabs-right #main .bookmark-bar, :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.tabs-right footer:has(.toolbar-statusbar), :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.tabs-off:has(#panels-container.right) #titlebar, :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.tabs-off:has(#panels-container.right) #main .toolbar-mainbar, :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.tabs-off:has(#panels-container.right) #main .bookmark-bar, :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.tabs-off:has(#panels-container.right) footer:has(.toolbar-statusbar) { border-left: 1px solid var(--colorBorder); } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.bookmark-bar-top:not(.address-top) #titlebar, :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.address-top #main .toolbar-mainbar, :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.bookmark-bar-top #main .bookmark-bar { border-bottom: 1px solid var(--colorBorder); } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.address-bottom #main .toolbar-mainbar, :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.bookmark-bar-bottom #main .bookmark-bar, :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser footer:has(.toolbar-statusbar) { border-top: 1px solid var(--colorBorder); } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser { display: grid; grid-template-rows: repeat(3, min-content) 1fr repeat(3, min-content); } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser::before { content: ""; grid-row: 1/-1; backdrop-filter: var(--backgroundBlur); } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.tabs-left::before { grid-column: 1/2; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.tabs-right::before { grid-column: 3/4; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser:not(.is-settingspage).color-accent-from-page.color-behind-tabs-on.transparent-tabbar.tabs-left .tabbar-wrapper:before, :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser:not(.is-settingspage).color-accent-from-page.color-behind-tabs-on.transparent-tabbar.tabs-right .tabbar-wrapper:before, :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.disable-titlebar .mainbar::before { backdrop-filter: unset; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser #panels-container { z-index: 5; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser #main .toolbar-mainbar:has(:is(#urlFieldInput, .vivaldi-searchfield.searchfield-input):focus), :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser footer:has(.toolbar-statusbar):has(:is(#urlFieldInput, .vivaldi-searchfield.searchfield-input):focus) { z-index: 6; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser #main .mainbar::before { z-index: 0; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser #main .mainbar .toolbar-hidden { z-index: 4; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser .button-popup { z-index: 9999; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser #header, :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser #main, :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser #main > .mainbar, :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser #main > .mainbar > div, :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser #main > .inner { display: contents; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser #main .mainbar::before { content: " "; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser #panels-container, :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser #webview-container { grid-row: 1/9999; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser:not(.disable-titlebar) { --vvh-grid-title-bar: 1; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser:not(.disable-titlebar) #titlebar, :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser:not(.disable-titlebar) #header .topmenu { grid-row: 1/2; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.address-top, :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.address-top-off { --vvh-grid-address-bar-top: 1; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.address-top #main .toolbar-mainbar, :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.address-top #main .mainbar::before, :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.address-top-off #main .toolbar-mainbar, :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.address-top-off #main .mainbar::before { grid-row: calc(1 + var(--vvh-grid-title-bar, 0))/calc(2 + var(--vvh-grid-title-bar, 0)); } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.bookmark-bar-top { --vvh-grid-bookmark-bar-top: 1; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.bookmark-bar-top #main .bookmark-bar { grid-row: calc(1 + var(--vvh-grid-title-bar, 0) + var(--vvh-grid-address-bar-top, 0))/calc(2 + var(--vvh-grid-title-bar, 0) + var(--vvh-grid-address-bar-top, 0)); } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser #main > .inner > .tabbar-wrapper { grid-row: calc(1 + var(--vvh-grid-title-bar, 0) + var(--vvh-grid-address-bar-top, 0) + var(--vvh-grid-bookmark-bar-top, 0))/calc(-1 - var(--vvh-grid-bookmark-bar-bottom, 0) - var(--vvh-grid-address-bar-bottom, 0) - var(--vvh-grid-status-bar, 0)); } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.bookmark-bar-bottom { --vvh-grid-bookmark-bar-bottom: 1; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.bookmark-bar-bottom #main .bookmark-bar { grid-row: calc(-2 - var(--vvh-grid-address-bar-bottom, 0) - var(--vvh-grid-status-bar, 0))/calc(-1 - var(--vvh-grid-address-bar-bottom, 0) - var(--vvh-grid-status-bar, 0)); } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.address-bottom, :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.address-bottom-off { --vvh-grid-address-bar-bottom: 1; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.address-bottom #main .toolbar-mainbar, :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.address-bottom #main .mainbar::before, :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.address-bottom-off #main .toolbar-mainbar, :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.address-bottom-off #main .mainbar::before { grid-row: calc(-2 - var(--vvh-grid-status-bar, 0))/calc(-1 - var(--vvh-grid-status-bar, 0)); } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser:has(footer .toolbar-statusbar) { --vvh-grid-status-bar: 1; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser:has(footer .toolbar-statusbar) footer:has(.toolbar-statusbar) { grid-row: -2/-1; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser #titlebar, :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser #main .toolbar-mainbar, :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser #main .bookmark-bar, :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser footer:has(.toolbar-statusbar) { min-width: var(--vvh-pillar-min-width); } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.tabs-left:has(#panels-container.left) { grid-template-columns: min-content min-content 1fr; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.tabs-left:has(#panels-container.right) { grid-template-columns: min-content 1fr min-content; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.tabs-right:has(#panels-container.left) { grid-template-columns: min-content 1fr min-content; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.tabs-right:has(#panels-container.right) { grid-template-columns: 1fr min-content min-content; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.tabs-off:has(#panels-container.left) { grid-template-columns: min-content 1fr; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.tabs-off:has(#panels-container.right) { grid-template-columns: 1fr min-content; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.tabs-left { --vvh-grid-pillar-left: 1; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.tabs-left #titlebar, :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.tabs-left #main .toolbar-mainbar, :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.tabs-left #main .mainbar::before, :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.tabs-left #header .topmenu, :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.tabs-left #main .bookmark-bar, :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.tabs-left #main > .inner > .tabbar-wrapper, :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.tabs-left footer:has(.toolbar-statusbar) { grid-column: 1/2; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.tabs-left #main > .inner > .tabbar-wrapper { justify-self: start; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser:has(#panels-container.left) { --vvh-grid-panel-left: 1; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser:has(#panels-container.left) #panels-container { grid-column: calc(1 + var(--vvh-grid-pillar-left, 0))/calc(2 + var(--vvh-grid-pillar-left, 0)); } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser #webview-container { grid-column: calc(1 + var(--vvh-grid-pillar-left, 0) + var(--vvh-grid-panel-left, 0))/calc(-1 - var(--vvh-grid-panel-right, 0) - var(--vvh-grid-pillar-right, 0)); } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser:has(#panels-container.right) { --vvh-grid-panel-right: 1; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser:has(#panels-container.right) #panels-container { grid-column: calc(-2 - var(--vvh-grid-pillar-right, 0))/calc(-1 - var(--vvh-grid-pillar-right, 0)); } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.tabs-right { --vvh-grid-pillar-right: 1; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.tabs-right #titlebar, :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.tabs-right #main .toolbar-mainbar, :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.tabs-right #main .mainbar::before, :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.tabs-right #header .topmenu, :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.tabs-right #main .bookmark-bar, :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.tabs-right #main > .inner > .tabbar-wrapper, :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.tabs-right footer:has(.toolbar-statusbar) { grid-column: -2/-1; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.tabs-right #main > .inner > .tabbar-wrapper { justify-self: end; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.tabs-off:has(#panels-container.left) { --vvh-grid-pillar-left: 1; --vvh-grid-panel-left: 0; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.tabs-off:has(#panels-container.left) #titlebar, :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.tabs-off:has(#panels-container.left) #main .toolbar-mainbar, :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.tabs-off:has(#panels-container.left) #main .mainbar::before, :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.tabs-off:has(#panels-container.left) #header .topmenu, :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.tabs-off:has(#panels-container.left) #main .bookmark-bar, :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.tabs-off:has(#panels-container.left) #panels-container, :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.tabs-off:has(#panels-container.left) footer:has(.toolbar-statusbar) { grid-column: 1/2; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.tabs-off:has(#panels-container.left) #panels-container { justify-self: start; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.tabs-off:has(#panels-container.right) { --vvh-grid-pillar-right: 1; --vvh-grid-panel-right: 0; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.tabs-off:has(#panels-container.right) #titlebar, :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.tabs-off:has(#panels-container.right) #main .toolbar-mainbar, :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.tabs-off:has(#panels-container.right) #main .mainbar::before, :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.tabs-off:has(#panels-container.right) #header .topmenu, :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.tabs-off:has(#panels-container.right) #main .bookmark-bar, :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.tabs-off:has(#panels-container.right) #panels-container, :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.tabs-off:has(#panels-container.right) footer:has(.toolbar-statusbar) { grid-column: -2/-1; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.tabs-off:has(#panels-container.right) #panels-container { justify-self: end; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.tabs-off #panels-container { grid-row: calc(1 + var(--vvh-grid-title-bar, 0) + var(--vvh-grid-address-bar-top, 0) + var(--vvh-grid-bookmark-bar-top, 0))/calc(-1 - var(--vvh-grid-bookmark-bar-bottom, 0) - var(--vvh-grid-address-bar-bottom, 0) - var(--vvh-grid-status-bar, 0)); } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #header .topmenu { align-items: center; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #header .topmenu > * { margin-top: 0 !important; margin-bottom: 0 !important; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #header .topmenu .horizontal-menu-pagetitle { width: 0; flex: 1; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #titlebar { display: flex; position: relative; min-height: calc(25px / var(--uiZoomLevel)); background-color: var(--colorBg); -webkit-app-region: drag; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) :has(#browser.color-behind-tabs-off:not(.is-settingspage)) #titlebar { background-color: var(--colorAccentBg); } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #main .toolbar-mainbar { flex-wrap: wrap; height: auto; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser:not(.disable-titlebar).color-behind-tabs-on #main .toolbar-mainbar { background-color: var(--colorBg); } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser:not(.disable-titlebar).color-behind-tabs-off #main .toolbar-mainbar { background-color: var(--colorAccentBg); } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.disable-titlebar { /* // Commented out to work around visual artifacts with backdrop-filter .mainbar::before { backdrop-filter: var(--backgroundBlur); } */ } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.disable-titlebar:has(#main .toolbar-mainbar .vivaldi .vivaldi-v) { --vvh-address-bar-menu-button-width: 44px; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.disable-titlebar:has(#main .toolbar-mainbar .vivaldi .burger-icon) { --vvh-address-bar-menu-button-width: 35px; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.disable-titlebar.native:not(.mac) { --vvh-address-bar-window-buttons-width: var( --vvh-address-bar-menu-button-width ) !important; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.disable-titlebar:not(.native) #main .toolbar-mainbar .toolbar-extensions > .button-toolbar { margin: 0 auto; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.disable-titlebar #main .toolbar-mainbar { background: linear-gradient(90deg, transparent var(--vvh-address-bar-window-buttons-width), var(--vvh-address-bar-background-color) var(--vvh-address-bar-window-buttons-width)), linear-gradient(transparent 34px, var(--vvh-address-bar-background-color) 34px); padding: 0; -webkit-app-region: drag; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.disable-titlebar #main .toolbar-mainbar::before { content: " "; width: var(--vvh-address-bar-window-buttons-width); height: 34px; border-radius: 0 0 var(--radius) 0; border-bottom: 1px solid var(--colorBorder); border-right: 1px solid var(--colorBorder); margin: 0; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.disable-titlebar #main .toolbar-mainbar::after { content: " "; position: absolute; top: calc(34px - var(--radius) + 1px); left: calc(var(--vvh-address-bar-window-buttons-width) - var(--radius) + 1px); z-index: 1; height: var(--radius); width: var(--radius); background-color: var(--vvh-address-bar-background-color); -webkit-mask-image: radial-gradient(circle at 0 0, rgba(0, 0, 0, 0) 70%, #000 73%); } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.disable-titlebar #main .toolbar-mainbar .vivaldi, :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.disable-titlebar #main .toolbar-mainbar .window-buttongroup { position: absolute; scale: unset; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.disable-titlebar #main .toolbar-mainbar .vivaldi { margin: 0 !important; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.disable-titlebar #main .toolbar-mainbar .vivaldi:hover { background-color: rgba(0, 0, 0, 0.1); } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.disable-titlebar #main .toolbar-mainbar .window-buttongroup { border-radius: 0 0 var(--radius) 0; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.disable-titlebar.theme-dark #main .toolbar-mainbar .vivaldi:hover { background-color: rgba(255, 255, 255, 0.1); } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.disable-titlebar.color-behind-tabs-off { --vvh-address-bar-background-color: var(--colorAccentBg); } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.disable-titlebar.color-behind-tabs-off #main .toolbar-mainbar .window-buttongroup > button { fill: var(--colorFg); } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.disable-titlebar.color-behind-tabs-off #main .toolbar-mainbar .vivaldi { color: var(--colorFg); } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.disable-titlebar.color-behind-tabs-on { --vvh-address-bar-background-color: var(--colorBg); } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.disable-titlebar.color-behind-tabs-on #main .toolbar-mainbar .window-buttongroup > button { fill: var(--colorAccentFg); } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.disable-titlebar.color-behind-tabs-on #main .toolbar-mainbar .vivaldi { color: var(--colorAccentFg); } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.disable-titlebar.transparent-tabbar:not(.acc-dark.bg-dark.color-accent-from-page.color-behind-tabs-on) #main .toolbar-mainbar .window-buttongroup > button { fill: var(--colorImageFg, var(--colorFg)); } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.disable-titlebar.transparent-tabbar:not(.acc-dark.bg-dark.color-accent-from-page.color-behind-tabs-on) #main .toolbar-mainbar .vivaldi { color: var(--colorImageFg, var(--colorFg)); } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.disable-titlebar:not(.transparent-tabbar) .mainbar::before { background-color: var(--colorTabBar, transparent); } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.disable-titlebar.transparent-tabbar.color-accent-from-page.color-behind-tabs-on .mainbar::before { background-color: var(--colorAccentBg); mix-blend-mode: multiply; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.disable-titlebar.transparent-tabbar #main .toolbar-mainbar::before { background-color: var(--colorImageRightFgAlphaHeavy); box-shadow: inset -1px 0 0 0 var(--colorImageRightFgAlphaHeavy); } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.disable-titlebar.win { --vvh-address-bar-window-buttons-width: calc( var(--vvh-address-bar-menu-button-width) + 138px + 1px ); } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.disable-titlebar.win #main .toolbar-mainbar .vivaldi, :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.disable-titlebar.win #main .toolbar-mainbar .window-buttongroup { height: 34px; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.disable-titlebar.win #main .toolbar-mainbar .window-buttongroup { left: var(--vvh-address-bar-menu-button-width); right: unset; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.disable-titlebar.win #main .toolbar-mainbar .window-buttongroup > .window-close:hover { fill: #fff !important; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.disable-titlebar.mac { --vvh-address-bar-window-buttons-width: calc( 12px + 80px ); } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.disable-titlebar.mac #main .toolbar-mainbar .window-buttongroup { position: absolute; top: 10px; left: 0; margin-left: 20px; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.disable-titlebar.linux { --vvh-address-bar-window-buttons-width: calc( ( var(--vvh-address-bar-menu-button-width) + 81px ) + 9px ); } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.disable-titlebar.linux #main .toolbar-mainbar .vivaldi { height: 34px; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.disable-titlebar.linux #main .toolbar-mainbar .window-buttongroup { align-items: center; top: 7px; left: var(--vvh-address-bar-menu-button-width); right: unset; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #main .bookmark-bar { position: relative; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #main .bookmark-bar .observer { position: absolute; inset: 0; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #panels-container { max-width: unset; border-color: var(--colorBorder); } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #panels-container.overlay { position: relative; inset: 0; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.tabs-off #panels-container .button-toolbar.active { pointer-events: none; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.tabs-off #panels-container .panel .close { display: none; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) footer:has(.toolbar-statusbar):after { content: none; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) footer:has(.toolbar-statusbar) .toolbar-statusbar { flex-wrap: wrap; height: auto; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) .toolbar-statusbar > .button-toolbar > button, :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) .toolbar-statusbar .toolbar-extensions .button-toolbar > button, :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) .toolbar-statusbar .page-zoom-controls .button-toolbar > button { min-width: 32px; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #main.left ~ footer > .toolbar-statusbar > .button-toolbar:first-of-type.panel-clickoutside-ignore button, :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #main.right ~ footer > .toolbar-statusbar > .button-toolbar:last-of-type.panel-clickoutside-ignore button { min-width: 32px; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) :has(#panels-container.overlay:not(.minimized).button) #main > .inner > .tabbar-wrapper { margin: 0; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #webpage-stack { -webkit-app-region: drag; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #webpage-stack .webpageview, :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #webpage-stack .SlideBar { -webkit-app-region: no-drag; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #panels-container.overlay:not(.minimized).button.right ~ div:last-of-type { margin-right: 0; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser:is(.address-top, .address-bottom) #main .toolbar-mainbar .UrlBar-AddressField, :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) footer .toolbar-statusbar .UrlBar-AddressField { z-index: 2; margin: 5px 9px; flex: 1 1 100%; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser:is(.address-top, .address-bottom) #main .toolbar-mainbar .UrlBar-AddressField:has(.OmniDropdown), :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) footer .toolbar-statusbar .UrlBar-AddressField:has(.OmniDropdown) { z-index: 3; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser:is(.address-top, .address-bottom) #main .toolbar-mainbar .UrlBar-AddressField .UrlBar-UrlFieldWrapper, :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) footer .toolbar-statusbar .UrlBar-AddressField .UrlBar-UrlFieldWrapper { min-width: unset; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser:is(.address-top, .address-bottom) #main .toolbar-mainbar .UrlBar-AddressField > .toolbar, :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) footer .toolbar-statusbar .UrlBar-AddressField > .toolbar { padding-left: 0 !important; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser:is(.address-top, .address-bottom) #main .toolbar-mainbar .UrlBar-AddressField > .toolbar > .UrlBar-UrlObfuscationWarning, :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) footer .toolbar-statusbar .UrlBar-AddressField > .toolbar > .UrlBar-UrlObfuscationWarning { height: 22px; width: 22px; display: flex; align-items: center; justify-content: center; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser:is(.address-top-off, .address-bottom-off) #main .toolbar-mainbar .UrlBar-AddressField:has(#urlFieldInput:focus) { position: fixed; inset: unset; left: 20vw; right: 20vw; margin: 0; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) .button-toolbar.toolbar-command:has(> button[title^=vvh-insert-linebreak]) { flex: 1 1 100%; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.toolbar-edit-mode .button-toolbar.toolbar-command:has(> button[title*=vvh-toggle-on]) { opacity: 0.5; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.toolbar-edit-mode .button-toolbar.toolbar-command:has(> button[title*=vvh-toggle-on]) > button::before { content: " "; pointer-events: none; position: absolute; inset: 0; border: 1px dashed; border-radius: var(--radius); } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser:not(.toolbar-edit-mode) .button-toolbar.toolbar-command:has(> button[title^=vvh-insert-linebreak]) { height: 0; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser:not(.toolbar-edit-mode) .button-toolbar.toolbar-command:has(> button[title^=vvh-insert-linebreak]) > button { display: none; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser:not(.toolbar-edit-mode) .button-toolbar.toolbar-command:has(> button[title*=vvh-toggle-on]) { display: none; } :root:not(:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher))) #browser:not(.toolbar-edit-mode) .button-toolbar.toolbar-command:has(> button[title^=vvh-insert-linebreak]) { display: none; } :root:not(:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher))) #browser:not(.toolbar-edit-mode) .button-toolbar.toolbar-command:has(> button[title*=vvh-toggle-off]) { display: none; } :root:not(:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher))) #browser.toolbar-edit-mode .button-toolbar.toolbar-command:has(> button[title*=vvh-toggle-off]) { opacity: 0.5; } :root:not(:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher))) #browser.toolbar-edit-mode .button-toolbar.toolbar-command:has(> button[title*=vvh-toggle-off]) > button::before { content: " "; pointer-events: none; position: absolute; inset: 0; border: 1px dashed; border-radius: var(--radius); } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.toolbar-edit-mode .button-toolbar.toolbar-command:has(> button[title^=vvh-insert-linebreak]) { height: 26px; opacity: 0.5; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.toolbar-edit-mode .button-toolbar.toolbar-command:has(> button[title^=vvh-insert-linebreak]) > button { height: 26px; } #browser.toolbar-edit-mode .button-toolbar.toolbar-command:has(> button[title^=vvh-insert-linebreak]) { opacity: 0.5; } #browser.toolbar-edit-mode .button-toolbar.toolbar-command:has(> button[title^=vvh-insert-linebreak]) > button::before { content: " "; pointer-events: none; position: absolute; inset: 0; border: 1px dashed; border-radius: var(--radius); } .button-toolbar.toolbar-command > button[title*=vvh-toggle-on] > .button-icon, .button-toolbar.toolbar-command > button[title*=vvh-toggle-off] > .button-icon { position: relative; } .button-toolbar.toolbar-command > button[title*=vvh-toggle-on] > .button-icon::before, .button-toolbar.toolbar-command > button[title*=vvh-toggle-off] > .button-icon::before { content: ""; position: absolute; inset: auto; width: 28px; height: 28px; background-color: currentColor; -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' fill='none'%3E%3Cpath d='m7.25 9.5 2.25 9 2.25-9' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' /%3E%3Cpath d='M16.25 9.5V14h4.5V9.5m0 9V14h-4.5v4.5' stroke='currentColor' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' /%3E%3C/svg%3E"); } .button-toolbar.toolbar-command > button[title*=vvh-toggle-on] > .button-icon > svg, .button-toolbar.toolbar-command > button[title*=vvh-toggle-off] > .button-icon > svg { opacity: 0; } #browser.dim-blurred.isblurred .button-toolbar.toolbar-command > button[title*=vvh-toggle-on] > .button-icon::before, #browser.dim-blurred.isblurred .button-toolbar.toolbar-command > button[title*=vvh-toggle-off] > .button-icon::before { opacity: 0.65; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser:is(.address-top, .address-bottom) #main .toolbar-mainbar .toolbar-extensions, :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) footer .toolbar-statusbar .toolbar-extensions { flex-basis: 100%; display: grid; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) .toolbar-extensions { box-sizing: border-box; grid-template-columns: repeat(auto-fit, minmax(34px, 1fr)); justify-content: space-between; align-items: start; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) .toolbar-extensions:has(button[name=Extensions]) { grid-template-columns: repeat(auto-fit, minmax(34px, 1fr)) 34px; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) .toolbar-extensions > .button-toolbar:has(> button[name=Extensions]) { grid-row: 1/-9999; grid-column: -1/-2; height: 100%; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) .toolbar-extensions > .button-toolbar > button[name=Extensions] { height: 100%; display: flex; align-items: center; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) .toolbar-extensions > .button-toolbar .button-badge { right: unset; translate: 8px 0; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) .toolbar-extensions > div:last-child:empty { display: none; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.toolbar-edit-mode .toolbar-spacer-flexible { opacity: 0.5; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser.toolbar-edit-mode .toolbar-spacer-flexible > button::before { content: " "; pointer-events: none; position: absolute; inset: 0; border: 1px dashed; border-radius: var(--radius); } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser:is(.address-top, .address-bottom) #main .toolbar-mainbar .SearchField:not(.UrlBar-SearchField), :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) footer .toolbar-statusbar .SearchField:not(.UrlBar-SearchField) { margin: 5px 9px; margin-right: 9px !important; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser:is(.address-top, .address-bottom) #main .toolbar-mainbar .SearchField:not(.UrlBar-SearchField) .UrlBar-UrlFieldWrapper, :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) footer .toolbar-statusbar .SearchField:not(.UrlBar-SearchField) .UrlBar-UrlFieldWrapper { min-width: unset; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser:is(.address-top, .address-bottom) #main .toolbar-mainbar .button-toolbar.toolbar-command:has(> button[title^=vvh-insert-linebreak]) + .SearchField:not(.UrlBar-SearchField):has(+ .button-toolbar.toolbar-command > button[title^=vvh-insert-linebreak]), :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) footer .toolbar-statusbar .button-toolbar.toolbar-command:has(> button[title^=vvh-insert-linebreak]) + .SearchField:not(.UrlBar-SearchField):has(+ .button-toolbar.toolbar-command > button[title^=vvh-insert-linebreak]) { flex: 1 1 100%; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) .button-textonly:has(.page-zoom-controls) { justify-content: center; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser:is(.address-top, .address-bottom) #main .toolbar-mainbar .UrlBar-SearchField, :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) footer .toolbar-statusbar .UrlBar-SearchField { z-index: 2; width: 0; margin: 5px 9px; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #browser:is(.address-top, .address-bottom) #main .toolbar-mainbar .UrlBar-SearchField:has(.OmniDropdown), :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) footer .toolbar-statusbar .UrlBar-SearchField:has(.OmniDropdown) { z-index: 3; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) .toolbar > .StatusInfo { flex: unset; width: 100%; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) .toolbar > .StatusInfo > .StatusInfo-Content { width: 100%; position: absolute; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) .workspace-popup:not(.tabbar-workspace-button) > button { margin: 0; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #modal-bg.default-browser { position: fixed; inset: auto 0 0; z-index: 4; background-color: var(--colorBg); box-shadow: 0 -4px 9px 0 rgba(0, 0, 0, 0.2); } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) > :not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-addressbar-universal-flex-grow])) #browser:is(.native, :not(.disable-titlebar)) #main .toolbar-mainbar > :not(.UrlBar-SearchField, .SearchField:not(.UrlBar-SearchField)) { flex-grow: 1; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) > :not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-addressbar-universal-flex-grow])) #browser:is(.native, :not(.disable-titlebar)) #main .toolbar-mainbar > .workspace-popup { max-width: unset; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) > :not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-addressbar-universal-flex-grow])) #browser:is(.native, :not(.disable-titlebar)) #main .toolbar-mainbar > .workspace-popup > .ToolbarButton-Button .button-icon + .button-toolbar-menu-indicator { margin-left: 0; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) > :not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-addressbar-universal-flex-grow])) #browser.disable-titlebar:not(.native) #main .toolbar-mainbar > * { margin-left: auto; margin-right: auto; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) > :not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-addressbar-universal-flex-grow])) #browser.disable-titlebar:not(.native) #main .toolbar-mainbar > .UrlBar-AddressField, :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) > :not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-addressbar-universal-flex-grow])) #browser.disable-titlebar:not(.native) #main .toolbar-mainbar > .UrlBar-SearchField, :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) > :not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-addressbar-universal-flex-grow])) #browser.disable-titlebar:not(.native) #main .toolbar-mainbar > .SearchField { margin-left: 9px; margin-right: 9px; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) > :not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-addressbar-universal-flex-grow])) #browser.disable-titlebar:not(.native).mac #main .toolbar-mainbar > .window-buttongroup { margin-left: 20px; margin-right: 18px; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) > :not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-addressbar-universal-flex-grow])) #browser:not(.toolbar-edit-mode) #main .toolbar-mainbar .toolbar-spacer-flexible { display: none; } #browser:not(.toolbar-edit-mode) .button-toolbar.toolbar-command:has(button[title=vvh-enable-addressbar-universal-flex-grow], button[title=vvh-disable-addressbar-universal-flex-grow]) { display: none; } #browser.toolbar-edit-mode .button-toolbar.toolbar-command:has(button[title=vvh-enable-addressbar-universal-flex-grow], button[title=vvh-disable-addressbar-universal-flex-grow]) { opacity: 0.5; } #browser.toolbar-edit-mode .button-toolbar.toolbar-command:has(button[title=vvh-enable-addressbar-universal-flex-grow], button[title=vvh-disable-addressbar-universal-flex-grow]) > button::before { content: " "; pointer-events: none; position: absolute; inset: 0; border: 1px dashed; border-radius: var(--radius); } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) > :not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-statusbar-universal-flex-grow])) footer .toolbar-statusbar > :not(.UrlBar-SearchField, .SearchField:not(.UrlBar-SearchField)) { flex-grow: 1; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) > :not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-statusbar-universal-flex-grow])) footer .toolbar-statusbar > .workspace-popup { max-width: unset; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) > :not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-statusbar-universal-flex-grow])) footer .toolbar-statusbar > .workspace-popup > .ToolbarButton-Button .button-icon + .button-toolbar-menu-indicator { margin-left: 0; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) > :not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-statusbar-universal-flex-grow])) footer .toolbar-statusbar .button-toolbar button:hover { background-color: var(--colorBgDark); } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) > :not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-statusbar-universal-flex-grow])) #browser:not(.toolbar-edit-mode) footer .toolbar-statusbar .toolbar-spacer-flexible { display: none; } #browser:not(.toolbar-edit-mode) .button-toolbar.toolbar-command:has(button[title=vvh-enable-statusbar-universal-flex-grow], button[title=vvh-disable-statusbar-universal-flex-grow]) { display: none; } #browser.toolbar-edit-mode .button-toolbar.toolbar-command:has(button[title=vvh-enable-statusbar-universal-flex-grow], button[title=vvh-disable-statusbar-universal-flex-grow]) { opacity: 0.5; } #browser.toolbar-edit-mode .button-toolbar.toolbar-command:has(button[title=vvh-enable-statusbar-universal-flex-grow], button[title=vvh-disable-statusbar-universal-flex-grow]) > button::before { content: " "; pointer-events: none; position: absolute; inset: 0; border: 1px dashed; border-radius: var(--radius); } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) > :not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-webpage-permanent-padding])) #webview-container:not(:has(#webpage-stack .tiled.visible)) { padding: 2px; box-shadow: inset 0 0 0 8px var(--colorBgDarker); } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) > :not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-webpage-permanent-padding])) #webview-container:not(:has(#webpage-stack .tiled.visible)) .webpageview.visible { margin: 4px; border-radius: var(--radiusCap); box-shadow: 0 0 0 2px var(--colorBorder); } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) > :not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-webpage-permanent-padding])) #webview-container:not(:has(#webpage-stack .tiled.visible)) .webpageview.visible > .row-wrapper { border-radius: var(--radiusCap); } #browser:not(.toolbar-edit-mode) .button-toolbar.toolbar-command:has(button[title=vvh-enable-webpage-permanent-padding], button[title=vvh-disable-webpage-permanent-padding]) { display: none; } #browser.toolbar-edit-mode .button-toolbar.toolbar-command:has(button[title=vvh-enable-webpage-permanent-padding], button[title=vvh-disable-webpage-permanent-padding]) { opacity: 0.5; } #browser.toolbar-edit-mode .button-toolbar.toolbar-command:has(button[title=vvh-enable-webpage-permanent-padding], button[title=vvh-disable-webpage-permanent-padding]) > button::before { content: " "; pointer-events: none; position: absolute; inset: 0; border: 1px dashed; border-radius: var(--radius); } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) > :not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-addressfield-extend-on-focus])) #browser.tabs-left:not(.address-top-off, .address-bottom-off) #main .toolbar-mainbar .UrlBar-AddressField:has(#urlFieldInput:focus), :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) > :not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-addressfield-extend-on-focus])) #browser.tabs-left footer:has(.toolbar-statusbar) .UrlBar-AddressField:has(#urlFieldInput:focus), :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) > :not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-addressfield-extend-on-focus])) #browser.tabs-off:has(#panels-container.left):not(.address-top-off, .address-bottom-off) #main .toolbar-mainbar .UrlBar-AddressField:has(#urlFieldInput:focus), :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) > :not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-addressfield-extend-on-focus])) #browser.tabs-off:has(#panels-container.left) footer:has(.toolbar-statusbar) .UrlBar-AddressField:has(#urlFieldInput:focus) { margin-right: var(--vvh-input-field-extend-on-focus-margin) !important; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) > :not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-addressfield-extend-on-focus])) #browser.tabs-right:not(.address-top-off, .address-bottom-off) #main .toolbar-mainbar .UrlBar-AddressField:has(#urlFieldInput:focus), :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) > :not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-addressfield-extend-on-focus])) #browser.tabs-right footer:has(.toolbar-statusbar) .UrlBar-AddressField:has(#urlFieldInput:focus), :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) > :not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-addressfield-extend-on-focus])) #browser.tabs-off:has(#panels-container.right):not(.address-top-off, .address-bottom-off) #main .toolbar-mainbar .UrlBar-AddressField:has(#urlFieldInput:focus), :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) > :not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-addressfield-extend-on-focus])) #browser.tabs-off:has(#panels-container.right) footer:has(.toolbar-statusbar) .UrlBar-AddressField:has(#urlFieldInput:focus) { margin-left: var(--vvh-input-field-extend-on-focus-margin) !important; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) > :not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-addressfield-extend-on-focus])) #main .toolbar-mainbar:has(.UrlBar-AddressField #urlFieldInput), :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) > :not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-addressfield-extend-on-focus])) footer:has(.toolbar-statusbar):has(.UrlBar-AddressField #urlFieldInput) { transition: z-index 0s 0.2s; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) > :not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-addressfield-extend-on-focus])) #main .toolbar-mainbar:has(.UrlBar-AddressField #urlFieldInput:focus), :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) > :not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-addressfield-extend-on-focus])) footer:has(.toolbar-statusbar):has(.UrlBar-AddressField #urlFieldInput:focus) { transition: z-index 0s 0s; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) > :not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-addressfield-extend-on-focus])) .UrlBar-AddressField { transition: margin cubic-bezier(0, 1, 0.25, 1) 0.2s, flex-basis cubic-bezier(0, 1, 0.25, 1) 0.2s; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) > :not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-addressfield-extend-on-focus])) .UrlBar-AddressField:has(#urlFieldInput:focus) { flex-basis: 100vw !important; box-shadow: 0 0 16px 1px var(--colorBorder); } #browser:not(.toolbar-edit-mode) .button-toolbar.toolbar-command:has(button[title=vvh-enable-addressfield-extend-on-focus], button[title=vvh-disable-addressfield-extend-on-focus]) { display: none; } #browser.toolbar-edit-mode .button-toolbar.toolbar-command:has(button[title=vvh-enable-addressfield-extend-on-focus], button[title=vvh-disable-addressfield-extend-on-focus]) { opacity: 0.5; } #browser.toolbar-edit-mode .button-toolbar.toolbar-command:has(button[title=vvh-enable-addressfield-extend-on-focus], button[title=vvh-disable-addressfield-extend-on-focus]) > button::before { content: " "; pointer-events: none; position: absolute; inset: 0; border: 1px dashed; border-radius: var(--radius); } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) > :has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-searchfield-extend-on-focus]) > :not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-searchfield-extend-on-focus])) #browser.tabs-left:not(.address-top-off, .address-bottom-off) #main .toolbar-mainbar .UrlBar-SearchField:has(.searchfield-input:focus), :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) > :has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-searchfield-extend-on-focus]) > :not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-searchfield-extend-on-focus])) #browser.tabs-left footer:has(.toolbar-statusbar) .UrlBar-SearchField:has(.searchfield-input:focus), :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) > :has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-searchfield-extend-on-focus]) > :not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-searchfield-extend-on-focus])) #browser.tabs-off:has(#panels-container.left):not(.address-top-off, .address-bottom-off) #main .toolbar-mainbar .UrlBar-SearchField:has(.searchfield-input:focus), :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) > :has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-searchfield-extend-on-focus]) > :not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-searchfield-extend-on-focus])) #browser.tabs-off:has(#panels-container.left) footer:has(.toolbar-statusbar) .UrlBar-SearchField:has(.searchfield-input:focus) { margin-right: var(--vvh-input-field-extend-on-focus-margin) !important; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) > :has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-searchfield-extend-on-focus]) > :not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-searchfield-extend-on-focus])) #browser.tabs-right:not(.address-top-off, .address-bottom-off) #main .toolbar-mainbar .UrlBar-SearchField:has(.searchfield-input:focus), :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) > :has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-searchfield-extend-on-focus]) > :not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-searchfield-extend-on-focus])) #browser.tabs-right footer:has(.toolbar-statusbar) .UrlBar-SearchField:has(.searchfield-input:focus), :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) > :has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-searchfield-extend-on-focus]) > :not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-searchfield-extend-on-focus])) #browser.tabs-off:has(#panels-container.right):not(.address-top-off, .address-bottom-off) #main .toolbar-mainbar .UrlBar-SearchField:has(.searchfield-input:focus), :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) > :has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-searchfield-extend-on-focus]) > :not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-searchfield-extend-on-focus])) #browser.tabs-off:has(#panels-container.right) footer:has(.toolbar-statusbar) .UrlBar-SearchField:has(.searchfield-input:focus) { margin-left: var(--vvh-input-field-extend-on-focus-margin) !important; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) > :has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-searchfield-extend-on-focus]) > :not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-searchfield-extend-on-focus])) #main .toolbar-mainbar:has(.UrlBar-SearchField .searchfield-input), :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) > :has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-searchfield-extend-on-focus]) > :not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-searchfield-extend-on-focus])) footer:has(.toolbar-statusbar):has(.UrlBar-SearchField .searchfield-input) { transition: z-index 0s 0.2s; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) > :has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-searchfield-extend-on-focus]) > :not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-searchfield-extend-on-focus])) #main .toolbar-mainbar:has(.UrlBar-SearchField .searchfield-input:focus), :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) > :has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-searchfield-extend-on-focus]) > :not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-searchfield-extend-on-focus])) footer:has(.toolbar-statusbar):has(.UrlBar-SearchField .searchfield-input:focus) { transition: z-index 0s 0s; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) > :has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-searchfield-extend-on-focus]) > :not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-searchfield-extend-on-focus])) .UrlBar-SearchField { transition: margin cubic-bezier(0, 1, 0.25, 1) 0.2s, flex-basis cubic-bezier(0, 1, 0.25, 1) 0.2s; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) > :has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-searchfield-extend-on-focus]) > :not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-searchfield-extend-on-focus])) .UrlBar-SearchField:has(.searchfield-input:focus) { flex-basis: 100vw !important; box-shadow: 0 0 16px 1px var(--colorBorder); } #browser:not(.toolbar-edit-mode) .button-toolbar.toolbar-command:has(button[title=vvh-enable-searchfield-extend-on-focus], button[title=vvh-disable-searchfield-extend-on-focus]) { display: none; } #browser.toolbar-edit-mode .button-toolbar.toolbar-command:has(button[title=vvh-enable-searchfield-extend-on-focus], button[title=vvh-disable-searchfield-extend-on-focus]) { opacity: 0.5; } #browser.toolbar-edit-mode .button-toolbar.toolbar-command:has(button[title=vvh-enable-searchfield-extend-on-focus], button[title=vvh-disable-searchfield-extend-on-focus]) > button::before { content: " "; pointer-events: none; position: absolute; inset: 0; border: 1px dashed; border-radius: var(--radius); } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) > :has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-extensions-invert-toggle-position]) > :not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-extensions-invert-toggle-position])) .toolbar-extensions:has(button[name=Extensions]) { grid-template-columns: 34px repeat(auto-fit, minmax(34px, 1fr)); } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) > :has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-extensions-invert-toggle-position]) > :not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-extensions-invert-toggle-position])) .toolbar-extensions > .button-toolbar:has(> button[name=Extensions]) { grid-column: 1/2; } #browser:not(.toolbar-edit-mode) .button-toolbar.toolbar-command:has(button[title=vvh-enable-extensions-invert-toggle-position], button[title=vvh-disable-extensions-invert-toggle-position]) { display: none; } #browser.toolbar-edit-mode .button-toolbar.toolbar-command:has(button[title=vvh-enable-extensions-invert-toggle-position], button[title=vvh-disable-extensions-invert-toggle-position]) { opacity: 0.5; } #browser.toolbar-edit-mode .button-toolbar.toolbar-command:has(button[title=vvh-enable-extensions-invert-toggle-position], button[title=vvh-disable-extensions-invert-toggle-position]) > button::before { content: " "; pointer-events: none; position: absolute; inset: 0; border: 1px dashed; border-radius: var(--radius); } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) > :has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-panel-in-pillar]) > :not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-panel-in-pillar])) #browser:is(.tabs-left, .tabs-right) #panels-container { border-top: none !important; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) > :has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-panel-in-pillar]) > :not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-panel-in-pillar])) #browser.tabs-left:has(#panels-container.left) #switch, :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) > :has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-panel-in-pillar]) > :not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-panel-in-pillar])) #browser.tabs-right:has(#panels-container.right) #switch { backdrop-filter: unset; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) > :has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-panel-in-pillar]) > :not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-panel-in-pillar])) #browser.tabs-left:has(#panels-container.left) #panels-container, :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) > :has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-panel-in-pillar]) > :not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-panel-in-pillar])) #browser.tabs-right:has(#panels-container.right) #panels-container { grid-row: calc(1 + var(--vvh-grid-title-bar, 0) + var(--vvh-grid-address-bar-top, 0) + var(--vvh-grid-bookmark-bar-top, 0))/calc(-1 - var(--vvh-grid-bookmark-bar-bottom, 0) - var(--vvh-grid-address-bar-bottom, 0) - var(--vvh-grid-status-bar, 0)) !important; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) > :has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-panel-in-pillar]) > :not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-panel-in-pillar])) #browser.tabs-left:has(#panels-container.left)::before { grid-column: 1/3; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) > :has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-panel-in-pillar]) > :not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-panel-in-pillar])) #browser.tabs-left:has(#panels-container.left) #titlebar, :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) > :has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-panel-in-pillar]) > :not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-panel-in-pillar])) #browser.tabs-left:has(#panels-container.left) #main .toolbar-mainbar, :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) > :has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-panel-in-pillar]) > :not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-panel-in-pillar])) #browser.tabs-left:has(#panels-container.left) #main .mainbar::before, :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) > :has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-panel-in-pillar]) > :not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-panel-in-pillar])) #browser.tabs-left:has(#panels-container.left) #header .topmenu, :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) > :has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-panel-in-pillar]) > :not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-panel-in-pillar])) #browser.tabs-left:has(#panels-container.left) #main .bookmark-bar, :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) > :has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-panel-in-pillar]) > :not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-panel-in-pillar])) #browser.tabs-left:has(#panels-container.left) footer:has(.toolbar-statusbar) { grid-column: 1/3; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) > :has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-panel-in-pillar]) > :not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-panel-in-pillar])) #browser.tabs-left:has(#panels-container.left) #panels-container { grid-column: 1/2; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) > :has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-panel-in-pillar]) > :not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-panel-in-pillar])) #browser.tabs-left:has(#panels-container.left) #main > .inner > .tabbar-wrapper { grid-column: 2/3; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) > :has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-panel-in-pillar]) > :not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-panel-in-pillar])) #browser.tabs-right:has(#panels-container.right)::before { grid-column: 2/4; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) > :has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-panel-in-pillar]) > :not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-panel-in-pillar])) #browser.tabs-right:has(#panels-container.right) #titlebar, :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) > :has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-panel-in-pillar]) > :not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-panel-in-pillar])) #browser.tabs-right:has(#panels-container.right) #main .toolbar-mainbar, :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) > :has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-panel-in-pillar]) > :not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-panel-in-pillar])) #browser.tabs-right:has(#panels-container.right) #main .mainbar::before, :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) > :has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-panel-in-pillar]) > :not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-panel-in-pillar])) #browser.tabs-right:has(#panels-container.right) #header .topmenu, :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) > :has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-panel-in-pillar]) > :not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-panel-in-pillar])) #browser.tabs-right:has(#panels-container.right) #main .bookmark-bar, :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) > :has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-panel-in-pillar]) > :not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-panel-in-pillar])) #browser.tabs-right:has(#panels-container.right) footer:has(.toolbar-statusbar) { grid-column: -3/-1; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) > :has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-panel-in-pillar]) > :not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-panel-in-pillar])) #browser.tabs-right:has(#panels-container.right) #panels-container { grid-column: -2/-1; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) > :has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-panel-in-pillar]) > :not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-panel-in-pillar])) #browser.tabs-right:has(#panels-container.right) #main > .inner > .tabbar-wrapper { grid-column: -3/-2; } #browser:not(.toolbar-edit-mode) .button-toolbar.toolbar-command:has(button[title=vvh-enable-panel-in-pillar], button[title=vvh-disable-panel-in-pillar]) { display: none; } #browser.toolbar-edit-mode .button-toolbar.toolbar-command:has(button[title=vvh-enable-panel-in-pillar], button[title=vvh-disable-panel-in-pillar]) { opacity: 0.5; } #browser.toolbar-edit-mode .button-toolbar.toolbar-command:has(button[title=vvh-enable-panel-in-pillar], button[title=vvh-disable-panel-in-pillar]) > button::before { content: " "; pointer-events: none; position: absolute; inset: 0; border: 1px dashed; border-radius: var(--radius); } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) > :has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-titlebar-full-width]) > :not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-titlebar-full-width])) #browser:not(.disable-titlebar) #titlebar { border-left: none; border-right: none; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) > :has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-titlebar-full-width]) > :not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-titlebar-full-width])) #browser:not(.disable-titlebar):is(.tabs-left, .tabs-right) #panels-container, :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) > :has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-titlebar-full-width]) > :not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-titlebar-full-width])) #browser:not(.disable-titlebar) #webview-container { border-top: 1px solid var(--colorBorder); } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) > :has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-titlebar-full-width]) > :not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-titlebar-full-width])) #browser:not(.disable-titlebar):is(.tabs-left, .tabs-right) #panels-container { grid-row-start: 2; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) > :has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-titlebar-full-width]) > :not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-titlebar-full-width])) #browser:not(.disable-titlebar) #webview-container { grid-row-start: 2; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) > :has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-titlebar-full-width]) > :not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-titlebar-full-width])) #browser:not(.disable-titlebar) #titlebar, :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) > :has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-titlebar-full-width]) > :not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-titlebar-full-width])) #browser:not(.disable-titlebar) #header .topmenu { grid-column: 1/-1 !important; } :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) > :has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-titlebar-full-width]) > :not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-titlebar-full-width])) #browser:not(.disable-titlebar) #header .topmenu .horizontal-menu-pagetitle { width: unset; flex: unset; } #browser:not(.toolbar-edit-mode) .button-toolbar.toolbar-command:has(button[title=vvh-enable-titlebar-full-width], button[title=vvh-disable-titlebar-full-width]) { display: none; } #browser.toolbar-edit-mode .button-toolbar.toolbar-command:has(button[title=vvh-enable-titlebar-full-width], button[title=vvh-disable-titlebar-full-width]) { opacity: 0.5; } #browser.toolbar-edit-mode .button-toolbar.toolbar-command:has(button[title=vvh-enable-titlebar-full-width], button[title=vvh-disable-titlebar-full-width]) > button::before { content: " "; pointer-events: none; position: absolute; inset: 0; border: 1px dashed; border-radius: var(--radius); }