CSS snippets for Obsidian

/* Make bold text bolder */
.cm-s-obsidian span.cm-formatting-strong,
.cm-s-obsidian span.cm-strong,
.cm-s-obsidian strong {
  --bold-weight: 1000;
}

/* Make headers with different levels have different colors */
body {
  --h1-color: var(--color-red);
  --h2-color: var(--color-orange);
  --h3-color: var(--color-yellow);
  --h4-color: var(--color-green);
  --h5-color: var(--color-blue);
  --h6-color: var(--color-purple);
}

/* Make the vertical line besides a blockquote thinker */
body {
  --blockquote-border-thickness: 8px;
}

/* Make the first row in a table not bold by default because sometimes we don't want the first row to be the header */
/* If we do want to make the first row looks like a header, just surround each item in the first row with double asterisks to make them bold */
.cm-s-obsidian .cm-table-widget th {
  font-weight:normal;
}

/* Hide the blank line above a table to save space */
.cm-line:has(+ .cm-embed-block.cm-table-widget) br {
  display: none;
}

/* Make math equations bigger */
mjx-math {
  font-size: 140% !important;
}

/* Make horizontal lines thinker */
hr {
  border: 2px solid;
}

/* Indent headers */
h2, .HyperMD-header-2 { left: -56px; }
h3, .HyperMD-header-3 { left: -30px; }
h4, .HyperMD-header-4 { left: -15px; }
h5, .HyperMD-header-5 { left: -7.5px; }
h6, .HyperMD-header-6 { left: 0px; }
div.markdown-preview-view,
div.markdown-source-view div.cm-content { 
  /* Shift note right to spare space for headers */
  padding-left: 30px !important;
  margin-right: -20px !important;  /* more characters in one line */
}
/* ref: https://forum.obsidian.md/t/heading-and-text-after-it-indentation/53086/4 */

/* Prevent mermaid images being cropped */
.mermaid svg { 
  max-width: 100%; 
  height: auto;
}

/* Make math blocks align left */
mjx-container {
  text-align: left !important;
}

.internal-embed.markdown-embed.inline-embed.is-loaded {
  border: 2px dashed gray;
  /* background-color: rgb(240, 255, 255); */
}

/* Enable text wrapping in file sidebar */
.nav-file-title-content, .nav-folder-title-content {
  white-space: normal;
}

/* Automically display horizontal line before header 2 */
.HyperMD-header-2::before {
  content: '';
  position: absolute;
  width: 100%;
  height: 3px;
  left: 0;
  top: 4px;
  display: block;
  clear: both;
  background-color: black;
}

/* Surrond mermaid graph with rectangle boder */
.mermaid {
  border: 1px solid black;
}

reference:

• https://forum.obsidian.md/t/help-changing-color-of-headers-2023/67907/2
• https://forum.obsidian.md/t/hiding-the-blank-line-above-tables/63465
• https://forum.obsidian.md/t/how-to-remove-vertical-line-beside-blockquote/70909/2
• https://forum.obsidian.md/t/soft-wrap-file-name-in-sidebar/2369/18
• https://forum.obsidian.md/t/resize-and-align-mermaid-diagrams/7019/24
• https://forum.obsidian.md/t/how-to-change-mathjax-style/12974/2