There are multiple variants on what (all tags, styling tags, power-up tags) should be hidden when (hovering the rem, focusing the rem, hovering the tag bar), where (current rem, subtree, all rem with specific tag) and how (should the hidden things still take up space or not).
Depending on what you want you can piece together the CSS from a list of modules. For example this
.rem:not(:focus-within):not(:hover) .hierarchy-editor__tag-bar__power-up-tag {
display: none;
}
hides
-
Where: tags in all rem (
.rem) -
When: the rem is not focused for editing nor hovered (
:not(:focus-within):not(:hover)) -
What: powerup tags only (
.hierarchy-editor__tag-bar__power-up-tag) -
How: Make them not take up space anymore (
display: none;)
In gereral you follow this template:
[WHERE][WHEN] [WHAT TAGS] {
[HOW]
}
and fill it with the parts listed below.
Where
All rem
Applies to every rem.
.rem
Specific rem
You can identify rem via data attributes generated from tags (Guide: data attributes). For example [data-rem-tags~="hide-tags"] selects all rem tagged with #hide tags (note the space turning into a -). E.g.
[data-rem-tags~="hide-tags"]:not(:focus-within) .hierarchy-editor__tag-bar {
display: none;
}
Subtree (rem with children) of a specific rem
If you use [data-rem-container-tags~="hide-tags"] instead of [data-rem-tags~="hide-tags"] you select these rem with all their children. This is useful if you want to hide all tags in a #kanban board or table.
[data-rem-container-tags~="kanban"]:not(:focus-within) .hierarchy-editor__tag-bar {
display: none;
}
When
It’s not a good idea to remove tags all the time since you then have no method of removing a tag which can not be done with a shortcut yet.
So you show the tags (or rather not hide them) only when hovering the rem, or focusing the rem to edit or a combination of both.
When editing the rem
:not(:focus-within)
When hovering the rem
:not(:hover)
:hovering the tag bar
Instead of showing the tags when hovering any part of the rem you can also display them again by only hovering over where they were shown before. This only works if you visibility: hidden the tag bar so it still takes up space to hover over.
Essentially move the [WHEN] part from [WHERE] to [WHAT]. E.g.
.rem hierarchy-editor__tag-bar:not(:hover) {
visibility: hidden;
}
Hide always?
If you are certain that you don’t need to see the hidden tags anymore, e.g. if you only hide some specific (styling) tags (see below) and you don’t plan to remove them once applied (you could still undo right after adding them) then you can permanently hide them by leaving out both clauses.
You can still show tags when disabling the style in Custom CSS or you could create a #show tags tag to temporarily show the tags in a subtree again. Add this :not([data-rem-container-tags~="show-tags"]) to your tag hiding rules:
[data-rem-container-tags~="hide-tags"]:not([data-rem-container-tags~="show-tags"]) .hierarchy-editor__tag-bar {
display: none;
}
Now you can add #show tags, edit your tags and then remove #show-tags again.
Advanced
There are several advanced variations of when to show the tags again specificly for subtrees which are not all demonstrated here:
- Show all tags of the subtree when focusing any rem of the subtree (when you add
:not(:hover)after[data-rem-container-tags], this is shown above). - Show only tags of the currently focused rem
- Show only tags of the root (e.g. to remove the
#hide tagstag) - Combinations of any a rem of the subtree and hovering
- …
What
All rem/the whole tag bar
.hierarchy-editor__tag-bar
Only power-ups
.hierarchy-editor__tag-bar__power-up-tag
Specific tags
Targeting specific tags (e.g. styling tags) is not possible yet since the tags themselves have not data attributes yet (vote this feature request: More data attributes). The only thing that is preserved at the moment is the highlight color. So you could for example reserve a highlight color (here purple) for your styling tags and remove them with
.rem:not(:focus-within) .hierarchy-editor__tag-bar__tag.highlight-color--purple {
display: none;
}
How to hide (take up space in layout or not)
For the actual hiding CSS you have two options.
Remove
This completely removes the selected elements from the document as if they were not present at all.
display: none;
The tag bar does not occupy any space now which means you can not :hover over it anymore.
Hide
This just turns them invisible.
visibility: hidden;
The difference to display:none is that they still take up space in the document which means you can :hover it. But since you can’t hover invisible elements you have to add an extra * to hide the child elements of the tag bar leaving the tag bar itself visible (but empty) and hoverable.
.rem[data-rem-tags~="hide-tags"] .hierarchy-editor__tag-bar:not(:hover) * {
visibility: hidden;
}
See also Guide: data attributes for which data attributes you can work with.
Note: Currently not all tags are shown all the time. To make their display configurable via CSS we need: Stable Markup: Show Tags.
