WYSIWYG-like.css

/* WYSIWIG-like formatting

Adapted from: 
    - Santi Younger's Org-sidian-Bullets: https://github.com/santiyounger/Org-sidian-Bullets
    - Ozan Tellioglu's oz-image-in-editor-obsidian: https://github.com/ozntel/oz-image-in-editor-obsidian
    - ChezFrancois's Typora-like Custom CSS shared in Obsidian Forum

Last Updated: 7/16/21 
*/

/* Headers */
.markdown-preview-view h1, .cm-header-1 { font-size: 1.64rem; }
.markdown-preview-view h2, .cm-header-2 { font-size: 1.33rem; }
.markdown-preview-view h3, .cm-header-3 { font-size: 1.16rem; }
.markdown-preview-view h4, .cm-header-4 { font-size: 1rem; }
.markdown-preview-view h5, .cm-header-5 { font-size: 0.83rem; }
.markdown-preview-view h6, .cm-header-6 { font-size: 0.64rem; }

.cm-formatting-header-1 { font-size: 1.83rem; }
.cm-formatting-header-2 { font-size: 1.44rem; }
.cm-formatting-header-3 { font-size: 1.16rem; }
.cm-formatting-header-4 { font-size: 1rem; }
.cm-formatting-header-5 { font-size: 0.83rem; }
.cm-formatting-header-6 { font-size: 0.64rem; }

div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-formatting-header {
  color: transparent !important;
}

div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-formatting-header::before {
  display: inline-block !important;
  white-space: nowrap;
  word-wrap: none;
  width:0;
  overflow:visible;
  font-size: 0.75rem;
  color: var(--text-muted);
}

div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-formatting-header-1::before {
  content: 'H1';
}
div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-formatting-header-2::before {
  content: 'H2';
}
div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-formatting-header-3::before {
  content: 'H3';
}
div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-formatting-header-4::before {
  content: 'H4';
}
div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-formatting-header-5::before {
  content: 'H5';
}
div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-formatting-header-6::before {
  content: 'H6';
}

/* H1 and H2 underlines */
.HyperMD-header.HyperMD-header-1.CodeMirror-line {
    border-bottom: 2px solid lightgray;
    border-bottom: linear
}

.HyperMD-header.HyperMD-header-2.CodeMirror-line {
    border-bottom: 1px solid lightgray;
}

/* --- HORIZONTAL RULES ---  */

/* Hide --- if not active line */
div:not(.CodeMirror-activeline) > .CodeMirror-line span.cm-hr {
    color: transparent;
}

/* Render simple line */
.CodeMirror-code > :not(.CodeMirror-activeline) .HyperMD-hr.CodeMirror-line {
    height: 1px;
    background: lightgray;
    background: -webkit-gradient(linear, 0 0, 100% 1px, from(white), to(white), color-stop(0%, lightgray));
}

/* --- BLOCKQUOTES ---  */

.cm-quote {
    font-style: italic;
}
div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-formatting.cm-formatting-quote,
div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-hmd-indent-in-quote {
  color: transparent !important;
  display: inline !important;
}
div:not(.CodeMirror-activeline)>.HyperMD-quote {
   border-left: 3px solid var(--text-selection);
   border-color: var(--text-accent) !important;
   border-radius: 0 8px 8px 0;
   background-color:rgb(238, 234, 234);
   margin-left: 5px;
   padding: 8px 18px 8px 8px;
   display: inline-block;
   width: 100%;
}

/* --- UNORDERED LISTS ---  */

/* hide - if not active active line */ 
.CodeMirror-code > :not(.CodeMirror-activeline) .cm-formatting-list-ul {
    display:none;
}

/* unordered list 1 */
.CodeMirror-code> :not(.CodeMirror-activeline) .cm-formatting-list-ul+.cm-list-1::before {
    /* margin-left: 3px; */
    margin-right: 0.3em;
    content: "•";
}

/* unordered list 2 */
.CodeMirror-code> :not(.CodeMirror-activeline) .cm-formatting-list-ul+.cm-list-2::before {
    /* margin-left: 3px; */
    margin-right: 0.3em;
    content: "◦";
}

/* unordered list 3 */
.CodeMirror-code> :not(.CodeMirror-activeline) .cm-formatting-list-ul+.cm-list-3::before {
    /* margin-left: 3px; */
    margin-right: 0.3em;
    content: "‣";
}

/* --- TASKS ---  */

/* hide - [ ] if not active line */
.CodeMirror-code > :not(.CodeMirror-activeline) .cm-formatting-task.cm-meta,
.CodeMirror-code > :not(.CodeMirror-activeline) .cm-formatting-task.cm-property {
    display:inline !important;
    color: transparent;
    margin-left: -2em;
}

/* incomplete task */
div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-formatting-task.cm-meta::after {
  content: "⬜️";  
  margin-right: 0.2em;
  color:rgb(124, 131, 124);
}

/* completed task */
div:not(.CodeMirror-activeline)>.CodeMirror-line span.cm-formatting-task.cm-property:after {
    content: "✅";
    margin-right: 0.2em;
    color:rgb(124, 131, 124) !important;
}
span.cm-formatting-task.cm-property ~ span {
  text-decoration: line-through;
  color: rgb(124, 131, 124) !important;
}

/* --- HIGHLIGHTS ---  */

/* hide == if not active line */
div:not(.CodeMirror-activeline) > .CodeMirror-line .cm-formatting-highlight.cm-highlight {
    font-size: 0;
   }

/* --- BOLD ---  */

/* Hide ** if not active line */
div:not(.CodeMirror-activeline) > 
.CodeMirror-line span.cm-formatting.cm-formatting-strong.cm-strong {
    display:none;
}

/* --- ITALIC ---  */

/* Hide * if not active line */
div:not(.CodeMirror-activeline) >
.CodeMirror-line span.cm-formatting.cm-formatting-em.cm-em {
    display:none;
}