Automate Status Bar with CSS mod
-
@dude99 much gratitude to you, sir!
-
@dude99 Newest versions broke this mod :'c
-
Hey @dude99 - Thanks a bunch for this mod.
Since the most recent update I've been running into an issue where when I click an item in the bar, such as page tiling, the menu appears for a split second then immediately disappears. This happens for each item on the bar that has a menu item pop up.
I inspected the js and was able to get a break point in the animation loop that caused the menu to stay until I released the breakpoint, so it's appearing, but seems like something the browser is doing is causing it to close the menu right after. I tried playing with the mod to see if I could work it out, but unfortunately this is out of my wheelehouse.
Have you seen this issue, or anyone else seeing it?
-
@articuno1au Thanks for the head up. I will take a look at the problem...
EDIT:
It seems V team have rip statusbar's popinfo out into a new layer of div, thus it disappear when the statusbar become off focus (when the popinfo hijacked the focus). This is similar problem with addressbar a few months ago. So I will need to come up with a work around to prevent the activated button from moving outside of window while the popinfo in focus.EDIT 2:
Temporary quick fix. Not a perfect solution but it's better than nothing until V team finished revamp the statusbar. I dont feel like wasting time on something that might keep changing...IMHO the new floating popinfo is kinda wonky & the effects feel pretty amateurish. Why do they keep "fixing" something that's ain't broken, instead of fixing things that's actually broken? LOL
.toolbar-statusbar {position: absolute !important; background-color: var(--colorBgAlphaBlur); bottom: 2px; right:0; width: fit-content; border-radius: var(--radius); border:none; box-shadow: 0 0 0 1px var(--colorBorder), 0 2px 6px rgb(0 0 0 / 25%); transition: bottom .1s ease-out 0s !important;} .toolbar-statusbar:not(:focus-within):not(:hover) {bottom: -24px; transition: bottom .25s ease-out .5s !important;} .toolbar-statusbar::before {content:''; position:fixed; z-index:-1; bottom:0; height: 12px; width: 330px;} .toolbar-statusbar .button-toolbar {align-self: auto;} .toolbar-statusbar:not(:focus-within):not(:hover) > .button-toolbar > button.button-pressed {transform:translateY(-26px); border-radius: var(--radiusHalf); transition: transform .25s ease-out .5s !important;} #browser > footer > .toolbar-statusbar .StatusInfo {position:fixed; left:2px; bottom:2px; height:19.5px; padding: 2.5px 3px 0; background: var(--colorBgDark); border-radius: var(--radiusHalf); pointer-events: none;}
Basically, replace
fixed
withabsolute
in line 1. Then add a hack (line 5).toolbar-statusbar:not(:focus-within):not(:hover) > .button-toolbar > button.button-pressed {transform:translateY(-26px); border-radius: var(--radiusHalf); transition: transform .25s linear .5s !important;}
to move the active button upward when u focus on the popinfo.Oh, this solution are not compatible with my bottom position compact findbar CSS mod. So be warn of funny GUI at the bottom of the window when summoning the compact findbar... Just mouseover the statusbar to fix it when it occurs.
-
@dude99 Works well your correction
-
@dude99 Working perfectly on my end.
Thanks a bunch, appreciate you looking into it (and so quickly!).
It's such a tiny little thing, but this mod makes the browser experience a lot nicer.
-
@dude99 I also applied your fix to the Automate Status Bar into Clock button issue, see there.
-
Updated OP code with new version & fix the original code a bit (if u prefer it over the new version).
Also, I finally found a much more elegant way to work around the stupid overlay popinfo, & emulate the older behavior of keeping the statusbar toolbar in place when accessing the the popinfo. Hopefully this "hack" won't break while V team continue revamping all the popinfo... LOL
-
@dude99 Thank you so much for your work today.
-
updated for v5:
-
All v4.x hack no longer work in v5, so I replace it with another
#main:is(:hover, :focus-within)
hack. It works, but not as nice as previous hack... LOL -
rework bottom tabbar code, cuz v5 broke a lot of stuff.
-
-
Thank you for you hard work but would you mind pointing out what is broken with v4? I am using v4 with Vivaldi 5.0 and things seem to work as usual.
-
@couac Can u post the statusbar code u r using? I made so many changes recently I have lost track of the old codes. LOL
Last I checked the statusbar will become off focus & hidden away when mouseover the overlay popup from statusbar button. Then, it cause the popup to disappear too. It begin some time here: https://forum.vivaldi.net/topic/33105/automate-status-bar-with-css-mod/52#
Also, if v4 is working for u, then no need to update to v5.
-
Hi,
Just checking to update and seems the above user has the same old version as here.
This old code works except for the toolbar actions like CSS Codes, Screenshot and the rest of them.
.toolbar-statusbar {position:fixed !important; background-color: var(--colorBgAlphaBlur); bottom:0; right:0; height:25px; width: fit-content; border-radius: var(--radius) 0 0 0; border:none; box-shadow: 0 0 0 1px var(--colorBorder), 0 2px 6px rgba(0, 0, 0, 0.25); transition: bottom .13s 0s !important;} .toolbar-statusbar:not(:focus-within):not(:hover) {bottom:-25px; transition: bottom .25s ease-out .4s !important;} .toolbar-statusbar::before {content:''; position:fixed; z-index:-1; bottom:0; height: 12px; width: 500px;} /* trigger zone */ .toolbar-statusbar .button-toolbar {align-self: auto;} #browser > footer > .toolbar-statusbar > .StatusInfo {position:fixed; left:2px; bottom:2px; height: 20px; padding: 2.5px 3px 0; background: var(--colorBgDark); border-radius: var(--radiusHalf); pointer-events: none;}
Thanks
-
@zalex108 Thanks, I will take a look later.
-
First off I wanted to thank you for all your hard work. I think that this mod was the very first one I ever installed after downloading Vivaldi, and it's continued to be the most useful one!
Second off what would I need to edit to extend the duration the popup stays up for once the cursor isn't hovering over it? I'd like to extend it a bit so I can use functions like the alarm c: I suppose I could just extend the trigger area to include it but that seems like it'd get annoying in my day to day browsing fast lol
I've already tried taking a stab at it myself but all I've managed to do is change the speed it lowers- or break it entirely
-
@balentay said in Automate Status Bar with CSS mod:
what would I need to edit to extend the duration the popup stays up for once the cursor isn't hovering over it?
Alter the
transition: bottom .25s ease-out .5s !important;
values..25s
= animation duration, toolbar move downward for a quarter of second..5s
= delay animation, for half second. 1s = one second.References: https://www.w3schools.com/cssref/css3_pr_transition.asp
-
Hello, there is a weird behaviour in the mod, where clicking on the time to show the clock does not prevent the status from disappearing based on the ease-out value. However, by clicking on the page tile button and then the time, the clock prevents the disappearing of the bar.
-
updated for v5.3: with various rewrite from older codes, pls read OP for details.
-
I love this mod
However I find the bottom/top of the window can sometimes get a bit funky.
-
Updated for v5.4:
- Add support for changing state of top position toolbars, now it should work properly with other top toolbar CSS mod.
@delfick It's not a bug of my CSS mod, it's just not made to be compatible with other CSS mod you're using.
Pls test the latest code & let me know if it's still not working properly, also next time pls included other CSS mod code you are using that might affect the top position toolbars like header, mainbar, bookmarkbar...etc. This will help me debug & fix the problem easier.