Statusbar above panel
-
This new mod moves the statusbar above the panel with Javascript. In a way it’s a simple continuation of the attack on the statusbar mod from the past. It introduces styling to fit the panel and aligns the buttons.
Make a file out of the code below and if you’re totally lost, read the guide.
// Statusbar above panel // version 2023.3.0 // https://forum.vivaldi.net/post/652235 // Moves the statusbar above the panel, adds style to fit the theme // (transparency, blur), and lines up the first and last button. (function statusbarAbovePanel() { const css = ` footer { background-color: var(--colorBgAlphaBlur) !important; backdrop-filter: var(--backgroundBlur); } footer:has(.toolbar-statusbar) { border-bottom: 1px solid rgba(0, 0, 0, 0.1); } .toolbar-statusbar > .button-toolbar:first-of-type > button { padding-left: 3px; } .toolbar-statusbar > .button-toolbar:last-of-type > button { padding-right: 3px; } `; setTimeout(function wait() { const footer = document.querySelector("footer"); if (footer) { const style = document.createElement("style"); style.id = "vm-sap-css"; style.innerHTML = css; document.getElementsByTagName("head")[0].appendChild(style); document .getElementById("main") .insertBefore(footer, document.querySelector(".inner")); } else setTimeout(wait, 300); }, 300); })();
Observations: This mod moves the whole footer and adds it to
#main
as sibling of#inner
. As a result you can’t run tabs at bottom. But in return tabs below address bar is a built in feature when that setting is ticked ^^ (some people do swear by it). If you want to try it, add#tabs-tabbar-container.bottom {padding: unset;}
to the CSS to remove the spacing at bottom.History
2023.3.0 Release -
This simple solution apparently breaks confirmation popups. For whatever reason the buttons are added to footer.edit: oh well,
I accidentally loaded the mod twice and that broke everything, all working as expected