way to minimize margins in web panel?
-
there is a lot of wasted vertical space in my bookmarks panel (or any panel like history, downloads etc) .
can i somehow reduce the space between the bookmarks listed?and is it possible to make the webpanel also narrower than the minimum width, which is still way to wide..
-
not possible?
-
@schreck It is possible, just no one did it for you. I will have a look if I have time.
-
@code3 that would be fantastic. one could apply this then to all panels i guess? is it somehow possible also to choose the font size and make that smaller?
-
.panel h1 { display: none; } #panels-container .panel { padding: 2px !important; }
Making the actual bookmarks shorter would be very hard as they are absolute positioned. But this should take some extra space out.
-
thanks, thats great!
but even with 0px there is plenty of room left negative values are not working like it seems..what do you mean with absolute positioned?
when starting vivaldi, i can always drag the left panel border a little to the right, to make the panel narrower,
there is no way to override the minimum width?is there also a way to shrink the font in the panel?
-
@schreck said in way to minimize margins in web panel?:
negative values are not working like it seems..
They work for margins, but not padding.
@schreck said in way to minimize margins in web panel?:
what do you mean with absolute positioned?
Vivaldi uses JS and CSS to exactly/precisely/absolutely position the bookmarks in the panel. It is certainly possible to undo with only CSS, just complex.
@schreck said in way to minimize margins in web panel?:
when starting vivaldi, i can always drag the left panel border a little to the right, to make the panel narrower,
there is no way to override the minimum width?There is a way to override the width of the pan, but it is no different than checking “separate width” and setting the panel to the desired width.
@schreck said in way to minimize margins in web panel?:
is there also a way to shrink the font in the panel?
Sure, but (due to absolute positioning) simply setting the font size would not fit more bookmarks in the same place, just make the font smaller.
-
thanks for explaining
do you have to do the above for every panel?
the download list has still massive space inbetween the listed files..@code3 said in way to minimize margins in web panel?:
There is a way to override the width of the pan, but it is no different than checking “separate width” and setting the panel to the desired width.
there seems to be no difference here when checking "seperate width".
i still cannot override the min allowed width (around 200px) by dragging it. -
@schreck You want the panels to be super skinny and Vivaldi won’t let you do that? I can make a CSS mod for that.
-
@code3 said in way to minimize margins in web panel?:
@schreck You want the panels to be super skinny and Vivaldi won’t let you do that? I can make a CSS mod for that.
groovy!
sure im not the only one who would love such a mod. -
@schreck Here's something:
div#panels-container { width: calc( 150px + 34px) !important; } .panel-collapse-guard { min-width: 150px !important; max-width: 150px !important; }
Unfortunately, changing the width for only one panel is harder than it seems.
-
if i run the css, one cannot manually resize the panel anymore.
is there a a function, that just overrides the min width?
(doesnt work when i just use min-width: 50 or similar..) -
@schreck I don't think so. If I just change min-width of .panel it makes the panel smaller but the panel still takes up the same amount of space if that makes sense. See here:
https://github.com/code3z/modding-vivaldi/blob/first-css/basics/css-first-mod.md#:~:text=Its parent,takes upWhat I can do for you is to make the mod not work in floating mode or when the panel is set to a seperate width, so you could set the panel to floating mode, right-click a panel and choose separate width, drag it to make it wider and then set the panel back to inline, so that way you can override the mod on a per-panel basis.
Do you know any CSS yourself? -
For Whatsapp maximum vertical space:
.webpanel-header {display:none !important;}
-
@code3 thanks for helping, but i guess i just stick then to the normal width, often draggin widths of the panels, so wouldnt be practical. cheers
-
@schreck Well, as you can see I am writing a guide based on this request, so at some point I will have good code for this, when you set the panel to the minimum width it will snap to an even smaller width.
-
:root { --panel-condensed: 190px } div#panels-container[style="width: 260px;"] .panel-collapse-guard { max-width: var(--panel-condensed) !important; min-width: var(--panel-condensed) !important; } div#panels-container[style="width: 260px;"] { width: calc( var(--panel-condensed) + 34px) !important; }