Callout styling for Minimal Theme

minimal-callout.css

.callout {
  background-color: var(--ui1);
  border: none;
  border-radius: 8px;
}

.callout-title {
  align-items: center;
  color: var(--text-muted);
  padding: 10px 12px;
}

.callout-fold {
  display: flex;
  align-items: center;
}

.callout-title-inner {
  font-variant: var(--h6-variant);
  letter-spacing: 0.02em;
  font-size: var(--h6);
  color: var(--h6-color);
  font-weight: var(--h6-weight);
  font-style: var(--h6-style);
}

.callout-content {
  margin-top: -1em;
}

.callout-title {
  background-color: unset;
}

.callout-icon {
  color: var(--text-muted);
}

.callout[data-callout="meta"] {
  --callout-icon: list;
}

.theme-dark .callout :not(pre) > code[class*="language-"],
.theme-dark .callout pre[class*="language-"],
.theme-light .callout :not(pre) > code[class*="language-"],
.theme-light .callout pre[class*="language-"] {
  background-color: transparent;
}

/* TODO callout */
.mod-root .workspace-leaf-content[data-type="markdown"] .callout .nav-header {
  border: none;
}

/* HACK: hide the edit button in Live Preview for callouts */
.markdown-source-view.mod-cm6 .cm-callout .edit-block-button {
  display: none;
}