Custom rem bullet icons

With the following CSS, you can replace the standard rem bullets with custom icons for concepts, descriptors, and questions. It also adds a custom hover animation for all rem bullets because the original hover CSS isn’t that great with custom icons.

It is inspired by @hannesfrank’s Card Type CSS.

image

.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;
  width: 16px;
  height: 12px;
  position: relative;
  top: 1px;
  left: 2px;
  -webkit-mask-image: url("https://justtolook.github.io/remnote-theme/concept.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
}
.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;
  width: 16px;
  height: 12px;
  position: relative;
  top: 1px;
  left: 1px;
  -webkit-mask-image: url("https://justtolook.github.io/remnote-theme/descriptor.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;}

.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;
  width: 16px;
  height: 12px;
  position: relative;
  top: 1px;
  left: 1px;
  -webkit-mask-image: url("https://justtolook.github.io/remnote-theme/question.svg");
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-size: contain;
}

.rem-bullet {
border-radius: 4px;
}

.rem-container--concept-rem-type .rem-bullet__container.rem-bullet__container-undefined:hover, .rem-container--not-in-article .rem-bullet__container:hover .rem-bullet--hidden-children {
border-radius: 4px;
}

.rem-container--not-in-article .rem-bullet__container:hover .rem-bullet--all-children-visible, .rem-container--not-in-article .rem-bullet__container .rem-bullet--hidden-children{
border: 0;
}

.rem-container--not-in-article .rem-bullet__container:hover .rem-bullet--all-children-visible{
transition: transform .2s ease; /* Animation */
transform: scale(1.4);
}

.rem-container--not-in-article .rem-bullet__container:hover .rem-bullet--hidden-children {
border: 0;
transition: transform .2s ease; /* Animation */
transform: scale(1.4);
}
11 Likes

That’s a really great idea!