Meta Post - Common CSS Hacks

Share & showcase
340

I had similar problems with a variety of CSS snippets people have posted for relationship lines. I found, however, that the relationship lines in the Minimal theme work correctly in both edit and preview modes. Not sure if the code would work with other themes (and you’d definitely need to update the color variables with another theme), but here is the CSS from Minimal for relationship lines:

/* Relationship lines */

/* Relationship lines in Preview */

body.minimal-rel-preview .markdown-preview-view ul ul {
  position:relative;
}
body.minimal-rel-preview .markdown-preview-view ul ul::before {
  content:'';
  border-left:1px solid var(--background-modifier-border);
  position:absolute;
  left:-14px;
  top:0;
  bottom:0; 
}
body.minimal-rel-preview .markdown-preview-view ul.contains-task-list::before {
  top:5px;
}
body.minimal-rel-preview .markdown-preview-view .task-list-item-checkbox {
  margin-left:-21px;
}

/* Relationship lines in Edit mode  */

body.minimal-rel-edit .cm-hmd-list-indent > .cm-tab {
  display:inline-block;
}
body.minimal-rel-edit .cm-hmd-list-indent > .cm-tab:after {
  content:" ";
  display:block;
  width:1px;
  position:absolute;
  top:1px;
  border-right:1px solid var(--background-modifier-border);
  height:100%;
}

/* --------------- */
1 Like