Various CSS Snippets for Obsidian's "Edit" view (I never use the Reading view 😁), using the default theme in light mode. They are modular on purpose, so that they can be easily enabled or disabled individually.
01-variables.css
Sets the variables that should be carried over across the various snippets. It is prefixed with 01- to ensure that it will always load first.
bg-grid.css
If enabled, it will add a square grid background to all the notes including the `bg--grid` cssclass in their properties:
bg-lines.css
If enabled, it will add horizontal lines to all the notes including the `bg--lines` cssclass in their properties:
callout-spoiler.css
Styles a spoiler custom callout, and reveals its contents after the box is both expanded and the user hovers over the content area.
Syntax:
> [!spoiler]- Spoiler
> The butler did it!code.css
- Changes to the CodeBlock layout. It uses
filter: invert()so that it applies the reverse styling on dark mode. - Highlights the hovered line.
- Adds numbers to the side.
comments.css
Converts comments to tooltips which show their content on hover. It works for both inline and block comments.
Syntax:
You can use inline footnotes ^[This is an inline footnote.] and then continue your text.footnotes.css
Converts inline footnotes to tooltips which show their content on hover.
Syntax:
You can use inline footnotes ^[This is an inline footnote.] and then continue your text.headings.css
Styles the various headings.
lists.css
Styles the lists (ordered and unordered).
properties.css
Styles the properties block.
quote.css
Styles the quote block.
sidebar.css
Hides the Attachments folder from the sidebar.
word-count.css
A small modification for the Better Word Count plugin, which only shows the counter on hover.
