Clean callouts

[peeragetalkers]

Sharing my favorite callout style:

Light theme screenshot

It’s based on the sleek callouts from the AnuPpuccin theme. I made a few improvements:

1. Removed the dotted line under callout title for a cleaner look.
2. Made the title use small caps—for uniformity, and to avoid capitalizing only the first letter, which can result in wonky titles like Macos, Ai and Camelcase.
3. Non-foldable callouts (i.e. those without - or +) with no text body use normal font for title. This allows for super compact callouts
   • Inspired by: Callouts without Title.
4. Decreased the margin for a compact look.

I adore how the text body is ‘transparent’, ensuring readability—especially for longer, multi-paragraph callouts.

CSS snippet

Sleek_callouts.css (2.7 KB)

.callout:not(.is-collapsible) {
  padding: 0px;
}

.callout:not(.is-collapsible) .callout-title {
  background-color: rgba(var(--callout-color), 0.1);
  padding: var(--callout-title-padding);
  cursor: pointer;
}

.callout:not(.is-collapsible) .callout-title:not(:has(+ .callout-content)) .callout-title-inner {
  font-weight: normal;
}

.callout:not(.is-collapsible) {
  border-color: rgba(var(--callout-color), 0.4);
  border-width: 1px;
  border-radius: var(--callout-radius);
  background-color: rgba(var(--ctp-mantle), 0.4);
}

.callout .callout-content {
  padding: var(--callout-title-padding) var(--callout-title-padding) var(--callout-title-padding) calc(var(--callout-title-padding) * 1.5);
  border-top: 1px solid rgba(var(--callout-color), 0.4);
}

.callout .callout-fold {
  padding-right: 0px;
}

.callout .callout-title-inner {
  flex-grow: var(--anp-callout-fold-position, unset);
}

.callout {
  --callout-title-padding: var(--size-4-2);
}

.callout.is-collapsible {
  border-color: rgba(var(--callout-color), 0.4);
  border-width: 1px;
  border-radius: var(--callout-radius);
  background-color: rgba(var(--ctp-mantle), 0.4);
  --bold-weight: bolder;
  padding: 0;
}

.callout.is-collapsible .callout-fold {
  padding-right: 0px;
}

.callout.is-collapsible .callout-title-inner {
  flex-grow: var(--anp-callout-fold-position, unset);
}

.callout.is-collapsible.is-collapsed {
  padding: 0;
}

.callout.is-collapsible.is-collapsed .callout-title {
  background-color: rgba(var(--callout-color), 0.1);
  padding: var(--callout-title-padding);
  cursor: pointer;
}

.callout.is-collapsible.is-collapsed .callout-content {
  display: none;
}

.callout.is-collapsible:not(.is-collapsed) .callout-title {
  background-color: rgba(var(--callout-color), 0.1);
  padding: var(--callout-title-padding);
  border-color: rgba(var(--callout-color), 0.4);
  cursor: pointer;
}

.callout.is-collapsible:not(.is-collapsed) .callout-content:not(:empty) {
  padding: var(--callout-title-padding) var(--callout-title-padding) var(--callout-title-padding) calc(var(--callout-title-padding) * 1.5);
  border-top: 1px solid rgba(var(--callout-color), 0.4);
}

.callout .list-collapse-indicator {
  margin-left: -35px;
  padding-right: 3px;
}

/* Normal text appearance for non-foldable callouts without content */
.callout:not(.is-collapsible) .callout-title:not(:has(+ .callout-content)) .callout-title-inner {
  color: var(--text-normal);
    font-variant: normal;
    text-transform: none;
}

/* Callout titles are in lowercase small caps */
.callout .callout-title-inner {
    font-variant: small-caps;
    text-transform: lowercase;
}

/* Reduce margin above first line and below last line */
.callout-content > :first-child {
    margin-top: 0;
}

.callout-content > :last-child {
    margin-bottom: 0;
}

Enjoy!

[peeragetalkers]

I just made the connection: they look just like GitHub comments