No Bullet Editor Mode like in Notion

Currently, I`m making No bullet default Theme.

The remainder of work

8247fa81b9648fd493c3a068c020341ee427b108_2_226x499

In Progress

Thanks to @Henrik and @hannesfrank , the Flashcard rem bullet was perfect!
but one thing that I stumbled is this.
CleanShot 2021-06-09 at 15.43.39

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! :stuck_out_tongue:

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;
}
8 Likes

Latest update available!

5 Likes

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?

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.

1 Like

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.

1 Like

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,

1 Like