Autohiding fullscreen UI
-
Sometimes I'm like "if I could just quickly switch to that one tab..." in fullscreen mode. But there's no UI. Of course, it's fullscreen. But what if there was?
This mod makes Vivaldi's UI autohide instead of vanish in fullscreen mode.
CSS:
/* Declare variables: */ #browser { --header-height: 37px; --header-height-offset: -36px; } #browser.tabs-top.tabs-at-edge { --header-height: 30px; --header-height-offset: -29px; } #browser.tabs-left, #browser.tabs-right, #browser.tabs-bottom { --header-height: 25px; --header-height-offset: -24px; } /* Style: */ #browser.fullscreen.win #header { display: block; position: fixed; left: 0; right: 0; top: 0; z-index: 1; background: var(--colorBg); transition: top 200ms; box-shadow: 0 0 1px #000; } #browser.fullscreen.win.tabs-left #header, #browser.fullscreen.win.tabs-right #header, #browser.fullscreen.win.tabs-bottom #header { background: var(--colorAccentBg); } #browser.fullscreen:not(.fullscreenHoverUI) #header { top: var(--header-height-offset); } #browser.fullscreen:not(.fullscreenHoverUI) #header, #browser.fullscreen:not(.fullscreenHoverUI) #tabs-container, #browser.fullscreen:not(.fullscreenHoverUI) .toolbar-addressbar, #browser.fullscreen:not(.fullscreenHoverUI) #panels-container, #browser.fullscreen:not(.fullscreenHoverUI) #main #tabs-container.left, #browser.fullscreen:not(.fullscreenHoverUI) #main #tabs-container.right, #browser.fullscreen:not(.fullscreenHoverUI) #main #tabs-container.bottom { opacity: 0; transition: top 200ms 500ms, right 200ms 500ms, bottom 200ms 500ms, left 200ms 500ms, opacity 0ms 700ms; } #browser.fullscreen.win #header > #tabs-container { display: flex; } #browser.fullscreen #main #tabs-container.left, #browser.fullscreen #main #tabs-container.right, #browser.fullscreen #main #tabs-container.bottom { display: flex; transition: top 200ms, right 200ms, bottom 200ms, left 200ms; } #browser.fullscreen #main #tabs-container { z-index: 1; position: fixed; bottom: 0; background: var(--colorBg); } #browser.fullscreen:not(.fullscreenHoverUI) #main #tabs-container.left { left: -100%; } #browser.fullscreen.fullscreenHoverUI #main #tabs-container.left { left: 0; } #browser.fullscreen #main #tabs-container.left, #browser.fullscreen #main #tabs-container.right { top: 59px; } #browser.fullscreen:not(.fullscreenHoverUI) #main #tabs-container.right { right: -100%; } #browser.fullscreen.fullscreenHoverUI #main #tabs-container.right { right: 0; } #browser.fullscreen:not(.fullscreenHoverUI) #main #tabs-container.bottom { bottom: -100%; } #browser.fullscreen #main #tabs-container.bottom { right: 0; left: 0; } #browser.fullscreen.win #header button.window-maximize::before { position: relative; top: 4px; left: -3px; content: "β"; } #browser.fullscreen.win.win10 #header button.window-maximize::before { left: 8px; } #browser.fullscreen.win #header button.window-maximize::after { position: relative; top: -36px; left: 4px; content: "β"; } #browser.fullscreen.win.win10 #header button.window-maximize::after { top: -4px; left: -8px; } /* address bar */ #browser.fullscreen.win #main .toolbar-addressbar { display: flex; position: fixed; right: 0; left: 0; top: -40px; z-index: 1; } #browser.fullscreen.fullscreenHoverUI.win #main .toolbar-addressbar { transition: 200ms; top: var(--header-height); } #browser.fullscreen.fullscreenHoverUI.win.tabs-left #main .toolbar-addressbar, #browser.fullscreen.fullscreenHoverUI.win.tabs-right #main .toolbar-addressbar, #browser.fullscreen.fullscreenHoverUI.win.tabs-bottom #main .toolbar-addressbar { top:25px; } #browser.fullscreen.win #header > #tabs-container { display: flex; } /* Remove spacing at edge of window: */ #browser.win.win10.tabs-at-edge.fullscreen.tabs-top #header #titlebar .window-buttongroup button { height: 30px } .fullscreen.tabs-at-edge #tabs-container.top { padding-top: 0 } .fullscreen.tabs-at-edge #tabs-container.bottom { padding: 0 } .fullscreen.tabs-at-edge #tabs-container.bottom .tab-strip { margin: 0 } .fullscreen.tabs-at-edge #tabs-container.top .tab-group-indicator { top: -2px } .fullscreen.tabs-at-edge #tabs-container.bottom .tab-group-indicator { bottom: -3px } #browser.win.fullscreen.tabs-at-edge .vivaldi { height: 30px } /* fullscreen button * / #browser.fullscreen.win #header button.window-fullscreen { display: none; } #browser:not(.fullscreen).win.win10 #tabs-container.top { padding-right: 190px; } #browser:not(.fullscreen).win #tabs-container.top { padding-right: 150px; }*/
JS:
(function initialize() { var windowbuttons = document.querySelector("#titlebar .window-buttongroup"); if (windowbuttons === null) { window.setTimeout(initialize, 200); return; } var fullscreenButton = document.createElement("button"); fullscreenButton.tabindex = -1; fullscreenButton.className = "window-fullscreen"; fullscreenButton.innerHTML = "β€’"; fullscreenButton.addEventListener("click", function(){ if (typeof(document.body.requestFullscreen) === "function") document.body.requestFullscreen(); else document.body.webkitRequestFullscreen(); }, false); //windowbuttons.insertBefore(fullscreenButton, windowbuttons.firstChild); // needs app.window.fullscreen permission document.querySelector("#webview-container").addEventListener("mouseleave", showUIinFullscreen, false); document.querySelector("#webview-container").addEventListener("mouseenter", hideUIinFullscreen, false); document.querySelector("button.window-maximize").addEventListener("click", leaveFullscreen, true); document.addEventListener("keyup", function(e) { if (e.key === "F11" && e.shiftKey === true) { if(document.querySelector("#browser.fullscreenHoverUI") === null) showUIinFullscreen(); else hideUIinFullscreen(); } }, false); })(); function showUIinFullscreen() { if(document.querySelector("#browser.fullscreen") === null) return; document.querySelector("#browser").classList.add("fullscreenHoverUI"); } function hideUIinFullscreen() { document.querySelector("#browser").classList.remove("fullscreenHoverUI"); } function leaveFullscreen() { if (typeof(document.exitFullscreen) === "function") document.exitFullscreen(); else if (typeof(document.webkitExitFullscreen) === "function") document.webkitExitFullscreen(); }
How to use:
- switch to fullscreen mode
- move your mouse to any corner of your screen or press {{Shift+F11}}
Known "issues":
- only tested on Windows
- You need to double-click the "exit fullscreen" button (it has no functionality of its own - it triggers a native restore)
- the internal patch that hides the cursor in fullscreen mode makes the UI show -Β you can use the {{Shift+F11}}Β shortcut for hiding it
-
GREAT work!
Is there any way to make it retain the "Remove Tab Spacing in Maximized Windows" setting?
Right now there's a gap above the tabs that I'd love to get rid off.Thanks in advance!
Kris
-
Hi Kris,
I added support for it and updated the script above
Note however, that this doesn't actually make switching tabs at the edge possible as there seems to be an about 5px tall unresponsive strip at the very top that also doesn't react to hover or right-clicks. -
Thanks, that looks a lot better!
The 5px unresponsive strip at the top is slightly annoying, but I guess I'll have to live with thatA few questions:
1: See the horizontal line between the tabs and address bar:
What do I need to change to fix this?
http://image.prntscr.com/image/ba4b2007a2d64c588e5ac17630852b7e.png
(for some reason it won't let me insert the screenshot into the post as an image).2. Is there any way to make the UI slide down at the press of a keyboard button?
Say, if I press my keyboard macro for Focus Address Field, could this make the UI appear (without going out of fullscreen)?Kris
-
First of all I want to thank for making this awsm script
but rightnow It's really buggy will you able to fix it Christoph142
Plz see this gifv too see what's exactly I am dealing with!!
https://gfycat.com/ImpassionedFaroffIriomotecat -
@Christoph142 I tried this in the latest stable, but it didn't work
Sorry I replied after such a long time, but it looks like such a cool mod.
Is there anyone more experienced than me who knows how to fix this? -
@legobuilder26 At least, the CSS code is outdated:
.toolbar-addressbar
needs to be changed to.UrlBar
& if you're running snapshot, you need to change#tabs-container
to#tabs-tabbar-container
. (I'm pretty sure there are other changes needed.) -
@legobuilder26 Besides the CSS changes, there are issues with the JS.
I got excited when I saw a hotkey combo in a mod that doesn't use VivaldiHooks, but sadly the ability to do that went away some time between 2016 and now. So
Shift
+F11
won't work.That only leaves the mouse leave/enter events to activate the mod, but I couldn't get those to trigger when I was in fullscreen.
Maybe there is something I am overlooking, but it seems like this mod is broken for good unless it gets converted into a VivaldiHooks mod.
-