How to set font of all tags on right of every rem?

RemNote Learning RemNote
#1

How can I set the font of tags? (globally, not specific one)

1
1817×73 6.32 KB

#2

This should do it:

/* font */
.hierarchy-editor__tag-bar__tag {
font-family: Arial;
}

Other useful stylings I have for tag pills:

/* hide the "x", show on hover*/
.hierarchy-editor__tag-bar__tag .hierarchy-editor__tag-bar__tag__delete {display: none}
.hierarchy-editor__tag-bar__tag:hover .hierarchy-editor__tag-bar__tag__delete {display: inline}

/* opacity */
.hierarchy-editor__tag-bar__tag  {opacity: .50}
.hierarchy-editor__tag-bar__tag:hover {opacity: 1}
#3

https://developer.mozilla.org/en-US/docs/Web/CSS/:not

#4

Ohh nice thank you but I can not arrange font size. Do you have any idea why? @ognsya
I think this snippet clashes with the one @hannesfrank gave me. If I disable his snippet, it works. Is there a way these both work together?

/* font */
.hierarchy-editor__tag-bar__tag {
font-family: Arial;
font-size:9px;
}


/* making subsequent indented rem's font smaller*/ 
:root {
--initial-font-size: 18px;
--shrinking-factor: 0.9em;
}

#document {
font-size: var(--initial-font-size) !important;  
}

#document * { 
font-size: 1em;
color:black;
}

.tree-node-container {
font-size: var(--shrinking-factor) !important; 
}
#5

@lyrk In CSS there is a point system for which rule get’s applied to an html element (see e.g. https://specifishity.com/). IDs (#document) have higher precendence than classes (.hierarchy-editor__tag-bar__tag). So in your case add an additional #document before .hierarchy-editor__tag-bar__tag to make that rule more specific/have a higher priority than #document *.

#6

@hannesfrank thank you. Is this correct? I added #document but this not working either. Bear with me. I am a complete noob. :woozy_face:

/* tag font */
#document.hierarchy-editor__tag-bar__tag {
font-family: Arial;
font-size: 9px;
}

:root {
--initial-font-size: 18px;
--shrinking-factor: 0.9em;
}

#document {
font-size: var(--initial-font-size) !important;  
}

#document * { 
font-size: 1em;
color:black;
}

.tree-node-container {
font-size: var(--shrinking-factor) !important;
}
#7

You need a space because .hierarchy-editor__tag-bar__tag is a child of #document:

#document .hierarchy-editor__tag-bar__tag

This overwrites the rule

#document *

where * is a wild card for any element that is a descendant of #document (notice the space between #document and *) which also matches .hierarchy-editor__tag-bar__tag and thus was used because the id #document is more specific than the bare class .hierarchy-editor__tag-bar__tag.

#8

Thank you so much. I learned lots.