Drop-in style tweaks for Obsidian making Live Preview as close as possible to the rendered Preview.

obsidian-style-tweaks.css

/* Obsdian styles */
/* Tested on v0.14.2 */

/* 
Partially based on:
- https://github.com/Dmitriy-Shulha/obsidian-css-snippets
*/

/* tags */
/* ---- */
/* https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/13 */

.markdown-preview-view .tag {
  color: var(--text-accent);
  padding: 0px 1px;
  text-decoration: inherit; /* in case there are others from parents, such as line-through */
  display: inline-block;
  margin: 0px 0px;
  cursor: pointer;
}
.markdown-preview-view .tag:hover {
  color: var(--text-accent-hover);
}

/* live preview */
.markdown-source-view.cm-s-obsidian span.cm-hashtag {
  color: var(--text-accent);
  text-decoration: inherit; /* in case there are others from parents, such as line-through */
  display: inline-block;
  margin: 0px 0px;
  cursor: pointer;
}
.markdown-source-view.cm-s-obsidian span.cm-hashtag:hover {
  color: var(--text-accent-hover);
}


/* auto fading */
/* ----------- */
/* https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/10 */

/* note top bar controls */
.view-header:not(:hover) .view-actions {
  opacity: 0.1;
  transition: opacity 0.25s ease-in-out;
}

/* status bar */
.status-bar:not(:hover) .status-bar-item {
  opacity: 0.25;
  transition: opacity 0.25s ease-in-out;
}

/* embeds */
/* ------ */
/* https://forum.obsidian.md/t/meta-post-common-css-hacks/1978/41 */

/* Remove embed yaml front matter */
.markdown-embed-content > .language-yaml {
  display: none;
}

/* Tigher padding, no margins, no borders */
.markdown-preview-view .markdown-embed,
.markdown-preview-view .file-embed {
  margin: 0;
  padding: 20px 5px;
  border: 0;
}

/* mark */
/* ---- */


/* blockquotes */
/* ----------- */

.markdown-preview-view blockquote {
  margin: 0;
  border: 0;
  border-left: 5px solid var(--background-modifier-border);
  padding: 0 0 0 15px;
}

.markdown-preview-view blockquote > p {
  margin: 0.5em 0;
}

.markdown-preview-view blockquote > p:first-child {
  margin-bottom: 0.5em;
  margin-top: 0;
  margin-left: 0;
  margin-right: 0;
}

.markdown-preview-view blockquote > p:last-child {
  margin-bottom: 0;
  margin-top: 0.5em;
  margin-left: 0;
  margin-right: 0;
}

.markdown-source-view.mod-cm6.is-live-preview .HyperMD-quote {
  padding: 0 0 0 15px;
  background-color: var(--background-primary);
}

.markdown-source-view.cm-s-obsidian span.cm-quote {
  color: var(--text-normal);
}

/* checkboxes                                        */
/* ------------------------------------------------- */
/* https://forum.obsidian.md/t/nicer-checkboxes/2238 */
/* https://forum.obsidian.md/t/style-checkboxes/1199 */

input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  border-radius: 50%;
  border: 1px solid var(--background-modifier-border);
  padding: 0;
}

input[type="checkbox"]:focus {
  outline: 0;
}

input[type="checkbox"]:checked {
  background-color: var(--background-modifier-border);
  background-position: center;
  background-size: 70%;
  background-repeat: no-repeat;
  background-image: url('data:image/svg+xml; utf8, <svg width="12px" height="10px" viewBox="0 0 12 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g stroke="%23f9f9f9" stroke-width="1" fill="none" fill-rule="evenodd"><g transform="translate(-4.000000, -6.000000)" fill="%23f9f9f9"><path d="M8.1043257,14.0367999 L4.52468714,10.5420499 C4.32525014,10.3497722 4.32525014,10.0368095 4.52468714,9.8424863 L5.24777413,9.1439454 C5.44721114,8.95166768 5.77142411,8.95166768 5.97086112,9.1439454 L8.46638057,11.5903727 L14.0291389,6.1442083 C14.2285759,5.95193057 14.5527889,5.95193057 14.7522259,6.1442083 L15.4753129,6.84377194 C15.6747499,7.03604967 15.6747499,7.35003511 15.4753129,7.54129009 L8.82741268,14.0367999 C8.62797568,14.2290777 8.3037627,14.2290777 8.1043257,14.0367999"></path></g></g></svg>');
}

.markdown-preview-view .task-list-item-checkbox {
  top: 5px;
}

.markdown-preview-view ul.contains-task-list {
  padding-inline-start: 35px;
}

/* live preview */
.markdown-source-view .task-list-item-checkbox {
  top: 5px;
}

/* links */
/* ----- */

.markdown-preview-view .internal-link {
  text-decoration: none;
}

.markdown-preview-view .external-link {
  background: none;
  padding-right: 0;
}

/* live preview */
.markdown-source-view .cm-hmd-internal-link .cm-underline {
  text-decoration: none;
}
.markdown-source-view span.cm-hmd-internal-link:hover {
  text-decoration: none;
}

.markdown-source-view.mod-cm6 .cm-url .cm-underline {
  color: var(--text-accent);
}

.markdown-source-view.mod-cm6 .cm-url .cm-underline:hover {
  color: var(--text-accent-hover);
}


/* inline code */
/* ----------- */

.markdown-preview-view code {
  color:  var(--text-normal);
  font-size: 0.95em;
  padding: 2px 4px;
  border: none;
  border-radius: 6px;
}

/* live preview */
.markdown-source-view.cm-s-obsidian span.cm-inline-code {
  color:  var(--text-normal);
  font-size: 0.95em;
  padding: 2px 4px;
  border: none;
  border-radius: 6px;
}

/* live preview adds backticks as separate elements when cursor is on the inline code */
.markdown-source-view.cm-s-obsidian span.cm-formatting-code.cm-inline-code {
  padding: 2px 1px;
  border-radius: 0px;
}

.markdown-source-view.cm-s-obsidian span.cm-formatting-code.cm-inline-code + span.cm-inline-code {
  padding: 2px 0px;
  border-radius: 0px;
}


/* code blocks */
/* ----------- */

.markdown-source-view.cm-s-obsidian .HyperMD-codeblock:not(.HyperMD-codeblock-begin, .HyperMD-codeblock-end) {
  padding-left: 16px;
}

.markdown-source-view.cm-s-obsidian .HyperMD-codeblock .code-block-flair {
  margin: 5px;
  padding: 5px;
  color: var(--text-muted);
  background-color: var(--interactive-normal);
  border-radius: 4px;
  border: none;
  position: absolute;
  top: 0;
  right: 0;
  z-index: 1;
}

.markdown-source-view.cm-s-obsidian .HyperMD-codeblock .code-block-flair:hover {
  background-color: var(--interactive-hover);
}


/* mark / highlight */
/* ---------------- */

.markdown-preview-view mark {
  padding: 1px 2px;
  border: none;
  border-radius: 2px;
}

/* live preview */
.markdown-source-view.cm-s-obsidian span.cm-highlight {
  padding: 1px 2px;
  border: none;
  border-radius: 2px;
}



/* vim cursor */
/* ---------- */

/* TODO */