CSS snippets for obsidian

Personal collection of obsidian snippets. These are written with the dark variant of the minimal theme in mind but most should work on both light and dark variants of the vanilla obsidian theme. Some might need modifications to be useful, some might be a bit too topical, but there might be something of use to you here. Feel free to browse!

[!TIP] Snippets have badges for various features or requirements. for being experimental, for exposing cssclasses, for providing Obsidian Style Settings Plugin configuration options, and for depending on a plugin or theme.

• Installing
• Components
  • Link callout / Card
    • cssclasses
    • Settings
  • kbd styling
  • Apple extended keyboard kbd styling
  • Highlight styling
    • Settings
  • Completed task opacity
    • Settings
  • Move completed tasks to bottom
  • <ruby> styling
• Typography
  • text-wrap value for headings
    • Settings
  • text-wrap value for paragraphs
    • Settings
  • 1lh paragraph spacing
  • Monospace font feature settings
    • Settings
  • Muted URL text in markdown source
  • Source Mode Editor Font
    • Settings
  • Disable the default subpixel antialiasing (MacOS only)
  • italicized comments for code blocks
  • text-box-trim
• Images
  • Force 16/4 image ratio
  • Force 100% image width
  • No image grid column gaps
  • Auto image rendering
  • Pixelated image rendering
• Credits

Installing

You can find detailed CSS snippet installation instructions at Obsidian's help page

Components

Link callout / Card

callout-link.css

Styles an obsidian callout component as a vertical (link) or horizontal (hlink) card component using the existing callout syntax. Gracefully degrades if unstyled.

Here's how it works, best used in templates because of the finicky syntax. All parts are required:

> [!link] ignored <!-- title ignored, hlink produces horizontal link callout rather than vertical/card callout -->
> [Example Title w/ link](https://example.com/xxx) <!-- title, can be just text but also link -->
>
> ![[S8288469ecf534a62b5462ae9ef47bf5dK.webp]] <!-- cover image, can also be in the standard markdown inline image link format -->
>
> [example.com](https://example.com/xxx) <!-- link, can be also be an empty link: []() -->
>
> A very nice description <!-- description, can be skipped by using a not-printable character like <wbr> -->

This is how the vertical link callout in the screenshot above is produced:

# frontmatter, see cssclasses below
cssclasses:
  - callout-link-ratio-3-4
  - callout-link-max-w-20

> [!link]
> Rez
>
> ![[Gamedb/_resources/Rez-co720j.jpg]]
>
> []()
>
> United Game Artists<wbr>

And this is how the horizontal link is produced:

> [!hlink] #2, by Οτομπρίτσι Μοτόρι
> #2, by Οτομπρίτσι Μοτόρι
>
> ![](https://f4.bcbits.com/img/a2922594486_16.jpg)
>
> [bandcamp.com](https://otompritsisuperdeluxe.bandcamp.com/album/2)
>
> 18 track album

cssclasses

• callout-link-image-contain will use object-fit: contain; for cover images
• callout-link-max-w-20 will set the max width for the default variant to 20rem
• callout-link-ratio-3-4 will set the cover image aspect ratio to 3/4. When combined with callout-link-max-w-20 works well with tall and narrow cover images like movie posters

Settings

id	default
callout-link-max-width-default	30rem
callout-link-min-width	20rem
callout-link-max-height-horizontal	8rem
callout-link-background	rgb(18 18 18) (dark), rgba(0, 0, 0, 0.024) (light)
callout-link-link-color	rgb(125 125 125) (dark), rgb(104, 104, 104) (light)
callout-link-link-hover-color	rgb(145 145 145) (dark), rgb(84, 84, 84) light
callout-link-title-color	rgb(241 241 241) (dark), rgb(35, 35, 35) light
callout-link-desc-color	rgb(125 125 125) (dark), rgb(104, 104, 104) light
callout-link-cover-image-background	rgb(0, 0, 0) (dark), rgb(255, 255, 255) light

🔼 Back to top

kbd styling

kbd.css

Styling for the <kbd> elements and hotkey display.

🔼 Back to top

Apple extended keyboard kbd styling

kbd-aek.css

kbd.css's sibling, uses the Univers typeface in italic to match the style of the Apple extended keyboard keycap style. Falls back to --font-text if Univers is not available.

🔼 Back to top

Highlight styling

highlight-experimental.css

Custom highlight styling, uses pseudo-random border radii and box-decoration-break: clone.

Settings

id	default
highlight-background	hsla(33.26, 80%, 65.69%, 1) (dark), hsla(33.26, 80%, 75.69%, 1) (light)
highlight-box-shadow-offset	2px

🔼 Back to top

Completed task opacity

completed-tasks.css

Used to dim completed tasks. Will dim all nested subtasks and bullet points.

Settings

id	default
completed-task-opacity	0.7

🔼 Back to top

Move completed tasks to bottom

task-ordering.css

(Visually) moves completed tasks to the bottom of their list regardless of source order. Works only in reading view.

🔼 Back to top

<ruby> styling

ruby-experimental.css

Styling for the ruby element. Depends on this fork of obsidian-markdown-furigana for the hover effect.

🔼 Back to top

Typography

text-wrap value for headings

heading-text-wrap.css

Text wrapping to use for headings in rendered markdown. Works only in reading view. Defaults to balance

Settings

id	default
rendered-markdown-heading-text-wrap	balance

🔼 Back to top

text-wrap value for paragraphs

paragraph-text-wrap.css

Text wrapping to use for paragraphs in rendered markdown. Works only in reading view. Defaults to pretty

Settings

id	default
rendered-markdown-paragraph-text-wrap	pretty

🔼 Back to top

1lh paragraph spacing

paragraph-spacing.css

MDN

🔼 Back to top

Monospace font feature settings

monospace-font-feature-settings.css

Feature settings used for monospace fonts in places like code blocks and frontmatter. See MDN for syntax.

Settings

id	default
monospace-font-feature-settings	"ss02"

🔼 Back to top

Muted URL text in markdown source

muted-url-in-editing-mode.css

Uses minimal theme's --text-formatting value and falls back to Obsidian's --text-faint value.

🔼 Back to top

Source Mode Editor Font

source-mode-editor-font.css

Font to use exclusively for the source mode in the editing view.

Settings

id	default
source-mode-editor-font	var(--font-monospace)

🔼 Back to top

Disable the default subpixel antialiasing (MacOS only)

webkit-font-smoothing-antialiased.css

Makes fonts appear visually lighter by applying -webkit-font-smoothing: antialiased to the document body. More about this in this blog post.

🔼 Back to top

italicized comments for code blocks

italic-code-comments.css

Pretty specific hack for italicized code comments for the shiki plugin using the github dark theme.

🔼 Back to top

text-box-trim

text-box-trim-experimental.css

Experimental use of text-box-trim, check text-box-trim-examples for examples. Not recommended for general use.

🔼 Back to top

Images

Force 16/4 image ratio

img-ratio-16-4.css

Forces an ultra-wide 16/4 ratio for all note images when adding img-ratio-16-4 to cssclasses. Works only in reading view.

🔼 Back to top

Force 100% image width

img-width-100.css

Forces a 100% width for all note images that have not a width defined already (ex. ![[img.png|256]]) when adding img-width-100 to cssclasses. Works only in reading view.

🔼 Back to top

No image grid column gaps

img-grid-gap-0.css

Eliminates column gaps in minimal theme image grids. Useful for things like magazine spreads or continuous images.

Usable by adding img-grid-gap-0 to the cssclasses frontmatter prop.

🔼 Back to top

Auto image rendering

image-rendering.css

Sets image-rendering to auto by default for both editing and reading views.

🔼 Back to top

Pixelated image rendering

img-rendering-pixelated.css

Sets image-rendering to pixelated for note images. Useful for scaled pixel art.

Usable by adding img-rendering-pixelated to the cssclasses frontmatter prop.

🔼 Back to top

Credits

• kbd element styling based on Dylan Smith's Styling the kbd element
• Used Kacper Kula's Randomness in CSS with trigonometry functions for producing randomness in CSS
• Badges generated with shields.io