Obsidian: Callout Customizations

I wasn’t happy with the default styling of Obsidian’s callouts, so I hacked together my own.

CSS snippet below:

/* Defaults
:root {
  --callout-default: var(--color-blue-rgb);
  --callout-note: var(--color-blue-rgb);
 
  --callout-abstract: var(--color-cyan-rgb);
  --callout-summary: var(--color-cyan-rgb);
  --callout-tldr: var(--color-cyan-rgb);
 
  --callout-info: var(--color-blue-rgb);
 
  --callout-todo: var(--color-blue-rgb);
 
  --callout-tip: var(--color-cyan-rgb);
  --callout-hint: var(--color-cyan-rgb);
  --callout-important: var(--color-cyan-rgb);
 
  --callout-success: var(--color-green-rgb);
  --callout-check: var(--color-green-rgb);
  --callout-done: var(--color-green-rgb);
 
  --callout-question: var(--color-orange-rgb);
  --callout-help: var(--color-orange-rgb);
  --callout-faq: var(--color-orange-rgb);
 
  --callout-warning: var(--color-orange-rgb);
  --callout-caution: var(--color-orange-rgb);
  --callout-attention: var(--color-orange-rgb);
 
  --callout-failure: var(--color-red-rgb);
  --callout-fail: var(--color-red-rgb);
  --callout-missing: var(--color-red-rgb);
 
  --callout-danger: var(--color-red-rgb);
  --callout-error: var(--color-red-rgb);
 
  --callout-bug: var(--color-red-rgb);
 
  --callout-example: var(--color-purple-rgb);
 
  --callout-quote: 158, 158, 158;
  --callout-cite: 158, 158, 158;
}
*/
 
.callout {
  border: 1px solid rgba(var(--callout-color), 0.3);
  padding: 0;
}
 
.is-live-preview .callout {
  margin-bottom: 4px !important;
  margin-top: 4px !important;
}
 
.callout.is-collapsible:not(.is-collapsed) .callout-title {
  border-bottom: 1px solid rgba(var(--callout-color), 0.3);
}
 
.callout .callout-title {
  background-color: rgba(var(--callout-color), 0.1);
  padding: 0.6rem;
  line-height: 1.6;
}
 
.callout.is-collapsible .callout-title:hover {
  cursor: pointer;
}
 
.callout-content {
  padding: 0.6rem;
}
 
.callout.is-collapsed .callout-content {
  padding: 0 !important;
}
 
.callout-content > *:last-child {
  margin-bottom: 0 !important;
}
 
.callout-content > *:first-child {
  margin-top: 0 !important;
}
 
.callout .callout-title-inner,
.callout h1,
.callout h2,
.callout h3,
.callout h4,
.callout h5,
.callout h6
{
  color: rgb(var(--callout-color));
}

This is a Default

Hello, default

This is an Abstract

Hello, abstract

This is an Info

Hello, info

This is a Todo

Hello, todo

This is a Tip

Hello, tip

This is a Success

Hello, success

This is a Question

Hello, question

This is a Warning

Hello, warning

This is a Failure

Hello, failure

This is a Danger

Hello, danger

This is a Bug

Hello, bug

This is an Example

Hello, example

This is a Quote

Hello, quote