Compressing icons in left sidebar to get back more space

The longer I use Logseq, the more favorites and recent documents take up the left sidebar. For this reason I wanted to compress some of the icons/buttons for built in features like journal, whiteboards, flashcards, etc.

Here is what my sidebar looks like now:

compressed

I added this to my custom.css:


/* Put nav buttons on one row, no text */
.nav-header {
  margin-left: 2px;
}

.nav-header .flex-1 {
  display: none
}

.nav-header .item {
  margin-left: 4px;
  padding: 2px !important;
}

.nav-header .ui__icon {
  margin-right: 0px !important;
}

.nav-header {
  flex-direction: row;
}

.flashcards-nav .inline-block {
  margin-left: 	2px;
  padding: 0px;
}

Some mirror customization to add colorful icons, adjust icons size and alignment.
image

/* Put nav buttons on one row, no text */
.nav-header {
    margin-left: 2px;
}

.nav-header .flex-1 {
    display: none
}

.nav-header .item {
    margin-left: 4px;
    padding: 4px !important;
}

.nav-header .ui__icon {
    margin-right: 0px !important;

}

.nav-header {
    flex-direction: row;
}

.flashcards-nav .inline-block {
    margin-left: 2px;
    padding: 0px;
    font-size: 12px;
    vertical-align: middle;
}


#left-sidebar .item>.ti {
    font-size: 18px;
    vertical-align: middle;
}

.tie-whiteboard:before {
    content: "\ea1d";
    font-size: 20px;
    color: #78C0A8;
}

#left-sidebar .ls-icon-infinity:before {
    content: "\ea38";
    color: #c8aa00;
}

#left-sidebar .ls-icon-hierarchy:before {
    content: "\edff";
    color: brown;
}

#awUI-calendar-menu .ls-icon-calendar-time:before {
    content: "\ee21";
    color: #db18ed;
}
4 Likes