Simple Automate Bookmark Bar CSS mod
-
Here is another CSS mod I don't use myself, so this will be an one-off effort. Why wasting time create this mod? Because I want to demonstrate a simpler solution to @tam710562's Autohide Bookmark Bar CSS mod.Just to be clear, both mod will accomplish the same task just as good, but I use a much simpler solution:
margin-top/bottom
to create the illusion of floating bookmark bar (BB) to keep the web content static during BB hide/show animation. LSS, it doesn't rip the BB out withposition:absolute
& re-position it for every possible toolbar setup (which require a lot of work). This CSS mod preserved BB default position & keep pretty much everything intact, & thus it's more stable & future proof.
ReadMe
-
Bottom position BB have only 1 trigger method, that is mouseover the highest bottom toolbar (red zone). So, it's either above URL bar, Tabbar, Statusbar, or bottom edge of window.
-
Top position BB have 2 trigger method:
A. Similar to above, but the trigger zone (red zone) is at the bottom of lowest top toolbar. (Enabled by default)
B. Reveal BB when focus/mouseover the Titlebar, Tabbar, or Mainbar (see 1st demo above). You can enabled this method by remove
/
at the beginning of last 2 lines. If you enabledmethod B, you can safely disabled line 9 to remove the trigger zone. -
You can increase the trigger zone to make it easier to reveal the BB via
height: 6px;
value in line 4 & 9. You can also add color to trigger zone withbackground-color: #f004;
(semi-transparent red) in the same lines. -
The BB will auto hide after 1 second of inactivity, you can alter it via
transition: transform .1s 1s !important;
in line 5, 11 & 14. -
If u have alter the BB height, you will need to alter
margin-top/bottom: -28px;
value in line 3 & 8 to readjust the web content position. For value28px
equal BB's total height.
CSS Code
/* Simple Automate Bookmark-bar */ /* bottom bookmark-bar */ .bookmark-bar-bottom .bookmark-bar {margin-top: -28px; z-index: 1; transform: translateY(0); transition: transform .1s 0s !important;} .bookmark-bar-bottom .bookmark-bar::before {content: ''; position: absolute; height: 6px; width: 100%; bottom: 100%;} .bookmark-bar-bottom .bookmark-bar:not(:focus-within):not(:hover) {transform: translateY(100%); transition: transform .1s 1s !important;} /* top bookmark-bar */ .bookmark-bar-top:not(:has(.toolbar-editor)) .bookmark-bar {margin-bottom: -29px; z-index: 1; transform: translateY(0); transition: transform .1s ease-out 0s !important;} .bookmark-bar-top:not(:has(.toolbar-editor)) .bookmark-bar::before {content: ''; position: absolute; height: 6px; width: 100%; top: 100%;} /* A. trigger zone below lowest TOP bar */ .bookmark-bar-top:not(:has(.toolbar-editor)) .bookmark-bar:not(:focus-within):not(:hover) {transform: translateY(-100%); transition: transform .1s 1s !important;} /* B. trigger by focus/mouseover header, tabbar, or Mainbar */ /.address-top.bookmark-bar-top:not(:has(.toolbar-editor, #header:hover, .toolbar-mainbar:hover)) .bookmark-bar:not(:focus-within):not(:hover), :not(.address-top).bookmark-bar-top:not(:has(.toolbar-editor)) #header:not(:hover) ~ #main > .bookmark-bar:not(:focus-within):not(:hover) {transform: translateY(-100%); transition: transform .1s 1s !important;}
NOTE: Pls enable chrome://flags/#enable-experimental-web-platform-features for this code to work properly.
Again, I do not intend to continue maintaining this CSS mod in the future. So feel free to fork & share it with the community. You have my permission & blessing to do so!
-
-
@dude99 The code is a bit tidier, and even more so after I removed the code for /*bottom bookmark-bar */
It work OK, and in my enhanced fullscreen mode, which is a bonus. It hesitates to appear, and sometimes will not disappear, but I can probably live with it.
Still hoping for an official option:
Show on Hover -
@pesala which option u r using? If u r using option A then u can increase the trigger zone's height to make it easier to reveal the BB. Else, try option B, it's much easier to use.
Also, it's a Vivaldi mouseout bug that causing some automate toolbar to get stuck in reveal state randomly. Nothing I can do about it other than asking V team to fix 'em. LOL
-
@dude99 Increasing the trigger zone height to 8 pixels seems to fix the slow appearance. Hiding the bookmark bar is still uncertain. My simplified code:
/* Simple Automate Bookmark-bar */ .bookmark-bar-top .bookmark-bar {margin-bottom: -28px; z-index: 1; transition: transform .1s 0s !important;} .bookmark-bar-top .bookmark-bar::before {content: ''; position: absolute; height: 8px; width: 100%; top: 100%;} /* Trigger zone below lowest TOP bar */ .bookmark-bar-top .bookmark-bar:not(:focus-within):not(:hover) {transform: translateY(-100%); transition: transform .1s 1s !important;}
-
@dude99 It will work when there is no Address bar?
I mean when I uncheck "Show Address Bar" in Settings.
-
@barbudo2005 Yes. All (non-mod) position & setup r cover in this mod. See the demos/gifs.
For option B, mouseover the Header/Tabbar (on top) to reveal the BB (on top).
-
@dude99 Not works for me when there is no Address bar.
.bookmark-bar-top .bookmark-bar {margin-bottom: -28px; z-index: 1; transition: transform .1s 0s !important;} .bookmark-bar-top .bookmark-bar::before {content: ''; position: absolute; height: 4px; width: 100%; top: 100%;} /* option B: trigger by focus/mouseover header, tabbar, or URL bar */ .address-top.bookmark-bar-top #header:not(:hover) ~ #main .toolbar-mainbar:not(:focus-within):not(:hover) ~ .bookmark-bar:not(:focus-within):not(:hover) {transform: translateY(-100%); transition: transform .1s 1s !important;} :not(.address-top).bookmark-bar-top #header:not(:hover) ~ #main > .bookmark-bar:not(:focus-within):not(:hover) {transform: translateY(-100%); transition: transform .1s 1s !important;}
-
@barbudo2005 How is it not working? Pls descript in details, I can't read your mind...
It work on my end with no addressbar, or even in zero toolbar on top setup. I suggest u test without other mod. Here is how it looks:
-
@pesala updated code with
transform: translateY(0);
, attempt to improve BB autohide reliability. Not sure if it will solve the problem completely, or if it have any effect at all... LOLPls let me know if it did improve your BB autohide experience.
-
@dude99 Increasing the height from 4px to 12px seems to have the most effect. Unless I move the mouse cursor quickly up to the Address Bar the Bookmark Bar now appears reliably with this code.
/* Simple Automate Bookmark-bar */ .bookmark-bar-top .bookmark-bar {margin-bottom: -28px; z-index: 1; transform: translateY(0); transition: transform .1s 0s !important;} .bookmark-bar-top .bookmark-bar::before {content: ''; position: absolute; height: 12px; width: 100%; top: 100%;} .bookmark-bar-top .bookmark-bar:not(:focus-within):not(:hover) {transform: translateY(-100%); transition: transform .1s 1s !important;}
-
@pesala does it still "stuck" in reveal state when you mouseout?
Also, u can try option B which have much larger trigger zone to reveal the BB, which include the header, tabbar, & URL bar.
-
@dude99 The bookmark bar does sometimes get stuck open, but it is not easy to reproduce a recipe. Clicking on the page usually hides it again.
-
@pesala Got it. Nothing else I can do about it cuz it's a Vivaldi bug.
-
Is there a way to combine this mode with Top Addressbar mode?
Even if I change and modify the options, the bookmark bar appears in front of the tab bar...
I'm sorry if the solution is listed in the post. -
First, remove these lines:
/* bookmark bar enabled */ #browser.tabs-top.address-top.bookmark-bar-top #header {padding-top:65px;} #browser.tabs-top.address-top.bookmark-bar-top .bookmark-bar {position: fixed; top:34px; left:0; right:0;} #browser.tabs-top.address-top.bookmark-bar-top.maximized:not(.tabs-at-edge) .bookmark-bar {top:41px;}
Next, also remove:
/* bookmark bar & horizontal menu enabled */ #browser.tabs-top.address-top.horizontal-menu.bookmark-bar-top #header {padding-top: 65px !important;} #browser.tabs-top.address-top.horizontal-menu.bookmark-bar-top .topmenu {transform: translateY(-65px);} #browser.tabs-top.address-top.horizontal-menu.bookmark-bar-top .bookmark-bar {top: 58px !important;}
Then, add
visibility: visible;
at the end of this line, replaceHERE
:.bookmark-bar-top .bookmark-bar::before {content: ''; position: absolute; height: 4px; width: 100%; top: 100%; HERE}
Lastly, alter this line if u choose option A:
/* option A: trigger zone below lowest TOP bar */ .bookmark-bar-top .bookmark-bar:not(:focus-within):not(:hover) {transform: translateY(-100%); transition: transform .1s 1s !important;}
to this:
/* option A: trigger zone below lowest TOP bar */ .bookmark-bar-top .bookmark-bar:not(:focus-within):not(:hover) {transform: translateY(-100%); visibility: hidden; transition: transform .1s 1s, visibility .03s 1s !important;}
or if u choose option B, then alter this line:
/* option B: trigger by focus/mouseover header, tabbar, or URL bar */ .address-top.bookmark-bar-top #header:not(:hover) ~ #main .toolbar-mainbar:not(:focus-within):not(:hover) ~ .bookmark-bar:not(:focus-within):not(:hover) {transform: translateY(-100%); transition: transform .1s 1s !important;}
to this:
/* option B: trigger by focus/mouseover header, tabbar, or URL bar */ .address-top.bookmark-bar-top #header:not(:hover) ~ #main .toolbar-mainbar:not(:focus-within):not(:hover) ~ .bookmark-bar:not(:focus-within):not(:hover) {transform: translateY(-100%); visibility: hidden; transition: transform .1s 1s, visibility .03s 1s !important;}
Basically, I remove all the relocation code for bookmark bar so that it's restore to original position at the very bottom of all top toolbars. Then hide it with
visibility :hidden
when u don't need it. Then, u mouseover at the very bottom of the tabbar (or any top toolbar for option B ) to reveal the bookmark bar.That's all I can do to combine both mod into one with the least amount of rewrite, it's not perfect... Hope this is good enough for u. LOL
Alternatively, you can just stick to the original Top Addressbar above Top Tabbar CSS mod, setup a shortcut to hide/show the bookmark bar.
-
@dude99 Wow, that's awesome! I don't know much about css, so I was using bookmark bar opacity modification, and this is much better. Thank you so much!!!
-
@dencion
opacity
only make an element transparent, if you want to hide it completely you will have to use other method.
references: https://www.sitepoint.com/hide-elements-in-css/ -
@dude99 Instead of entire address bar can we make it for a specific section?
Like section 1 or 2 (2 is preferable)? Most of the time, I go to addressbar to copy the URL and I do not need bookmarks bar to be show during that time. Hope you understand my pain
-
@smerugu28 said in Simple Automate Bookmark Bar CSS mod:
Instead of entire address bar can we make it for a specific section?
Sorry, that can't be done with CSS alone, because CSS can't do reverse selection (child to parent element). But even if it can be done, it will be a miserable experience, because the bookmark bar will disappear when you mouseout of the searchbox to access the bookmarks, & that will make accessing the bb quite difficult because you have to move the cursor quickly in order to catch the bookmark bar before it disappear completely...
Now, you can try remove all
:not(:focus-within)
from the code to limit the bookmark bar to show only via mouseover event, but then you won't be able to reveal the bb by focusing on input box inside the addressbar.Anyway what's wrong with showing the bookmark bar when you access the URL field? It doesn't cover up anything but the webpage, so afaik it's not really causing any accessibility problem.
-
My version of this CSS mod has broken with the latest Snapshot. The Bookmark Bar now overlays the Address Bar.
/* Simple Automatic Bookmark-bar */ .bookmark-bar-top .bookmark-bar {margin-bottom: -28px; z-index: 1; transform: translateY(0); transition: transform 0.1s 0.5s !important;} .bookmark-bar-top .bookmark-bar::before {content: ''; position: absolute; height: 12px; width: 100%; top: 100%;} .bookmark-bar-top .bookmark-bar:not(:focus-within):not(:hover) {transform: translateY(-100%); transition: transform 0.1s 0.5s !important;}