Modify the Bookmark Panel UI: I lost Something

  • Vivaldi Ambassador

    I had made custom CSS for the line height of folders and bookmarks in the bookmark panel but the last snapshot broke my hack and now I can't seem to find the code to control this. It seems to be a padding setting because there is a thin line (border I presume) separated from the highlighted folder. Can anyone help? What controls this?

    0_1489455025746_bm pnl.png

  • @g_bartsch

    .tree-item {
      outline: none !important;

  • Vivaldi Ambassador

    @dLeon Thank you. I should have been more clear. I want to keep the outline.

    What I want to do is reduce the spacing between line items and can't find how to control that.

    There is vertical space between the row background color and the thin outline below. I want to remove that extra space to allow the outline to move up and touch the row highlight.

  • Moderator

    @g_bartsch said in Modify the Bookmark Panel UI: I lost Something:

    I should have been more clear.

    What you actually should've done is post the code that you're using. Then it will be easier for us to make the necessary adjustments.

  • Vivaldi Ambassador

    @pafflick Here is all the code that has been controlling the line heights.

    /* make the items in the panel closer together vertically */
    .vivaldi-tree .tree-row label{flex:1 1 0;padding:0 6px 0 0;line-height:17px;min-height:17px;display:flex;align-items:center}
    .vivaldi-tree .tree-row.folder .folder-item-count,.vivaldi-tree .tree-row.trash .folder-item-count{color:var(--colorBg);background-color:var(--colorFg);flex:0 0 auto;border:1px solid transparent;height:auto;line-height:1;padding:0 2px;border-radius:3px;font-size:11px;font-weight:700;margin:2px 0 2px auto;overflow:visible;opacity:.5}

  • Moderator

    @g_bartsch A lot of unnecessary code there. I realized that you've copied the code from the common.css file. This code below is meant to be used separately (eg. in custom.css file). This should shrink the list as you expect:

    .vivaldi-tree .tree-item {
    	position: relative !important;
    	top: 0 !important;
    	height: 17px !important;
    .vivaldi-tree .tree-row {
    	height: 17px !important;
    .vivaldi-tree .tree-row label {
    	height: 17px !important;
    	min-height: 17px !important;
    	line-height: 17px !important;
    .vivaldi-tree .tree-row svg.folder-icon {
    	margin-top: 0;
    	margin-bottom: 0;
    .vivaldi-tree .tree-row.folder .folder-item-count,
    .vivaldi-tree .tree-row.trash .folder-item-count {
    	padding: 0 2px !important;

    HOWEVER, there must be some JS changing something in the list's appearance, as it starts to flicker once you scroll it a little bit. Most of the part that doesn't fit on the screen is not visible. I don't know what's going on there... 😕
    They must've changed something in the way the bookmarks are displayed - the list items have absolute positions, which is a terrible solution and as it turns out - not so easy to bypass...

  • Vivaldi Ambassador

    @pafflick Thanks. I will try it soon. I just copied the text block from the common.css file and changed one or two characters. Do you run the CSS through a formatter to get the nice output?

    I hope they give us the ability to set line spacing in settings. The default is just too much and results in too few bookmarks or folders visible at one time without scrolling. Hacking worked till it didn't.

  • Moderator

    @g_bartsch I just realized that and hurried to warn you that you should not alter your common.css file with the code I provided. It was meant to be used in the custom.css file that you should create separately and link to it in your common.css file by adding this:

    @import "custom.css";

    As for the code formatting, sometimes I use Stylish to do that for me, but usually, when I write CSS by myself, I just keep it tidy from the beginning.

  • Vivaldi Ambassador

    @pafflick Thanks. No worries. I did as you mention and broke the code out to a separate file. I have a few more css files controlling different aspects of the UI.


Looks like your connection to Vivaldi Forum was lost, please wait while we try to reconnect.