Automate Status Bar with CSS mod
-
@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.
-
@dude99 that's so much better! thanks!!!
Also, sorry, I thought this was the only css I had added. It was ages ago when I found this and added it. Next time I ask someone for help I'll definitely include the css I'm using!(was using this)
-
@delfick Seen your custom.css file, I suggest you should separate each mod better with
/* MOD TITLE */
& a few lines in between each mod. This will help you in maintaining 'em easier in the future as they grew in numbers, cuz some of 'em will brake after major update & you will need to update/fix 'em. -
@dude99 Unfortunately the code doesn't work, the status bar disappears.
-
-
Add
background-color: #0ff8;
under#browser > footer > .toolbar-statusbar::before
section to see the trigger zone. Point at the trigger zone to reveal the status bar. -
If it doesn't work, then try disabled other CSS/JS mod you're using, then test again with just this CSS mod install.
-
If this CSS mod doesn't work alone without other mod, then please post a screenshot of your browser without any mod install. I need to know your toolbar setup to figure out what went wrong.
-
-
@dude99 Ah in that case it works, the trigger zone is thin and in the middle. I was trying to trigger it outside of the designated zone, near the right side of the window, and thought it wasn't working.
-
@dynamix You can move it to the right side by follow instruction in customization 2. Then if you need a bigger trigger zone you can increase the trigger zone height by increasing
height: 12px;
value in the same section. -
@dude99 Greetings. Is it possible to adapt this .css code of yours to the current Vivaldi browser? This mod does not work like this anymore. My address line is at the bottom.
/* Statusbar On Top */ .panel#downloads .DownloadItem-ActionButton.reveal svg { fill: white; border-radius: 10px; background: limegreen; box-shadow: 0 0 0px 1px limegreen; } .panel#downloads .DownloadItem-ActionButton.remove svg { fill: white; border-radius: 2px; background: tomato; box-shadow: 0 0 0 0.7px tomato; } #header { order: -1; } .toolbar-statusbar { order: -1; border: none !important; } /*#browser.color-behind-tabs-off*/ .toolbar-statusbar { background: var(--colorAccentBg); } .toolbar-statusbar .button-popup-arrow--above:before { top: -10px; bottom: unset; border-top: none; border-bottom: 10px solid var(--colorBgLight); } .toolbar-statusbar .button-popup-arrow--above { bottom: unset; top: 30px; }
-
@stardepp Sorry, I don't really understand your request. What do you want to accomplish with the CSS you posted? My guess is it relocate the statusbar to the top, & below the header? Do you want me to automate the statubar to move upward when you don't need 'em, or something else?
It's not really possible for me to do anything if I don't know your current toolbars setup, you should post a screenshot of your browser, & then let me know clearly what exactly you wanted.
Also, the first 2 block of code (before
#header
) seems like it's for the download panel's button, they have nothing to do with statusbar.