539 lines
94 KiB
Plaintext
539 lines
94 KiB
Plaintext
/*
|
|
EXPERIMENTAL Vivaldi VH Addon - Zen Mode
|
|
Target Vivaldi VH version: 1.4.2
|
|
Target Vivaldi Browser versions: 6.5
|
|
|
|
This addon for Vivaldi VH adds a Command Chain Flag "vvh-enable-zen-mode", which hides the Pillar and panel until the sides of the browser window are hovered.
|
|
|
|
For instructions on how to enable this Command Chain Flag, refer to the documentation for Vivaldi VH.
|
|
|
|
Copyright (c) 2024 HKayn <https://hkayn.com>
|
|
*/
|
|
/*
|
|
For ideal conditions, make the following adjustments to your browser theme:
|
|
- Set panel transparency to 0%.
|
|
- Disable "Transparent Tab Bar".
|
|
*/
|
|
/*
|
|
Known issues with this addon:
|
|
- On the VivalArc edition, parts of the Pillar may lack a background.
|
|
- On the VivalArc edition, the webpage is not padded correctly.
|
|
- The title bar cannot be used to drag the window unless title-bar-full-width is enabled.
|
|
- During the fade-out delay, the panel and tab bar background will lose their blur effects if set.
|
|
- During the fade-out delay, a transparent tab bar may change its background color.
|
|
- When the mouse exits the browser window while crossing the zen mode hover area, elements within the toolbars may wrongfully think they're still being hovered.
|
|
- When the tab bar is not present, the Pillar does not disappear while the panel is open. (It should)
|
|
*/
|
|
:root {
|
|
/* Set custom parameters for the zen mode fade animation. Proceed with caution: */
|
|
--vvh-zen-mode-animation-duration: 0.1s;
|
|
--vvh-zen-mode-animation-timing-function: ease-out;
|
|
--vvh-zen-mode-fade-in-animation-delay: 0s;
|
|
--vvh-zen-mode-fade-out-animation-delay: 0.5s;
|
|
--vvh-zen-mode-animation-translate-length: 10px;
|
|
--vvh-zen-mode-hover-left-width: 25px;
|
|
--vvh-zen-mode-hover-right-width: 25px;
|
|
}
|
|
|
|
: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::after, :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::after {
|
|
content: 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)) :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::after, :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::after {
|
|
content: "" !important;
|
|
}
|
|
|
|
:root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) :has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-titlebar-full-width]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-titlebar-full-width])) #browser:not(.disable-titlebar) #titlebar,
|
|
:root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) :has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-titlebar-full-width]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-titlebar-full-width])) #browser:not(.disable-titlebar) #header .topmenu {
|
|
z-index: 9999 !important;
|
|
/*
|
|
// override properties set in zen-mode mixin
|
|
translate: 0 !important;
|
|
opacity: 1 !important;
|
|
animation: none !important;
|
|
transition: none !important;
|
|
visibility: visible !important;
|
|
z-index: 9999 !important; // prevents pseudo-elements from the zen-mode mixin from blocking this
|
|
*/
|
|
}
|
|
|
|
: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-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #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)) :has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser #titlebar #pagetitle {
|
|
pointer-events: all;
|
|
}
|
|
: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-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser #webview-container {
|
|
grid-column: 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)) :has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser #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)) :has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser #panels-container {
|
|
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)) :has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser #main > .inner > .tabbar-wrapper::after,
|
|
: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-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser #panels-container::after {
|
|
position: absolute;
|
|
top: -100vh;
|
|
height: 200vh;
|
|
pointer-events: auto;
|
|
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)) :has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser #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)) :has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser #panels-container > * {
|
|
z-index: 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-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser.tabs-left #main > .inner > .tabbar-wrapper::after,
|
|
: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-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser #panels-container.left::after {
|
|
left: 0;
|
|
width: var(--vvh-zen-mode-hover-left-width);
|
|
translate: var(--vvh-zen-mode-animation-translate-length);
|
|
content: "";
|
|
}
|
|
: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-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser.tabs-right #main > .inner > .tabbar-wrapper::after,
|
|
: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-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser #panels-container.right::after {
|
|
right: 0;
|
|
width: var(--vvh-zen-mode-hover-right-width);
|
|
translate: calc(-1 * var(--vvh-zen-mode-animation-translate-length));
|
|
content: "";
|
|
}
|
|
: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-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser.tabs-left #panels-container.left::after, :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-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser.tabs-right #panels-container.right::after {
|
|
content: 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-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser #tabs-container .resize .tab-strip,
|
|
: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-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser #tabs-container .resize .tab-position,
|
|
: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-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser #tabs-container .resize .toolbar-tabbar {
|
|
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)) :has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #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)) :has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser #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-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #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)) :has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser #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)) :has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser footer:has(.toolbar-statusbar), :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) :has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser.tabs-off #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-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser:not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-titlebar-full-width]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-titlebar-full-width]))) #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-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser:not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-titlebar-full-width]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-titlebar-full-width]))) #header .topmenu {
|
|
translate: calc(var(--vvh-grid-pillar-left, 0) * -1 * var(--vvh-zen-mode-animation-translate-length) + var(--vvh-grid-pillar-right, 0) * var(--vvh-zen-mode-animation-translate-length));
|
|
opacity: 0;
|
|
z-index: 1;
|
|
transition: translate var(--vvh-zen-mode-animation-duration) var(--vvh-zen-mode-animation-timing-function) var(--vvh-zen-mode-fade-out-animation-delay), opacity var(--vvh-zen-mode-animation-duration) var(--vvh-zen-mode-animation-timing-function) var(--vvh-zen-mode-fade-out-animation-delay);
|
|
animation: 0s var(--vvh-zen-mode-animation-timing-function) calc(var(--vvh-zen-mode-animation-duration) + var(--vvh-zen-mode-fade-out-animation-delay)) disable-pointer-events;
|
|
animation-fill-mode: forwards;
|
|
}
|
|
: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-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser: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)) :has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser: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: translate var(--vvh-zen-mode-animation-duration) var(--vvh-zen-mode-animation-timing-function) var(--vvh-zen-mode-fade-out-animation-delay), opacity var(--vvh-zen-mode-animation-duration) var(--vvh-zen-mode-animation-timing-function) var(--vvh-zen-mode-fade-out-animation-delay), 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-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser: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)) :has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser: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: translate var(--vvh-zen-mode-animation-duration) var(--vvh-zen-mode-animation-timing-function) var(--vvh-zen-mode-fade-out-animation-delay), opacity var(--vvh-zen-mode-animation-duration) var(--vvh-zen-mode-animation-timing-function) var(--vvh-zen-mode-fade-out-animation-delay), 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-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser: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-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser: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: translate var(--vvh-zen-mode-animation-duration) var(--vvh-zen-mode-animation-timing-function) var(--vvh-zen-mode-fade-out-animation-delay), opacity var(--vvh-zen-mode-animation-duration) var(--vvh-zen-mode-animation-timing-function) var(--vvh-zen-mode-fade-out-animation-delay), 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-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser: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-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser: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: translate var(--vvh-zen-mode-animation-duration) var(--vvh-zen-mode-animation-timing-function) var(--vvh-zen-mode-fade-out-animation-delay), opacity var(--vvh-zen-mode-animation-duration) var(--vvh-zen-mode-animation-timing-function) var(--vvh-zen-mode-fade-out-animation-delay), 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-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser #panels-container {
|
|
transition: width var(--duration) ease-out, translate var(--vvh-zen-mode-animation-duration) var(--vvh-zen-mode-animation-timing-function) var(--vvh-zen-mode-fade-out-animation-delay), opacity var(--vvh-zen-mode-animation-duration) var(--vvh-zen-mode-animation-timing-function) var(--vvh-zen-mode-fade-out-animation-delay) !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-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser:not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-titlebar-full-width]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-titlebar-full-width]))) #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-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser:not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-titlebar-full-width]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-titlebar-full-width]))) #header .topmenu {
|
|
z-index: 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-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser #panels-container {
|
|
z-index: 2 !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-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #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)) :has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser footer:has(.toolbar-statusbar) {
|
|
z-index: 3 !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-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser.tabs-left: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)) :has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser.tabs-right:has(#panels-container.left) #panels-container {
|
|
z-index: 4 !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-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser:not(.tabs-off) #panels-container {
|
|
translate: calc(var(--vvh-grid-panel-left, 0) * -1 * var(--vvh-zen-mode-animation-translate-length) + var(--vvh-grid-panel-right, 0) * var(--vvh-zen-mode-animation-translate-length));
|
|
opacity: 0;
|
|
z-index: 1;
|
|
transition: translate var(--vvh-zen-mode-animation-duration) var(--vvh-zen-mode-animation-timing-function) var(--vvh-zen-mode-fade-out-animation-delay), opacity var(--vvh-zen-mode-animation-duration) var(--vvh-zen-mode-animation-timing-function) var(--vvh-zen-mode-fade-out-animation-delay);
|
|
animation: 0s var(--vvh-zen-mode-animation-timing-function) calc(var(--vvh-zen-mode-animation-duration) + var(--vvh-zen-mode-fade-out-animation-delay)) disable-pointer-events;
|
|
animation-fill-mode: forwards;
|
|
}
|
|
@keyframes disable-pointer-events {
|
|
0%, 99% {
|
|
pointer-events: auto;
|
|
}
|
|
100% {
|
|
pointer-events: none;
|
|
}
|
|
}
|
|
@keyframes enable-pointer-events {
|
|
0%, 99% {
|
|
pointer-events: none;
|
|
}
|
|
100% {
|
|
pointer-events: auto;
|
|
}
|
|
}
|
|
: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-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser.toolbar-edit-mode #main > .inner > .tabbar-wrapper::after,
|
|
: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-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser.toolbar-edit-mode #panels-container::after,
|
|
: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-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser:has(#main > .inner > .tabbar-wrapper:hover,
|
|
#panels-container:hover,
|
|
> .button-popup,
|
|
> #vivaldi-tooltip:not(:empty),
|
|
#main .toolbar-mainbar > :hover, #main .toolbar-mainbar:focus-within,
|
|
#main .bookmark-bar > :hover, #main .bookmark-bar:focus-within,
|
|
#main > .inner > .tabbar-wrapper > :hover, #main > .inner > .tabbar-wrapper:focus-within,
|
|
footer:hover .toolbar-statusbar, footer:focus-within .toolbar-statusbar,
|
|
#panels-container > :hover, #panels-container:focus-within,
|
|
#panels-container:not(.icons, .switcher)) #main > .inner > .tabbar-wrapper::after,
|
|
: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-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser:has(#main > .inner > .tabbar-wrapper:hover,
|
|
#panels-container:hover,
|
|
> .button-popup,
|
|
> #vivaldi-tooltip:not(:empty),
|
|
#main .toolbar-mainbar > :hover, #main .toolbar-mainbar:focus-within,
|
|
#main .bookmark-bar > :hover, #main .bookmark-bar:focus-within,
|
|
#main > .inner > .tabbar-wrapper > :hover, #main > .inner > .tabbar-wrapper:focus-within,
|
|
footer:hover .toolbar-statusbar, footer:focus-within .toolbar-statusbar,
|
|
#panels-container > :hover, #panels-container:focus-within,
|
|
#panels-container:not(.icons, .switcher)) #panels-container::after,
|
|
: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-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser:not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-titlebar-full-width]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-titlebar-full-width]))):has(#titlebar > :hover, #titlebar:focus-within,
|
|
#header .topmenu > :hover, #header .topmenu:focus-within) #main > .inner > .tabbar-wrapper::after,
|
|
: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-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser:not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-titlebar-full-width]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-titlebar-full-width]))):has(#titlebar > :hover, #titlebar:focus-within,
|
|
#header .topmenu > :hover, #header .topmenu:focus-within) #panels-container::after {
|
|
content: 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-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser.toolbar-edit-mode #tabs-container .resize .tab-strip,
|
|
: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-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser.toolbar-edit-mode #tabs-container .resize .tab-position,
|
|
: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-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser.toolbar-edit-mode #tabs-container .resize .toolbar-tabbar,
|
|
: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-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser:has(#main > .inner > .tabbar-wrapper:hover,
|
|
#panels-container:hover,
|
|
> .button-popup,
|
|
> #vivaldi-tooltip:not(:empty),
|
|
#main .toolbar-mainbar > :hover, #main .toolbar-mainbar:focus-within,
|
|
#main .bookmark-bar > :hover, #main .bookmark-bar:focus-within,
|
|
#main > .inner > .tabbar-wrapper > :hover, #main > .inner > .tabbar-wrapper:focus-within,
|
|
footer:hover .toolbar-statusbar, footer:focus-within .toolbar-statusbar,
|
|
#panels-container > :hover, #panels-container:focus-within,
|
|
#panels-container:not(.icons, .switcher)) #tabs-container .resize .tab-strip,
|
|
: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-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser:has(#main > .inner > .tabbar-wrapper:hover,
|
|
#panels-container:hover,
|
|
> .button-popup,
|
|
> #vivaldi-tooltip:not(:empty),
|
|
#main .toolbar-mainbar > :hover, #main .toolbar-mainbar:focus-within,
|
|
#main .bookmark-bar > :hover, #main .bookmark-bar:focus-within,
|
|
#main > .inner > .tabbar-wrapper > :hover, #main > .inner > .tabbar-wrapper:focus-within,
|
|
footer:hover .toolbar-statusbar, footer:focus-within .toolbar-statusbar,
|
|
#panels-container > :hover, #panels-container:focus-within,
|
|
#panels-container:not(.icons, .switcher)) #tabs-container .resize .tab-position,
|
|
: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-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser:has(#main > .inner > .tabbar-wrapper:hover,
|
|
#panels-container:hover,
|
|
> .button-popup,
|
|
> #vivaldi-tooltip:not(:empty),
|
|
#main .toolbar-mainbar > :hover, #main .toolbar-mainbar:focus-within,
|
|
#main .bookmark-bar > :hover, #main .bookmark-bar:focus-within,
|
|
#main > .inner > .tabbar-wrapper > :hover, #main > .inner > .tabbar-wrapper:focus-within,
|
|
footer:hover .toolbar-statusbar, footer:focus-within .toolbar-statusbar,
|
|
#panels-container > :hover, #panels-container:focus-within,
|
|
#panels-container:not(.icons, .switcher)) #tabs-container .resize .toolbar-tabbar,
|
|
: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-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser:not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-titlebar-full-width]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-titlebar-full-width]))):has(#titlebar > :hover, #titlebar:focus-within,
|
|
#header .topmenu > :hover, #header .topmenu:focus-within) #tabs-container .resize .tab-strip,
|
|
: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-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser:not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-titlebar-full-width]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-titlebar-full-width]))):has(#titlebar > :hover, #titlebar:focus-within,
|
|
#header .topmenu > :hover, #header .topmenu:focus-within) #tabs-container .resize .tab-position,
|
|
: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-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser:not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-titlebar-full-width]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-titlebar-full-width]))):has(#titlebar > :hover, #titlebar:focus-within,
|
|
#header .topmenu > :hover, #header .topmenu:focus-within) #tabs-container .resize .toolbar-tabbar {
|
|
animation: 0s linear var(--vvh-zen-mode-fade-in-animation-delay) enable-pointer-events;
|
|
animation-fill-mode: forwards;
|
|
}
|
|
: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-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser.toolbar-edit-mode:not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-titlebar-full-width]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-titlebar-full-width]))) #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-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser.toolbar-edit-mode:not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-titlebar-full-width]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-titlebar-full-width]))) #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-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser.toolbar-edit-mode #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-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser.toolbar-edit-mode #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-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser.toolbar-edit-mode #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-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser.toolbar-edit-mode #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)) :has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser.toolbar-edit-mode footer:has(.toolbar-statusbar), :root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) :has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser.toolbar-edit-mode.tabs-off #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-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser:has(#main > .inner > .tabbar-wrapper:hover,
|
|
#panels-container:hover,
|
|
> .button-popup,
|
|
> #vivaldi-tooltip:not(:empty),
|
|
#main .toolbar-mainbar > :hover, #main .toolbar-mainbar:focus-within,
|
|
#main .bookmark-bar > :hover, #main .bookmark-bar:focus-within,
|
|
#main > .inner > .tabbar-wrapper > :hover, #main > .inner > .tabbar-wrapper:focus-within,
|
|
footer:hover .toolbar-statusbar, footer:focus-within .toolbar-statusbar,
|
|
#panels-container > :hover, #panels-container:focus-within,
|
|
#panels-container:not(.icons, .switcher)):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-titlebar-full-width]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-titlebar-full-width]))) #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-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser:has(#main > .inner > .tabbar-wrapper:hover,
|
|
#panels-container:hover,
|
|
> .button-popup,
|
|
> #vivaldi-tooltip:not(:empty),
|
|
#main .toolbar-mainbar > :hover, #main .toolbar-mainbar:focus-within,
|
|
#main .bookmark-bar > :hover, #main .bookmark-bar:focus-within,
|
|
#main > .inner > .tabbar-wrapper > :hover, #main > .inner > .tabbar-wrapper:focus-within,
|
|
footer:hover .toolbar-statusbar, footer:focus-within .toolbar-statusbar,
|
|
#panels-container > :hover, #panels-container:focus-within,
|
|
#panels-container:not(.icons, .switcher)):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-titlebar-full-width]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-titlebar-full-width]))) #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-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser:has(#main > .inner > .tabbar-wrapper:hover,
|
|
#panels-container:hover,
|
|
> .button-popup,
|
|
> #vivaldi-tooltip:not(:empty),
|
|
#main .toolbar-mainbar > :hover, #main .toolbar-mainbar:focus-within,
|
|
#main .bookmark-bar > :hover, #main .bookmark-bar:focus-within,
|
|
#main > .inner > .tabbar-wrapper > :hover, #main > .inner > .tabbar-wrapper:focus-within,
|
|
footer:hover .toolbar-statusbar, footer:focus-within .toolbar-statusbar,
|
|
#panels-container > :hover, #panels-container:focus-within,
|
|
#panels-container:not(.icons, .switcher)) #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-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser:has(#main > .inner > .tabbar-wrapper:hover,
|
|
#panels-container:hover,
|
|
> .button-popup,
|
|
> #vivaldi-tooltip:not(:empty),
|
|
#main .toolbar-mainbar > :hover, #main .toolbar-mainbar:focus-within,
|
|
#main .bookmark-bar > :hover, #main .bookmark-bar:focus-within,
|
|
#main > .inner > .tabbar-wrapper > :hover, #main > .inner > .tabbar-wrapper:focus-within,
|
|
footer:hover .toolbar-statusbar, footer:focus-within .toolbar-statusbar,
|
|
#panels-container > :hover, #panels-container:focus-within,
|
|
#panels-container:not(.icons, .switcher)) #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-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser:has(#main > .inner > .tabbar-wrapper:hover,
|
|
#panels-container:hover,
|
|
> .button-popup,
|
|
> #vivaldi-tooltip:not(:empty),
|
|
#main .toolbar-mainbar > :hover, #main .toolbar-mainbar:focus-within,
|
|
#main .bookmark-bar > :hover, #main .bookmark-bar:focus-within,
|
|
#main > .inner > .tabbar-wrapper > :hover, #main > .inner > .tabbar-wrapper:focus-within,
|
|
footer:hover .toolbar-statusbar, footer:focus-within .toolbar-statusbar,
|
|
#panels-container > :hover, #panels-container:focus-within,
|
|
#panels-container:not(.icons, .switcher)) #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-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser:has(#main > .inner > .tabbar-wrapper:hover,
|
|
#panels-container:hover,
|
|
> .button-popup,
|
|
> #vivaldi-tooltip:not(:empty),
|
|
#main .toolbar-mainbar > :hover, #main .toolbar-mainbar:focus-within,
|
|
#main .bookmark-bar > :hover, #main .bookmark-bar:focus-within,
|
|
#main > .inner > .tabbar-wrapper > :hover, #main > .inner > .tabbar-wrapper:focus-within,
|
|
footer:hover .toolbar-statusbar, footer:focus-within .toolbar-statusbar,
|
|
#panels-container > :hover, #panels-container:focus-within,
|
|
#panels-container:not(.icons, .switcher)) #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)) :has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser:has(#main > .inner > .tabbar-wrapper:hover,
|
|
#panels-container:hover,
|
|
> .button-popup,
|
|
> #vivaldi-tooltip:not(:empty),
|
|
#main .toolbar-mainbar > :hover, #main .toolbar-mainbar:focus-within,
|
|
#main .bookmark-bar > :hover, #main .bookmark-bar:focus-within,
|
|
#main > .inner > .tabbar-wrapper > :hover, #main > .inner > .tabbar-wrapper:focus-within,
|
|
footer:hover .toolbar-statusbar, footer:focus-within .toolbar-statusbar,
|
|
#panels-container > :hover, #panels-container:focus-within,
|
|
#panels-container:not(.icons, .switcher)) footer:has(.toolbar-statusbar),
|
|
:root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) :has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser:has(#main > .inner > .tabbar-wrapper:hover,
|
|
#panels-container:hover,
|
|
> .button-popup,
|
|
> #vivaldi-tooltip:not(:empty),
|
|
#main .toolbar-mainbar > :hover, #main .toolbar-mainbar:focus-within,
|
|
#main .bookmark-bar > :hover, #main .bookmark-bar:focus-within,
|
|
#main > .inner > .tabbar-wrapper > :hover, #main > .inner > .tabbar-wrapper:focus-within,
|
|
footer:hover .toolbar-statusbar, footer:focus-within .toolbar-statusbar,
|
|
#panels-container > :hover, #panels-container:focus-within,
|
|
#panels-container:not(.icons, .switcher)).tabs-off #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-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser:not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-titlebar-full-width]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-titlebar-full-width]))):has(#titlebar > :hover, #titlebar:focus-within,
|
|
#header .topmenu > :hover, #header .topmenu:focus-within):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-titlebar-full-width]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-titlebar-full-width]))) #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-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser:not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-titlebar-full-width]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-titlebar-full-width]))):has(#titlebar > :hover, #titlebar:focus-within,
|
|
#header .topmenu > :hover, #header .topmenu:focus-within):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-titlebar-full-width]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-titlebar-full-width]))) #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-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser:not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-titlebar-full-width]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-titlebar-full-width]))):has(#titlebar > :hover, #titlebar:focus-within,
|
|
#header .topmenu > :hover, #header .topmenu:focus-within) #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-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser:not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-titlebar-full-width]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-titlebar-full-width]))):has(#titlebar > :hover, #titlebar:focus-within,
|
|
#header .topmenu > :hover, #header .topmenu:focus-within) #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-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser:not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-titlebar-full-width]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-titlebar-full-width]))):has(#titlebar > :hover, #titlebar:focus-within,
|
|
#header .topmenu > :hover, #header .topmenu:focus-within) #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-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser:not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-titlebar-full-width]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-titlebar-full-width]))):has(#titlebar > :hover, #titlebar:focus-within,
|
|
#header .topmenu > :hover, #header .topmenu:focus-within) #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)) :has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser:not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-titlebar-full-width]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-titlebar-full-width]))):has(#titlebar > :hover, #titlebar:focus-within,
|
|
#header .topmenu > :hover, #header .topmenu:focus-within) footer:has(.toolbar-statusbar),
|
|
:root:has(#browser:is(.tabs-left, .tabs-right):not(.fullscreen, .minimal-ui), #browser.tabs-off:not(.fullscreen, .minimal-ui) #panels-container:not(.switcher)) :has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser:not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-titlebar-full-width]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-titlebar-full-width]))):has(#titlebar > :hover, #titlebar:focus-within,
|
|
#header .topmenu > :hover, #header .topmenu:focus-within).tabs-off #panels-container {
|
|
translate: 0;
|
|
opacity: 1;
|
|
transition: translate var(--vvh-zen-mode-animation-duration) var(--vvh-zen-mode-animation-timing-function) var(--vvh-zen-mode-fade-in-animation-delay), opacity var(--vvh-zen-mode-animation-duration) var(--vvh-zen-mode-animation-timing-function) var(--vvh-zen-mode-fade-in-animation-delay);
|
|
animation: 0s linear var(--vvh-zen-mode-fade-in-animation-delay) enable-pointer-events;
|
|
animation-fill-mode: forwards;
|
|
}
|
|
: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-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser.toolbar-edit-mode: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)) :has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser.toolbar-edit-mode: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),
|
|
: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-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser:has(#main > .inner > .tabbar-wrapper:hover,
|
|
#panels-container:hover,
|
|
> .button-popup,
|
|
> #vivaldi-tooltip:not(:empty),
|
|
#main .toolbar-mainbar > :hover, #main .toolbar-mainbar:focus-within,
|
|
#main .bookmark-bar > :hover, #main .bookmark-bar:focus-within,
|
|
#main > .inner > .tabbar-wrapper > :hover, #main > .inner > .tabbar-wrapper:focus-within,
|
|
footer:hover .toolbar-statusbar, footer:focus-within .toolbar-statusbar,
|
|
#panels-container > :hover, #panels-container:focus-within,
|
|
#panels-container:not(.icons, .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)) :has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser:has(#main > .inner > .tabbar-wrapper:hover,
|
|
#panels-container:hover,
|
|
> .button-popup,
|
|
> #vivaldi-tooltip:not(:empty),
|
|
#main .toolbar-mainbar > :hover, #main .toolbar-mainbar:focus-within,
|
|
#main .bookmark-bar > :hover, #main .bookmark-bar:focus-within,
|
|
#main > .inner > .tabbar-wrapper > :hover, #main > .inner > .tabbar-wrapper:focus-within,
|
|
footer:hover .toolbar-statusbar, footer:focus-within .toolbar-statusbar,
|
|
#panels-container > :hover, #panels-container:focus-within,
|
|
#panels-container:not(.icons, .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),
|
|
: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-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser:not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-titlebar-full-width]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-titlebar-full-width]))):has(#titlebar > :hover, #titlebar:focus-within,
|
|
#header .topmenu > :hover, #header .topmenu:focus-within):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)) :has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser:not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-titlebar-full-width]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-titlebar-full-width]))):has(#titlebar > :hover, #titlebar:focus-within,
|
|
#header .topmenu > :hover, #header .topmenu:focus-within):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: translate var(--vvh-zen-mode-animation-duration) var(--vvh-zen-mode-animation-timing-function) var(--vvh-zen-mode-fade-in-animation-delay), opacity var(--vvh-zen-mode-animation-duration) var(--vvh-zen-mode-animation-timing-function) var(--vvh-zen-mode-fade-in-animation-delay), 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-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser.toolbar-edit-mode: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)) :has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser.toolbar-edit-mode: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),
|
|
: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-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser:has(#main > .inner > .tabbar-wrapper:hover,
|
|
#panels-container:hover,
|
|
> .button-popup,
|
|
> #vivaldi-tooltip:not(:empty),
|
|
#main .toolbar-mainbar > :hover, #main .toolbar-mainbar:focus-within,
|
|
#main .bookmark-bar > :hover, #main .bookmark-bar:focus-within,
|
|
#main > .inner > .tabbar-wrapper > :hover, #main > .inner > .tabbar-wrapper:focus-within,
|
|
footer:hover .toolbar-statusbar, footer:focus-within .toolbar-statusbar,
|
|
#panels-container > :hover, #panels-container:focus-within,
|
|
#panels-container:not(.icons, .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)) :has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser:has(#main > .inner > .tabbar-wrapper:hover,
|
|
#panels-container:hover,
|
|
> .button-popup,
|
|
> #vivaldi-tooltip:not(:empty),
|
|
#main .toolbar-mainbar > :hover, #main .toolbar-mainbar:focus-within,
|
|
#main .bookmark-bar > :hover, #main .bookmark-bar:focus-within,
|
|
#main > .inner > .tabbar-wrapper > :hover, #main > .inner > .tabbar-wrapper:focus-within,
|
|
footer:hover .toolbar-statusbar, footer:focus-within .toolbar-statusbar,
|
|
#panels-container > :hover, #panels-container:focus-within,
|
|
#panels-container:not(.icons, .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),
|
|
: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-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser:not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-titlebar-full-width]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-titlebar-full-width]))):has(#titlebar > :hover, #titlebar:focus-within,
|
|
#header .topmenu > :hover, #header .topmenu:focus-within):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)) :has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser:not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-titlebar-full-width]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-titlebar-full-width]))):has(#titlebar > :hover, #titlebar:focus-within,
|
|
#header .topmenu > :hover, #header .topmenu:focus-within):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: translate var(--vvh-zen-mode-animation-duration) var(--vvh-zen-mode-animation-timing-function) var(--vvh-zen-mode-fade-in-animation-delay), opacity var(--vvh-zen-mode-animation-duration) var(--vvh-zen-mode-animation-timing-function) var(--vvh-zen-mode-fade-in-animation-delay), 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-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser.toolbar-edit-mode: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-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser.toolbar-edit-mode: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),
|
|
: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-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser:has(#main > .inner > .tabbar-wrapper:hover,
|
|
#panels-container:hover,
|
|
> .button-popup,
|
|
> #vivaldi-tooltip:not(:empty),
|
|
#main .toolbar-mainbar > :hover, #main .toolbar-mainbar:focus-within,
|
|
#main .bookmark-bar > :hover, #main .bookmark-bar:focus-within,
|
|
#main > .inner > .tabbar-wrapper > :hover, #main > .inner > .tabbar-wrapper:focus-within,
|
|
footer:hover .toolbar-statusbar, footer:focus-within .toolbar-statusbar,
|
|
#panels-container > :hover, #panels-container:focus-within,
|
|
#panels-container:not(.icons, .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-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser:has(#main > .inner > .tabbar-wrapper:hover,
|
|
#panels-container:hover,
|
|
> .button-popup,
|
|
> #vivaldi-tooltip:not(:empty),
|
|
#main .toolbar-mainbar > :hover, #main .toolbar-mainbar:focus-within,
|
|
#main .bookmark-bar > :hover, #main .bookmark-bar:focus-within,
|
|
#main > .inner > .tabbar-wrapper > :hover, #main > .inner > .tabbar-wrapper:focus-within,
|
|
footer:hover .toolbar-statusbar, footer:focus-within .toolbar-statusbar,
|
|
#panels-container > :hover, #panels-container:focus-within,
|
|
#panels-container:not(.icons, .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),
|
|
: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-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser:not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-titlebar-full-width]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-titlebar-full-width]))):has(#titlebar > :hover, #titlebar:focus-within,
|
|
#header .topmenu > :hover, #header .topmenu:focus-within):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-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser:not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-titlebar-full-width]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-titlebar-full-width]))):has(#titlebar > :hover, #titlebar:focus-within,
|
|
#header .topmenu > :hover, #header .topmenu:focus-within):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: translate var(--vvh-zen-mode-animation-duration) var(--vvh-zen-mode-animation-timing-function) var(--vvh-zen-mode-fade-out-animation-delay), opacity var(--vvh-zen-mode-animation-duration) var(--vvh-zen-mode-animation-timing-function) var(--vvh-zen-mode-fade-out-animation-delay), 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-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser.toolbar-edit-mode: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-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser.toolbar-edit-mode: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),
|
|
: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-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser:has(#main > .inner > .tabbar-wrapper:hover,
|
|
#panels-container:hover,
|
|
> .button-popup,
|
|
> #vivaldi-tooltip:not(:empty),
|
|
#main .toolbar-mainbar > :hover, #main .toolbar-mainbar:focus-within,
|
|
#main .bookmark-bar > :hover, #main .bookmark-bar:focus-within,
|
|
#main > .inner > .tabbar-wrapper > :hover, #main > .inner > .tabbar-wrapper:focus-within,
|
|
footer:hover .toolbar-statusbar, footer:focus-within .toolbar-statusbar,
|
|
#panels-container > :hover, #panels-container:focus-within,
|
|
#panels-container:not(.icons, .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-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser:has(#main > .inner > .tabbar-wrapper:hover,
|
|
#panels-container:hover,
|
|
> .button-popup,
|
|
> #vivaldi-tooltip:not(:empty),
|
|
#main .toolbar-mainbar > :hover, #main .toolbar-mainbar:focus-within,
|
|
#main .bookmark-bar > :hover, #main .bookmark-bar:focus-within,
|
|
#main > .inner > .tabbar-wrapper > :hover, #main > .inner > .tabbar-wrapper:focus-within,
|
|
footer:hover .toolbar-statusbar, footer:focus-within .toolbar-statusbar,
|
|
#panels-container > :hover, #panels-container:focus-within,
|
|
#panels-container:not(.icons, .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),
|
|
: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-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser:not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-titlebar-full-width]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-titlebar-full-width]))):has(#titlebar > :hover, #titlebar:focus-within,
|
|
#header .topmenu > :hover, #header .topmenu:focus-within):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-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser:not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-titlebar-full-width]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-titlebar-full-width]))):has(#titlebar > :hover, #titlebar:focus-within,
|
|
#header .topmenu > :hover, #header .topmenu:focus-within):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: translate var(--vvh-zen-mode-animation-duration) var(--vvh-zen-mode-animation-timing-function) var(--vvh-zen-mode-fade-out-animation-delay), opacity var(--vvh-zen-mode-animation-duration) var(--vvh-zen-mode-animation-timing-function) var(--vvh-zen-mode-fade-out-animation-delay), 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-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser.toolbar-edit-mode #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-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser:has(#main > .inner > .tabbar-wrapper:hover,
|
|
#panels-container:hover,
|
|
> .button-popup,
|
|
> #vivaldi-tooltip:not(:empty),
|
|
#main .toolbar-mainbar > :hover, #main .toolbar-mainbar:focus-within,
|
|
#main .bookmark-bar > :hover, #main .bookmark-bar:focus-within,
|
|
#main > .inner > .tabbar-wrapper > :hover, #main > .inner > .tabbar-wrapper:focus-within,
|
|
footer:hover .toolbar-statusbar, footer:focus-within .toolbar-statusbar,
|
|
#panels-container > :hover, #panels-container:focus-within,
|
|
#panels-container:not(.icons, .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)) :has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser:not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-titlebar-full-width]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-titlebar-full-width]))):has(#titlebar > :hover, #titlebar:focus-within,
|
|
#header .topmenu > :hover, #header .topmenu:focus-within) #panels-container {
|
|
transition: width var(--duration) ease-out, translate var(--vvh-zen-mode-animation-duration) var(--vvh-zen-mode-animation-timing-function) var(--vvh-zen-mode-fade-in-animation-delay), opacity var(--vvh-zen-mode-animation-duration) var(--vvh-zen-mode-animation-timing-function) var(--vvh-zen-mode-fade-in-animation-delay) !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-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser.toolbar-edit-mode:not(.tabs-off) #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-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser:has(#main > .inner > .tabbar-wrapper:hover,
|
|
#panels-container:hover,
|
|
> .button-popup,
|
|
> #vivaldi-tooltip:not(:empty),
|
|
#main .toolbar-mainbar > :hover, #main .toolbar-mainbar:focus-within,
|
|
#main .bookmark-bar > :hover, #main .bookmark-bar:focus-within,
|
|
#main > .inner > .tabbar-wrapper > :hover, #main > .inner > .tabbar-wrapper:focus-within,
|
|
footer:hover .toolbar-statusbar, footer:focus-within .toolbar-statusbar,
|
|
#panels-container > :hover, #panels-container:focus-within,
|
|
#panels-container:not(.icons, .switcher)):not(.tabs-off) #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-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser:not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-titlebar-full-width]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-titlebar-full-width]))):has(#titlebar > :hover, #titlebar:focus-within,
|
|
#header .topmenu > :hover, #header .topmenu:focus-within):not(.tabs-off) #panels-container {
|
|
translate: 0;
|
|
opacity: 1;
|
|
animation: 0s linear var(--vvh-zen-mode-fade-in-animation-delay) enable-pointer-events;
|
|
animation-fill-mode: forwards;
|
|
}
|
|
: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-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser.toolbar-edit-mode.tabs-left: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)) :has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser.toolbar-edit-mode.tabs-right: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-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser:has(#main > .inner > .tabbar-wrapper:hover,
|
|
#panels-container:hover,
|
|
> .button-popup,
|
|
> #vivaldi-tooltip:not(:empty),
|
|
#main .toolbar-mainbar > :hover, #main .toolbar-mainbar:focus-within,
|
|
#main .bookmark-bar > :hover, #main .bookmark-bar:focus-within,
|
|
#main > .inner > .tabbar-wrapper > :hover, #main > .inner > .tabbar-wrapper:focus-within,
|
|
footer:hover .toolbar-statusbar, footer:focus-within .toolbar-statusbar,
|
|
#panels-container > :hover, #panels-container:focus-within,
|
|
#panels-container:not(.icons, .switcher)).tabs-left: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)) :has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser:has(#main > .inner > .tabbar-wrapper:hover,
|
|
#panels-container:hover,
|
|
> .button-popup,
|
|
> #vivaldi-tooltip:not(:empty),
|
|
#main .toolbar-mainbar > :hover, #main .toolbar-mainbar:focus-within,
|
|
#main .bookmark-bar > :hover, #main .bookmark-bar:focus-within,
|
|
#main > .inner > .tabbar-wrapper > :hover, #main > .inner > .tabbar-wrapper:focus-within,
|
|
footer:hover .toolbar-statusbar, footer:focus-within .toolbar-statusbar,
|
|
#panels-container > :hover, #panels-container:focus-within,
|
|
#panels-container:not(.icons, .switcher)).tabs-right: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-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser:not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-titlebar-full-width]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-titlebar-full-width]))):has(#titlebar > :hover, #titlebar:focus-within,
|
|
#header .topmenu > :hover, #header .topmenu:focus-within).tabs-left: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)) :has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-zen-mode]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-zen-mode])) #browser:not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-enable-titlebar-full-width]):not(:has(:is(#main .toolbar-mainbar, #panels-container, footer .toolbar-statusbar) button[title=vvh-disable-titlebar-full-width]))):has(#titlebar > :hover, #titlebar:focus-within,
|
|
#header .topmenu > :hover, #header .topmenu:focus-within).tabs-right:has(#panels-container.left) #panels-container {
|
|
translate: 0;
|
|
}
|
|
|
|
#browser:not(.toolbar-edit-mode) .button-toolbar.toolbar-command:has(button[title=vvh-enable-zen-mode],
|
|
button[title=vvh-disable-zen-mode]) {
|
|
display: none;
|
|
}
|
|
|
|
#browser.toolbar-edit-mode .button-toolbar.toolbar-command:has(button[title=vvh-enable-zen-mode], button[title=vvh-disable-zen-mode]) {
|
|
opacity: 0.5;
|
|
}
|
|
#browser.toolbar-edit-mode .button-toolbar.toolbar-command:has(button[title=vvh-enable-zen-mode], button[title=vvh-disable-zen-mode]) > button::before {
|
|
content: " ";
|
|
pointer-events: none;
|
|
position: absolute;
|
|
inset: 0;
|
|
border: 1px dashed;
|
|
border-radius: var(--radius);
|
|
}
|