Automate Status Bar with CSS mod
-
@dude99 I obviously do not
...and it seems to work great, thanks a lot again mate
I might miss those moments of my "coding heroism" after every Vivaldi update, though
-
Updated 1st post code & for alternative version with Clock button, go here: https://forum.vivaldi.net/post/380804
-
Excellent work! 99999 out of 10!
-
Updated code for v3.4, plus add customizable trigger zone!
-
updated for v3.5. No improvement, just optimized for other related mod:
https://forum.vivaldi.net/post/434047
https://forum.vivaldi.net/post/434133EDIT: condensed last 2 lines, clean up ancient unnecessary codes.
EDIT 2: excluded statusinfo CSS mod from fullscreen. -
Here is my updated mod. It has a delay to allow for shift+dragging buttons into the status bar:
#browser > .toolbar-statusbar {position:fixed;bottom:0;right:0;height: 25px;margin-right: 50px;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 2s !important;} #browser > .toolbar-statusbar:not(:focus-within):not(:hover) {bottom:-23px; transition: bottom .25s ease-out 5s !important;} /* .toolbar-statusbar::before {content:''; position:fixed; z-index:-1; bottom:0; height: 12px; width: 330px;} */ /* trigger zone */ #browser > .toolbar-statusbar .button-toolbar {align-self: auto;} #browser:not(.fullscreen) .StatusInfo {position:fixed; left:2px; bottom:2px; height: 20px; padding: 2.5px 3px 0; background: var(--colorBgDark); border-radius: var(--radiusHalf); pointer-events: none;}
-
@dude99 Are any of your mods in a git repository?
-
@code3 No. But you can find most of my CSS mod from the link in my signature.
-
@dude99 Is it broken in latest snapshot?
-
Also broken for me on snapshot 3.9.2289.3
-
-
@linuxb Thanks buddy, will test that if the changes survive on next stable.
Snapshot users, pls use @LinuxB code until I can fix 'em myself. This mod community is getting more proficient as Vivaldi growth accelerating day by day!
-
Broken on latest stable Vivaldi release 4.0.2312.24. LinuxB modification doesn't work either.
-
Yup, 4.x doesn't work. (It would be nice to finally integrate this mod into Vivaldi itself...)
-
updated for v4.0:
-
forced
fixed
position to fix broken problem -
restore background color with
var(--colorBgAlphaBlur)
instead ofvar(--colorBgDark)
-
optimized last line a bit.
-
-
Absolutely perfect! Thank you very much! Literally can't use Vivaldi without your 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.