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 is deprecated, use --bold-modifier instead */ /* --bold-weight: 1000; */ --bold-modifier: 250; } /* ref: https://www.reddit.com/r/ObsidianMD/comments/yunc56/how_to_make_bold_text_more_visible/ */ /* 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; }