Automate Status Bar into a Clock button
-
About 2 years ago I introduced a similar CSS mod to hide all status bar buttons when you don't need 'em. This time I made another one for those prefer having the Clock button visible at all time.
ReadMe
- Set status bar to Always show status bar.
- Mouseover Clock button to reveal button-toolbar.
- Mouseover link will show URL at bottom left window.
Code
/* Automate status bar into clock button */ #browser:not(:has(.toolbar-editor)) > footer > .toolbar-statusbar {margin: -23px 0 0 auto; background-color: var(--colorBgAlphaBlur); height:24px !important; width: fit-content; border-radius: var(--radius) var(--radius) 0 0; border:none; box-shadow: 0 0 0 1px var(--colorBorder), 0 2px 6px rgba(0, 0, 0, 0.25);} #browser:not(:has(.toolbar-editor)) > footer > .toolbar-statusbar > div:not(.ClockButton) {max-width: 220px; opacity: 1; visibility: visible; transition: max-width 1s ease-out 0s, opacity .15s ease-in 0s, visibility 0s !important;} #browser:not(:has(.toolbar-editor)) > footer > .toolbar-statusbar:not(:focus-within):not(:hover):not(:has(.button-pressed)) > div:not(.ClockButton) { max-width:0; opacity: 0; visibility:hidden; transition: max-width .25s ease-out .4s, opacity .15s ease-out .5s, visibility .65s !important;} #browser:not(:has(.toolbar-editor)) > footer > .toolbar-statusbar .StatusInfo {position:fixed; left:2px; bottom:2px; min-height:20px; padding: 1px 3px; background: var(--colorBgDark); border-radius: var(--radiusHalf); pointer-events: none; max-width: calc(100vw - 60px);} .toolbar-statusbar .button-toolbar {align-self: auto;}
NOTE: Pls enable chrome://flags/#enable-experimental-web-platform-features for this code to work properly.
Customization
-
You can add an extra trigger zone with:
.toolbar-statusbar:before {content:''; position: fixed; z-index:-1; right:55px; height: 12px; width: 330px;}
-
Customize the trigger zone size via
height:12px
&width:330px;
. Also, you can preview the trigger zone by addingoutline: dashed red;
while tweaking it. -
You can move the toolbar buttons to bottom left corner (which will overlap with the status-info) by replace
margin: -23px 0 0 auto;
withmargin: -23px auto 0 0;
. Remember to also adjust the trigger zone accordingly. -
You can move the toolbar buttons inward by alter LEFT/RIGHT values:
margin: TOP RIGHT BOTTOM LEFT ;
. Valueauto
will push the toolbar toward all the way to other side, thus if you set both LEFT & RIGHT toauto
- the toolbar will be centered horizontally inside the window. -
You can add Hibernate Background Tab button into button-toolbar with @nomadic 's JS mod.
That's all, have fun modding! -
@dude99 said:
Optional: enabled chrome://flags/#enable-experimental-web-platform-features for mod to work properly.
Where in the mod are the experimental features used?
FYI itβs useless to force-link these links, try to click it. -
@dude99 , I don't use the status bar, you can drag all the buttons above in the URL bar (Shift-drag) and hide the status bar
-
@potmeklecbohdan You are right! It seems something have changed after 2 years... I didn't even check that & copy paste it directly from the older post. LOL
-
@Catweazle IMHO that addressbar looks too crowded & kinda chaotic... But, everyone prefer different setup, so if that's what work for you then it all good. Vivaldi is made for power user like us!
-
@dude99 , thing of customs, the usual icons of the adress bar are all together on the left, then those of the status bar and next to them the watch, well visible, so the statusbar is not necessary at all (ok, the Zoom, but for this I use Ctrl + scroll)
-
Updated for v3.3, improved with button sliding animation!
-
@dude99 perfect ,thank you
-
This is very useful, well done @dude99 .
I've changed a few things and you might want to add one of them to prevent overlapping of the clock,
.StatusInfo { max-width: calc(100vw - 142px); }
-
@sjudenim Good idea. Mind to share your fork code here?
Maybe we can improve the code further with more useful ideas... -
@dude99 said in Automate Status Bar into a Clock button:
@sjudenim Good idea. Mind to share your fork code here?
Maybe we can improve the code further with more useful ideas...Sure, this is what I have so far
.toolbar-statusbar .button-toolbar > button:hover, .toolbar-statusbar .button-toolbar > button.button-pressed { background-color: transparent !important; fill: var(--colorHighlightBg); } /* Clock overlay ---------------------------- */ .toolbar-statusbar { position: fixed; background-color: hsla(0, 0%, 0%, .6); box-shadow: 0 2px 10px 0 rgba(0, 0, 0, 0.2) !important; color: hsla(0, 0%, 100%, .8); border-radius: 2px; border: none; bottom: 2px; right: 2px; width: auto; padding-left: 5px; } .toolbar-statusbar:hover { background-color: hsla(0, 0%, 0%, .7); backdrop-filter: blur(10px); } .toolbar-statusbar>div:not(.ClockButton) { max-width: 140px; transition: max-width .3s ease-out 0s, visibility .2s 0s !important; } .toolbar-statusbar:not(:focus-within):not(:hover)>div:not(.ClockButton) { visibility: hidden; max-width: 0; transition: max-width .3s ease-out .4s, visibility .5s !important; } .toolbar-statusbar .button-toolbar { align-self: auto; } /* Status info overlay */ .StatusInfo { visibility: hidden; position: fixed; left: 2px; bottom: 2px; max-width: calc(100vw - 142px); overflow: hidden; pointer-events: none; } .StatusInfo--Visible .StatusInfo-Content { visibility: visible; background: hsla(0, 0%, 0%, .7); backdrop-filter: blur(10px); padding: 4px 7px; border-radius: 2px; }
-
@sjudenim said in Automate Status Bar into a Clock button:
Love your code!!!!! Thank you very much for sharing it with us.
.toolbar-statusbar>div:not(.ClockButton) { max-width: 230px;
I had to change the 140px to 230px to have the zoom slider fully visible (with 140px, it was partially hidden).
-
@dude99 Thanks for the awesome mod! Question: is there a way to have it not cover up the settings button on my panel?
Without mod:
With mod:
-
@legobuilder26 Just change the value of
right: 2px;
to something likeright: 52px;
-
-
@legobuilder26 I don't use the mod so I'm not sure.
Did you try with this "Automate Status Bar into a Clock button" disabled? (just to see if it is related to the size of its container for example) -
@Ornorm yes
-
@legobuilder26 looks like @nomadic made the mod based on a mod of
LonMoops, meant @luetage - any ideas you two? -
@legobuilder26 I'll let the others answer to your next post then as I haven't installed that JS mod.
I suspect it could be linked to the.StatusInfo
but I'm not sure enough and don't want to lead you in a wrong direction.
Good luck! -
@guigirl It adds the Viv icon. (but the version isn't shown)