Auto Hide Bookmarks and status bar
-
-
Bookmarks bar option to only show on a new tab and when I go into a new website it hides
-
Auto hide status bar and / or bookmarks bar after x seconds
Also
- Ads on youtube are blocked but not removed (something that firefox does well).
-
-
Can there be an option to have the status bar been shown when it is needed:
- when there is a status message to be shown
- when one moves the mouse to the bottom of the screen.
The tabs, bookmark bar and address bar can be implemented as collapsible panels which can be expanded by clicking or mouse hover.
-
@sirinath Try Settings, Appearance, Status Info Overlay.
Not quite the same as this feature request, but I use a CSS mod to autohide the bookmark bar, which I find works well. The bookmark bar is hidden on any page including the start page, until one moves the mouse cursor to the top.
/* Autohide Bookmark Bar */ #browser.tabs-top.address-top.bookmark-bar-top .UrlBar, #browser.tabs-top.address-bottom.bookmark-bar-bottom .UrlBar, #browser.tabs-top.address-bottom.bookmark-bar-top .UrlBar, #browser.tabs-bottom.address-top.bookmark-bar-top .UrlBar, #browser.tabs-bottom.address-bottom.bookmark-bar-bottom .UrlBar { z-index: 2; } #browser.tabs-top.address-top.bookmark-bar-top .bookmark-bar, #browser.tabs-top.address-bottom.bookmark-bar-bottom .bookmark-bar, #browser.tabs-top.address-bottom.bookmark-bar-top .bookmark-bar, #browser.tabs-bottom.address-top.bookmark-bar-top .bookmark-bar, #browser.tabs-bottom.address-bottom.bookmark-bar-bottom .bookmark-bar { position: absolute !important; width: 100%; transition: transform 0.2s !important; z-index: 1; } /* tabs-top address-top bookmark-bar-top */ #browser.tabs-top.address-top.bookmark-bar-top .bookmark-bar { top: 34px; transform: translateY(-100%); } #browser.tabs-top.address-top.bookmark-bar-top .bookmark-bar:hover, #browser.tabs-top.address-top.bookmark-bar-top .UrlBar:hover ~ .bookmark-bar, #browser.tabs-top.address-top.bookmark-bar-top #header:hover ~ #main .bookmark-bar { transform: translateY(0); } /* tabs-top address-bottom bookmark-bar-bottom */ #browser.tabs-top.address-bottom.bookmark-bar-bottom .bookmark-bar { bottom: 34px; transform: translateY(100%); } #browser.tabs-top.address-bottom.bookmark-bar-bottom .bookmark-bar:hover, #browser.tabs-top.address-bottom.bookmark-bar-bottom .UrlBar:hover ~ .bookmark-bar { transform: translateY(0); } /* tabs-top address-bottom bookmark-bar-top */ #browser.tabs-top.address-bottom.bookmark-bar-top .bookmark-bar { top: 0; transform: translateY(-100%); } #browser.tabs-top.address-bottom.bookmark-bar-top .bookmark-bar:hover, #browser.tabs-top.address-bottom.bookmark-bar-top #header:hover ~ #main .bookmark-bar { transform: translateY(0); } /* tabs-bottom address-top bookmark-bar-top */ #browser.tabs-bottom.address-top.bookmark-bar-top .bookmark-bar { top: 34px; transform: translateY(-100%); } #browser.tabs-bottom.address-top.bookmark-bar-top .bookmark-bar:hover, #browser.tabs-bottom.address-top.bookmark-bar-top .UrlBar:hover ~ .bookmark-bar { transform: translateY(0); } /* tabs-bottom address-bottom bookmark-bar-bottom */ #browser.tabs-bottom.address-bottom.bookmark-bar-bottom .bookmark-bar { bottom: 64px; transform: translateY(100%); } #browser.tabs-bottom.address-bottom.bookmark-bar-bottom.stacks-on:not(.tabs-at-edge) .bookmark-bar { bottom: calc(64px + var(--padding)); transform: translateY(100%); } #browser.tabs-bottom.address-bottom.bookmark-bar-bottom .bookmark-bar:hover, #browser.tabs-bottom.address-bottom.bookmark-bar-bottom .UrlBar:hover ~ .bookmark-bar { transform: translateY(0); } .webpanel-header { z-index: 0; }
-
@pesala What are the steps to do it. What is the above code?
-
@sirinath See the Modifications Guide.
-
@pesala Modifying system files is a bit too much for me.
-
@sirinath You don’t modify system files, you use the native Vivaldi experiment to link to a file outside of Vivaldi. CSS modifications are harmless.
@Pesala Why don’t you link the source? https://forum.vivaldi.net/topic/34672/auto-hide-bookmark-bar
-
@sirinath but its nativly available create a .css file and paste it in a new folder, copy and paste the code in the css file, then do as follows, go to vivaldi://experiments
Check that, go to vivaldi settings in appearence go to custom ui modifications and select the file you need
restart the browser, and done! your good to go!
this applies for any css file btw not just this oneAlso as the above picture says they might not work in newer versions
-
@hololoyoj @luetage @Pesala @rebub Thanks
-
-