Skip to main content
CSS Snippets

CSS Snippets #

General CSS snippets #

  • Style for text-decoration will not apply in selection layer.
  • ::selection does not work for some reason.

Methodology:

  1. Keep the snippets short and element-wise.
  2. Keep simple documentation and trial-error records.
  3. Conform to default theme and use existing CSS variables (with fallback) when possible.

Also see:

Default theme with iA Writer CSS #

First 29 lines of mrowa44/obsidian-ia-writer/theme.css (Base64 encoded iA Writer Duo font, too large to include here), plus:

body {
  --h1-size: var(--font-text-size);
  --h2-size: var(--font-text-size);
  --h3-size: var(--font-text-size);
  --h4-size: var(--font-text-size);
  --h5-size: var(--font-text-size);
  --h6-size: var(--font-text-size);
  --vault-name-font-weight: 600;

  --file-line-width: min(800px, 98vw);
  --file-margins: 64px 32px 32px 32px;

  --h1-color: var(--text-normal);
  --link-color: var(--text-normal);
  --text-faint: var(--text-muted);
  --callout-title-color: var(--text-normal);
  --link-unresolved-color: var(--text-normal);
  --link-external-color: var(--text-normal);
  --link-external-color-hover: var(--color-accent);
  --checkbox-color: var(--text-muted);
  --checkbox-border-color: var(--text-muted);
  --list-marker-color: var(--text-muted);
  --tab-text-color: var(--text-normal);
  --tab-text-color-focused: var(--text-normal);
  --tab-text-color-focused-active: var(--text-normal);
  --tab-text-color-active: var(--text-normal);
  --nav-item-color: var(--text-normal);
  --link-unresolved-opacity: 1;
  --list-marker-color: var(--text-normal);
  --titlebar-background-focused: var(--background-secondary);

  /* inline code colours */
  --code-normal: var(--text-normal);
  --code-background: var(--color-base-25);
}

.theme-light,
.theme-dark {
  --font-default: var(--font-monospace);
  --font-text: var(--font-monospace);
  --font-monospace: Menlo, "Source Code Pro", Courier, monospace;
  --line-height-normal: 1.7;
  --link-decoration: underline;
  --link-unresolved-decoration-color: var(--text-muted);
  --link-external-decoration-color: var(--text-muted);
  --checklist-done-decoration: line-through;
}

.theme-light {
  /* swapped background colors */
  --background-primary: #FCFCFC;
  --background-secondary: #F7F7F7;
  --text-normal: #1A1A1A;
  --text-muted: #B5B3B1;
  --text-highlight-bg: #FCEA95;
  --text-highlight-border: 4px solid #FFD700;
  --text-highlight-color: var(--text-normal);
}

.theme-dark {
  --background-primary: #1B1B1B;
  --background-secondary: #141414;
  --text-normal: #CCC;
  --text-muted: #707070;
  --text-highlight-bg: #494113;
  --text-highlight-border: 4px solid #D4B000;
  --text-highlight-color: #DCCF99;
}

/* nav file tree */
body:not(.is-grabbing) .nav-file-title.is-active:hover,
body:not(.is-grabbing) .nav-folder-title.is-active:hover,
.nav-file-title.is-active, .nav-folder-title.is-active {
  /* background: var(--color-accent); */
  /* color: var(--text-on-accent); */
  background: var(--nav-item-background-hover);
  color: var(--text-normal);
}

/* underline */
.markdown-source-view.mod-cm6 .is-unresolved .cm-underline,
.markdown-source-view.mod-cm6 .cm-underline,
.cm-underline,
/* internal links */
.cm-s-obsidian span.cm-hmd-internal-link,
/* internal links in preview */
.internal-link,
/* external links */
.cm-s-obsidian span.cm-url,
/* external links in preview */
.external-link {
  text-decoration: underline;
  text-decoration-color: var(--text-muted);
  text-underline-offset: 3px;
}
/* external links */
.cm-s-obsidian span.cm-url {
  color: var(--text-muted);
}
/* adjust link title style */
.cm-s-obsidian span.cm-link:hover {
  /* color: unset; */
  text-decoration: unset;
}
.cm-s-obsidian .cm-active span.cm-link:hover {
  color: unset; /* editing */
}

/* highlight */
.cm-highlight {
  border-bottom: var(--text-highlight-border);
}
.cm-s-obsidian span.cm-formatting-highlight, .cm-s-obsidian span.cm-highlight {
  color: var(--text-highlight-color);
}

/* comment */
.cm-s-obsidian .cm-formatting-list.cm-comment {
  color: var(--code-comment);
}
.cm-comment .list-bullet::after {
  background: var(--code-comment);
}
.markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="x"]:has(.cm-comment),
.markdown-source-view.mod-cm6 .HyperMD-task-line[data-task="X"]:has(.cm-comment) {
  text-decoration-color: var(--code-comment);
}

Active pane highlight #

Subtle yet effective.

Another choice (not tested): smikula/obsidian-limelight: Spotlight your active pane

.mod-active .workspace-tab-header-container {
  border-bottom: 1px solid var(--color-accent);
}

Hide word count in word count plugin #

Because I write only want the characters. Only works on desktop, haven’t figured out how to do this on mobile (yet).

.plugin-word-count .status-bar-item-segment:first-of-type {
  display: none;
  visibility: collapse;
}

Hide new tab button #

Old habits die hard.

.workspace-tab-header-new-tab {
  display: none !important;
  visibility: collapse;
}

Highlight index files in file tree #

Simple method: bold font

.nav-file-title[data-path*="index"] {
  font-weight: bold !important;
}

Complex method: add indicators

.nav-file-title[data-path*="index"] {
  display: flex;
  justify-content: space-between;
}

.nav-file-title[data-path*="index"]::before {
  content: none;
}

.nav-file-title[data-path*="index"]::after {
  content: "!";
  display: inline-block;
}

Works in code/live preview/reading mode, links or embed links.

Or try scottwillmoore/obsidian-short-links: An Obsidian plugin to display short internal links.

.cm-hmd-internal-link:not(.cm-hmd-embed)::before,
.cm-formatting-embed::after,
a.internal-link::before {
  content: "🏷️";
  display: inline-block;
  text-decoration: underline;
  text-decoration-color: var(--text-muted);
  text-underline-offset: 3px;
}

.cm-hmd-internal-link+.cm-hmd-internal-link::before {
  content: none;
}

TODO: Indicator per URL protocol (use :has[href^="message:"])

Reference: Default external link indicator
.external-link {
  color: var(--link-external-color);
  text-decoration-line: var(--link-external-decoration);
  background-position: center right;
  background-repeat: no-repeat;
  background-image: linear-gradient(transparent, transparent), url(public/images/874d8b8….svg);
  background-size: 13px;
  padding-right: 16px;
  background-position-y: 4px;
  cursor: var(--cursor-link);
  filter: var(--link-external-filter);
}

LaTeX font size tweak #

This applies to both inline and display maths.

mjx-math {
  font-size: 115% !important;
}

Multi-state checklist #

CSS snippet:

Plugin:

Readable line length adjustment #

Ref: Changes the readable line length in Obsidian Notes. Tested in Obsidian v1.0.0

I manually calibrated the following numbers to make each line to have the exact same number of Chinese characters as Notes.app on iPad mini (which is the same number under both portrait and landscape mode), which is my other writing environment.
Tested on Obsidian 1.4.16, with iA Writer Duo font 16px.

body {
  /* target: Note.app on iPad mini 6 */
  --file-line-width: 606px !important;
  /* --file-line-width: 63ch !important; */
}

/* Somehow the numbers are different on iPad  */
@supports (-webkit-touch-callout: none) {
  body {
    --file-line-width: 620px !important;
  }
}

Show close file button at all times #

Old habits die hard (again).

.workspace .mod-root .workspace-tabs:not(.mod-stacked) .workspace-tab-header:not(.is-active) .workspace-tab-header-inner-close-button {
  display: flex;
}

@media (hover: hover) {
  .workspace .mod-root .workspace-tabs:not(.mod-stacked) .workspace-tab-header:not(.is-active) .workspace-tab-header-inner-close-button:hover {
    background: var(--background-secondary);
  }
}
.mod-left-split:not(:hover),
.mod-right-split:not(:hover) {
  opacity: 0.3;
}

Table editor tweaks #

/* alt background for reading mode */
.markdown-rendered {
  --table-row-alt-background: var(--background-secondary);
  --table-row-alt-background-hover: var(--background-secondary);
  /* --table-drag-handle-background: var(--text-highlight-bg); */
}

/* add border at hovering drag handles */
.markdown-source-view.mod-cm6 .cm-table-widget .table-row-drag-handle,
.markdown-source-view.mod-cm6 .cm-table-widget .table-col-drag-handle {
  border: var(--table-add-button-border-width) solid var(--table-add-button-border-color);
}

Writing/testing CSS snippets for iOS devices #

Refs:

Media query #

Refs:

test text

The device-width feature is deprecated. The following code may break at any time.

/* Any iOS device */
@supports (-webkit-touch-callout: none) {
  /* ... */ 
}

/* iPad mini 6 */
@media only screen 
  and (min-device-width: 744px) 
  and (max-device-width: 1133px)
  and (-webkit-min-device-pixel-ratio: 2) {
  /* ... */
}

/* iPhone 14 Pro & 15 Pro */
@media only screen 
  and (min-device-width: 393px) 
  and (max-device-width: 852px) 
  and (-webkit-min-device-pixel-ratio: 3) { 
  /* ... */
}

On-device testing #

Ref: [Mobile] IOS : App to work with hidden folder - Share & showcase - Obsidian Forum

Editors/apps that I have tested:

  • Taio: Works. This is my current setup on iPad, with Obsidian in full-screen, and Taio in Slide Over. All changes are reflected in real time.
    1. Source Code Editing feature requires the Pro plan, which has a Lifetime option and I bought it when the app first came out. Please note that it is far more expensive than the other mentioned app called Textastic, which I cannot test because it requires iPadOS 16.
    2. Usage: Add folders: Files (folder icon)▸Added Locations▸⊕▸Add Folder▸Pick Obsidian vault; edit files: Files (folder icon)▸Added locations▸Tap through the folders▸Tap on file to be edited.
  • a-Shell: Works.
    1. The included editor is Vim, which is really a hassle to use with on-screen keyboard.
    2. Usage: pickFolder to Obsidian vault▸cd .obsidian/snippets▸vim <file>. (When opening file that starts with - or +,like -cursor.css, use vim -- -cursor.css. Ref)
    3. Brief tutorial.
  • iSH: Too lazy to test thoroughly.
    1. I was able to cd into my Obsidian vault in iCloud, but the app does not include an editor. Documentation says a lot of editor should work, including vim, nano, and emacs.
    2. Brief startup tutorial, official documentation on basic operations.
  • Koder: Does not work. “Open File From Files” feature uses Apple’s Files.app, therefore does not show hidden files; and no support for open folders.
  • Kodex: Does not work. Same problems as Koder.