Basic Bookmarks Panel
-
@BoneTone
Exactly. -
You gotta remove the
max-width
restriction from.panel-collapse-guard
:.panel-collapse-guard { max-width: unset !important; }
-
@potmeklecbohdan
Thank you very much again. I appreciate your help so much. This is the solution.
I've added a hover effect with mouse over now so the search field is less intrusive. But it stills looks distracting and a bit clumsy.reduced opacity to 0.1
Is there a way to set all the bookmarks to a low opacity and a hover effect?
-
@maximwaldow Just a suggestion:
.panel.panel-bookmarks > header > h1, .panel.panel-bookmarks > header .toolbar-nowrap { display: none; }
Actions of all the three buttons are available via the context menu. If you don’t use the search at all & don’t have the strange habit of keeping things you don’t need, the selector can be just
.panel.panel-bookmarks > header
.I’ll add a reply to your low-opacity question in a moment.
-
@maximwaldow said in Side panel disabled results in Bookmarks panel broader:
Is there a way to set all the bookmarks to a low opacity and a hover effect?
.panel.panel-bookmarks .vivaldi-tree .tree-item:not(:hover):not([data-selected]) { opacity: .5; }
I’ve added
:not([data-selected])
to keep selected bookmarks fully opaque, remove that if you don’t want it.Oh, & I’ve noticed you usually have very general selectors (when I consider the use), such as
::-webkit-scrollbar
.sortselector.sortselector-compact .sortselector-dropdown
.toolbar-wrap
-
@potmeklecbohdan
Great.
Just found a trick by myself. And added the hover.
I've tried your code and could not find a difference. Have test more..vivaldi-tree { opacity: 0.2; } .vivaldi-tree:hover { opacity: 1.0; }
So the toolbar-wrap is the searchfield
.toolbar-wrap { opacity: 0.1; } .toolbar-wrap:hover { opacity: 1.0 !important; }
I wonder if there is a way to auto collapse the whole field above 'Sort Manually'.
-
Ah, the first sentence confused me. There are several threads about autohiding the panel, which I believe at least one of them has a working show on mouse over mod that you could grab the code from that and modify to suit your needs.
-
@potmeklecbohdan
Now the search field is away. But sometimes I use it. So I'd like to make the field smaller.
.panel > header { display: none !important; }
Changed Search field padding:
Added a nice transition effect. Are there other ways to realize this? Fast highlight when mouseover, last some seconds when mouseleave.
.vivaldi-tree { opacity: 0.1; transition: 5s 0s !important; } .vivaldi-tree:hover { opacity: 1.0; transition: 0s 0s !important; }
@BoneTone
Tried some of the Autohide Panel mods today but they didn't really work for me. I like the minimalist style. -
@potmeklecbohdan said in ...
.panel.panel-bookmarks .vivaldi-tree .tree-item:not(:hover):not([data-selected]) { opacity: .5; }
I’ve added
:not([data-selected])
to keep selected bookmarks fully opaque, remove that if you don’t want it.Now I understand your code: The difference is that a selected single bookmark is highlighted.
My simple code just highlights the whole tree like a christmas tree. -
I'm not satisfied with the faded background color of the whole panelgroup left. Too dark and heavy. Is it possible to merge the picture of the main window with the bookmarks panel row?
So which controls the backgound color? I'm not talking about themes edit background.Seems have to do with:
.panel-group {
display: flex;
flex-flow: column nowrap;
flex: 1;
overflow: hidden;
contain: strict;
background-color: var(--colorBgLightIntense: #1295abb5);
color: var(--colorFg);
fill: var(--colorFg);
}Changed this value with the inspector and a little window opened and the color changed, But I'd like an aero glasslike transparent look with with white text.
Style attribute {
background-color: rgb(33,48,42);
} -