• For those who are thinking that Bullet-based Outliner Editor is way too cluttered with crowded bullet points.
• Combined UX : Notion like Block based Editor + Outliner

@import url("https://browneyedsoul.github.io/RemNote-CSS-Library/Modern%20Kanban.css");

@import url("https://browneyedsoul.github.io/RemNote-CSS-Library/Modern%20Kanban2.css");

@import url("https://browneyedsoul.github.io/RemNote-CSS-Library/Strikethrough.css");

@import url("https://browneyedsoul.github.io/RemNote-CSS-Library/Image%2C%20Codeblock%20Caption%20like%20in%20Notion.css");

@import url("https://browneyedsoul.github.io/RemNote-CSS-Library/Rating%20Bar.css"); 

/* Please Copy the .css file (Template) and paste to your KB Directly */

Make a Cover Photo CSS Template

Add a image url, Name the tag properly

Tag to the Rem Document title area

Adjust 'background-size' on your tastes.

➊ background-size: contain; (Preferred) ➞ Height fixed and Responsive. but some margins can be made (need subsidiary steps like adding background color or making background repetitive pattern).
➋ background-size: cover; ➞ I don’t care about the cover image cropped. (suitable for cover images which have repetitive patterns)
➌ background-size: 100% 100%; ➞ The cover image can be ugly according to a front window size. (not recommended, only for mono-colored cover)

@import url("https://browneyedsoul.github.io/RemNote-CSS-Library/Terminal.css");

Sometimes, you can be bothered by meaningless tags like "th", "lb", ..., which are used for formatting reasons. Then you can apply this code with a highlight color. In my case I chose the purple one and the code below is also running with purple colored rems.

.hierarchy-editor__tag-bar__tag.highlight-color--purple,
.hierarchy-editor__tag-bar__tag.highlight-color--purple span {
  display: none;
}

[data-rem-tags~="source-list"] > div > .inline-flex {
  display: none;
}

.tree-node-container > .tree-node--children > .tree-node-container[data-rem-container-tags~=aliases]:not(:hover):not(:focus-within) {
  display: block;
  background-color: #ECECEC;
  border-radius: 2px;
  max-height: 6px;
  overflow: hidden;
}
.dark-mode .tree-node-container > .tree-node--children > .tree-node-container[data-rem-container-tags~=aliases]:not(:hover):not(:focus-within) {
	  background-color: #272C30;
}

Sometimes, some rems don't need to represent all the backlinks. And If a rem shows a bunch of the backlinks, it slows down the paging

• Example of the some rems: caption, bulletlist, table, table90, table120, w360 ...

[data-rem-container-tags~="remover"] .animate-zoom-into-bullet #show-embedded-search-button,
[data-rem-container-tags~="remover"] .animate-zoom-into-bullet #AutomaticSearchPortals,
[data-rem-container-tags~="remover"] .rem-container--embedded-search-stub {
  display: none !important;
}

• Before

• After

.rich-text-editor > .pointer-events-none {
  opacity: .2;
}

.rem-bullet__container {
  pointer-events: none;
}

[data-rem-tags="card-item"] .text-gray-20 {
  display: none;
}

.add-new-document-button {
  display: none;
}

.popup-menu > .p-1 {
  display: none;
}

.rn-add-rem-button--top {
  height: 10px;
  display: block;
} 

.extra-card-detail .extra-card-detail__item .RichTextViewer .align-text-top {
  zoom: 125%; /* Tune here */
}