obsidian styles

obsidian.css

body {
  --inline-code-padding: 2px;
  --inline-code-border-radius: 4px;
}

/* inline code style */
.cm-s-obsidian span.cm-inline-code,
.markdown-rendered code,
.markdown-preview-view code {
  border: var(--tag-border-width) solid var(--background-modifier-border);
  padding: var(--inline-code-padding);
  border-radius: var(--inline-code-border-radius);
}

/*
could just disable all the styles on active lines:

.cm-active span.cm-inline-code {
  padding: var(--inline-code-padding) 0;
  border: 0;
  border-radius: 0;
}

but nah:

when it's a single `` pair, it's a single span.formatting-code

when it's `something`, it's

- span.formatting-code
- span.cm-inline-code
- span.formatting-code

Unfortunately, that makes it really hard to match both scenarios, since the
first one alone can't be matched as if it were both the first and last of its
class (not just type, this is https://caniuse.com/css-nth-child-of).

But last-of-type seems to mostly get it right to correct just the right border.
*/

/* this matches both first and last formatting-code ` surrounds: */
span.cm-formatting-code.cm-inline-code {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  padding-right: 0;
  border-right: 0;
}

/* match the inline code bit between ` delimiters */
span.cm-formatting-code + span.cm-inline-code {
  border-radius: 0;
  border-left: 0;
  border-right: 0;
  padding-left: 0;
  padding-right: 0;
}

/* this matches the second ` delimiter */
span.cm-inline-code + span.cm-inline-code.cm-formatting-code {
  padding-left: 0;
  padding-right: var(--inline-code-padding);
  border-left: 0;
  border-radius: 0 var(--inline-code-border-radius) var(--inline-code-border-radius) 0;
  border-right:var(--tag-border-width) solid var(--background-modifier-border);
}

/* finally, assuming most of the "bare" `` pairs are going to be input on a line
 * as the last element, just find the last span and make sure it has a border and
 * padding on the right */
.cm-active span.cm-formatting-code:last-of-type {
  padding-right: var(--inline-code-padding);
  border-top-right-radius: var(--inline-code-border-radius);
  border-bottom-right-radius: var(--inline-code-border-radius);
}

/* add a border to code blocks */
.cm-s-obsidian div.HyperMD-codeblock-begin-bg {
  border-top:var(--tag-border-width) solid var(--background-modifier-border);
  border-left:var(--tag-border-width) solid var(--background-modifier-border);
  border-right:var(--tag-border-width) solid var(--background-modifier-border);
}

.cm-s-obsidian div.HyperMD-codeblock-bg {
  border-left:var(--tag-border-width) solid var(--background-modifier-border);
  border-right:var(--tag-border-width) solid var(--background-modifier-border);
}
.cm-s-obsidian div.HyperMD-codeblock-end-bg {
  border-bottom:var(--tag-border-width) solid var(--background-modifier-border);
}

pre {
  border:var(--tag-border-width) solid var(--background-modifier-border);
}

/* add a line under the h2 heading in dataview */
.markdown-preview-view h2, .markdown-rendered h2 {
  padding-bottom: 0.4em;
  border-bottom: 1px solid var(--background-modifier-border);
}

.markdown-source-view.mod-cm6 hr,
.markdown-preview-view hr {
  border-top: 2px dashed var(--h2l);
}

/* change h3 underline to dotted */
.h3-l .markdown-reading-view h3, .h3-l .mod-cm6 .cm-editor .HyperMD-header-3, .markdown-rendered h3 {
  border-bottom: 1px dashed var(--h3l);
}

/* 
Fix indent on elements rendered in dataview blocks in preview mode. This is the selector from
https://github.com/kepano/obsidian-minimal/blob/6.0/src/scss/features/line-width.scss#LL179C1-L179C1
and I'm not sure why the max-width needs to be set. Anyway, putting it back to
100% fixes the indents.
*/
body:not(.table-100):not(.table-max):not(.table-wide) .markdown-preview-view.is-readable-line-width:not(.table-100):not(.table-max):not(.table-wide) .block-language-dataview h4,
body:not(.table-100):not(.table-max):not(.table-wide) .markdown-preview-view.is-readable-line-width:not(.table-100):not(.table-max):not(.table-wide) .block-language-dataview>h4,
body:not(.table-100):not(.table-max):not(.table-wide) .markdown-preview-view.is-readable-line-width:not(.table-100):not(.table-max):not(.table-wide) .block-language-dataviewjs h4,
body:not(.table-100):not(.table-max):not(.table-wide) .markdown-preview-view.is-readable-line-width:not(.table-100):not(.table-max):not(.table-wide) .block-language-dataviewjs>h1,
body:not(.table-100):not(.table-max):not(.table-wide) .markdown-preview-view.is-readable-line-width:not(.table-100):not(.table-max):not(.table-wide) .block-language-dataviewjs>h2,
body:not(.table-100):not(.table-max):not(.table-wide) .markdown-preview-view.is-readable-line-width:not(.table-100):not(.table-max):not(.table-wide) .block-language-dataviewjs>h3,
body:not(.table-100):not(.table-max):not(.table-wide) .markdown-preview-view.is-readable-line-width:not(.table-100):not(.table-max):not(.table-wide) .block-language-dataviewjs>h4,
body:not(.table-100):not(.table-max):not(.table-wide) .markdown-preview-view.is-readable-line-width:not(.table-100):not(.table-max):not(.table-wide) .block-language-dataviewjs>p,
body:not(.table-100):not(.table-max):not(.table-wide) .markdown-preview-view.is-readable-line-width:not(.table-100):not(.table-max):not(.table-wide) .dataview.dataview-container>.contains-task-list,
body:not(.table-100):not(.table-max):not(.table-wide) .markdown-preview-view.is-readable-line-width:not(.table-100):not(.table-max):not(.table-wide) .dataview.dataview-error,
body:not(.table-100):not(.table-max):not(.table-wide) .markdown-preview-view.is-readable-line-width:not(.table-100):not(.table-max):not(.table-wide) .dataview.list-view-ul,
body:not(.table-100):not(.table-max):not(.table-wide) .markdown-preview-view.is-readable-line-width:not(.table-100):not(.table-max):not(.table-wide) .dataview.result-group {
  max-width: 100%;
}

/* make headers that are also links colorful again */
body.colorful-headings h2 a,
body.colorful-headings .cm-s-obsidian span.cm-header-2 span.cm-underline {
  color: var(--h2-color);
  text-decoration: underline dotted;
}
body.colorful-headings h3 a,
body.colorful-headings .cm-s-obsidian span.cm-header-3 span.cm-underline {
  color: var(--h3-color);
  text-decoration: underline dotted;
}

body.colorful-headings h4 a,
body.colorful-headings .cm-s-obsidian span.cm-header-4 span.cm-underline {
  color: var(--h4-color);
  text-decoration: underline dotted;
}