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

Latest update available!

5 Likes