obsidian.css

/*
 * This is a legacy file for the pre-v1 Obsidian app. It's not
 * maintained anymore, but older versions of Obsidian might use it.
 * For the up-to-date version, see `theme.css`.
 */

:root {
  --color-dracula-background: #282a36;
  --color-dracula-selection: #44475a; /* a.k.a. "Current line" */
  --color-dracula-foreground: #f8f8f2;
  --color-dracula-comment: #6272a4;
  --color-dracula-cyan: #8be9fd;
  --color-dracula-green: #50fa7b;
  --color-dracula-orange: #ffb86c;
  --color-dracula-pink: #ff79c6;
  --color-dracula-purple: #bd93f9;
  --color-dracula-red: #ff5555;
  --color-dracula-yellow: #f1fa8c;

  --color-faint-formatting: #666;
  --color-faint-formatting-alt: #999;
  --color-dracula-comment-lighter: #7282b4;
  --color-dracula-yellow-ish: #f4f9bf; /* 50/50 blend of -yellow and -foreground */

  --header-hanging-margin: 30px; /* extra margin for hanging ### (header formatting) in there */
  --empty-line-height: 1em; /* 1em = 16px = 2/3 of the height of the normal line, which is 24px */
  --list-item-margin: 0.375em; /* bottom margin for a list item, to keep the items separated */
}

.is-mobile {
  --header-hanging-margin: 0px; /* must be `0px`, not `0`, for using in calc() */
}

.theme-dark,
.theme-light {
  --background-primary: var(--color-dracula-background);
  --background-primary-alt: var(--color-dracula-selection);
  --background-secondary: var(--color-dracula-selection);
  --background-secondary-alt: var(--color-dracula-background);

  /* Dropdown border and section dividers in the settings */
  --background-modifier-border: #666;

  /* Button background */
  --interactive-accent: var(--color-dracula-comment);
  --interactive-accent-hover: var(--color-dracula-comment-lighter);

  /* Button text */
  --text-on-accent: var(--color-dracula-foreground);

  /* Note text */
  --text-normal: var(--color-dracula-foreground);
}

/*
 **************************************
 * Workspace (outside of the editor)
*/

.workspace-split.mod-left-split .workspace-tabs .workspace-leaf {
  /* don't let the left sidebar's top right corner touch the editor */
  border-top-right-radius: 6px;
}
.workspace-split.mod-right-split .workspace-tabs .workspace-leaf {
  /* don't let the right sidebar's top right corner touch the editor */
  border-top-left-radius: 6px;
}

.workspace-split.mod-right-split .workspace-tabs {
  /* don't let the right sidebar overlap its resize handle */
  padding-left: 4px;
}
.workspace-leaf-resize-handle {
  /* less noise if we don't see them until they are hovered */
  background-color: transparent;
}

.nav-files-container {
  /* don't let the selected filename touch the left nav pane */
  padding-left: 4px;
}

.workspace-leaf.mod-active .view-header {
  border-bottom-color: var(--color-dracula-purple);
}

/*
 **************************************
 * Editor/Preview: general layout
*/

/* Align Preview with Editor (Desktop app) */
.markdown-preview-view {
  padding-left: calc(var(--header-hanging-margin) + 24px); /* 30px -> extra + 24px */
  padding-right: calc(var(--header-hanging-margin) + 22px); /* 30px -> extra + 22px */
  padding-top: 24px; /* 15px -> 24px */
}
.markdown-source-view .cm-scroller {
  padding-left: calc(var(--header-hanging-margin) + 20px) !important; /* 20px -> extra + 20px */
  padding-right: calc(var(--header-hanging-margin) + 20px) !important; /* 20px -> extra + 20px */
  line-height: 1.5 !important; /* 1.4 -> 1.5 */
}

/* Align Preview with Editor (Mobile app) */
.is-mobile .markdown-preview-view {
  padding: 15px; /* 0 20px -> 15px */
}
.is-mobile .markdown-source-view .cm-scroller {
  padding: 11px !important; /* 20px -> 11px */
}

/*
 **************************************
 * YAML front matter (metadata)
*/

/* All front matter fields (if you enable it in the settings) */
.markdown-source-view .cm-hmd-frontmatter {
  line-height: 1.4em; /* monospace font is weird */
}
.markdown-preview-view pre.frontmatter {
  padding: 1.5em 1em !important;
}
.markdown-preview-view pre.frontmatter code {
  line-height: 1.5em !important;
  padding: 0;
}

/* Supported subset of front matter is rendered in this separate block */
.markdown-preview-view .frontmatter-container {
  margin: 0 0 1.5em 0;
}

/*
 **************************************
 * Headings
 * - Six Dracula colors (the "red" is not used)
 * - Sizes from 1em to 2em with 0.2em interval
 * - Same look in Editor and Preview (except for ###)
 * - Formatting (###) is header's font-size * 0.6
*/

.markdown-source-view .HyperMD-header,
.markdown-preview-view h1,
.markdown-preview-view h2,
.markdown-preview-view h3,
.markdown-preview-view h4,
.markdown-preview-view h5,
.markdown-preview-view h6 {
  font-weight: 600;
  line-height: 1.3 !important;
  padding: 0.2em 0 0 0;
  margin: 0;
}

.markdown-source-view .HyperMD-header {
  padding-left: 4px;
}

.markdown-source-view .HyperMD-header-1,
.markdown-preview-view h1 {
  color: var(--color-dracula-pink);
  font-size: 2em;
  padding-top: 0; /* h1 is special like this */
}
.markdown-source-view .HyperMD-header-2,
.markdown-preview-view h2 {
  color: var(--color-dracula-purple);
  font-size: 1.8em;
}
.markdown-source-view .HyperMD-header-3,
.markdown-preview-view h3 {
  color: var(--color-dracula-cyan);
  font-size: 1.6em;
}
.markdown-source-view .HyperMD-header-4,
.markdown-preview-view h4 {
  color: var(--color-dracula-green);
  font-size: 1.4em;
}
.markdown-source-view .HyperMD-header-5,
.markdown-preview-view h5 {
  color: var(--color-dracula-yellow);
  font-size: 1.2em;
}
.markdown-source-view .HyperMD-header-6,
.markdown-preview-view h6 {
  color: var(--color-dracula-orange);
  font-size: 1em;
}

.markdown-source-view .HyperMD-header .cm-header {
  /* inherit from its parent, .HyperMD-header, defined above */
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
}
.markdown-source-view .HyperMD-header .cm-formatting-header {
  font-size: 0.6em !important;
}

/* Hanging headers (desktop only) */
.markdown-source-view .HyperMD-header {
  position: relative;
}
.is-mobile .markdown-source-view .HyperMD-header {
  position: initial;
}
.markdown-source-view .HyperMD-header .cm-formatting-header {
  opacity: 0.4;
}
.markdown-source-view .HyperMD-header-1 { text-indent: -0.4884em; }
.markdown-source-view .HyperMD-header-2 { text-indent: -0.8562em; }
.markdown-source-view .HyperMD-header-3 { text-indent: -1.2402em; }
.markdown-source-view .HyperMD-header-4 { text-indent: -1.7866em; }
.markdown-source-view .HyperMD-header-5 { text-indent: -2.2291em; }
.markdown-source-view .HyperMD-header-6 { text-indent: -2.6894em; }

/*
 **************************************
 * Paragraphs & empty lines
 * - in Editor, we'll have empty lines after each block (header, paragraph, list etc.)
 * - in Preview, we'll emulate empty lines with the equivalent padding-bottoms
*/

/* Empty line in Desktop app */
.markdown-source-view .cm-line br:only-child {
  display: block;
  content: ''; /* a way to style <br> */
  width: 0;
  height: var(--empty-line-height);
}
/* Empty line in Mobile app */
/* On mobile, it's buggy: when removing one empty line,
 * the mobile app might remove two consecutive empty lines instead,
 * or when trying to add an empty line, the app might refuse to do so
 * (pressing Enter in the middle of the text does nothing). So after a few
 * weeks of testing, I'm disabling it on mobile and let the Editor's empty
 * line to not match the Preview's (in the mobile app only). */
.is-mobile .markdown-source-view .cm-line br:only-child {
  display: inline;
  content: normal;
  width: auto;
  height: auto;
}


.markdown-preview-view p {
  /* to align Preview with Editor, emulate empty line with padding-bottom */
  padding: 0 0 var(--empty-line-height) 0;
  margin: 0;
}

/* to align Preview with Editor, emulate empty line after the header
   (sizing looks tricky, just to make the padding the same size in pixels) */
.markdown-preview-view h1 { padding-bottom: calc(var(--empty-line-height) / 2); }
.markdown-preview-view h2 { padding-bottom: calc(var(--empty-line-height) / 1.8); }
.markdown-preview-view h3 { padding-bottom: calc(var(--empty-line-height) / 1.6); }
.markdown-preview-view h4 { padding-bottom: calc(var(--empty-line-height) / 1.4); }
.markdown-preview-view h5 { padding-bottom: calc(var(--empty-line-height) / 1.2); }
.markdown-preview-view h6 { padding-bottom: calc(var(--empty-line-height) / 1); }

/*
 **************************************
 * Lists
*/

.markdown-preview-view ul,
.markdown-preview-view ol {
  /* like paragraphs, plus left padding */
  margin: 0 0 calc(var(--empty-line-height) + var(--list-item-margin)) 1.5em;
  padding: 0;
}

.markdown-preview-view ul ul,
.markdown-preview-view ul ol,
.markdown-preview-view ol ul,
.markdown-preview-view ol ol {
  /* nested lists use top padding, instead of bottom one */
  margin-top: var(--list-item-margin);
  margin-bottom: 0;
}

/* align paddings for Editor's line container and Preview's <li> */
.markdown-source-view .HyperMD-list-line {
  padding: 0 0 var(--list-item-margin) 0;
}
.markdown-preview-view li {
  margin: 0 0 var(--list-item-margin) 0;
}

.markdown-preview-view li p {
  padding: 0;
  margin: 0;
}

/*
 **************************************
 * Block quotes
*/

.markdown-source-view .HyperMD-quote {
  padding-left: 3em !important;
}

.markdown-source-view .HyperMD-quote .cm-quote {
  color: var(--color-dracula-yellow-ish);
  font-style: italic;
}

.markdown-source-view .HyperMD-quote .cm-formatting-quote {
  /* make '>' dimmed, but not invisible */
  color: var(--color-faint-formatting);
}

.is-mobile .markdown-source-view .HyperMD-quote {
  position: relative; /* to make sure the vertical line from `:before` does not bleed out of the container */
}

.markdown-source-view .HyperMD-quote:before {
  /* add vertical line */
  position: absolute;
  content: '';
  width: 4px;
  height: 100%;
  left: 1.4em;
  background-color: var(--color-dracula-yellow);
}

.markdown-preview-view blockquote {
  color: var(--color-dracula-yellow-ish);
  border: none; /* reset default box */
  border-left: 4px solid var(--color-dracula-yellow);
  font-style: italic;
  padding: 0 0 0 1.4em;

  /* like paragraphs, plus left margin */
  margin: 0 0 var(--empty-line-height) 1.06em;
}
.markdown-preview-view blockquote > :last-child {
  padding-bottom: 0;
}

/*
 **************************************
 * Bold and italic
*/

.markdown-source-view .cm-strong,
.markdown-source-view .HyperMD-quote .cm-quote.cm-strong,
.markdown-preview-view strong {
  color: var(--color-dracula-orange);
  font-weight: bold;
}

.markdown-source-view .cm-em,
.markdown-source-view .HyperMD-quote .cm-quote.cm-em,
.markdown-preview-view em {
  color: var(--color-dracula-yellow);
  font-style: italic;
}

.markdown-source-view .cm-formatting-strong,
.markdown-source-view .cm-formatting-em {
  opacity: 0.4;
  font-weight: normal; /* for bold text, make the formatting asterisks non-bold */

  /* We still let the asterisks for italic text to be italic though,
     so they align better with the text between them. */

  /* Previously, we used `font-size: 0.7em; vertical-align: text-top;` here.
     This caused "funny" navigation issues: when pressed DOWN from **phrase|**,
     the cursor would go to the end of the current line, instead of the middle
     of the next line. So it's better to keep formatting the same font size and
     v-alignment. */
}

/*
 **************************************
 * Links
*/

.markdown-source-view span.cm-link,
.markdown-source-view span.cm-hmd-internal-link,
.markdown-preview-view a {
  color: var(--color-dracula-pink);
}

.markdown-source-view span.cm-url {
  color: var(--color-dracula-cyan);
}

.markdown-source-view span.cm-formatting-link,
.markdown-source-view span.cm-formatting-link-string {
  color: var(--text-faint);
}

/*
 **************************************
 * Hashtags
*/

.markdown-source-view span.cm-hashtag,
.markdown-preview-view a.tag {
  color: var(--color-dracula-pink);
  background-color: var(--background-primary-alt);
  text-decoration: none;
  border-radius: 0.1875em; /* 3px */
  padding: 0.125em 0.375em 0.1875em 0.375em; /* 2px 6px 3px 6px */
}

.markdown-source-view span.cm-hashtag {
  border-radius: 0 0.1875em 0.1875em 0; /* 3px */
  padding-left: 0;

  /* without this line, the vertical padding in .cm-hashtag makes editor's cursor tiny; can fix, can't explain */
  margin: -0.125em 0;
}
.markdown-source-view span.cm-hashtag.cm-formatting-hashtag {
  font-family: inherit; /* not monospace */

  border-radius: 0.1875em 0 0 0.1875em; /* 3px */
  padding-left: 0.375em; /* 6px */
  padding-right: 0;
}

/*
 **************************************
 * Inline code
*/

.markdown-source-view span.cm-inline-code {
  color: var(--color-dracula-green);
  font-size: 1em;

  /* to conceal "internal" border-radius'es, make the content (code) and the formatting (backticks) overlap */
  margin: 0 -0.125em; /* -2px */
  padding: 0.125em 0 0.1875em 0; /* 2px 0 3px 0 */

  /* to render code content over the overlapping formatting-end */
  position: relative;
  z-index: 2;
}

.markdown-source-view span.cm-inline-code.cm-formatting-code {
  color: var(--color-faint-formatting-alt);
  border-radius: 0.1875em; /* 3px */

  z-index: 1;
  margin: 0;
}

.markdown-preview-view code {
  color: var(--color-dracula-green);
  font-size: 1em;
  padding: 0.125em 0.375em 0.1875em 0.375em; /* 2px 6px 3px 6px */
  border-radius: 0.1875em; /* 3px */
}

/*
 **************************************
 * Block code
*/

.markdown-source-view .HyperMD-codeblock,
.markdown-source-view span.cm-hmd-indented-code {
  color: var(--color-dracula-orange);
  font-size: 1em;
  line-height: 1.375; /* 24px -> 22px */
}

.markdown-source-view .HyperMD-codeblock-begin,
.markdown-source-view .HyperMD-codeblock-end {
  color: var(--color-faint-formatting-alt);

  /* make backticks small */
  font-size: 0.7em;
  line-height: 1.2;

  /* and move them down a bit */
  position: relative;
  padding-top: 0.4em;
}

.markdown-preview-view pre,
.markdown-preview-view pre[class*="language-"] {
  /* second selector is needed to override typed code blocks without !important */
  font-size: 1em;
  line-height: 1.375; /* 24px -> 22px */
  padding: 0.8125em 1em; /* 13px - to match Editor's top and bottom backtick rows */
  margin: 0 0 var(--empty-line-height) 0; /* like paragraphs */
}

.markdown-preview-view pre code,
.markdown-preview-view pre code[class*="language-"] {
  /* override it again for typed code blocks (e.g., "```js") */
  display: block;
  line-height: 1.375; /* 24px -> 22px */
}

.markdown-preview-view pre code {
  color: var(--color-dracula-orange);
}

/*
 **************************************
 * Thematic breaks
*/

.markdown-source-view span.cm-hr {
  color: var(--color-dracula-comment);
  font-weight: bold;
}

.markdown-preview-view hr {
  border-color: var(--color-dracula-comment);

  /* to match Editor's paragraphs, the height must be = 1.5 + empty-line-height */
  --hr-actual-size: 0.125em; /* 2px high */
  --hr-required-size: 1.5em; /* normal text line height */
  --hr-remainder: calc(var(--hr-required-size) - var(--hr-actual-size));
  --hr-margin-top: calc(var(--hr-remainder) / 2);
  --hr-margin-bottom: calc(var(--hr-margin-top) + var(--empty-line-height));

  border-top-width: var(--hr-actual-size);
  margin: var(--hr-margin-top) 0 var(--hr-margin-bottom) 0;
}

/*
 **************************************
 * Tables
*/

.markdown-preview-view th {
  background-color: var(--background-primary-alt);
  font-weight: 600; /* not 800 */
}