dotfiles/.config/vivaldi/vivaldi-vh.css.bk
2025-03-04 11:13:06 -06:00

1007 lines
105 KiB
Plaintext

/*
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 <https://hkayn.com>
*/
: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);
}