hover statusbar opacity
-
I've fiddled a bit with the statusbar and managed to make the content translucent.
When hovering the mouse over the statusbar the content appears.(Initially my aim was to make the statusbar like glas but that did not work.)
So now when I hover over a link on a website it has the opacity: 0.1 and is barely viewable.
The hovered link should have always opacity: 1.0 though the statusbar has the opacity: 0.1. It should override the statusbar rule.
I've tried to find the element which shows a link in the statusbar but did not succeed.Maybe it's:
.StatusInfo
.StatusInfo--Visible {
.StatusInfo-Content {
.paginationIs this possible?
.toolbar-statusbar { background: var(--colorBg); color: var(--colorFg); height: 22px; border-top: 1px solid var(--colorBorder); font-size: 11.5px; position: relative; z-index: 1; opacity: 0.1; } .toolbar-statusbar:hover { opacity: 1.0 !important; }
-
I’d just set the status bar a semi-transparent background (such as
--colorBgAlphaHeavier
, it has0.2
opacity) & reduce opacity for every child except the link info. -
@potmeklecbohdan said in Question about: hover statusbar opacity:
I’d just set the status bar a semi-transparent background (such as
--colorBgAlphaHeavier
, it has0.2
opacity) & reduce opacity for every child except the link info.@potmeklecbohdan
Thank for your advice.
What I've understood is:
background: var(--colorBgAlphaHeavier);Obviously this does not work. This either:
colorBgAlphaHeavier: 0.2;So what is and where is the "link info"? This was my question in OP. Parents and childs in this case?
-
@maximwaldow I mean something like this:
.toolbar-statusbar:not(:hover) { background-color: var(--colorBgAlphaHeavier); } .toolbar-statusbar:not(:hover) > :not(.StatusInfo) { opacity: .1; }
The first part only makes sense if you have something to show behind it.
A little explanation: if you set
opacity
for something, its children can’t have bigger opacity (i.e. their opacity of1
means the same opacity as the parent,0.5
is half of it). Thus, if you want the link info fully visible, you have to only reduce the opacity of the other children of its parent element, in this case the status bar.To reduce the opacity of the status bar while keeping the real
opacity
the original,1
, you can set a background colour that has reduced opacity (unfortunately, Vivaldi only has a variable with opacity0.2
, but that’s usable). -
@potmeklecbohdan
Great. Your mod works.
I've tried to find the code that controls the link which appear in the statusbar.
Links are highlighted when hovering while statusbar keeps in the background and if hovering statusbar the buttons highlight.
That's an elegant solution. -
continue with @potmeklecbohdan idea, I build your glass concept with this:
.toolbar-statusbar{position: fixed; bottom: 0; width: 100%;} .toolbar-statusbar:not(:hover) {background-color: var(--colorBgAlphaHeavier); backdrop-filter: blur(2px);} .toolbar-statusbar:not(:hover) > :not(.StatusInfo) {opacity: .1;} .StatusInfo--Visible .StatusInfo-Content {background-color: var(--colorBgDark); padding: 2px 5px; border-radius: var(--radiusHalf);}
You will need to enabled Experimental Web Platform features via vivaldi://flags for the glass effect.
EDIT: After testing the glass effect for awhile, I think it's a bad idea because it's so distracting... It's better to leave it as transparent background instead. LOL
Also, my alternative solution from ancient time: https://forum.vivaldi.net/post/259761 -
@dude99 said in Question about: hover statusbar opacity:
You will need to enabled Experimental Web Platform features via vivaldi://flags for the glass effect.
backdrop-filter
is already enabled by default- the forced link is useless. Neither this → vivaldi://flags ← nor this → chrome://flags ← points anywhere
-
@potmeklecbohdan
-
Oh? ok. Guess Im really outdated in the latest CSS support. Time to hit the book... LOL
-
Yeah, I know. But somehow I just keep forgot about it.
-
-
related, can be use as base code to do what OP wanted: https://forum.vivaldi.net/post/380804
-