No Bullet Editor Mode like in Notion

[Browneyedsoul]

Currently, I`m making No bullet default Theme.

The remainder of work

In Progress

Thanks to @Henrik and @hannesfrank , the Flashcard rem bullet was perfect!
but one thing that I stumbled is this.

Diffrentiating hidden and opened state by background color.
Of course that image represent Header 3 parent and normal rem-text child, so that was possible.

but what I really want is the relation between Normal rem-text parent and children. but I don’t know that would be possible. Please help!

For now, I’m using the Custom bullet Tag to differentiate Hierarchy between parent and children, but I hope there’s another more natural alternative

No Bullets Default Setting

:root {
    --bullet-main:#53555f;
    --bullet-doc:#50fa7b;
    --bullet-folder:#53555f;
    --bullet-concept:#53555f;
    --bullet-descriptor:#53555f;
}

.rem-bullet {
	border-color: black;
  	background-color: transparent;
	border-radius: 2px;
	margin-top: 4px;
 	margin-left: ;
}

/* Setting for Opened Rem Container Bullet */

.rem-bullet__container 
.rem-bullet.rem-bullet--all-children-visible {
	border: 0.1px solid var(--bullet-main) ;
	background-color: transparent;
	height: 4px ;
	width: 4px ;
}

.rem-bullet__container-undefined 
.rem-bullet.rem-bullet {
	border: transparent ;
	background-color: transparent;
}

/* Setting for Hidden Rem container Bullet */

.rem-bullet__container
.rem-bullet.rem-bullet--hidden-children {
	border: 0.1px solid var(--bullet-main) !important;
	background-color: black;
	height: 4px !important;
	width: 4px !important;
}

Make Unordered Bullet list by Intentional Tagging

[data-rem-container-tags~="bulletlist"] .rem-bullet { 	
	background-color: #2B3137 !important; 
	border-color: #CC0000 !important; 
	border-radius: 4px !important;
	height: 4px !important;
	width: 4px !important;
	margin-left: px !important;
}

[data-rem-tags~="bullet"] .rem-bullet { 	
	border: 0.1px solid var(--bullet-main) !important;
	background-color: transparent;
	height: 4px ;
	width: 4px ;
}

Setting for Flashcard Rem Exception

Concept-Rem-Type Bullet by Henrik

.rem-container--concept-rem-type 
.rem-bullet__container
.rem-bullet__container-undefined :hover :not(document), 

.rem-container--concept-rem-type 
.rem-bullet__container.rem-bullet__container-undefined 
.rem-bullet{
	background: green !important;
	width: 16px !important;
	height: 12px !important;
	position: relative !important;
	top: 1px !important;
	left: 2px !important;
	-webkit-mask-image: url("https://justtolook.github.io/remnote-theme/concept.svg");
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: contain;
}

Descriptor-Rem-Type Bullet by Henrik

.rem-container--descriptor-rem-type 
.rem-bullet__container
.rem-bullet__container-undefined :hover:not(document), 

.rem-container--descriptor-rem-type 
.rem-bullet__container.rem-bullet__container-undefined 
.rem-bullet {
	background: blue !important;
	width: 14px !important;	
	height: 12px !important;
	position: relative !important;
	top: 1px !important;
	left: 1px !important;
	-webkit-mask-image: url("https://justtolook.github.io/remnote-theme/descriptor.svg");
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: contain;
}

Question-Rem-Type Bullet by Henrik

.rem-container--question-rem-type 
.rem-bullet__container
.rem-bullet__container-undefined :hover :not(document), 

.rem-container--question-rem-type 
.rem-bullet__container.rem-bullet__container-undefined 
.rem-bullet{
	background: purple !important;
	width: 14px !important;
	height: 12px !important;
	position: relative !important;
	top: 1px !important;
	left: 1px !important;
	-webkit-mask-image: url("https://justtolook.github.io/remnote-theme/question.svg");
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: contain;
}

[Browneyedsoul]

Latest update available!

GitHub - browneyedsoul/RemNote-CSS-Library

[sara.remnote]

Hello! When I use this, it overrides the icon in folders and documents so that I can’t click on it to zoom in, it only opens up the toggle. I don’t understand code, is there any way I can change this? What would I have to edit in the code so this doesn’t happen?

[Browneyedsoul]

Hi, @sara.remnote

Honestly, That description is the exact way this snippet is meant to be.
Many people were dissatisfied with the inadvertent clicking of the bullets so I manually prevented that.
If you want to zoom into rem, just use shortcut Ctrl(⌘) + ' or click the six dots symbol and find the “zoom into” menu, please!

or going back to the older version of this snip would be another solution that you are seeking. Unless you have some time for playing around with CSS I will not recommend it for you.

Prevent Accidental Clicks On Bullet Points

Is there any way to require a double click to open Rems? I find that I accidentally click the circle when trying to click the start of a line for editing and then I accidentally open the rem having to then back out and slightly disturbing work flow. Otherwise, love RemNotes. Wish I had this earlier!!

[Cedar_Gum]

HI @Browneyedsoul,

Thanks for sharing your code. I really like the notion theme but I am wondering if there is a way to show the bullet points of children? Sometimes bullet points make is easier to digest compared to paragraphs.

[Browneyedsoul]

Hi @Cedar_Gum ! Glad you like it!
Absolutely you can make bullet points using the editor mode, but it needs some tagging : bulletlist

And if you want just one tag for bulleted children, you can use bulletlists

Cheers,