CSS snippet providing Obsidian callout styling options.

Starred Gists，GitHub Gist，即时分享代码、笔记与代码片段。关注

Callout Styles

/* Callout helpers for Obsidian
   Metadata tokens are space-separated: "[!lucide-cannabis|custom-icon green no-bg float-right-small wide]". */

/* Custom icons, inspired by a snippet shared by rushi ◭ on Discord */

.callout[data-callout-metadata~="custom-icon"] {
  --callout-color: var(--color-purple);
  --callout-icon: attr(data-callout);
}

/* GPLv3 license
  Callout Styles
  Author: ElsaTam (Kapirklaa in Discord) */

.callout[data-callout-metadata~="gray"], .callout[data-callout-metadata~="grey"] {
  --callout-color: rgb(var(--color-gray-rgb, 128, 128, 128));
}

.callout[data-callout-metadata~="brown"] {
  --callout-color: rgb(var(--color-brown-rgb, 145, 105, 75));
}

.callout[data-callout-metadata~="red"] {
  --callout-color: var(--color-red);
}

.callout[data-callout-metadata~="orange"] {
  --callout-color: var(--color-orange);
}

.callout[data-callout-metadata~="yellow"] {
  --callout-color: var(--color-yellow);
}

.callout[data-callout-metadata~="green"] {
  --callout-color: var(--color-green);
}

.callout[data-callout-metadata~="cyan"] {
  --callout-color: var(--color-cyan);
}

.callout[data-callout-metadata~="blue"] {
  --callout-color: var(--color-blue);
}

.callout[data-callout-metadata~="purple"] {
  --callout-color: var(--color-purple);
}

.callout[data-callout-metadata~="pink"] {
  --callout-color: var(--color-pink);
}

.callout[data-callout-metadata~="accent"] {
  --callout-color: var(--color-accent);
}

.callout[data-callout-metadata~="white"] {
  --callout-color: #fff;
}

.callout[data-callout-metadata~="black"] {
  --callout-color: #000;
}

.callout[data-callout-metadata~="no-bg"], .callout[data-callout-metadata~="no-bg"] > .callout-content, .callout[data-callout-metadata~="no-bg"] > .callout-title,
.callout[data-callout-metadata~="no-background"],
.callout[data-callout-metadata~="no-background"] > .callout-content,
.callout[data-callout-metadata~="no-background"] > .callout-title {
  background: none;
  box-shadow: none;
}

.callout[data-callout-metadata~="black-and-white"] img,
.callout[data-callout-metadata~="b-w"] img {
  filter: grayscale(1);
}

.callout[data-callout-metadata~="no-icon"] > .callout-title > .callout-icon {
  display: none;
}

.callout[data-callout-metadata~="no-title"] > .callout-title {
  display: none;
}

.callout[data-callout-metadata~="no-title"] > .callout-content {
  border: none;
}

.callout[data-callout-metadata~="blank"] {
  --callout-padding: 0;
  --callout-content-padding: 0;

  margin: 0;
}

.callout[data-callout-metadata~="blank"], .callout[data-callout-metadata~="blank"] > .callout-content {
  border: none;
  background: none;
  box-shadow: none;
}

.callout[data-callout-metadata~="blank"] > .callout-title {
  display: none;
}

.markdown-preview-view .callout[data-callout-metadata~="wide"] {
  position: relative;

  --w: calc(0.95 * (100cqw + 2 * var(--file-margins, 0px)));

  width: var(--w);
  left: calc(50% - var(--w) * 0.5);
}

.markdown-preview-view .callout[data-callout-metadata~="wide"] .callout-title {
  justify-content: center;
}

/* ---------- floating callouts ---------- */
/* Shared float behavior: Reading-view aliases from ElsaTam, plus MCL from efemkay.*/

body {
  --float-small-width: 300px;
  --float-medium-width: 400px;
  --float-large-width: 600px;
  --float-left-margin: 0 12px 0 0;
  --float-right-margin: 0 0 0 12px;
  --float-top-margin: 0em;
}

@media (width >= 500px) {
  .markdown-source-view .cm-embed-block.cm-callout:has(> div.markdown-rendered > [data-callout-metadata*="float-left"]),
  .markdown-source-view .cm-embed-block.cm-callout:has(> div.markdown-rendered > [data-callout-metadata*="float-right"]) {
    display: inline;
    z-index: 30;
  }

  .markdown-source-view .cm-embed-block.cm-callout:has(> div.markdown-rendered > [data-callout-metadata*="float-left"]) > div > .callout {
    float: left;
    z-index: 30;
  }

  .markdown-source-view .cm-embed-block.cm-callout:has(> div.markdown-rendered > [data-callout-metadata*="float-right"]) > div > .callout {
    float: right;
    z-index: 30;
  }

  .markdown-source-view .cm-embed-block.cm-callout:has(> div.markdown-rendered > :is([data-callout-metadata*="float-left"], [data-callout-metadata*="float-right"])) > .edit-block-button {
    display: none;
  }

  .markdown-reading-view div[data-callout-metadata*="left"].callout:not(.markdown-preview-view [data-callout-metadata~="left"], .markdown-preview-view [data-callout-metadata~="float-left"]) {
    float: left;
  }

  .markdown-reading-view div[data-callout-metadata*="right"].callout:not(.markdown-preview-view [data-callout-metadata~="right"], .markdown-preview-view [data-callout-metadata~="float-right"]) {
    float: right;
  }

  .markdown-source-view.mod-cm6 .callout:is([data-callout-metadata*="left"], [data-callout-metadata*="right"]) {
    margin-top: calc(1em * var(--line-height-normal) + var(--float-top-margin));
  }

  .markdown-source-view.mod-cm6 .callout[data-callout-metadata*="left"],
  .markdown-reading-view .callout[data-callout-metadata*="left"] {
    margin-inline: var(--float-left-margin);
  }

  .markdown-source-view.mod-cm6 .callout[data-callout-metadata*="right"],
  .markdown-reading-view .callout[data-callout-metadata*="right"] {
    margin-inline: var(--float-right-margin);
  }

  .callout:is([data-callout-metadata*="left"], [data-callout-metadata*="right"]) .callout-content > :is(p:first-child, ul:first-child, ol:first-child) {
    margin-top: 0;
  }

  [data-callout-metadata*="float-right"].cm-embed-block.cm-callout {
    width: auto;
  }
}

[data-callout-metadata*="-small"].callout {
  width: var(--float-small-width);
}

[data-callout-metadata*="-medium"].callout {
  width: var(--float-medium-width);
}

[data-callout-metadata*="-large"].callout {
  width: var(--float-large-width);
}

.embedded-backlinks {
  clear: both;
}

/* ---------- MCL callout layouts ---------- */

/* [!multi-column] adapted from MCL Multi Column by efemkay. */

body {
  --multi-column-min-width: 200px;
  --multi-column-gap: 1em;
  --multi-column-margin: 0;
}

/* Multi-column containers accept nested callouts, quote blocks, lists, and paragraphs. */

div[data-callout="multi-column"].callout {
  --callout-blend-mode: normal;
  --columns: unset;

  display: flex;
  flex-wrap: wrap;
  gap: var(--multi-column-gap);
  clear: both;
  margin: 0;
  padding: 0;
  border: 0;
  background: unset;
  box-shadow: unset;
}

div[data-callout="multi-column"].callout > .callout-title {
  display: none;
}

div[data-callout="multi-column"].callout > .callout-content {
  display: contents;
  margin-top: unset;
}

div[data-callout="multi-column"].callout > .callout-content > :is(div, ul, blockquote, p) {
  flex: 1 1 var(--multi-column-min-width);
  min-width: 0;
  margin: 0;
}

div[data-callout="multi-column"].callout .callout:not([data-callout="multi-column"]) {
  display: flex;
  flex-direction: column;
}

div[data-callout="multi-column"].callout:not(.is-collapsed) .callout {
  margin-inline: var(--multi-column-margin);
  margin-block: var(--multi-column-margin);
}

div[data-callout="multi-column"].callout .callout .callout-content {
  flex-grow: 1;
}

Options

Option Function
custom-icon Uses the callout type as its icon name; defaults to purple.
red, orange, yellow, green, cyan, blue, purple, pink Uses that color from the active theme.
accent Uses your current accent color.
gray, grey Equivalent gray options; uses the theme's gray RGB value or a fallback.
brown Uses the theme's brown RGB value or a fallback.
white, black Literal white or black; check contrast when changing light/dark mode.
no-bg, no-background Removes background and shadow, retaining title, borders and spacing.
no-icon Hides the title icon only.
no-title Hides the entire title row, including its fold control; removes the content border.
blank Hides the title and clears surfaces, borders, margin and padding variables.
black-and-white, b-w Makes images inside the callout grayscale, including nested images.
wide Makes a wider, centered callout in Reading view; depends on the theme's container layout.
left, float-left Floats left without assigning a fixed width.
right, float-right Floats right without assigning a fixed width.
float-left-small, float-right-small Floats at 300px, capped to available width.
float-left-medium, float-right-medium Floats at 400px, capped to available width.
float-left-large, float-right-large Floats at 600px, capped to available width.
multi-column Arranges callouts into a grid layout.

Demo

The greenhouse was unusually quiet that morning, except for the soft hum of a fan near the eastern window. A small handwritten label read, “Do not overwater,” although nobody remembered writing it.

[!cannabis|custom-icon green] Botanical Situation
The specimen appears healthy, green, and considerably more confident than anyone expected.

By early afternoon, the sunlight had shifted across the room and reached the far shelf. For approximately twenty minutes, every leaf looked dramatically more important than it actually was.

The watering can remained nearby. No action was taken.

[!multi-column]
[!highlighter|custom-icon] Working Theory
The plants are probably not conspiring against us.
[!search|custom-icon no-bg blue] Latest Findings Evidence remains inconclusive.

Further investigation revealed that one plant had grown slightly taller, the ceramic pot was probably too small, and nobody knew where the tiny shovel had gone.

Someone eventually found it underneath a bag of potting soil.

[!sun|custom-icon yellow float-right-small] Field Note
The eastern shelf receives the best afternoon light.

The rest of the afternoon passed without incident. A second inspection was proposed, briefly discussed, and then forgotten.

After extensive observation and several cups of coffee, the committee determined that the plant was, in fact, still a plant.

[!leaf|custom-icon pink wide] Final Observation
The plant remains suspiciously leafy.
添加评论
点赞收藏
点踩分享查看原文
评论
?
参与讨论