1633 lines
122 KiB
CSS
1633 lines
122 KiB
CSS
/*
|
|
version: 1.0.5
|
|
variant: Auto Hide Tabbar
|
|
update: 2024.11.03
|
|
vivaldi version: v7.0
|
|
*/
|
|
|
|
:root{
|
|
--window-border:4px; /* window border, recommend 4px~16px */
|
|
--mac-header:calc(var(--window-border) + 20px); /* title bar extra height */
|
|
--win-header:calc(var(--window-border) + 20px); /* title bar extra height */
|
|
--linux-header:calc(var(--window-border) + 5px); /* title bar extra height */
|
|
--addressbar-height:36px;
|
|
--window-button-scale:0.8;
|
|
--window-button-opacity:0.3;
|
|
--tab-padding:calc(var(--window-border) / 2);
|
|
--colorToviTransparent:transparent;
|
|
--webview-shadow-light:0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 0px var(--window-border) 0px rgba(0, 0, 0, 0.10);
|
|
--webview-shadow-dark:0px 2px 2px 0px rgba(0, 0, 0, 0.05), 0px 2px 8px 0px rgba(0, 0, 0, 0.05), 0px 0px 0px 1.2px #ffffff18;
|
|
}
|
|
|
|
/*breakmode*/
|
|
#browser.break-mode #main{
|
|
opacity:0;
|
|
}
|
|
|
|
/*tabbarButton*/
|
|
#browser:not(.tabs-top):not(.tabs-bottom) .toolbar-tabbar>.button-toolbar>button{
|
|
opacity:0.4;
|
|
}
|
|
|
|
#browser:not(.tabs-top):not(.tabs-bottom) .toolbar-tabbar>.button-toolbar>button:hover{
|
|
opacity:0.8;
|
|
}
|
|
|
|
/*tabbarDrag*/
|
|
/* .tabbar-wrapper{
|
|
-webkit-app-region: drag;
|
|
} */
|
|
|
|
/*footerDisplay*/
|
|
#browser:not(.tabs-bottom):not(.tabs-top) footer#footer,
|
|
:not(.tabs-bottom)#browser > footer,
|
|
#browser > footer > .toolbar-statusbar{
|
|
background:transparent;
|
|
border:none;
|
|
}
|
|
|
|
/*defaultBrowserModal*/
|
|
#modal-bg.default-browser{
|
|
display:none;
|
|
}
|
|
|
|
/*topHeader*/
|
|
#browser:not(.is-settingspage):not(.address-top) > #header,
|
|
#browser:not(.is-settingspage):not(.tabs-top) #header,
|
|
#browser.color-behind-tabs-off:not(.is-settingspage)#browser:not(.tabs-top):not(.tabs-bottom) #header{
|
|
box-shadow:none;
|
|
overflow: visible;
|
|
}
|
|
|
|
#browser:not(.is-settingspage).fullscreen > #header,
|
|
#browser:not(.is-settingspage):not(.address-top).tabs-bottom > #header,
|
|
#browser:not(.is-settingspage).tabs-off.address-top > #header,
|
|
.color-behind-tabs-off:not(.is-settingspage)#browser.tabs-bottom #header{
|
|
display: none;
|
|
}
|
|
|
|
/*topHeader-Mac*/
|
|
#browser.mac:not(.is-settingspage):not(.address-top).tabs-left.tabs-right > #header,
|
|
#browser.mac:not(.is-settingspage):not(.tabs-top):not(.tabs-bottom) #header,
|
|
#browser.mac.color-behind-tabs-off:not(.is-settingspage)#browser.tabs-left.tabs-right #header{
|
|
background:var(--colorTabBar);
|
|
min-height:var(--mac-header) !important;
|
|
height:var(--mac-header) !important;
|
|
}
|
|
|
|
.mac #titlebar #pagetitle, #titlebar #pagetitle .linux.alt{
|
|
height:var(--mac-header) !important;
|
|
font-size:11px;
|
|
color:var(--colorFg);
|
|
color:transparent;
|
|
}
|
|
|
|
/*topHeader-Linux*/
|
|
#browser.linux:not(.is-settingspage):not(.address-top) > #header,
|
|
#browser.linux:not(.is-settingspage):not(.tabs-top) #header,
|
|
#browser.linux.color-behind-tabs-off:not(.is-settingspage)#browser:not(.tabs-top):not(.tabs-bottom) #header{
|
|
min-height:var(--linux-header) !important;
|
|
height:var(--linux-header) !important;
|
|
background:var(--colorTabBar);
|
|
}
|
|
|
|
.linux:not(.alt) #titlebar #pagetitle{
|
|
height:var(--linux-header);
|
|
padding:0 120px;
|
|
}
|
|
|
|
/*topHeader-Win*/
|
|
#browser.win:not(.is-settingspage):not(.address-top) > #header,
|
|
#browser.win:not(.is-settingspage):not(.tabs-top) #header,
|
|
#browser.win.color-behind-tabs-off:not(.is-settingspage)#browser:not(.tabs-top):not(.tabs-bottom) #header{
|
|
min-height:var(--win-header) !important;
|
|
height:var(--win-header) !important;
|
|
background:var(--colorTabBar);
|
|
}
|
|
|
|
#browser.win #titlebar #pagetitle{
|
|
height:var(--win-header);
|
|
padding:0 140px;
|
|
}
|
|
|
|
/*topHeader-Linux-Win*/
|
|
.linux:not(.alt) #titlebar #pagetitle,
|
|
#browser.win #titlebar #pagetitle,
|
|
#browser.mac #titlebar #pagetitle{
|
|
font-size:11px;
|
|
color:var(--colorFg);
|
|
opacity:0.5;
|
|
}
|
|
|
|
.win #titlebar #pagetitle > span,
|
|
.linux:not(.alt) #titlebar #pagetitle > span{
|
|
text-align:center;
|
|
}
|
|
|
|
/*windowVivaldi*/
|
|
.disable-titlebar.address-top#browser:not(.tabs-top) .vivaldi{
|
|
border-radius:var(--radiusCap);
|
|
margin:0 9px;
|
|
}
|
|
|
|
.disable-titlebar.address-top#browser:not(.tabs-top) .vivaldi:hover{
|
|
background-color:var(--colorFgAlpha);
|
|
}
|
|
|
|
#browser.linux:not(.tabs-top) #titlebar .vivaldi,
|
|
#browser.win:not(.is-settingspage):not(.tabs-top) #titlebar .vivaldi{
|
|
color:var(--colorFgAlpha);
|
|
scale: calc(0.8 / var(--uiZoomLevel));
|
|
margin-left: -2px;
|
|
margin-top: 0px;
|
|
}
|
|
|
|
#browser.linux:not(.tabs-top) #titlebar .vivaldi:hover,
|
|
#browser.win:not(.is-settingspage):not(.tabs-top) #titlebar .vivaldi:hover{
|
|
color:var(--colorFg);
|
|
background-color:var(--colorImageBgAlpha), var(--colorBgAlpha);
|
|
}
|
|
|
|
/*windowButtonGroup-Mac*/
|
|
#browser.mac:not(.is-settingspage):not(.tabs-top):not(.tabs-bottom) #header .window-buttongroup button{
|
|
width: calc((var(--mac-header) - 0px) * var(--uiZoomLevel));
|
|
height: calc((var(--mac-header) - 0px) * var(--uiZoomLevel));
|
|
padding-right:4px;
|
|
margin:0px;
|
|
flex:0 0 calc(var(--window-border) - 4px);
|
|
}
|
|
|
|
#browser.mac:not(.is-settingspage):not(.tabs-top):not(.tabs-bottom) #titlebar.tabless .window-buttongroup{
|
|
display:flex;
|
|
margin-top: 2px;
|
|
margin-left: calc(var(--window-border) + 2px);
|
|
/* height:var(--mac-header); */
|
|
}
|
|
|
|
#browser.mac:not(.is-settingspage):not(.tabs-top):not(.tabs-bottom) #header .window-buttongroup{
|
|
filter:brightness(0) grayscale(1) opacity(0.1);
|
|
}
|
|
|
|
#browser.mac:not(.is-settingspage):not(.tabs-top):not(.tabs-bottom) #header .window-buttongroup:hover{
|
|
filter:brightness(1) opacity(0.7);
|
|
}
|
|
|
|
/*windowButtonGroup-Win*/
|
|
#browser.win:not(.is-settingspage):not(.tabs-top):not(.tabs-bottom) #header #titlebar .window-buttongroup{
|
|
opacity:var(--window-button-opacity);
|
|
color:var(--colorFg);
|
|
line-height:var(--win-header);
|
|
}
|
|
|
|
#browser.win:not(.is-settingspage):not(.tabs-top):not(.tabs-bottom) #header #titlebar .window-buttongroup:hover{
|
|
opacity:1;
|
|
}
|
|
|
|
#browser.win:not(.is-settingspage):not(.tabs-top):not(.tabs-bottom) #header #titlebar .window-buttongroup button,
|
|
#browser.win:not(.is-settingspage):not(.tabs-top):not(.tabs-bottom) #header #titlebar .window-buttongroup button.window-close{
|
|
width: calc(var(--win-header) * 2);
|
|
height:var(--win-header);
|
|
}
|
|
|
|
#browser.win:not(.is-settingspage):not(.tabs-top):not(.tabs-bottom) #header #titlebar .window-buttongroup button.window-minimize svg,
|
|
#browser.win:not(.is-settingspage):not(.tabs-top):not(.tabs-bottom) #header #titlebar .window-buttongroup button.window-maximize svg,
|
|
#browser.win:not(.is-settingspage):not(.tabs-top):not(.tabs-bottom) #header #titlebar .window-buttongroup button.window-close svg{
|
|
scale:var(--window-button-scale);
|
|
}
|
|
|
|
/*windowButtonGroup-Linux*/
|
|
#browser.linux:not(.is-settingspage):not(.tabs-top):not(.tabs-bottom) .window-buttongroup{
|
|
right: calc(var(--window-border) / var(--uiZoomLevel));
|
|
top: calc(1px / var(--uiZoomLevel));
|
|
}
|
|
|
|
#browser.linux:not(.is-settingspage):not(.tabs-top):not(.tabs-bottom) .window-buttongroup button{
|
|
width:calc((var(--linux-header) - 2px) * 1.32 / var(--uiZoomLevel));
|
|
height:calc((var(--linux-header) - 2px) / var(--uiZoomLevel));
|
|
padding:0px;
|
|
display:flex;
|
|
align-items:center;
|
|
justify-content:center;
|
|
}
|
|
|
|
#browser.linux:not(.is-settingspage):not(.tabs-top):not(.tabs-bottom) .window-buttongroup button svg{
|
|
scale: calc(var(--window-button-scale) / var(--uiZoomLevel));
|
|
opacity:var(--window-button-opacity);
|
|
}
|
|
|
|
#browser.linux:not(.is-settingspage):not(.tabs-top):not(.tabs-bottom) .window-buttongroup button svg:hover{
|
|
opacity:1;
|
|
}
|
|
|
|
/*addressbar_legacy*/
|
|
#browser.win:not(.tabs-top):not(.tabs-bottom).address-top .toolbar:has(.window-buttongroup.on-mainbar),
|
|
#browser.linux:not(.tabs-top):not(.tabs-bottom).address-top .toolbar:has(.window-buttongroup.on-mainbar){
|
|
min-height:calc((var(--addressbar-height)) / var(--uiZoomLevel));
|
|
}
|
|
|
|
#browser:not(.tabs-top):not(.tabs-bottom).disable-titlebar#browser.win .window-buttongroup{
|
|
height:var(--addressbar-height);
|
|
}
|
|
|
|
/*mainbar*/
|
|
.color-behind-tabs-off.address-top#browser:not(.tabs-top):not(.tabs-bottom) .mainbar,
|
|
.color-behind-tabs-on.address-top#browser:not(.tabs-top):not(.tabs-bottom) .mainbar{
|
|
border:none;
|
|
background: transparent;
|
|
}
|
|
|
|
.color-behind-tabs-off.address-top#browser:not(.tabs-top):not(.tabs-bottom) .mainbar{
|
|
/* background:var(--colorTabBar);
|
|
color: var(--colorFg); */
|
|
-webkit-app-region: drag;
|
|
}
|
|
|
|
#browser:not(.tabs-top):not(.tabs-bottom).address-top .UrlBar-SearchField,
|
|
#browser:not(.tabs-top):not(.tabs-bottom).address-top .UrlBar-AddressField,
|
|
#browser:not(.tabs-top):not(.tabs-bottom).address-top .SearchField {
|
|
background-color: var(--colorFgAlpha);
|
|
}
|
|
|
|
#browser:not(.tabs-top):not(.tabs-bottom).dim-blurred:not(.hasfocus) .UrlBar-AddressField,
|
|
#browser:not(.tabs-top):not(.tabs-bottom).dim-blurred:not(.hasfocus) .SearchField,
|
|
#browser:not(.tabs-top):not(.tabs-bottom).color-behind-tabs-off .SearchField,
|
|
#browser:not(.tabs-top):not(.tabs-bottom).color-behind-tabs-off .UrlBar-AddressField {
|
|
border: 1px solid var(--colorFgAlpha);
|
|
}
|
|
|
|
.UrlFragment-Wrapper--ShouldHighlight{
|
|
--HighlightColor: var(--colorFgIntense);
|
|
--LowlightColor: var(--colorFgFadedMore);
|
|
}
|
|
|
|
.button-toolbar > button{
|
|
border-radius:var(--radiusHalf);
|
|
}
|
|
|
|
#browser:not(.tabs-top):not(.tabs-bottom) .ExtensionIcon--Hidden{
|
|
background-color:transparent;
|
|
}
|
|
|
|
.disable-titlebar .toolbar-mainbar .toolbar-extensions > .button-toolbar > button,
|
|
.disable-titlebar .toolbar-mainbar .page-zoom-controls > .button-toolbar > button,
|
|
.disable-titlebar .toolbar-mainbar > .button-toolbar > button,
|
|
.disable-titlebar .toolbar-mainbar .toolbar-extensions > .toolbar-group > .button-toolbar > button,
|
|
.disable-titlebar .toolbar-mainbar .page-zoom-controls > .toolbar-group > .button-toolbar > button,
|
|
.disable-titlebar .toolbar-mainbar > .toolbar-group > .button-toolbar > button,
|
|
#browser:not(.tabs-top):not(.tabs-bottom).color-behind-tabs-off .ExtensionIcon{
|
|
border-radius:var(--radiusHalf);
|
|
}
|
|
|
|
#browser:not(.tabs-top):not(.tabs-bottom).color-behind-tabs-off .toolbar-mainbar .toolbar-extensions > .button-toolbar > button:hover,
|
|
#browser:not(.tabs-top):not(.tabs-bottom).color-behind-tabs-off .toolbar-mainbar .page-zoom-controls > .button-toolbar > button:hover,
|
|
#browser:not(.tabs-top):not(.tabs-bottom).color-behind-tabs-off .toolbar-mainbar > .button-toolbar > button:hover,
|
|
#browser:not(.tabs-top):not(.tabs-bottom).color-behind-tabs-off .toolbar-mainbar .toolbar-extensions > .toolbar-group > .button-toolbar > button:hover,
|
|
#browser:not(.tabs-top):not(.tabs-bottom).color-behind-tabs-off .toolbar-mainbar .page-zoom-controls > .toolbar-group > .button-toolbar > button:hover,
|
|
#browser:not(.tabs-top):not(.tabs-bottom).color-behind-tabs-off .toolbar-mainbar > .toolbar-group > .button-toolbar > button:hover,
|
|
#browser:not(.tabs-top):not(.tabs-bottom).color-behind-tabs-off .ExtensionIcon:hover,
|
|
#browser:not(.tabs-top):not(.tabs-bottom).color-behind-tabs-off .ExtensionIcon--Hidden:hover,
|
|
#browser:not(.tabs-top):not(.tabs-bottom).color-behind-tabs-off .ExtensionIcon--Hidden:active,
|
|
#browser:not(.tabs-top):not(.tabs-bottom).color-behind-tabs-off .bookmark-bar button:hover
|
|
{
|
|
background-color: var(--colorFgAlpha);
|
|
}
|
|
|
|
.color-behind-tabs-off .ExtensionToggleIcon.ExtensionToggleIcon--extensionsExpanded{
|
|
background-color:transparent;
|
|
}
|
|
|
|
/*bookmark-bar*/
|
|
#browser:not(.tabs-top):not(.tabs-bottom).color-behind-tabs-off.bookmark-bar-top .bookmark-bar,
|
|
#browser:not(.tabs-top):not(.tabs-bottom).color-behind-tabs-off .bookmark-bar button{
|
|
background:var(--colorTabBar);
|
|
color:var(--colorFg);
|
|
border-bottom-width:0;
|
|
border-radius:var(--radiusHalf);
|
|
}
|
|
|
|
/*workspace button*/
|
|
#browser.transparent-tabbar .button-toolbar.workspace-popup.tabbar-workspace-button,
|
|
#browser.transparent-tabbar.tabs-left .button-toolbar.workspace-popup.tabbar-workspace-button,
|
|
#browser.transparent-tabbar.tabs-right .button-toolbar.workspace-popup.tabbar-workspace-button,
|
|
.tabs-left .button-toolbar.workspace-popup.tabbar-workspace-button,
|
|
.tabs-right .button-toolbar.workspace-popup.tabbar-workspace-button{
|
|
box-shadow:none;
|
|
background:var(--colorToviTransparent);
|
|
}
|
|
|
|
#browser:not(.tabs-top):not(.tabs-bottom).transparent-tabbar .button-toolbar.workspace-popup.tabbar-workspace-button.button-menu{
|
|
color:var(--colorFg);
|
|
}
|
|
|
|
#app .tabs-left .button-toolbar.workspace-popup.tabbar-workspace-button button,
|
|
#app .tabs-right .button-toolbar.workspace-popup.tabbar-workspace-button button{
|
|
padding-left:4px;
|
|
padding-right:4px;
|
|
}
|
|
|
|
.button-toolbar.button-menu .button-toolbar-menu-indicator.disabled{
|
|
opacity:0.3;
|
|
}
|
|
|
|
/*tabbar left & tabbar right*/
|
|
|
|
/* #browser #tabs-tabbar-container.left ::-webkit-scrollbar,
|
|
#browser #tabs-tabbar-container.right ::-webkit-scrollbar{
|
|
display: none;
|
|
} */
|
|
|
|
.tabs-left .tabbar-wrapper,
|
|
.tabs-right .tabbar-wrapper{
|
|
background-color:transparent;
|
|
}
|
|
|
|
/*tabbar_left_and_right_padding*/
|
|
/* .tabs-left .inner > .tabbar-wrapper:not(:has(.tab-small)),
|
|
.tabs-right .inner > .tabbar-wrapper:not(:has(.tab-small)){
|
|
margin:0 var(--tab-padding);
|
|
} */
|
|
|
|
/* .tabs-left .accordion-toggle-arrow,
|
|
.tabs-right .accordion-toggle-arrow{
|
|
max-width:calc(var(--Width) - 16px + (var(--tab-padding) * 2));
|
|
} */
|
|
|
|
/* #browser:not(.tabs-top):not(.tabs-bottom) .tab-position .tab{
|
|
color:var(--colorFg);
|
|
} */
|
|
|
|
/* .tabs-left .tab-position:not(:has(.tab-mini)) .tab > .tab-header,
|
|
.tabs-right .tab-position:not(:has(.tab-mini)) .tab > .tab-header
|
|
{
|
|
margin-left:0px;
|
|
}
|
|
*/
|
|
|
|
/* .tabbar-workspace-button + #tabs-tabbar-container.left,
|
|
.tabbar-workspace-button + #tabs-tabbar-container.right{
|
|
padding-top:4px;
|
|
} */
|
|
|
|
/* #browser:not(.theme-dark) #tabs-tabbar-container.left,
|
|
#browser:not(.theme-dark) #tabs-tabbar-container.right{
|
|
box-shadow:none;
|
|
} */
|
|
|
|
#browser.transparent-tabbar #tabs-tabbar-container.left,
|
|
#browser.transparent-tabbar #tabs-tabbar-container.right,
|
|
#browser:not(.transparent-tabbar) #tabs-tabbar-container
|
|
{
|
|
background: var(--colorToviTransparent);
|
|
border: none;
|
|
box-shadow:none;
|
|
/* min-width: 36px; */
|
|
/* width: 36px; */
|
|
}
|
|
|
|
#browser.tabs-left .inner>.tabbar-wrapper,
|
|
#browser.tabs-right .inner>.tabbar-wrapper{
|
|
padding-bottom:var(--window-border);
|
|
}
|
|
|
|
/* #browser.mac.address-top-off.tabs-left .inner>.tabbar-wrapper,
|
|
#browser.mac.address-top-off.tabs-right .inner>.tabbar-wrapper{
|
|
padding-top:8px;
|
|
} */
|
|
|
|
/* tab stack frame */
|
|
/* .dim-blurred:not(.hasfocus) .svg-tab-stack, .dim-blurred:not(.hasfocus) .stack-frame {
|
|
stroke: var(--colorBorder);
|
|
}
|
|
.svg-tab-stack, .stack-frame {
|
|
stroke: var(--colorBgIntense);
|
|
}
|
|
.svg-tab-stack line, .svg-tab-selection line, .svg-tab-stack rect, .svg-tab-selection rect {
|
|
fill: none;
|
|
stroke-width: 3px;
|
|
}
|
|
*/
|
|
/*tab-stack minimal*/
|
|
/* .tab-indicator{
|
|
border-top:4px solid transparent;
|
|
border-bottom:10px solid tranparent;
|
|
transition-duration: 0.1s;
|
|
transition:0.1s;
|
|
} */
|
|
|
|
/* .tab-indicator:hover{
|
|
border-top:0px solid transparent;
|
|
border-bottom:10px solid tranparent;
|
|
transition-duration: 0.1s;
|
|
transition:0.1s;
|
|
}
|
|
*/
|
|
/* .tab-group-indicator{
|
|
padding:0;
|
|
} */
|
|
|
|
.color-behind-tabs-off .tab-indicator{
|
|
background-color:var(--colorAccentBgAlpha);
|
|
}
|
|
.color-behind-tabs-off .tab-indicator:hover{
|
|
background-color:var(--colorAccentBg);
|
|
}
|
|
|
|
.color-behind-tabs-off .tab-indicator.active{
|
|
background-color:var(--colorAccentBg);
|
|
}
|
|
|
|
.color-behind-tabs-off .tab.active + .tab-group-indicator .tab-indicator.active{
|
|
background-color:var(--colorAccentBg)
|
|
}
|
|
|
|
/*tabs-stack.tabs-subcontainer*/
|
|
#browser:not(.tabs-top):not(.tabs-bottom).color-behind-tabs-off #tabs-subcontainer.left,
|
|
#browser:not(.tabs-top):not(.tabs-bottom).color-behind-tabs-off #tabs-subcontainer.right{
|
|
box-shadow:none;
|
|
}
|
|
|
|
#browser:not(.tabs-top):not(.tabs-bottom).color-behind-tabs-off #tabs-subcontainer,
|
|
#browser:not(.tabs-top):not(.tabs-bottom).transparent-tabbar #tabs-subcontainer{
|
|
background-color:transparent;
|
|
}
|
|
|
|
/*panel*/
|
|
#browser:not(.tabs-top):not(.tabs-bottom) #panels #switch,
|
|
#browser:not(.tabs-top):not(.tabs-bottom) #panels,
|
|
#browser:not(.tabs-top):not(.tabs-bottom) #panels-container
|
|
{
|
|
padding-top: 0px;
|
|
border: 0;
|
|
}
|
|
|
|
.icons #switch .addwebpanel-wrapper > button,
|
|
.icons #switch > .button-toolbar,
|
|
.icons #switch > * > .button-toolbar,
|
|
.icons #switch > button{
|
|
border-radius:calc(var(--radiusHalf));
|
|
}
|
|
|
|
#browser:not(.tabs-top):not(.tabs-bottom) .icons #switch .addwebpanel-wrapper > button:not(.toolbar-spacer, .toolbar-spacer-flexible, .divider):hover,
|
|
#browser:not(.tabs-top):not(.tabs-bottom) .icons #switch > .button-toolbar:not(.toolbar-spacer, .toolbar-spacer-flexible, .divider):hover,
|
|
#browser:not(.tabs-top):not(.tabs-bottom) .icons #switch > * .button-toolbar:not(.toolbar-spacer, .toolbar-spacer-flexible, .divider):hover,
|
|
#browser:not(.tabs-top):not(.tabs-bottom) .icons #switch > button:not(.toolbar-spacer, .toolbar-spacer-flexible, .divider):hover{
|
|
background:var(--colorFgAlpha);
|
|
}
|
|
|
|
#browser:not(.tabs-top):not(.tabs-bottom) #panels-container{
|
|
margin-bottom:var(--window-border);
|
|
background:var(--colorToviTransparent);
|
|
}
|
|
|
|
#browser:not(.tabs-top):not(.tabs-bottom) #panels-container.overlay{
|
|
background:var(--colorBgAlphaBlur);
|
|
}
|
|
|
|
#browser:not(.tabs-top):not(.tabs-bottom) #panels-container.icons{
|
|
background: var(--colorToviTransparent);
|
|
}
|
|
|
|
#browser:not(.tabs-top):not(.tabs-bottom) #panels-container:not(.icons) .panel-group{
|
|
background:var(--colorBgAlphaBlur);
|
|
}
|
|
|
|
#browser:not(.tabs-top):not(.tabs-bottom) #panels-container .panel-group{
|
|
border-radius:var(--radiusCap)
|
|
}
|
|
|
|
#browser:not(.tabs-top):not(.tabs-bottom) #panels-container.overlay .panel-group{
|
|
border-radius:0;
|
|
}
|
|
|
|
/*webview-container*/
|
|
#browser:not(.tabs-top):not(.tabs-bottom):not(.fullscreen).tabs-off #webview-container{
|
|
margin:0px var(--window-border) var(--window-border) var(--window-border);
|
|
}
|
|
#browser:not(.tabs-top):not(.tabs-bottom):not(.fullscreen).tabs-left #webview-container{
|
|
margin:0px var(--window-border) var(--window-border) 0px;
|
|
}
|
|
#browser:not(.tabs-top):not(.tabs-bottom):not(.fullscreen).tabs-right #webview-container{
|
|
margin:0px 0px var(--window-border) var(--window-border);
|
|
}
|
|
|
|
#browser:not(.tabs-top):not(.tabs-bottom):not(.fullscreen).tabs-off #main.left #panels-container.icons ~ #webview-container,
|
|
#browser:not(.tabs-top):not(.tabs-bottom):not(.fullscreen).tabs-right #main.left #panels-container.icons ~ #webview-container,
|
|
#browser:not(.tabs-top):not(.tabs-bottom):not(.fullscreen).tabs-off #main.left #panels-container.minimized.overlay ~ #webview-container,
|
|
#browser:not(.tabs-top):not(.tabs-bottom):not(.fullscreen).tabs-right #main.left #panels-container.minimized.overlay ~ #webview-container{
|
|
margin-left:0px;
|
|
}
|
|
|
|
#browser:not(.tabs-top):not(.tabs-bottom):not(.fullscreen).tabs-left #main.right #panels-container.icons ~ #webview-container,
|
|
#browser:not(.tabs-top):not(.tabs-bottom):not(.fullscreen).tabs-off #main.right #panels-container.icons ~ #webview-container,
|
|
#browser:not(.tabs-top):not(.tabs-bottom):not(.fullscreen).tabs-left #main.right #panels-container.minimized.overlay ~ #webview-container,
|
|
#browser:not(.tabs-top):not(.tabs-bottom):not(.fullscreen).tabs-off #main.right #panels-container.minimized.overlay ~ #webview-container{
|
|
margin-right:0px;
|
|
}
|
|
|
|
/*rounded webview*/
|
|
#main, #main > .inner{
|
|
overflow:visible;
|
|
}
|
|
|
|
/* #main > .inner{
|
|
background:var(--colorTabBar);
|
|
background:red;
|
|
} */
|
|
|
|
#browser:not(.tabs-top):not(.tabs-bottom):not(.fullscreen) #webpage-stack{
|
|
border-radius:var(--radiusCap);
|
|
}
|
|
|
|
#browser:not(.tabs-top):not(.tabs-bottom):not(.fullscreen).theme-light #webpage-stack{
|
|
box-shadow: var(--webview-shadow-light);
|
|
}
|
|
#browser:not(.tabs-top):not(.tabs-bottom):not(.fullscreen).theme-dark #webpage-stack{
|
|
box-shadow: var(--webview-shadow-dark);
|
|
}
|
|
|
|
#browser:not(.tabs-top):not(.tabs-bottom):not(.fullscreen) #webpage-stack:has(.tiled .visible),
|
|
#browser:not(.tabs-top):not(.tabs-bottom):not(.fullscreen) #webpage-stack:has(.mosaic .visible){
|
|
box-shadow: none;
|
|
}
|
|
|
|
/*tile*/
|
|
#browser:not(.tabs-top):not(.tabs-bottom):not(.fullscreen) #webview-container:has(#webpage-stack .tiled .visible),
|
|
#browser:not(.tabs-top):not(.tabs-bottom):not(.fullscreen) #webview-container:has(#webpage-stack .mosaic .visible){
|
|
box-shadow: none;
|
|
padding:0px;
|
|
}
|
|
|
|
#browser:not(.tabs-top):not(.tabs-bottom):not(.fullscreen) .mosaic-split .mosaic-split-line,
|
|
#browser:not(.tabs-top):not(.tabs-bottom):not(.fullscreen) .mosaic-split .mosaic-split-line:before, .mosaic-split .mosaic-split-line:after,
|
|
#browser:not(.tabs-top):not(.tabs-bottom):not(.fullscreen) .tile,
|
|
#browser:not(.inner, .narrow-tiling) .tiled.visible .tile[data-id]
|
|
{
|
|
background:transparent;
|
|
box-shadow:none;
|
|
}
|
|
|
|
/* Transparent Start Page Navigation*/
|
|
.startpage .startpage-navigation { box-shadow: none !important; }
|
|
.startpage .startpage-navigation { background: transparent !important; }
|
|
.startpage .startpage-navigation .startpage-navigation-group { border: 0 !important; }
|
|
|
|
/* Transparent Start Page Navigation Buttons */
|
|
button.button-startpage { box-shadow: none !important; }
|
|
button.button-startpage:after { background-image: none !important; }
|
|
button.button-startpage:active { background: none !important; }
|
|
|
|
|
|
/* AutoHide Tabbar by @Zettry*/
|
|
/* AutoHide Tabbar by @Zettry*/
|
|
/* AutoHide Tabbar by @Zettry*/
|
|
:root{
|
|
--tabbar-size: 32px;
|
|
}
|
|
|
|
/* tabbar workspace */
|
|
.inner > .tabbar-wrapper:not(:hover) .button-toolbar.workspace-popup.tabbar-workspace-button.button-menu{
|
|
width: calc(var(--tabbar-size) + var(--densityGap))!important;
|
|
transition: unset;
|
|
}
|
|
|
|
.inner > .tabbar-wrapper:not(:hover) .button-toolbar.workspace-popup.tabbar-workspace-button.button-menu .button-title,
|
|
.inner > .tabbar-wrapper:not(:hover) .button-toolbar.workspace-popup.tabbar-workspace-button.button-menu .button-toolbar-menu-indicator{
|
|
display: none;
|
|
}
|
|
|
|
.inner .button-toolbar.workspace-popup.tabbar-workspace-button.button-menu .button-icon{
|
|
position: absolute;
|
|
left: 5px;
|
|
}
|
|
|
|
.inner .button-toolbar.workspace-popup.tabbar-workspace-button.button-menu .button-title{
|
|
position: absolute;
|
|
left: calc(var(--tabbar-size) + var(--densityGap)) !important;
|
|
}
|
|
|
|
.inner .button-toolbar.workspace-popup.tabbar-workspace-button.button-menu .button-toolbar-menu-indicator{
|
|
position: absolute;
|
|
right: 5px;
|
|
}
|
|
|
|
/* tabbar container */
|
|
.inner > .tabbar-wrapper:not(:hover) #tabs-tabbar-container,
|
|
.inner > .tabbar-wrapper:not(:hover) #tabs-tabbar-container .resize{
|
|
width: calc(var(--tabbar-size) + var(--densityGap)) !important;
|
|
transition: unset;
|
|
}
|
|
|
|
/* tab stacking - accordion toggle arrow position */
|
|
/* #tabs-container.left .tab-position.accordion-toggle-arrow{
|
|
--PositionX: 4px!important;
|
|
} */
|
|
|
|
.inner > .tabbar-wrapper{
|
|
position: relative;
|
|
width: calc(var(--tabbar-size) + var(--densityGap));
|
|
}
|
|
|
|
.inner > .tabbar-wrapper > .tabbar-wrapper{
|
|
position: absolute;
|
|
overflow: hidden;
|
|
z-index: 1;
|
|
}
|
|
|
|
.inner > .tabbar-wrapper > .tabbar-wrapper:hover{
|
|
position: absolute;
|
|
background:var(--colorImageLeftBg, var(--colorBgLight)) ;
|
|
|
|
}
|
|
|
|
.inner #tabs-tabbar-container,
|
|
.inner .button-toolbar.workspace-popup.tabbar-workspace-button.button-menu {
|
|
transition: width 0.1s;
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/*
|
|
Vivaldi VH VivalArc Edition
|
|
Version: 1.4.2
|
|
|
|
Target Vivaldi Browser version: 6.9
|
|
Target VivalArc version: 1.0.4.1
|
|
|
|
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.
|
|
|
|
This edition of Vivaldi VH is designed to be used in combination with the VivalArc CSS modification by tovi: https://arc.tovi.fun
|
|
|
|
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 {
|
|
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-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);
|
|
}
|
|
: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: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 footer:has(.toolbar-statusbar) .UrlBar-AddressField:has(#urlFieldInput:focus) {
|
|
background-color: var(--colorBgIntense);
|
|
}
|
|
#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);
|
|
}
|
|
: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: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 footer:has(.toolbar-statusbar) .UrlBar-SearchField:has(.searchfield-input:focus) {
|
|
background-color: var(--colorBgIntense);
|
|
}
|
|
#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;
|
|
}
|
|
: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.disable-titlebar #panels-container {
|
|
margin-top: calc(var(--vvh-vivalarc-os-specific-header) * (1 - min(1, var(--vvh-grid-title-bar, 0) + var(--vvh-grid-address-bar-top, 0) + var(--vvh-grid-bookmark-bar-top, 0))));
|
|
}
|
|
#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)) #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)) #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)) #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)) #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)) #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)) #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-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)) #browser:not(.disable-titlebar) #header .topmenu .horizontal-menu-pagetitle {
|
|
width: unset;
|
|
flex: 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.linux {
|
|
--vvh-vivalarc-os-specific-header: var(--linux-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.mac {
|
|
--vvh-vivalarc-os-specific-header: var(--mac-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.win {
|
|
--vvh-vivalarc-os-specific-header: var(--win-header);
|
|
}
|
|
:root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #titlebar,
|
|
: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 {
|
|
background: var(--colorTabBar) !important;
|
|
}
|
|
: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,
|
|
:root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #webview-container {
|
|
border-top: unset !important;
|
|
}
|
|
:root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) #titlebar {
|
|
min-height: var(--vvh-vivalarc-os-specific-header) !important;
|
|
}
|
|
: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::after {
|
|
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.disable-titlebar #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.disable-titlebar #webview-container {
|
|
margin-top: var(--vvh-vivalarc-os-specific-header);
|
|
}
|