Clean, elegant, heavily modified Logseq CSS

Customization Look what I built
1

It’s actually a bit of a mess under the hood and needs a clean up pass, so I’m hesitant to share the css as is, but I’m very happy with how customizable logseq is and where I’ve been able to take it :smiley:

logseq custom css

2

I love this!! I’ve been having the need to fold points, but I didn’t really look if any theme allows that. I would be grateful if you publish this as a theme.

3

How do you get the bullets to hide?

4

Hey guys, glad to find some interest! I’ll just paste the portion that improves the folding + bullet hiding functionality. It’s quite messy and also has a bunch of styling included in the functional changes. Please if you use this, you are electing to dive into the joys of CSS and educating yourself on how to bend it to your will :smiley:

/* BLOCK CONTROLS */
/* Hide Bullet Lines*/
.block-main-container + .block-children-container .block-children {
  border-left: 1px solid rgba(256,256,256,0) !important;
  margin-left: 1px;
}
.ls-block:hover .block-main-container + .block-children-container .block-children {
  border-left: 1px solid var(--lx-gray-04-alpha, var(--ls-guideline-color, var(--rx-gray-04-alpha)))!important;
}

/* Align Bullet and Arrow with paragraph text*/
.block-control-wrap {
  margin: 2px 0 0 0;
}
/* Hide bullet by default */
.bullet-link-wrap {
  opacity: 0;
}
/* Show bullet */
.ls-block:hover .bullet-link-wrap,
.block-control .control-hide:has(.rotating-arrow.collapsed),
.block-main-container:hover>div>.block-control .control-show {
  opacity: 1 !important;
}
/* Arrow Settings */
.control-hide, .control-show {
  display: block !important;
  opacity: 0;
  background-color: inherit;
  border-radius: 1em;
  border: 0 !important;
  padding: 0 0 0 3px !important; /* center arrow */
  margin: 1px -2px -1px 2px !important;
  transition: 0.3s !important;
  cursor: pointer !important;
}
/* Bullet and Arrow style stuff? */
.bullet-closed :is(.control-hide, .control-show) {
  background-color: rgb(0, 0, 0, 0.5) !important;
}
:is(.control-hide, .control-show) svg {
  transition: 0.3s !important;
  margin: 0 !important;
  transform-origin: 44% 50%;
}
.bullet-container:not(.typed-list).bullet-closed {
  border: 0;
  background: inherit;
}
.bullet {
  z-index: 10;
  background-color: rgb(256, 256, 256, .3) !important;
}
.bullet-link-wrap:hover>.bullet-container:not(.typed-list) {
  background-color: rgb(256, 256, 256, .3) !important;
}
.bullet-link-wrap:hover>.bullet-container:not(.typed-list) .bullet {
  background-color: rgb(256, 256, 256, 1) !important;
  transform: scale(1.5);
}
2 Likes