Icons as bullets

[alxlg]

Here there is my CSS for icons as bullet points.

I use the following CSS for each icon/tag that I want to set:

.ls-block[data-refs-self*='"book'] > .flex.flex-row.pr-2 .bullet-container .bullet:before {
    content: "\ea39" !important;
    font-family: 'tabler-icons';
    color: var(--awSt-content-text-user, var(--ls-primary-text-color));
    background-color: var(--awSt-content-bg-user, var(--ls-primary-background-color));
    border-radius: 100%;
    position: relative;
    top: -10px;
    left: -6px;
    letter-spacing: 1px;
    padding-top: 1px;
    padding-bottom: 2px;
    padding-left: 2px;
    padding-right: 1px;
}

.ls-block[data-refs-self*='"book']>.flex.flex-row.pr-2>.block-control-wrap a>.bullet-container.bullet-closed>.bullet:before {
    background-color: var(--ls-block-bullet-border-color);
    border-radius: 15%;
    opacity: 75%;
  }

.ls-block[data-refs-self*='"book']>.flex.flex-row.pr-2>.block-control-wrap a>.bullet-container.bullet-closed>.bullet {
    background-color: transparent;
}

.ls-block[data-refs-self*='"book']:not(:focus-within) .bullet {
    transform: none;
}

.ls-block[data-refs-self*='"book']>.flex.flex-row.pr-2>.block-control-wrap a:hover>.bullet-container {
    background-color: transparent;
}

.ls-block[data-refs-self*='"book']>.flex.flex-row.pr-2>.block-control-wrap a:hover>.bullet-container .bullet {
    background-color: transparent;
}

.ls-block[data-refs-self*='"book']>.flex.flex-row.pr-2>.block-control-wrap a:hover>.bullet-container .bullet {
    transform: none;
}

.ls-block[data-refs-self*='"book']>.flex.flex-row.pr-2>.block-control-wrap a:focus>.bullet-container .bullet {
    background-color: transparent;
}

.ls-block[data-refs-self*='"book']>.flex.flex-row.pr-2>.block-control-wrap a>.bullet-container.bullet-closed {
    background-color: transparent;
}

.ls-block[data-refs-self*='"book'] > div > .flex.flex-col.block-content-wrapper {
    padding-left: 2px;
}

But this makes sense only if you use a set of tags as classes/types for blocks (for example #book, #person etc) and I think it should be up to the user to set which tags and icons to use.

What can't be done is sharing the definition of these icons with others, for example the ones for properties. In fact what could happen is the following:

- Title of a project     #project
  (this block gets the bullet icon for project as expected)

- Something else     #idea
  project:: Foo
  (this block could get the wrong icon, the one for #project, instead
  of the one for #idea, when #project is defined after #idea in the CSS

For me the setting could be a simple text box where the user write the tag names and the icon and it is said that the order matter:

[stan-voo]

@alxlg Could you please share your CSS for making tags aligned to the right side? Is it graph-wide?